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