المستند

إلى جانب البنية، هناك العديد من عناصر 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>

إطارات iFrame

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

لإتاحة الوصول إلى <iframe>، يجب مراعاة بعض الجوانب. أولاً، يجب أن يشتمل كل عنصر <iframe> له محتوى مختلف على عنصر عنوان داخل العلامة الرئيسية. يوفّر هذا العنوان للمستخدمين AT مزيدًا من المعلومات عن المحتوى داخل <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 الصحيح المؤلّف من حرفَين.