بنية المحتوى

من أهم جوانب إمكانية الوصول الرقمي هيكل الصفحة. عند إنشاء موقع الويب أو التطبيق باستخدام العناصر الهيكلية بدلاً من ذلك الاعتماد على الأساليب وحدها، فإنك تقدم سياقًا مهمًا للأشخاص الذين يستخدمون التقنية (AT)، مثل قارئات الشاشة.

تعمل العناصر الهيكلية كمخطط تفصيلي للمحتوى على الشاشة، لكنها كما تعمل أيضًا كنقاط ارتساء للسماح بالتنقل بسهولة داخل المحتوى.

عند استخدام عناصر HTML الدلالية، يتم تمرير المعنى الكامن لكل عنصر إلى شجرة إمكانية الوصول التي تستخدمها التكنولوجيا المساعدة، مما يعطي معنى للمحتوى أكثر من العناصر غير الدلالية. قد تكون هناك حالات تحتاج فيها إلى إضافة سمات ARIA إضافية لإنشاء علاقات أو تحسين تجربة المستخدم الإجمالية، ولكن في معظم يمكن أن يكون أحد أكثر من 100 عنصر HTML المتاحة يجب أن تعمل بشكل جيد إلى حد ما من تلقاء نفسها.

بينما تركز هذه الوحدة على العناصر الهيكلية الأكثر استخدامًا على نطاق واسع إلى الوصول الرقمي، فهناك بالتأكيد عناصر العوامل البيئية التي يجب مراعاتها عند إنشاء هيكل في موقع الويب لديك أو التطبيق. تُعد هذه الأمثلة مقدمة للموضوع، وليست شاملة.

المعالم

يعتمد مستخدمو التكنولوجيا المساعدة على العناصر الهيكلية لمنحهم معلومات حول والتخطيط العام للصفحة. عند تقسيم مناطق كبيرة من المحتوى، يمكنك استخدام أدوار معالم ARIA أو عناصر معالم HTML الأحدث لإضافة السياق الهيكلي لصفحتك.

تضمن المعالم توفير المحتوى في مناطق تتيح التنقل فيها. وننصحك بوضع مَعلم واحد على الأقل في كل صفحة.

تقترح بعض المراجع الجمع بين معالم ARIA وHTML معًا لتوفير تغطية أفضل للتكنولوجيا المساعدة. على الرغم من أن هذا النوع من التكرار لا ينبغي تسبب في مشكلات للمستخدمين، اختبر الأنماط باستخدام قارئ الشاشة للتأكد. وعندما تكون في شك، من الأفضل استخدام HTML الأحدث فقط عناصر المعالم، مثل دعم المتصفح كبير جدًا قوية.

لنقارن بين عناصر معالم HTML التالية مرتبطًا أدوار معالم ARIA المقابلة.

والآن، دعونا نقارن أمثلة لهيكل المحتوى الذي يمكن الوصول إليه.

<div>
    <div>...</div>
</div>

<div>
    <p>Stamp collecting, also known as philately, is
    the study of postage stamps, stamped envelopes,
    postmarks, postcards, and other materials relating
    to postal delivery.</p>
</div>

<div>
<p>© 2022 - Stamps R Awesome</p>
</div>

<header>
    <nav>...</nav>
</header>
<main>
    <section aria-label="Introduction to stamp collecting">
    <p>Stamp collecting, also known as philately, is
    the study of postage stamps, stamped envelopes,
    postmarks, postcards, and other materials relating
    to postal delivery.</p>
    </section>
</main>
<footer>
<p>© 2022 - Stamps R Awesome</p>
</footer>

العناوين

عند التنفيذ بشكل صحيح، مستويات عناوين HTML تشكل مخططًا موجزًا لمحتوى الصفحة بشكل عام.

هناك ستة مستويات للعناوين يمكننا استخدامها. يتم استخدام مستوى العنوان الأول <h1> للحصول على أعلى وأهم المعلومات في الصفحة، ويتم الانتقال بشكل تدريجي إلى عنوان المستوى السادس <h6> للحصول على المعلومات الأدنى والأقل أهمية.

