بنية المحتوى

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

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

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

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

المَعالم

يعتمد مستخدمو التكنولوجيا المساعدة على العناصر الهيكلية لمنحهم معلومات حول التخطيط العام للصفحة. عند تقسيم مناطق كبيرة من المحتوى، يمكنك استخدام أدوار معالم 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 عن مستويات العناوين. يتيح لك هذا مزيدًا من المرونة في أنماط العناوين مع الحفاظ على الترتيب على مستوى العناوين. من المهم ألا تستخدم الأنماط بمفردها لإنشاء عناوين، لأن التكنولوجيا لا تنظر إليها AT كعنوان.

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

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

<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> في قائمة الوصف.

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

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

<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>s والمعالم لإنشاء تصميمات.

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