بالإضافة إلى البنية، هناك العديد من عناصر HTML الداعمة التي يجب أخذها في الاعتبار عند إنشاء المحتوى وتصميمه ليكون في متناول الجميع. في دورة "التعرّف على إمكانية الوصول"، نتناول الكثير من العناصر.
يركّز هذا الوحدة على عناصر محدّدة جدًا لا تتناسب تمامًا مع أي من الوحدات الأخرى، ولكن من المفيد فهمها.
عنوان الصفحة
يحدّد عنصر HTML <title>
محتوى الصفحة أو الشاشة التي سيراها المستخدم. يظهر هذا العنصر في الـ
<head> من
مستند HTML وهو يعادل الـ <h1> أو الموضوع الرئيسي للصفحة. يظهر محتوى العنوان في علامة تبويب المتصفح ويساعد المستخدمين في فهم الصفحة التي يزورونها، ولكن لا يظهر على الموقع الإلكتروني أو التطبيق نفسه.
في تطبيق صفحة واحدة (SPA)،
يتم التعامل مع <title> بطريقة مختلفة قليلاً، لأنّ المستخدمين لا ينتقلون
بين الصفحات كما يفعلون على المواقع الإلكترونية المتعددة الصفحات. بالنسبة إلى تطبيقات الصفحة الواحدة، يمكن إضافة قيمة السمة
document.title
يدويًا أو من خلال حزمة مساعِدة، وذلك حسب إطار عمل
JavaScript. قد يتطلب إعلام مستخدم قارئ الشاشة بعناوين الصفحات المعدّلة بعض العمل الإضافي.
عناوين الصفحات الوصفية مفيدة للمستخدمين و تحسين محركات البحث (SEO)، ولكن لا تفرط في استخدامها وأضِف الكثير من الكلمات الرئيسية. بما أنّ العنوان هو أول ما يتم الإعلان عنه عندما يزور مستخدم تكنولوجيا مساعِدة صفحة، يجب أن يكون دقيقًا وفريدًا ووصفيًا، ولكن أيضًا موجزًا.
عند كتابة عناوين الصفحات، من أفضل الممارسات أيضًا "تحميل" الصفحة الداخلية أو المحتوى المهم أولاً، ثم إضافة أي صفحات أو معلومات سابقة بعد ذلك. بهذه الطريقة، لن يضطر مستخدمو التكنولوجيا المساعِدة إلى الاستماع إلى المعلومات التي سمعوها من قبل.
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>
اللغة
لغة الصفحة
تضبط سمة لغة الصفحة (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>