تسلسل مستويات العناوين مهم. من الناحية المثالية، لن تتخطى مستويات العناوين، مثل بدء قسم بـ <h1> ثم على الفور وبعدها بـ <h5>. بدلاً من ذلك، عليك التقدم إلى <h5> في. طلبك. إنّ الترتيب على مستوى العناوين مهم بشكل خاص لمستخدمي التكنولوجيا المتقدمة لأنّها إحدى الطرق الأساسية التي يستخدمونها للتنقل عبر المحتوى

لمساعدتك على الالتزام بالبنية الدلالية المناسبة وترتيب العناوين، يمكنك فصل أنماط CSS عن مستويات العناوين. يتيح لك ذلك المزيد من المرونة في أنماط العناوين مع الحفاظ على ترتيب مستوى العناوين من المهم ألا تستخدم الأنماط وحدها لإنشاء العناوين، حيث لا يتم رؤيتها من قبل التكنولوجيا المساعدة كعنوان.

عندما نُزيّف العناوين، لا يتم نقل البنية المناسبة إلى مستخدمي التقنية المساعدة.

العناوين مفيدة أيضًا للأشخاص الذين يعانون من نقص الإدراك والانتباه والاضطرابات. من المهم جعل محتوى العنوان ذا معنى لمساعدتهم لفهم ما هو الأكثر أهمية في الصفحة.

<div>
    <h3>Stamps</h3>
    <p>Stamp collecting, also known as philately, is the study of 
  postage stamps, stamped envelopes, postmarks, postcards, and 
  other materials relating to postal delivery.</p>
</div>

<div>
    <h3>How do I start a stamp collection?</h3>
  <h2>Equipment you will need</h2>
    <h4>...</h4>
  <h2>How to acquire stamps</h2>
    <h4>...</h4>
  <h2>Organizations you can join</h2>
    <h4>...</h4>
</div>

<header>
  <h1>Stamp collecting</h1>
</header>
<main>
    <section aria-label="Introduction to stamp collecting">
        <h2>What is stamp collecting?</h2>
        <p>Stamp collecting, also known as philately, is the study of 
    postage stamps, stamped envelopes, postmarks, postcards, and 
    other materials relating to postal delivery.</p>
    </section>

    <section aria-label="Start a stamp collection">
        <h2>How do I start a stamp collection?</h2>
    <h3>Required equiment</h3>
    <p>...</p>

    <h3>How to acquire stamps</h3>
    <p>...</p>

    <h3>Organizations you can join</h3>
        <p>...</p>
    </section>
</main>

القوائم

قوائم HTML هي طريقة لتجميع العناصر المشابهة دلاليًا لبعضها البعض وإعطائها متأصلة بمعنى، إلى حد كبير مثل قائمة متاجر البقالة أو قائمة المهام التي لا تنتهي استمر في التجاهل.

هناك ثلاثة أنواع من قوائم HTML:

• تم طلب <ol>
• <ul> بدون ترتيب
• الوصف <dl>

عنصر القائمة <li> يُستخدم لتمثيل عنصر في قائمة مرتبة أو غير مرتبة، بينما عبارة الوصف <dt> والتعريف يمكن لعناصر <dd> في قائمة الوصف.

عند برمجتها بشكل صحيح، يمكن لهذه العناصر إبلاغ مستخدمي التكنولوجيا المساعدة غير المبصرة عن الهيكل المرئي للقائمة. عندما تواجه التكنولوجيا المساعدة قائمة دلالية، فإنها يمكن أن يعرف المستخدم باسم القائمة وعدد العناصر الموجودة فيها. بصفتك مستخدمًا داخل القائمة، سيقرأ التقنية المساعدة كل عنصر من عناصر القائمة بصوت عالٍ ويخبر الرقم الموجود في القائمة - العنصر واحد من خمسة، العنصر اثنان من خمسة، وهكذا.

يساعد تجميع العناصر في قوائم أيضًا الأشخاص المبصرين الذين لديهم قدرات واضطرابات الانتباه وأولئك الذين يعانون من صعوبات في القراءة، كما أن محتوى القائمة المصممة عادةً لتتضمن المزيد من المسافات البيضاء المرئية والمحتوى في صميم الموضوع.

<div>
  <p>How do I start a stamp collection?</p>
  <p>Equipment you will need</p>
    <div>
      <p>Small tongs with rounded tips</p>
      <p>Stamp hinges</p>
      <p>Stockbook or albumn</p>
      <p>Magnifying glass</p>
      <p>Stamps</p>
    </div>
