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