إلى جانب البنية، هناك العديد من عناصر 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>
التحقق من فهمك
اختبر معلوماتك حول سهولة الوصول إلى المستندات.
موقعك عبارة عن كتاب مدرسي على الإنترنت متعدد اللغات، حيث يتم عرض لغات متعددة على صفحة واحدة. ما هي أفضل طريقة لإعلام التكنولوجيا المساعِدة بلغة النسخة؟
lang
أساسي للسمة <html>
، ولغات إضافية في أي عنصر يتضمّن محتوًى بلغة مختلفة.<html>
على سبيل المثال: <html lang="en,lt,pl,pt">