مدونة نافذة التقنية كل ما يحتاجه المستخدم
مقدمة:
في عصرنا الحالي الذي يعتمد بشكل كبير على التكنولوجيا والويب، أصبحت إمكانية الوصول Accessibility أمرًا حيويًا وضروريًا؛ وذلك لضمان أن المحتوى الرقمي يمكن الوصول إليه واستخدامه بكفاءة من قبل جميع المستخدمين، بغض النظر عن قدراتهم البدنية أو الحسية أو التقنية.
إنَّ إمكانية الوصول تعزز تجربة المستخدم وتعمل على تحقيق المساواة في الوصول إلى المعلومات والخدمات على الإنترنت.
في هذا المقال، سنستكشف مجموعة من العناصر والممارسات التي يمكننا تطبيقها لتحسين إمكانية الوصول مع المواقع التي نقوم بتصميمها. باستخدام HTML وسنركز بشكل خاص على إمكانية الوصول من وجهت نظر قارئ الشاشة (Screen reader).
سنناقش في البداية أهمية تحسين إمكانية الوصول وتأثيرها على المستخدمين. ثم سنتعرف على بعض الأساليب والتقنيات المستخدمة لتحقيق إمكانية الوصول، مثل استخدام العناصر الدلالية وتقسيم الصفحة باستخدام Landmarks والتعامل المناسب مع الصور والنماذج وغيرها من العناصر الرئيسية في المواقع.
وفي النهاية، سنلقي نظرة على بعض النصائح العامة لتحقيق تجربة ممتازة مع امكانية الوصول.
دعنا نستعرض هذه العناصر والتقنيات بشكل مفصل ونتعلم كيف يمكننا تطبيقها بشكل صحيح وفعال. من خلال اتباع الممارسات الموصى بها.
ما هي إمكانية الوصول (Accessibility)؟
يوجد ما يقرب من 8 مليارات شخص في العالم. وفقا لمنظمة الصحة العالمية (WHO) هناك حوالي أكثر من مليار منهم لديهم إعاقات مختلفة، أي حوالي 15 % من سكان العالم.
كما يعاني جميع الأشخاص لأسباب عديدة مختلفة من درجات متفاوتة من الإعاقات السمعية والمعرفية والجسدية والكلامية والبصرية.
لذا يأتي مفهوم إمكانية الوصول ليعبر عن ضمان أن يكون المحتوى الرقمي والتطبيقات والمواقع الإلكترونية متاحة وقابلة للاستخدام بنفس القدر من الفعالية والفهم لجميع المستخدمين، بغض النظر عن قدراتهم البدنية أو الحسية أو المعرفية.
إنَّ مفهوم إمكانية الوصول يشمل جميع الأشخاص بمختلف الإعاقات، مثل العمى وضعف البصر، والصمم وضعف السمع، والإعاقة الحركية، وصعوبات التعلم وغيرها.
تحقيق إمكانية الوصول يعني تصميم وتطوير المواقع والتطبيقات بطريقة تتيح الوصول السهل والفعال لجميع المستخدمين. يتضمن ذلك استخدام تقنيات وأدوات مثل HTML، وCSS، وJavaScript بشكل صحيح ومنهجي، وتوفير ميزات إضافية مثل مفاتيح الاختصار، وتوجيهات الصوت، وتعليمات الاستخدام، وغيرها من الوظائف التي تساعد في تسهيل التفاعل والتنقل داخل المحتوى.
تحقيق إمكانية الوصول لا يعود مجرد واجب أخلاقي؛ فالوصول للمعلومات حق من حقوق الانسان.
فبالاهتمام بإمكانية الوصول، يمكن للمستخدمين ذوي الإعاقات الاستفادة الكاملة من المحتوى الرقمي والمشاركة في العالم الرقمي بكفاءة وثقة.
ما هو قارء الشاشة (Screen reader)؟
من الصعب التحدث عن إمكانية الوصول دون التحدث عن برامج قارئات الشاشة.
قارئات الشاشة هي أدوات أساسية لتحقيق إمكانية الوصول للأشخاص ذوي الإعاقة البصرية في عالم التكنولوجيا.
تعمل قارئات الشاشة على تحويل المحتوى الرقمي إلى صوت قابل للفهم، مما يسمح للمستخدمين بسماع وفهم المحتوى بدلاً من الاعتماد على الرؤية.
تعتبر قارئات الشاشة حلاً مهماً للتواصل والوصول إلى المعلومات والخدمات الرقمية؛ فهي تساعد الأشخاص ذوي الإعاقة البصرية على تصفح الإنترنت، وقراءة المقالات والكتب الإلكترونية، والتواصل عبر البريد الإلكتروني، واستخدام التطبيقات المختلفة، وغيرها من الأنشطة الحديثة على الويب.
لذا، يعد التركيز على تحسين إمكانية الوصول لقارئات الشاشة أمرًا حيويًا للمطورين ومصممي المواقع والتطبيقات. من خلال تبني مبادئ وتقنيات تصميم الويب القابلة للوصول.
فإن إدراك أهمية قارئات الشاشة والعمل على تحسين إمكانية الوصول لها يسهم في بناء مجتمع رقمي أكثر شمولًا وتكافؤًا.
كيف نحسن إمكانية الوصول (Accessibility):
هناك طرق وأساليب كثيرة لتحسين إمكانية الوصول، ولكن تختلف باختلاف التطبيق محل التطوير، سواء كان ذلك تطبيق سطح المكتب، تطبيق أندرويد أو موقع ويب. ومع ذلك، سنركز في هذه المقالة على مجال الويب فقط.
فهناك بعض الأشياؤ التي يجب وضعها في الاعتبار عند تصميمنا موقع باستخدام HTML، تعد أهمها:
تحديد لغة المحتوى:
لم يُعد تحديد لغة المحتوى هاما لمحركات البحث فحسب، بل أيضا لقارئات الشاشة.
عند تحديد لغة المحتوى يدرك قارئ الشاشة أن هذا المحتوى يجب أن يُقرأ باللغة المحددة.
يتم تحديد لغة المحتوى سواء من خلال تحديد لغة الصفحة بأكملىها، أو تحديد لغة محتوى بعينه إذا كان لغته تختلف عن لغة الصفحة.
يتم ذلك من خلال السمة ‘lang’ (attribute)
يتم تحديد لغة المحتوى للصفحة بأكملها من خلال كتابة السمة ‘lang’ (attribute) داخل وسم <html>.
مثال:
<!DOCTYPE html>
<html lang="en">
</html>
في بعض الأحيان تكون أجزاء من المحتوى الخاص بك بلغة أخرى. لجعل برامج قراءة الشاشة تغير لغتها في منتصف الصفحة، نستخدم نفس سمة ‘lang’ داخل وسوم هذه الأجزاء، على سبيل المثال:
<a href="https://ar.wikipedia.org/wiki/%D8%A5%D8%AA%D8%A7%D8%AD%D8%A9" lang="ar">إتاحة</a>
في هذه الحالة، يفهم قارئ الشاشة أن محتوى الصفحة باللغة الإنجليزية باستثناء هذا الرابط، والذي يأخذ تسمية باللغة العربية.
استخدام العناصر الدلالية (Semantic Elements):
تُعني استخدام العناصر الدلالية (Semantic Elements) أن يتم استخدام عناصر HTML للشيء الذي وُجدت من أجله.
أو بعبارة أخرى، استخدام عناصر HTML الصحيحة للغرض الصحيح قدر الإمكان.
العناصر الدلالية هي عناصر لها معنى؛ حيث تحتوي في تكويناتها على سمات وخصائص من شأنها تجعل من السهل الوصول والتعامل معها من قبل قارئات الشاشة.
إذا كنت بحاجة إلى زر ، فاستخدم عنصر <button> وليس عنصر <div>.
فالأول يستطيع قارئ الشاشة التعرف عليه والوصول إليه، فضلا عن أمكانية الذهاب إليه من خلال لوحة المفاتيح (keybord).
أما بالنسبة <div> و<span>، فهم لا يخبران أي شيئًا عن محتوهما.
ملحوظة: المقصود بعدم استخدام <div> هو عدم استخدامها لعمل عناصر بديلة للعناصر الأساسية وليس استخدامها كحاوية (container).
ومع ذلك، يجب الوضع في الاعتبار بعض الأمور؛ لتوظيف العناصر بأقصى قدر ممكن من إمكانية الوصول، وهو ما سنتطرق إليه فيما يلي:
تقسيم الصفحة باستخدام Landmarks:
تحتوي HTML على عدد من العناصر لتنظيم وتقسيم صفحة الويب إلى أجزاء.
على سبيل المثال: يتم وضع محتوى رأس الصفحة في <header>، ومحتوى الصفحة الأساسي في <main>.
يسمى كل جزء من هذه الأجزاء Landmarks.
تعمل هذه العناصر كمعالم أو مناطق خاصة في الصفحة يمكن لقارئات الشاشة والتقنيات المساعدة الأخرى التعرف عليها والتفاعل معها, فضلا عن الانتقال إليها باستخدام اختصارات مخصصة لهذه العناصر.
يوضح الجدول التالي هذه العناصر مع توضيح استخدام كلً منهم:
| الوسم | الوصف |
|---|---|
| <header> | يُستخدم لتحديد محتوى رأس الصفحة |
| <nav> | يُستخدم لتحديد قائمة التنقل في الصفحة |
| <main> | يُستخدم لتحديد المحتوى الرئيسي في الصفحة |
| <aside> | يُستخدم لتحديد المحتوى الجانبي (Site bar) في الصفحة |
| <article> | يُستخدم لتحديد مقالة في الصفحة |
| <section> | يُستخدم لتحديد قسم محدد من المحتوى في الصفحة |
| <footer> | يُستخدم لتحديد محتوى ذيل الصفحة |
ملحوظة: عند استخدام أي من هذه العناصر أكثر من مرة داخل نفس الصفحة يجب وضع تسمية (label)؛ وذلك من أجل إمكانية التفرقة بينهم.
يتم ذلك من خلال السمة ‘aria-label’.
مثال:
<aside aria-label="شارك المقالة على مواقع التواصل الاجتماعي.">
ملحوظة: سيتم التطرق لاحقا في هذه المقالة إلى سمات الaria.
التفرقة بين الزر (Button) والرابط (Link):
الأزرار والروابط هي أنواع محددة من العناصر التفاعلية.
كل واحد منهما يعمل بشكل مختلف مع التقنيات المساعدة.
يساعد الاستخدام الصحيح لكل من هما المستخدمين الذين لديهم تقنيات مساعدة على التفاعل معهم.
يجب استخدام عنصر <button> لأي تفاعل يؤدي إجراءً على الصفحة الحالية, كتغيير لغة الصفحة مثلا.
أما بالنسبة لعنصر الرابط, فيجب استخدام عنصر <a> لأي تفاعل ينتقل إلى صفحة أخرى, سواء كانت هذه الصفحة داخل نفس الموقع أو صفحة في موقع آخر.
كما يمكن استخدامه للإنتقال إلى مكان محدد في نفس الصفحة.
استخدام العناوين (headings):
لم يعد استخدام العناوين (headings) مهم لمحركات البحث لفهرسة بنية ومحتوى صفحات الويب الخاصة بك فحسب، بل يقوم جميع المستخدمين بفحص الصفحة وفهم بنيتها من خلال العناوين.
فيعد استخدام العناوين مهم لإظهار بنية الصفحة والعلاقات بين الأقسام المختلفة.
كما تستخدم قارئات الشاشة العناوين (headings) كأداة تنقل؛ حيث توفر اجراءات خاصة للتعامل والتنقل بين العناوين.
توفر HTML العناوين من <h1> ل <h6>، يجب استخدام عناوين <h1> للعناوين الرئيسية، متبوعة بالعناوين التابعة لها <h2>، ومن ثم <h3> للعناوين التابعة للعناوين الفرعية وهكذا.
انشاء الجداول بالطريقة الصحيحة:
تعد الجداول أحد الطرق المهمة لتلخيص المحتوى.
ومع ذلك، يجب إنشاءها بالطريقة السليمة حتى يكون قارئ الشاشة قادر على فهمها، ويستطيع تحديد العناوين والعواميد والصفوف وغيره من بنية الجدول بطريقة سليمة:
- يجب وضع رأس الجدول داخل <thead>.
- يجب استخدام <th> لتحديد خلايا العناوين.
- وضع محتوى الجدول داخل <tbody>.
- يجب استخدام <td> لتحديد خلايا صفوف المحتوى.
- وضع محتوى ذيل الجدول داخل <tfooter>.
- استخدام السمة ‘scope’ لتحديد نطاق الخلية، حيث يمكن أن تكون ‘col’ لخلايا العناوين و ‘row’ لخلايا المحتوى.
مثال:
<table>
<thead>
<tr>
<th scope="col">اسم قارئ الشاشة</th>
<th scope="col">نظام التشغيل</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">NVDA</td>
<td>Windows</td>
</tr>
<tr>
<td scope="row">JAWS</td>
<td>Windows</td>
</tr>
<tr>
<td scope="row">Talkback</td>
<td>Android</td>
</tr>
<tr>
<td scope="row">VoiceOver</td>
<td>IOS</td>
</tr>
</tbody>
</table>
الممارسات الجيدة في تصميم النماذج Forms:
يتم استخدام النماذج (forms) لتجميع مدخلات المستخدم.
تعد صفحة تسجيل الحسابات وتسجيل الدخول في أي موقع مثالا عن النماذج في HTML.
هناك بعض الممارسات الموصى بها بالنسبة للنماذج، والتي من شأنها أن تساعد في تحسين قابلية استخدام قارئات الشاشة وتجربة المستخدم العامة، وهذا ما سوف نتطرق له فيما يلي:
التسمية (Label):
التسميات المرئية هي نص بالقرب من عنصر تحكم النموذج الذي يصف المعلومات التي تنتمي إلى حقل نموذج معين أو مجموعة من الحقول.
تعتبر التسميات ضرورية لمستخدمي قارئات الشاشة والتقنيات المساعدة الأخرى؛ حيث ستؤدي التسميات المفقودة إلى جعل المستخدم غير قادر على تحديد ما يحتاجه الحقل من معلومات.
أو بعبارة أخرى، بدون تسمية سيجد المستخدم نفسه أمام حقل مجهول الهوية.
كما يوصى باستخدام السمة “for” في عنصر <label> لتساوي القيمة المعتمدة للسمة “id” في عنصر الإدخال المقابل.
هذا يعمل على ربط العنصرين معًا ويحسن إمكانية الوصول.
كما يمكن استخدام السمة “placeholder” لتوفير توجيه إضافي للمستخدمين بشأن نوع البيانات المتوقعة في حقل الإدخال، يتم عرض هذا النص في حقل الإدخال قبل إدخال أي بيانات.
مثال:
<form>
<label for='your_email'>اكتب بريدك الإلكتروني</label>
<input id='your_email' type='email' placeholder='[email protected]'>
<label for='your_password'>اكتب كلمة المرور</label>
<input id='your_password' type='password'>
<button type='submit'>تسجيل الدخول</button>
</form>
أما إذا اضطررت لأي سبب من الأسباب عدم كتابة تسمية (label) للعنصر، فيجب عليك كتابة السمة “aria-label” بديلاً عن التسمية، حيث توفر هذه السمة عنوانًا وتسميةً حصرية لقارئات الشاشة، ولم تكن مرئيةً مطلقًا.
مثال:
<input type='text' aria-label='اسم المستخدم'>
تسمية المجموعات (legend):
غالبًا ما يتطلب تجميع عناصر التحكم في النموذج، مثل مربعات التحديد(checkboxes) وأزرار الاختيار (radio buttons)، مستوى أعلى من التسمية العادية المقدمة من خلال العنصر <label>.
يتم تحقيق ذلك من خلال استخدام عنصري <fieldset> و <legend>.
يتم استخدام عنصر <fieldset> لتجميع وتنظيم مجموعة من عناصر التحكم ذات الصلة في النموذج. بينما يستخدم عنصر <legend> لتوفير تسمية عالية المستوى لمجموعة العناصر.
تظهر تسمية <legend> عادةً كعنوان للمجموعة وتعطي توجيهًا حول ماهية المجموعة.
مثال:
<fieldset>
<legend>تاريخ الميلاد</legend>
<label for="day">اليوم:</label>
<input type="day" id="day" name="day">
<label for="month">الشهر:</label>
<input type="month" id="month" name="month">
<label for="year">السنة:</label>
<input type="year" id="year" name="year">
</fieldset>
التعامل مع الحقول المطلوبة (Required fields):
غالبًا ما تحتوي تسميات النموذج على علامة “*” أو كلمة “required” للإشارة إلى أن الحقل مطلوب.
كلتا الطريقتين على ما يرام.
ومع ذلك، فمن المستحسن إضافة السمة “required” والسمة aria-required=”true” إلى عنصر التحكم؛ وذلك حتى يصبح قارئ الشاشة قادر على التعرف على الحقول المطلوبة.
مثال:
<label for="name">الاسم:</label>
<input type="text" id="name" name="name" required aria-required="true">
التعامل مع الأخطاء:
كلنا معرضون للوقوع في الخطأ، عندما نَقع في ذلك، نحتاج إلى فهم سبب فشلنا، لنكون قادرين على تصحيح أنفسنا.
يحتاج النموذج الذي يمكن الوصول إليه إلى رسائل خطأ يمكن إدراكها ومفهومة للأشخاص الذين يستخدمون التقنيات المساعدة.
هناك بعض السمات التي يجب أن تتوفر في رسايل الخطأ:
- مكتوبة كنص.
- بالقرب من العنصر الذي فشل.
- ذو معلومات تساعد المستخدم.
- مكتوبة بإيجاز وبلغة بسيطة.
- يجب أعطاء السمة “role” القيمة “alert”؛ حيث ستجعل قارئ الشاشة يقرأ محتوى رسالة الخطأ، على الرغم من عدم التركيز عليها.
- يجب ربط حقل الإدخال برسالة الخطأ، وذلك من خلال السمة “aria-describedby” اعتمادا على معرف الرسالة “ID”.
ملحوظة: يمكن إضافة إلى نص رسالة الخطأ أيقونة تعبر عن الخطأ، ولكن بمفردها ليس كافية.
مثال:
<label for="firstNameInput">اسمك الأول</label>
<input name="firstName" id="firstNameInput" type="text" pattern="[^.]*?" aria-describedby="firstName-length-error">
<p id="firstName-length-error" role="alert">يجب أن يحتوي اسمك الأول على حرفين على الأقل وألا يحتوي على أحرف غير عادية.</p>
الإكمال التلقائي (Autocomplete):
هل سبق لك أن جربت نموذج ويب ، وقام متصفحك بملء الحقول تلقائيًا بطريقة سحرية؟
هذا إما لأن المتصفح كان ذكيًا بالقدر الكافي الذي جعله يتوقع الإدخال من إدخالاتك السابقة، أو أن مصمم النموذج قد استخدم سمة الإكمال التلقائي بالطريقة الصحيحة.
يُعد الإكمال التلقائي مفيدا للجميع ولاسيما لمستخدمي قارئات الشاشة والتقنيات المساعدة الأخرى؛ فقد يكون ملء النموذج صعبًا ويحتاج إلى ملء معلومات كثيرة، وغالبًا ما تكون سمة الإكمال التلقائي بمثابة يد المساعدة.
يمكن استخدام الإكمال التلقائي على عناصر مثل: <input> و <textarea> و <select>, وذلك من خلال السمة “Autocomplete”.
تحتوي السمة على العديد من القيم الممكنة, على سبيل المثال وليس الحصر:
- “name”.
- “email”.
- “country-name”.
- “organization”.
- “street-address”.
كتابة القيمة المناسبة تجعل المتصفح يقوم بتصفية وفلترة المدخلات المقترحة إلى النوع المطلوب.
مثال
<input id="email" autocomplete="email" name="email" aria-required="true" placeholder="Email" required>
التعامل مع الصور:
يُعد أكبر تحدي أو عائق واجه مستخدمي قارئات الشاشة هو قراءة الصور؛ حيث تقف قارئات الشاشة عاجزة أمام قراءة الصور.
ونظرا للأهمية الكبيرة للصور في نقل المعلومات وتوفير التجارب المرئية، فكان من الضروري أن توجد طرق للتعامل مع الصور وفقا لأسس منهجية، أهمها:
الصور التي تحتوي على معلومات:
يجب على المحررين والمطورين والمصممين مراعاة مستخدمي قارئ الشاشة عند استخدام الصور؛ فيجب في حالة الصور التي تحمل معلومات هامة أو نصوص مهمة، توفير نص بديل (Alt Text) يوضح المحتوى الذي تحمله الصورة.
يتم استخدام السمة “alt” في عنصر الصورة <img> لتوفير هذا النص البديل.
يقرأ قارئ الشاشة هذا النص بدلاً من عرض الصورة نفسها، مما يمكن المستخدم من الوصول إلى المعلومات الموجودة في الصورة.
كما أن النص البديل يظهر بصريا في حالة فشل التحميل للصورة أو في حالة عدم دعم المتصفح لنوع الصورة.
بعض النصائح:
- يجب تجنب استخدام السمة title.
- يجب أن يكون النص البديل مختصرا، أقل من 250 حرفًا.
- يجب أن تنقل الغرض من الصورة، لا أن تصف الصورة.
- عند كتابة نص بديل ، ضع في اعتبارك التفاصيل التي يعتقد المؤلف أنها الأكثر أهمية.
- بشكل عام، يجب أن تتجنب مواقع الويب الصور النصية، من الأفضل استخدام الصور عندما يكون عرضًا مرئيًا معينًا ضروريًا ، مثل الشعار.
- في حالة استخدام صور نصية، فيجب أن يتطابق النص البديل مع النص الموجود في الصورة تمامًا.
- على الأقل استخدم قيمة فارغة للسمة “alt”، عند تجاهلها يقرأ قارئ الشاشة مسار الصورة، وهذا يعد مزعجا للغاية لمستخدمي قارئات الشاشة.
مثال:
<img src="profile-picture.jpg" alt="صورة ملف تعريف المستخدم">
الصور المزخرفة
الصور التي ليس لها محتوى وظيفي أو معلوماتي على الإطلاق هي صور زخرفية.
يمكن أن تتضمن هذه الصور أشكال ورموز بهدف تحسين المظهر فقط.
يجب إخفاء مثل هذه الصور عن قارئات الشاشة والتقنيات المساعدة.
يمكن إخفاء الصور الزخرفية عن برامج قراءة الشاشة بعدة طرق:
- استخدام السمة ‘aria-hidden=”true”‘:
- استخدام السمة ‘role=”presentation”‘.
- استخدام الصورة كصورة خلفية(background) باستخدام css.
- كما يمكن اعطاء قيمة فارغة للسمة “alt”.
مثال:
<img src="decorative-image.jpg" alt="" aria-hidden="true">
ملحوظة: في حالة استخدام العنصر <SVG> ، يجب أولا إعطاء السمة role القيمة “image”، ومن ثم يتم التعامل معها.
العناصر المخصصة
تشير العناصر المخصصة لعناصر تم استخدام تقنيات مثل javascript لتغيير سلوكها.
قد يكون العنصر عنصر يستخدم لوظيفة أخرى، أو هو عبار عن نص فقط.
مشكلة التخصيص بالنسبة لقارئات الشاشة والتقنيات المساعدة الأخرى أنهم يعجزون عن التعرف على وظيفة العنصر الجديدة.
لذا، لابد أن يتم تعديل سمات وخصائص العنصر لتتوافق مع الوظيفة الجديدة له.
ترجع اسباب استخدام عنصر مخصصإلى:
- قد لا يوجد عنصر HTML أصلي لما نحاول تحقيقه.
- قد يكون هناك قيود تقنية لاستخدام العنصر المناسب.
من الأمثلة على العناصر المخصصة هي استخدام العنصر المخصص <tabs>> لإنشاء نظام تبويب داخل صفحة الويب.
ومع ذلك، يحتاج العنصر المخصص إلى تحديد بعض السمات مثل “role” وال “aria” وال “TabIndex”؛ وذلك حتى يكون قابل للوصول مع وظيفته الجديدة.
ما هو الدور (Role)?
الrole هو سمة (attribute) في HTML تستخدم لتحديد دور (Role) العنصر في صفحة الويب.
يتم استخدام الـrole لإضافة معنى إضافي للعناصر وتعزيز الوصولية وتحسين تجربة المستخدم.
توفر السمة role مجموعة متنوعة من الأدوار التي يمكن للعناصر أن تقوم بها.
على سبيل المثال، يمكن تعيين دور “button” باستخدام السمة “role” لنص موجود داخل عنصر <div>، وبذلك يتعامل قارئ الشاشة مع هذا النص على أنه زر، مما يسهم في تحسين تجربة المستخدم ووصوليته للمحتوى.
وعليه، يجب إعطاء العناصر المخصصة قيمة للدور role بما يتوافق مع دوره ووظيفته الجديدة.
يوضح الجدول التالي أهم القيم التي تأخذها السمة “role”:
| القيمة (Value) | الوصف (Description) |
|---|---|
| alert | يشير إلى وجود رسالة تنبيه مهمة تحتاج إلى انتباه فوري. |
| alertdialog | يشير إلى وجود نافذة حوار تحتوي على رسالة تنبيه. |
| application | يشير إلى وجود تطبيق ويب أو جزء رئيسي من التطبيق. |
| article | يشير إلى وجود مقالة مستقلة أو جزء من صفحة ويب. |
| banner | يشير إلى وجود بانر أو رأس للصفحة أو جزء رئيسي. |
| button | يشير إلى وجود زر قابل للنقر. |
| cell | يشير إلى وجود خلية جدول. |
| checkbox | يشير إلى وجود مربع تحديد. |
| columnheader | يشير إلى وجود عنوان لعمود جدول. |
| combobox | يشير إلى وجود صندوق خيارات. |
| complementary | يشير إلى وجود محتوى إضافي يكمل المحتوى الأساسي. |
| contentinfo | يشير إلى وجود معلومات حول المحتوى الأساسي. |
| definition | يشير إلى وجود تعريف أو تعريفات. |
| dialog | يشير إلى وجود نافذة حوار أو مربع حوار. |
| directory | يشير إلى وجود دليل أو قائمة لروابط أو مصادر. |
| document | يشير إلى وجود مستند أو صفحة ويب. |
| feed | يشير إلى وجود مصدر خلاصة RSS أو Atom. |
| figure | يشير إلى وجود شكل أو رسم توضيحي. |
| form | يشير إلى وجود نموذج يحتوي على عناصر إدخال وزر إرسال. |
| grid | يشير إلى وجود شبكة أو جدول بيانات. |
| gridcell | يشير إلى وجود خلية في شبكة أو جدول بيانات. |
| group | يشير إلى وجود مجموعة من العناصر المرتبطة معًا. |
| heading | يشير إلى وجود عنوان لقسم أو فرع في الصفحة. |
| img | يشير إلى وجود صورة. |
| input | يشير إلى وجود عنصر إدخال. |
| link | يشير إلى وجود رابط. |
| list | يشير إلى وجود قائمة. |
| listbox | يشير إلى وجود قائمة عناصر قابلة للتحديد. |
| listitem | يشير إلى وجود عنصر في قائمة. |
| log | يشير إلى وجود سجل أو مجموعة من الإدخالات. |
| main | يشير إلى وجود المحتوى الرئيسي للصفحة. |
| marquee | يشير إلى وجود نص أو محتوى يتحرك بشكل متكرر. |
| math | يشير إلى وجود تعبير رياضي. |
| menu | يشير إلى وجود قائمة. |
| menubar | يشير إلى وجود شريط قوائم. |
| menuitem | يشير إلى وجود عنصر قائمة قابل للنقر. |
| menuitemcheckbox | يشير إلى وجود خانة اختيار في عنصر قائمة. |
| menuitemradio | يشير إلى وجود زر اختيار في عنصر قائمة. |
| navigation | يشير إلى وجود قائمة تنقل أو روابط توجيه. |
| none | لا يوجد دور محدد للعنصر. |
| note | يشير إلى وجود ملاحظة أو تنويه. |
| option | يشير إلى وجود خيار قابل للاختيار. |
| presentation | يشير إلى أن العنصر ليس له تأثير على ترتيب أو معنى المحتوى الأساسي. |
| progressbar | يشير إلى وجود شريط تقدم. |
| radio | يشير إلى وجود زر اختيار. |
| radiogroup | يشير إلى وجود مجموعة من أزرار الاختيار. |
| region | يشير إلى وجود منطقة أو قسم في الصفحة. |
| row | يشير إلى وجود صف في جدول. |
| rowgroup | يشير إلى وجود مجموعة من الصفوف في جدول. |
| rowheader | يشير إلى وجود عنوان لصف في جدول. |
| scrollbar | يشير إلى وجود شريط تمرير. |
| search | يشير إلى وجود حقل بحث. |
| searchbox | يشير إلى وجود حقل بحث داخل شريط التنقل. |
| separator | يشير إلى وجود فاصل أو خط تقسيم. |
| slider | يشير إلى وجود شريط تمرير أو مؤشر قابل للسحب. |
| spinbutton | يشير إلى وجود زر تصغير قيمة معينة. |
| status | يشير إلى وجود حالة أو معلومة حالية. |
| switch | يشير إلى وجود مفتاح تبديل. |
| tab | يشير إلى وجود علامة تبويب. |
| tablist | يشير إلى وجود قائمة تبويب. |
| tabpanel | يشير إلى وجود لوحة محتوى لعلامة التبويب. |
| textbox | يشير إلى وجود مربع نص قابل للتحرير. |
| timer | يشير إلى وجود مؤقت. |
| toolbar | يشير إلى وجود شريط أدوات. |
| tooltip | يشير إلى وجود تلميح أو نص توضيحي. |
| tree | يشير إلى وجود هيكل شجري. |
| treegrid | يشير إلى وجود شبكة بيانات بنمط شجري. |
| treeitem | يشير إلى وجود عنصر في هيكل شجري. |
ما هي ال aria
ARIA هي اختصار لـ Accessible Rich Internet Applications وتشير إلى مجموعة من السمات والخصائص التي يمكن إضافتها إلى عناصر HTML، وتطبيقات الويب (خاصة تلك المطورة باستخدام JavaScript) والتي تجعل محتوى الويب أكثر سهولة للأشخاص ذوي الإعاقة.
فهي تكمل سمات HTML بحيث يمكن تمرير التفاعلات والأدوات المستخدمة بشكل شائع في التطبيقات إلى التقنيات المساعدة عندما يتم استخدام عنصر مخصص لا يحتوي في تكوينه على هذه التفاعلات.
فعندما يتم استخدام عنصر مخصص في صفحة الويب ولا يحتوي على التفاعلات والسلوك المعتاد لعناصر HTML الأصلية، فإن ARIA تأتي لتعزيز قدرة التقنيات المساعدة على التفاعل مع هذه العناصر وفهمها بشكل صحيح.
على سبيل المثال، عند استخدام عنصر مخصص لتحقيق وظيفة مربع التحديد (Checkbox)، فلا تستطيع قارئات الشاشة والتقنيات المساعدة تحديد حالته إن كان محدد أم لا.
وهنا يأتي دور aria، حيث يتم استخدام سمات ARIA المناسبة مثل “aria-checked” لتحديد حالة المربع التحديد (محدد أم غير محدد) ونقل هذه المعلومات إلى قارئات الشاشة.
مثال:
<div role="checkbox" aria-checked="false">
<span>أوافق على اتفاقية الترخيص</span>
</div>
تحذير: يجب أن يلتزم المطورون باستخدام عنصر HTML الدلالي الصحيح على استخدام ARIA، إذا كان هذا العنصر موجودًا.
تحتوي العناصر الأصلية على إمكانية وصول مدمجة مع لوحة المفاتيح، ومحدد لها الأدوار والحالات بدقة.
في استطلاع WebAim لأكثر من مليون صفحة رئيسية، وجدوا أن الصفحات الرئيسية التي تحتوي على ARIA بلغ متوسطها 41% أخطاء مكتشفة بالمقارنة مع الصفاحات التي تستخدم عناصر HTML الأصلية.
ومع ذلك، يجب في حالة إختيار إنشاء عنصر مخصص اختيار الأدوار والسمات المناسبة لجعله قابل للوصول من قبل قارئات الشاشة والتقنيات المساعدة.
يوضح الجدول التالي أهم سيمات aria مع الوصف والقيم المتاحة لها:
| السمة | الوصف | القيم المتاحة |
|---|---|---|
| aria-atomic | تحدد ما إذا كان تحديث المحتوى يعتبر مستقلًا أم يؤثر على المحتوى الآخر في الصفحة. | true (صحيح) أو false (غير صحيح) |
| aria-autocomplete | يحدد طريقة إكمال النص المتوقعة وعرض الاقتراحات لحقل الإدخال. | inline (فوري) أو list (قائمة) أو both (الاثنين) أو none (لا شيء) |
| aria-checked | يحدد حالة عنصر تحكم مربع التحديد بين حالتي “محدد” و”غير محدد”. | true (محدد) أو false (غير محدد) أو mixed (مختلط) |
| aria-disabled | يشير إلى أن العنصر معطل ولا يمكن التفاعل معه. | true (معطل أو false (غير معطل) |
| aria-expanded | يشير إلى حالة عنصر التوسع/الطي لعنصر قابل للتوسع/الطي. | true (موسع) أو false (مطوي) |
| aria-haspopup | يشير إلى وجود عنصر فرعي قابل للتفعيل أو الظهور عند تفاعل المستخدم مع العنصر الأصلي. | true (يوجد) أو false (لا يوجد) |
| aria-hidden | يخفي العنصر عن قارئات الشاشة والتقنيات المساعدة الأخرى. | true (مخفي) أو false (مرئي) |
| aria-label | يوفر تسمية للعنصر. | سلسلة نصية (مثال: aria-label=”الاسم الأول”). |
| aria-labelledby | يشير إلى عناصر العنوان التي توفر تسمية للعنصر الحالي. | قيمة ID لعناصر العنوان المرتبطة (مثال: aria-labelledby=”title1″). |
| aria-level | يحدد المستوى التسلسلي للعنصر في هرم العناصر المرئية. | رقم صحيح (مثال: aria-level=”3″). |
| aria-live | يحدد كيفية تحديث المحتوى الديناميكي وإشعار المستخدم بالتغييرات. | off (لا يتم الإعلان) أو assertive (الإعلان عن التحديثات دون انتظار) أو polite (انتظار إنتهاء العملية الحالية لقارئ الشاشة.) |
| aria-relevant | يحدد نوع التغييرات التي يجب على التقنيات المساعدة الاهتمام بها وتحديثها عند حدوث تغيير في العنصر. | additions (إضافات) أو removals (إزالات) أو text (نص) أو all (الكل) أو additions text (إضافات نص) أو additions removals (إضافات إزالات) أو text removals (نص إزالات) أو additions text removals (إضافات نص إزالات) |
| aria-pressed | يحدد حالة عنصر تحكم الزر أو الزر التبديل بين حالتي “مضغوط” و”غير مضغوط”. | true (مضغوط) أو false (غير مضغوط) أو mixed (مختلط) |
| aria-autocomplete | يحدد طريقة إكمال النص المتوقعة وعرض الاقتراحات لحقل الإدخال. | inline (فوري) أو list (قائمة) أو both (الاثنين) أو none (لا شيء) |
| aria-busy | يشير إلى أن العنصر مشغول بالتحميل أو العملية ولا يمكن التفاعل معه حاليًا. | true (مشغول) أو false (غير مشغول) |
| aria-colcount | يحدد عدد الأعمدة في جدول أو منطقة الجدول المرتبطة. | رقم صحيح (مثال: aria-colcount=”4″). |
| aria-colindex | يحدد موضع العمود الحالي في جدول أو منطقة الجدول المرتبطة. | رقم صحيح (مثال: aria-colindex=”2″). |
| aria-colspan | يحدد عدد الأعمدة التي يشغلها عنصر الخلية في جدول أو منطقة الجدول المرتبطة. | رقم صحيح (مثال: aria-colspan=”2″). |
| aria-controls | يحدد عناصر التحكم المرتبطة بالعنصر الحالي (مثل القوائم المنسدلة أو العناصر المنبثقة). | قيمة ID لعناصر التحكم المرتبطة (مثال: aria-controls=”menu1″). |
| aria-current | يشير إلى الحالة الحالية أو الموضع الحالي للعنصر في مجموعة أو سلسلة من العناصر. | page (صفحة) أو step (خطوة) أو location (موقع) أو date (تاريخ) أو time (وقت) أو true (محدد) أو false (غير محدد) |
| aria-describedby | يوفر وصفًا للعنصر. | قيمة ID لعناصر الوصف المرتبطة (مثال: aria-describedby=”description1″). |
| aria-details | يحدد معلومات إضافية أو تفاصيل إضافية حول العنصر الحالي. | قيمة ID لعناصر التفاصيل المرتبطة (مثال: aria-details=”details1″). |
| aria-dropeffect | يحدد التأثير المرتبط بسحب العنصر وإفلاته على عنصر آخر. | none (لا شيء) أو copy (نسخ) أو move (تحريك) أو link (ربط) أو execute (تنفيذ) |
| aria-errormessage | يحدد رسالة الخطأ المتعلقة بالعنصر في حالة وجود أخطاء. | قيمة ID لعنصر الرسالة التي توضح الخطأ (مثال: aria-errormessage=”error1″). |
| aria-flowto | يحدد العناصر التي ينبغي أن يتم توجيه تركيز القارئ إليها بعد العنصر الحالي. | قيمة ID للعناصر المرتبطة (مثال: aria-flowto=”element2″). |
| aria-grabbed | يشير إلى ما إذا كان العنصر القابل للسحب قد تم سحبه أو لا. | true (تم السحب) أو false (لم يتم السحب) |
| aria-invalid | يشير إلى أن القيمة المدخلة في العنصر غير صالحة أو غير مكتملة أو غير مقبولة. | true (غير صالح) أو false (صالح) أو grammar (قواعد لغوية) أو spelling (إملائي) |
| aria-keyshortcuts | يوفر قائمة بالاختصارات الرئيسية المتاحة في العنصر الحالي. | سلسلة توضيحية (مثال: aria-keyshortcuts=”Ctrl+Shift+A”). |
| aria-modal | يشير إلى أن العنصر يعرض نافذة نموذجية (modal)، ويمنع المستخدم من التفاعل مع أجزاء أخرى من الواجهة حتى يتم إغلاق النافذة. | true (نموذجي) أو false (غير نموذجي) |
| aria-multiline | يشير إلى ما إذا كان النص المحتوى في العنصر متعدد الأسطر أم لا. | true (متعدد الأسطر) أو false (غير متعدد الأسطر) |
| aria-multiselectable | يشير إلى ما إذا كان بإمكان المستخدم تحديد أكثر من عنصر في مجموعة الاختيارات. | true (قابل للتحديد المتعدد) أو false (غير قابل للتحديد المتعدد) |
| aria-orientation | يحدد توجيه العنصر في واجهة المستخدم (عمودي أو أفقي). | horizontal (أفقي) أو vertical (عمودي) |
| aria-owns | يحدد العناصر التي يمتلكها العنصر الحالي (مثل العناصر المنبثقة أو العناصر الفرعية). | قيمة ID للعناصر المملوكة (مثال: aria-owns=”subelement1″). |
| aria-placeholder | يوفر نصًا توضيحيًا مؤقتًا يتم عرضه في حقل الإدخال قبل إدخال قيمة. | سلسلة توضيحية (مثال: aria-placeholder=”الرجاء إدخال الاسم”). |
| aria-posinset | يحدد الموضع الحالي للعنصر ضمن مجموعة أو سلسلة من العناصر ذات الصلة. | رقم صحيح (مثال: aria-posinset=”2″). |
| aria-readonly | يشير إلى أن العنصر لا يمكن تعديله أو تعديل قيمته. | true (قراءة فقط) أو false (قابل للتعديل) |
| aria-required | يشير إلى أن العنصر مطلوب لإكمال النموذج أو العملية. | true (مطلوب) أو false (غير مطلوب) |
| aria-roledescription | يوفر وصفًا لدور العنصر في الواجهة (على سبيل المثال، “زر” أو “قائمة منسدلة”). | سلسلة نصية (مثال: aria-roledescription=”زر تبديل”). |
| aria-rowcount | يحدد عدد الصفوف في جدول أو منطقة الجدول المرتبطة. | رقم صحيح (مثال: aria-rowcount=”4″). |
| aria-rowindex | يحدد موضع الصف الحالي في جدول أو منطقة الجدول المرتبطة. | رقم صحيح (مثال: aria-rowindex=”2″). |
| aria-rowspan | يحدد عدد الصفوف التي يشغلها العنصر في جدول أو منطقة الجدول المرتبطة. | رقم صحيح (مثال: aria-rowspan=”2″). |
| aria-selected | يشير إلى ما إذا تم اختيار العنصر أو لا في مجموعة الاختيارات المتعددة. | true (محدد) أو false (غير محدد) |
| aria-setsize | يحدد عدد العناصر في مجموعة أو سلسلة من العناصر ذات الصلة. | رقم صحيح (مثال: aria-setsize=”10″). |
| aria-sort | يحدد ترتيب العنصر في جدول أو منطقة الجدول المرتبطة. | none (لا شيء) أو ascending (تصاعدي) أو descending (تنازلي) أو other (آخر) |
| aria-valuemax | يحدد القيمة القصوى المسموح بها للعنصر القابل للتعديل. | رقم (مثال: aria-valuemax=”100″). |
| aria-valuemin | يحدد القيمة الدنيا المسموح بها للعنصر القابل للتعديل. | رقم (مثال: aria-valuemin=”0″). |
| aria-valuenow | يحدد القيمة الحالية للعنصر القابل للتعديل. | رقم (مثال: aria-valuenow=”50″). |
| aria-valuetext | يوفر نصًا توضيحيًا للقيمة الحالية للعنصر القابل للتعديل. | سلسلة توضيحية (مثال: aria-valuetext=”50%”). |
ملحوظة: سمات الaria تقوم بتمرير القيمة إلى قارئات الشاشة والتقنيات المساعدة ولن تكون مرئية مطلقا.
استخدام TabIndex:
تُعد لوحة المفاتيح أدة التحكم الأهم على الإطلاق لمستخدمي قارئات الشاشة، وخاصة مستخدمي أجهزة الكمبيوتر.
وقد يتم تخصيص عنصر في الأصل غير قابل للانتقال من خلال لوحة المفاتيح وتحديدا باستخدام زر Tab.
السمة “tabindex” في HTML تُستخدم لتحديد ترتيب التركيز (focus order) للعناصر قابلة للتفاعل على صفحة الويب عند استخدام لوحة المفاتيح.
تأخذ السمة “tabindex” قيمة رقمية لتحديد ترتيب التركيز للعنصر، حيث يتم تحديد العنصر ذو القيمة الأقل أولاً والعنصر ذو القيمة الأعلى في آخر الترتيب.
عند الضغط على زر Tab على لوحة المفاتيح، يتم التنقل بين العناصر وفقًا للترتيب المحدد.
قيمة السمة “tabindex” يمكن أن تكون عددًا صحيحًا إيجابيًا أو سالبًا، تحديد قيمة موجبة لـ “tabindex” يعني أن العنصر سيكون جزءًا من ترتيب تحديد العناصر وسيتم التنقل إليه عند الضغط على زر Tab، بينما تحديد قيمة سالبة لـ “tabindex” يعني أن العنصر سيكون قابلًا للتفاعل عن طريق البرمجة أو الأحداث فقط ولن يكون جزءًا من ترتيب تحديد العناصر.
مثال:
<div role="checkbox" tabindex="1" aria-checked="true">مربع تحديد 1</div>
<div role="checkbox" tabindex="2" aria-checked="false">مربع تحديد 2</div>
<div role="button" tabindex="3">زر</div>
روابط التخطي Skip Links:
يضطر مستخدمي قارئات الشاشة على هواتف المحمول المرور على جميع العناصر التي تسبق العنصر المراد الوصول إليه.
تعد إحدة الطرق الفعالة لتسريع الوصول للمحتوى والتنقل داخل الصفحة هي روابط التخطي (Skip Links).
رابط التخطي الأكثر شيوعًا هو العنصر التفاعلي الأول في الصفحة، والذي يأخذ المستخدم إلى المحتوى الرئيسي، والذي يوجد بعد عناصر مثل الشعار والبحث وقائمة التنقل.
من الممارسات المتبعة أن يكون مخفيًا حتى يتلقى التركيز، يتم ذلك باستخدام CSS.
أيضا يمكن عمل روابط تخطية أخرى للوصول إلى أقسام مهمة داخل الصفحة، أو رابط أسفل الصفحة يرجع المستخدم لبدايتها، الأمر يختلف حسب وضع الصفحة وحجمها.
يتم عمل روابط التخطي من خلال العنصر <a> وجعله ينتقل إلى معرف (ID) العنصر المراد الذهاب إليه.
على سبيل المثال، يمكن إعطاء العنصر <main> معرف “main-content”ومن ثم عمل رابط التخطي إلى المحتوى الأساسي للإنتقال له.
مثال:
<a href="#main-content" class="skip-link">انتقل إلى المحتوى الرئيسي</a>
الخاتمة
قد هدفنا في هذه المقالة تسليط الضوء على أهم الممارسات التي من شأنها سوف تخلق محتوى ويب قابل للوصول بالنسبة لجميع المستخدمين، بما فيهم مستخدمي قارئات الشاشة والتقنيات المساعدة.
ولما كان الوصول للمعلومات حق من حقوق الإنسان فكان من الضروري إيضاح ذلك، والتطرق إلى كيف ننشأ محتوى يستطيع الجميع الوصول إليه بغض النظر عن قدراتهم البدنية أو الحسية أو المعرفية.
فنحن بحاجة إلى التأكد من أن جميع المستخدمين يمكنهم الاستفادة من المعلومات والخدمات على الويب بنفس القدر، وأنه لا يوجد أي تمييز أو عراقيل تمنع الوصول.
وقد توصلنا إلى أن باتباع مبادئ التصميم القابل للوصول واستخدام التقنيات المناسبة، يمكننا ضمان أن الجميع يمكنه الوصول إلى المعلومات والمحتوى على الويب، وهو ما يجعلنا نساهم في بناء مجتمع رقمي شامل يضمن المساواة والفرص المتساوية للجميع.
وذلك من خلال: استخدام العناصر الدلالية المناسبة، وتوفير نصوص بديلة للصور، والتعامل بالشكل السليم مع العناصر المخصصة، فضلا عن إنشاء روابط تخطي والمزيد.
وبالرغم من ذلك، كل ما تم ذكره يعد جزء صغير في عالم كبير، لا يمكن لأحد تغطيته من خلال مقالة واحدة. لذلك، أدعو الجميع للنظر إلى المصادر المذكورة، بل والبحث عن مصادر أخرى.
المصادر
- W3C Accessibility Introduction
- W3Schools HTML Accessibility
- Chrome Developer Documentation – Using Landmarks
- W3Schools Accessibility Tutorial
- Mozilla Developer Network – HTML Accessibility
- Mozilla Developer Network – Advanced HTML Tables
- Yale University – Images and Accessibility
- University of Washington – Web Accessibility Checklist for Images
- W3C ARIA Roles Specification
- Mozilla Developer Network – ARIA Documentation
