قابلية الـوصول في الويب.
مع زيادة استخدام الأنترنت و عدم قدرة الانسان علي تخيل حياته بدون الأنترنت يجب علينا توفير قابلية وسهوله للوصول الي المعلومات في مواقعنا وعلي الأنترنت وحتي ولو كان المستخدم من ذوي الأحتياجات الخاصة.
نشر في 18 ديسمبر 2016 .
مع تواجد اكثر من 3 بليون مستخدم علي الأنترنت واكثر من 1 بليون موقع انترنت اصبح الانترنت هو الشئ الذي لا غني عنه واصبح وصول المستخدمين الي المعلومات متاح في اى وقت ولكن السؤال هنا هل جميع المواقع الان توفر قابلية وصول للمعلومات والمواقع لجميع المستخدمين؟
اذا ماهي قابلية الوصول "Accessibility" ؟
طبقا لتعريف W3C : قابلية الوصول تعني ان الأشخاص ذوي الإعاقه بامكانهم استخدام الأنترنت وبمعني اوضح واكثر تحديدا ان قابلية الوصول تعني ان الأشخاص ذوي الإعاقة بإمكانهم الفهم والتفاعل والتنقل مع شبكة الأنترنت وبإمكانهم التأثير والمشاركة في الويب مثل الأخرين بما في ذلك كبار السن.
هل قابلية الوصول فقط للأشخاص ذوي الأعاقة؟
كما قرأت في التعريف الخاص للـW3C ان قابلية الوصول تعني سهولة وصول الأشخاص ذوي الإعاقة ولكن الـW3C ذكرت ان ايضا ان قابلية الوصول هي شئ سيفيد الأشخاص الاسوياء وان قابلية الوصول هو مبدأ اساسي للوصول الي الأنترنت والتفاعل مع البرمجيات.
يمكننا الأن تعريف وفهم قابلية الوصول "Accessibility" علي انها شئ أساسي لجميع الأشخاص للتفاعل مع الأنترنت وليست لفئة معينه لجعل الجميع قادر علي التفاعل مع الانترنت وقادر علي الوصول الي المعلومات هي شئ لي ولك ولكل الأشخاص فلنجعل الأنترنت قابل للوصول اذا.
يتم تصنيف الأشخاص ذوي الإعاقة الي:
- إعاقة بصرية: مثل العمي او ضعف النظر او عمي الألوان.
- إعاقة جسدية: مثل عدم القدرة علي التحرك او استخدام الايدي.
- إعاقة سمعيه: مثل الصمم او صعوبة السمع.
- إعاقة ادراكية : مثل عدم القدرة علي التركيز او تذكر المعلومات.
يحتاج كل نوع من انواع الإعاقة تهيئة المواقع والانترنت له كي يقدر علي الممارسة والتفاعل مع الأنترنت بشكل طبيعي دون مواجهه اى صعوبات.
ما هي الخطوات الأساسية لجعل الأنترنت والمواقع قابلة للوصول ؟
- استخدام العناصر في اماكنها الصحيحة "Semantic HTML" واستخدام العناصر عند الحاجة اليها فقط.
- توفير عناصر الوصول WAI-ARIA
Web Accessibility Initiative – Accessible Rich Internet Applications وهي عناصر تضاف الي كود الـHTML لزيادة قابلية الوصول.
- زيادة الفعالية للمواقع باستخدام الـJavaScript بما يساعد علي تهيئة أكبر لقابلية الوصول .
نصائح لجعل المواقع أكثر قابلية للوصول:
- يجب عليك في البداية استخدام الـDOCTYPE لتعريف المتصفح اى نسخة من HTML تستخدم.
- يجب عليك تعريف المتصفح اى لغة تستخدم في الموقع وذلك باستخدام lang arrtibute مثلا اذا كان موقعك باللغة العربية `<html lang=ar>` ، وفائدة تعريف اللغة هو تعريف المتصفح اى لغة يحتويها الموقع و ايضا لقارئات الشاشة "Screen Reader" لاختيار اللغة المناسبة، فوائد استخدام lang attribute.
اذا كان الموقع يحتوي علي اجزاء كتبت بلغة اخري يجب عليك تعريف اللغة للعنصر.
`<p lang=en>Hello world!</p>`
يجب اختيار اللغة جيدا وان تكون هي اللغة الصحيحة حتي لا يحدث اى مشاكل فكما قلت مسبقا ان قارئ الشاشة "Screen Reader" يقرأ المحتوي بناءا علي اللغة التي تم تحديدها له يمكنك الاطلاع علي هذا الفيديو لرؤية مشاكل اختيار اللغة.
- يجب عليك اضافة alt attribute للصور <img > ، اغلبنا يعرف ان استخدام alt وتوفير وصف بداخلها هو فقط لاخبار المتصفح بماذا تحتوي الصورة ولتظهر للمستخدم هذا الوصف اذ لم تظهر الصورة في حالة حدوث اى فشل ولكن قارئ الشاشة ايضا يقرأ هذا الوصف لاخبار المستخدم بما تحتوية الصورة لذلك يجب توفير وصف جيد ودقيق لما تحتوية الصورة ولا تبدأ الوصف بكتابة Picture,Image,Graphic of لان قارئ الشاشة "Screen Reader" بالفعل يقوم بذلك بدلا منك فيجب عليك فقط توفير وصف جيد ودقيق للمستخدم.
اذا كانت الصورة تهدف فقط الي الزينة والديكور فيجب عليك ترك alt فارغة ولا تحذفها ابدا فقط اترك الوصف فارغ alt="" ويفضل استخدام خاصية background-image للصور عندما يكون هدفها الزينة.
كيفية استخدام alt واختيار وصف مناسب.
- استخدم عنصر `<button>` اذا كنت بحاجة فعلا الي زرار للضغط علية لتأدية وظيفة معينة ولا تخلط بين عنصر الـbutton و عنصر a وهو المسئول عن تحويل الشخص من مكان الي مكان اخر ولا تحاول استخدام عناصر مختلفة لتأدية وظيفة الـbutton وليكن div مثلا فعنصر الـbutton قابل للضغط علية وايدا قابل للوصول اليه بلوحة المفاتيح.
الفرق بين استخدام button واستخدام a.
الفرق بين استخدام button واستخدام عنصر اخر فيديو.
جعل عنصر a قابل للوصول وذات معني.
- استخدم الترتيب المنطقي للعناوين "headings" باستخدامك التسلسل الهرمي للعناوين بداية من <h1> وحتي <h6> انت توفر للمستخدم فهم أكثر وسهولة وصول الي العناوين الرئيسية والفرعية في موقعك حيث توفر قارئات الشاشة "screnn reader" طرق مختلفة الي الوصول الي العناوين عن طريق استخدام لوحة المفاتيح غالبا ما يتم استخدام عنصر.
دائما لا تستخدم عنصر <h1> عده مرات فقط استخدمها مرة واحدة وغالبا ما تكون في بداية الصفحة كعنصر تعريف "logo" وايضا استخدم الترتيب الهرمي بعدها بداية بعنصر <h2> الي <h3> انتهاءا بـ<h6>.
- يجب توفير <label for=id> لعنصر <input> والهدف من توفير label هو توجية وتعريف المستخدم علي العنصر وما القيمة التي يجب عليه ادخالها في هذا الحقل لان بعض من قارئات الشاشة "screen reader" غير قادرة علي قراءة المحتوي بداخل الـplaceholder.
`<label for="name"> Enter your name</label>`
`<"input type="text" id="name>`
- اذا كان هناك اى عناصر فقط لغرض الزينة يمكنك اخفائها عن قارئات الشاشة "screen reader" عن طريق استخدام aria-hidden=true هنا سيتم اخفاء العنصر من شجرة العرض الخاصة بقابلية الوصول.
- استخدم العناصر الرئيسية "landmarks" مثل header, nav, aside, section, article,main,footer توفر علي المستخدم وتساعده علي التنقل بين الموقع ايضا توفر وصف دقيق لكل جزء ومنطقة لقارئ الشاشة.
تعلم عن اقسام الصفحة واستخدام العناصر الرئيسية.
- يمكنك استخدام roles في اضافة وصف اكثر للعناصر ويمكنك اضافة role للعناصر الرئيسية وذلك لتعريفها علي بعض قارئات الشاشة "screen reader".
header ==> role=banner
nav ==> role=navigation
footer==> role=contentinfo
جميع الـroles لعناصر الرئيسية.
- دائما وابدا لا تقم بعمل outline: none | 0 لاي عنصر في CSS او عندما تقوم بذلك يجب عليك توفير بديل اخر ، لان بإخفاء الـoutline لا يقدر المستخدم علي معرفة اى عنصر يقف عليه وذلك عند استخدام لوحة المفاتيح للتنقل بين العناصر.
- استخدم وحدات نسبية "relative CSS units" للخطوط حتي اذا تمكن المستخدم من تقريب الشاشة يبقي قادرا علي قراة المحتوي بشكل جيد.
- استخدام الوان ذات قدرة علي الوضوح "color contrast" ، يمكنك اختبار الوان موقعك اذا كانت ذات قدرة علي الوضوح.
- اذا كان موقعك يقدم اى خدمات كخدمات حجز تذاكر او اى شئ يتطلب طباعة يجب عليك الأهتمام بالـنمط "style" وعمل ملف نمط خاص بالطباعة.
بعض النقاط التي تسهل عليك انشاء ملف خاص للطباعة.
*معلومة جانبية يتم الأشارة الي مفهوم الـAccessibility بـA11y وهي اختصار لكلمة Accessibility تم استخدام الحرف الأول A والأخير Y وما بينهم من عدد حروف 11.
يمكنك اكتشاف ما ينقص موقعك وملف الـHTML والبدء بتعديلة واضافتة من خلال استخدام اداة a11y-checker.
ستجد هنا كل ما يخص قابلية الوصول من مصادر ومقالات و فيديوهات تعليمية awesome-a11y وتحتوي هذة القائمة علي جميع المصادر التي جعلتني انُهي كتابة هذه المقالة.
ايضا توجد هنا مجموعة من الأكواد التي يتم تحديثها باستمرار واضافة اشياء جديدة تخص التعامل مع قابلية الوصول.