يجب أن تكون مواقع الويب في متناول الجميع. إليك ما تحتاج إلى معرفته.

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

لماذا يجب أن يهتم المطورون بإمكانية الوصول إلى الويب؟

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

لا ينبغي أن يكون الوصول الرقمي خيارًا للمطورين. إنها ضرورة لأي علامة تجارية احترافية. هذا يؤخذ على محمل الجد: كما ذكرت من قبل متنوع، قام شخص ما بمقاضاة شركة Pokémon Company في عام 2019 بسبب موقع ويب لا يمكن الوصول إليه.

الوصول إلى الويب باستخدام HTML

instagram viewer

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

استخدم العناصر الدلالية

العناصر الدلالية في HTML هي عناصر لها معاني. في HTML5 ، يوجد حوالي 100 عنصر. بعض العناصر ، مثل و ، غير دلالي ، بينما علامات HTML الأخرى دلالية. على الرغم من أنه قد يكون من المستحيل التوقف عن استخدام هذه العناصر غير الدلالية ، فمن المهم دمج أكبر عدد ممكن من العناصر الدلالية في عملك. فيما يلي قائمة بالعناصر الدلالية الشائعة:

تأمل هذا المثال من تاسكلي:

ستكشف نظرة سريعة على الصورة أعلاه العناصر التالية:

  • عنوان
  • صورة
  • فقرة
  • ثلاثة أزرار

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

<قسم>
<IMGsrc="/hero.png"بديل="بطل">
<شرط>
<h1>اعثر على المنتجات والخدمات المناسبة في الوقت المناسب.h1>
<ص>
 الأحذية المصنوعة يدويًا ، تجديد الشعر ، مدير وسائل التواصل الاجتماعي ، إرسال المهمات ، مصدر الدخلب>— سمها ما شئت ، حصلت عليه Taaskly. ابحث عن كل منتج أو خدمة تحتاجها اليوم عند التسجيل واستخدام Taaskly. 
ص>
<أhref="/ main / home">الاستعانة بمصادر خارجية مهمةأ>
<أhref="/ main / services"> ابحث عن خدمةأ>
<أhref="/ main / marketplace" >ابحث عن متجرأ>
شرط>
قسم>

من مقتطف HTML ، يمكنك ملاحظة ما يلي:

  1. الصور والنص والأزرار داخل ملف عنصر.
  2. ال عنصر يقسم بالتساوي و عناصر.
  3. ال العنصر يحمل ال, ، و عناصر.
  4. الأزرار مشفرة على أنها عناصر؛ ومن ثم ، فهي روابط وليست أزرارًا. كقاعدة عامة ، استخدم دائمًا الروابط لتوجيه المستخدم إلى صفحة أو عرض آخر ، واستخدم الأزرار عندما تريد فقط أن يقوم المستخدم بتنفيذ إجراء في نفس طريقة العرض. يرى صفحة زر الزاوي لمزيد من المعلومات حول هذا.

استخدم المعالم لتوفير هيكل صفحة واضح

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

تظهر الصورة أعلاه أربعة معالم مختلفة. يمكنك استخدام ال رؤى الوصول التمديد لتصور هذه المعالم.

في الصورة ، يمكننا استنتاج أ في الجزء العلوي ، أ تحتوي على أ ، وأ عنصر. بشكل ملحوظ ، تظهر الصورة "ملاحة", "منطقة"، و "contentinfo". تُعرف هذه الأدوار ، والتي سننظر إليها لاحقًا.

عندما تضطر إلى استخدام العديد من المعالم لصفحة ما ، فقم دائمًا بتمييزها عن طريق التصنيف. على سبيل المثال ، إذا كنت تستخدم ملفات عناصر مثل Apple ، عليك تصنيفها. يجب عليك تسميتها بامتداد أريا التسمية يصف. لذلك يمكنك كتابة شيء مثل أي مما يلي:

<التنقلأريا التسمية = "عالمي">
<التنقلأريا التسمية = "التنقل المحلي">
<التنقلأريا التسمية = "دليل التفاح">

يمكن أن يساعد استخدام التصنيفات برامج قراءة الشاشة في تخطي أي تنقل.

استخدم سمات الدور والاسم والقيمة

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

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

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

دور

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

<رأسدور = "ملاحة">
<التنقلدور = "لافتة">
<شعبةدور = "ملاحة">

اسم

الاسم هو نص وصفي أو تسمية مرتبطة بعنصر HTML. أسهل شكل للاسم هو نص العنصر. هنا مثال:

<شعبةدور = "زر">انقر فوق لي!شعبة>

في المقتطف أعلاه ، "انقر فوق لي!"هو اسم عنصر. يُعرف أيضًا باسم الاسم الذي يمكن الوصول إليه.

بالنسبة لعناصر مثل التنقل والقوائم المنسدلة وما إلى ذلك ، يعد تعيين اسم أكثر تعقيدًا مما كان عليه في المثال السابق. الأمر مختلف لأن هذه العناصر بها عناصر فرعية. لتعيين اسم للتنقل أعلاه ، استخدم أريا التسمية يصف. انظر إلى هذا المثال:

<التنقلدور = "ملاحة"أريا التسمية = "التنقل العالمي">...التنقل>

يجب أن تلاحظ أن أ اسم السمة مختلفة عن الاسم الذي يمكن الوصول إليه. يوفر مقتطف الشفرة هذا فهمًا أفضل:

 سمة الاسم 
<التنقلدور = "ملاحة"اسم = "التنقل العالمي">...التنقل>
 اسم يمكن الوصول إليه 
<التنقلدور = "ملاحة"أريا التسمية = "التنقل العالمي">...التنقل>

يرى مقال TGPi حول الأسماء التي يمكن الوصول إليها للحصول على فهم أعمق لهذا.

قيمة

في HTML ، يمكن أن توفر سمة القيمة معلومات إضافية حول عنصر. توفر القيم معلومات حول حالة المكون للمكونات المخصصة مثل الأكورديون. على سبيل المثال ، يمكن فتح أو إغلاق الأكورديون.

يمكنك إضافة قيمة إلى عناصرك بعدة طرق. يوضح هذا المقتطف بعض الطرق التي يمكنك القيام بها:

 أريا فالوينو 
قيمة
<مدخليكتب="مربع الاختيار"اسم="منتج[]"قيمة="1">

إعطاء الأولوية للوصول إلى الويب للحصول على تجربة شاملة عبر الإنترنت

الوصول إلى الويب يتجاوز القواعد التالية ؛ يتعلق الأمر أيضًا بضمان حصول الجميع على وصول متساوٍ إلى موقع الويب الخاص بك. إن دمج العناصر الدلالية والمعالم والسمات مثل الدور والاسم والقيمة في HTML الخاص بك يمكن أن يجعل موقع الويب الخاص بك أكثر سهولة للأشخاص ذوي الإعاقة. لا تفكر في إمكانية الوصول إلى الويب كخيار ؛ اعتبرها ضرورة.