</div>

<div>
  <h1>How do I start a stamp collection?</h1>
  <h2>Equipment you will need</h2>
  <ol>
    <li>Small tongs with rounded tips</li>
    <li>Stamp hinges</li>
    <li>Stockbook or albumn</li>
    <li>Magnifying glass</li>
    <li>Stamps</li>
  </ol>
</div>

الجداول

في HTML، تُستخدم الجداول بشكل عام لتنظيم البيانات أو تخطيط الصفحة.

واعتمادًا على الغرض من الجدول، ستستخدم هيكلية دلالية مختلفة عناصر. يمكن أن تكون الجداول معقدة للغاية في هيكلها، ولكن عندما تلتزم القواعد الدلالية الأساسية، فيمكن الوصول إليها إلى حد ما دون الكثير من التدخل.

التنسيق

في بدايات شبكة الإنترنت، كانت جداول التخطيط هي عنصر HTML الأساسي يستخدم لبناء الهياكل المرئية. اليوم، نستخدم مزيجًا من الدلالات العناصر غير الدلالية مثل <div> والمعالم لإنشاء تصاميم.

بينما انتهت أيام إنشاء جداول التخطيط في الغالب، هناك أوقات تكون فيها جداول التخطيط مستخدمة، كما هو الحال في رسائل البريد الإلكتروني الغنية بصريًا والنشرات الإخبارية الإعلانات. في هذه الحالات، يجب ألا تستخدم الجداول المستخدمة فقط للتنسيق واستخدام العناصر الهيكلية التي تنقل العلاقات وتضيف السياق، مثل <th> أو <caption>

يجب أيضًا إخفاء جداول التنسيق عن مستخدمي AT من خلال ARIA. دور العرض التقديمي أو حالة aria-hidden.

<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>[Stamp Image 1]</th>
    <th>[Stamp Image 2]</th>
    <th>[Stamp Image 3]</th>
  </tr>
</table>

<table role="presentation">
  <tr>
    <td>[Stamp Image 1]</td>
    <td>[Stamp Image 2]</td>
    <td>[Stamp Image 3]</td>
  </tr>
</table>

البيانات

على عكس جدول التخطيط، الذي يجب أن يكون مخفيًا عن مستخدمي AT، جدول البيانات وجميع عناصره أن يتعرض له. يُعد هيكل جداول البيانات أمرًا بالغ الأهمية لنقل البيانات ومعلومات معقدة للمستخدمين.

عندما تتم هيكلة الجدول بشكل صحيح، تتشكل العلاقات بين العمود العناوين والصفوف والبيانات الموجودة في الجدول. عندما يتم تنظيمها بشكل غير صحيح، يُترك المستخدم لفك تشفير معنى وسياق المعلومات في المؤقت.

واعتمادًا على مدى تعقيد الجدول، فإن تكوين علاقات من خلال التعليمات البرمجية بطرق مختلفة. تتمثل الخطوة الأولى لتسهيل الوصول إلى الجدول لترميز خلايا العنوان باستخدام <th> وخلايا البيانات مع عناصر <td>.

بالنسبة إلى الجداول الأكثر تعقيدًا، قد تحتاج إلى استخدام عناصر جدول HTML إضافية. مثل <rowgroup>، <colgroup>, <caption>, أو scope إلى تنقل المعنى والعلاقات.

<table>
  <tr>
    <td>Animal</td>
    <td>Year</td>
    <td>Condition</td>
  </tr>
  <tr>
    <td>Bird</td>
    <td>1947</td>
    <td>Fair</td>
  </tr>
  <tr>
    <td>Lion</td>
    <td>1982</td>
    <td>Good</td>
  </tr>
  <tr>
    <td>Horse</td>
    <td>1978</td>
    <td>Mint</td>
  </tr>
</table>

<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>Animal</th>
    <th>Year</th>
    <th>Condition</th>
  </tr>
  <tr>
    <td>Bird</td>
    <td>1947</td>
    <td>Fair</td>
  </tr>
  <tr>
    <td>Lion</td>
    <td>1982</td>
    <td>Good</td>
  </tr>
  <tr>
    <td>Horse</td>
    <td>1978</td>
    <td>Mint</td>
  </tr>
</table>