عالم الويب وإمكانية الوصول (Accessibility)

مقدمة:

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

انشاء الجداول بالطريقة الصحيحة:

تعد الجداول أحد الطرق المهمة لتلخيص المحتوى.

ومع ذلك، يجب إنشاءها بالطريقة السليمة حتى يكون قارئ الشاشة قادر على فهمها، ويستطيع تحديد العناوين والعواميد والصفوف وغيره من بنية الجدول بطريقة سليمة:

  1. يجب وضع رأس الجدول داخل <thead>.
  2. يجب استخدام <th> لتحديد خلايا العناوين.
  3. وضع محتوى الجدول داخل <tbody>.
  4. يجب استخدام <td> لتحديد خلايا صفوف المحتوى.
  5. وضع محتوى ذيل الجدول داخل <tfooter>.
  6. استخدام السمة ‘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>

الخاتمة

قد هدفنا في هذه المقالة تسليط الضوء على أهم الممارسات التي من شأنها سوف تخلق محتوى ويب قابل للوصول بالنسبة لجميع المستخدمين، بما فيهم مستخدمي قارئات الشاشة والتقنيات المساعدة.

ولما كان الوصول للمعلومات حق من حقوق الإنسان فكان من الضروري إيضاح ذلك، والتطرق إلى كيف ننشأ محتوى يستطيع الجميع الوصول إليه بغض النظر عن قدراتهم البدنية أو الحسية أو المعرفية.

فنحن بحاجة إلى التأكد من أن جميع المستخدمين يمكنهم الاستفادة من المعلومات والخدمات على الويب بنفس القدر، وأنه لا يوجد أي تمييز أو عراقيل تمنع الوصول.

وقد توصلنا إلى أن باتباع مبادئ التصميم القابل للوصول واستخدام التقنيات المناسبة، يمكننا ضمان أن الجميع يمكنه الوصول إلى المعلومات والمحتوى على الويب، وهو ما يجعلنا نساهم في بناء مجتمع رقمي شامل يضمن المساواة والفرص المتساوية للجميع.

وذلك من خلال: استخدام العناصر الدلالية المناسبة، وتوفير نصوص بديلة للصور، والتعامل بالشكل السليم مع العناصر المخصصة، فضلا عن إنشاء روابط تخطي والمزيد.

وبالرغم من ذلك، كل ما تم ذكره يعد جزء صغير في عالم كبير، لا يمكن لأحد تغطيته من خلال مقالة واحدة. لذلك، أدعو الجميع للنظر إلى المصادر المذكورة، بل والبحث عن مصادر أخرى.

المصادر

  1. W3C Accessibility Introduction
  2. W3Schools HTML Accessibility
  3. Chrome Developer Documentation – Using Landmarks
  4. W3Schools Accessibility Tutorial
  5. Mozilla Developer Network – HTML Accessibility
  6. Mozilla Developer Network – Advanced HTML Tables
  7. Yale University – Images and Accessibility
  8. University of Washington – Web Accessibility Checklist for Images
  9. W3C ARIA Roles Specification
  10. Mozilla Developer Network – ARIA Documentation

عن MahmoudAtef

تحقق أيضا

معاني أرقام الأخطاء التي نراها على صفحات الويب في الأنترنت

مقدمة عند تصفح الإنترنت، قد تواجهنا بعض الأخطاء التي تظهر كأرقام برمجية تعبر عن مشاكل …

اكتب تعليقًا