بنية المحتوى

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

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

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

<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>.

يجب أيضًا إخفاء جداول التنسيق عن مستخدمي تكنولوجيات مساعدة باستخدام 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>