المستند

إلى جانب البنية، هناك العديد من عناصر HTML الداعمة التي يجب مراعاتها عند إنشاء وتصميم إمكانية الوصول الرقمي. خلال دورة التعلم المتعلقة بإمكانية الوصول، نتناول الكثير من العناصر.

تركز هذه الوحدة على عناصر محددة جدًا لا تتناسب تمامًا مع أي من الوحدات الأخرى ولكنها مفيدة للفهم.

عنوان الصفحة

يحدّد عنصر HTML <title> محتوى الصفحة أو الشاشة التي سيختبرها المستخدم. ويمكن العثور عليه في القسم <head> في مستند HTML ويعادل <h1> أو الموضوع الرئيسي للصفحة. يتم عرض محتوى العنوان في علامة تبويب المتصفّح ويساعد المستخدمين في معرفة الصفحة التي يزورونها، ولكنّه لا يظهر على الموقع الإلكتروني أو التطبيق نفسه.

في تطبيق الصفحة الواحدة (SPA)، يتم التعامل مع <title> بطريقة مختلفة قليلاً، لأنّ المستخدمين لا يتنقلون بين الصفحات كما هو الحال في المواقع الإلكترونية متعددة الصفحات. بالنسبة إلى SPA، يمكن إضافة قيمة السمة document.title يدويًا أو عن طريق حزمة مساعد، وذلك استنادًا إلى إطار عمل JavaScript. قد يتطلب الإعلان عن عناوين الصفحات المعدَّلة لمستخدم قارئ الشاشة بعض الإجراءات الإضافية.

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

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

الإجراءات غير المُوصى بها
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
الإجراءات التي يُنصح بها
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>

Language

لغة الصفحة

تضبط سمة لغة الصفحة (lang) اللغة التلقائية للصفحة بأكملها. تتم إضافة هذه السمة إلى العلامة <html>. يجب إضافة سمة لغة صالحة إلى كل صفحة لأنها ترسل إشارة إلى التقنية التي يجب استخدامها.

ونقترح استخدام رموز اللغات ISO المكوَّنة من حرفَين للحصول على تغطية أكبر للتقنية المساعدة، لأنّ العديد منها غير متوافق مع رموز اللغات الموسّعة.

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

الإجراءات غير المُوصى بها
<html>...</html>
الإجراءات التي يُنصح بها
<html lang="en">...</html>

يمكن ربط لغة واحدة فقط بسمة lang. ويعني ذلك أنّه يمكن ألّا تتضمّن السمة <html> سوى لغة واحدة، حتى لو كانت هناك عدة لغات على الصفحة. اضبط lang على اللغة الأساسية للصفحة.

الإجراءات غير المُوصى بها
<html lang="ar,en,fr,pt">...</html>
لا تتوفّر لغات متعددة.
الإجراءات التي يُنصح بها
<html lang="ar">...</html>
اضبط اللغة الأساسية للصفحة فقط. في هذه الحالة، اللغة هي العربية.

لغة القسم

يمكنك أيضًا استخدام سمة اللغة (lang) لمفاتيح تبديل اللغة في المحتوى نفسه. تنطبق القواعد الأساسية نفسها على سمة لغة ملء الصفحة، باستثناء أنّك تضيفها إلى العنصر المناسب في الصفحة بدلاً من إضافتها إلى العلامة <html>.

تذكَّر أنّ اللغة التي تضيفها إلى العنصر <html> تتدرج إلى كل العناصر المضمّنة، لذا احرص دائمًا على ضبط اللغة الأساسية لسمة lang ذات المستوى الأعلى في الصفحة أولاً.

بالنسبة إلى أي عناصر في الصفحة مكتوبة بلغة مختلفة، أضِف سمة lang إلى عنصر برنامج تضمينها المناسب. سيؤدي هذا إلى إلغاء إعداد لغة المستوى الأعلى إلى أن يتم إغلاق هذا العنصر.

الإجراءات غير المُوصى بها
<html lang="en">
  <body>...
    <div>
      <p>While traveling in Estonia this summer, I often asked,
        "Kas sa räägid inglise keelt?" when I met someone new.</p>
    </div>
  </body>
</html>
الإجراءات التي يُنصح بها
<html lang="en">
  <body>...
    <div>
      <p>While traveling in Estonia this summer, I often asked,
        <span lang="et">"Kas sa räägid inglise keelt?"</span>
        when I met someone new.</p>
    </div>
  </body>
</html>

iFrames

يُستخدم عنصر iframe (<iframe>) لاستضافة صفحة HTML أخرى أو محتوى لجهة خارجية داخل الصفحة. وهو يضع بشكل أساسي صفحة ويب أخرى ضمن الصفحة الرئيسية. ويُستخدم إطار iframe بشكل شائع للإعلانات والفيديوهات المضمّنة وتحليل بيانات الويب والمحتوى التفاعلي.

هناك جانبان يجب أخذهما في الاعتبار لتسهيل استخدام "<iframe>". أولاً، يجب أن تشتمل كل سمة <iframe> بمحتوى مميّز على عنصر عنوان داخل العلامة الرئيسية. يوفّر هذا العنوان لمستخدمي التكنولوجيا المساعدة مزيدًا من المعلومات عن المحتوى في <iframe>.

ثانيًا، من بين أفضل الممارسات ضبط الانتقال على "تلقائي" أو "نعم" ضمن إعدادات العلامة <iframe>. يسمح هذا الإجراء للمستخدمين الذين يعانون من ضعف في النظر بالتمرير إلى محتوى داخل <iframe> قد لا يتمكّن من رؤيته. من المفترَض أن تكون الحاوية <iframe> مرنة أيضًا من حيث ارتفاعها وعرضها.

الإجراءات غير المُوصى بها
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
الإجراءات التي يُنصح بها
<iframe title="Google Pixel - Lizzo in Real Tone"
  src="https://www.youtube.com/embed/3obixhGZ5ds"
  scrolling="auto">
</iframe>

التحقّق من استيعابك

اختبر معلوماتك حول إمكانية الوصول إلى المستندات.

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

لا داعي للقلق بهذا الشأن، إذ بإمكان تقنية المساعدة الآلية قراءة كل لغة تلقائيًا.
على الرغم من أن بعض التقنيات المساعدة قد تمتلك مهارات اكتشاف اللغة، لا يمكنك ضمان أنّ التقنية المساعدة ستخمن بشكلٍ صحيح.
تضمين كل اللغات في العنصر <html> مثلاً: <html lang="en,lt,pl,pt">
يمكن ربط لغة واحدة فقط بالسمة lang.
يمكنك ضبط السمة lang الأساسية للسمة <html> ولغات إضافية في أي عنصر يتضمّن محتوى بلغة مختلفة.
ستعتمد "منهجية المساعدة" بشكل أساسي على سمة اللغة <html> لقراءة المستند. إذا كان لديك نص متعدِّد اللغات، احرص على إضافة السمة lang إلى العنصر المقابل (مثل قسم أو فقرة) باستخدام رمز ISO الصحيح المكوّن من حرفَين.