سيساعد استخدام الترميز الدلالي في تسهيل الوصول إلى موقعك ، ويمكن أن تساعد سمات ARIA في حالات الحافة.
قد يصادف مصممو الويب الجدد في HTML مجموعة من السمات غير المألوفة. تظهر هذه السمات ، التي تسبق كلمة ARIA ، في جميع أنحاء الويب ، ولكن يمكن أن يكون الغرض منها لغزًا للمستخدمين الجدد.
تخدم سمات ARIA غرضًا مهمًا في إمكانية الوصول إلى مواقع الويب الخاصة بك. يصفون كلاً من محتوى عنصر معين والطريقة التي يرتبط بها العنصر بصفحة أو بالعناصر الأخرى المحيطة به.
ستساعد إضافة هذه السمات المهمة للغاية إلى موقعك على ضمان حصول جميع الزوار على نفس التجربة ، بغض النظر عن التكنولوجيا التي يستخدمونها.
ما هي سمات ARIA؟
ARIA هو اختصار لـ Accessible Rich Internet Applications. في لغة HTML الحديثة ، وخاصة التطبيقات الغنية بجافا سكريبت ، لا يتضح دائمًا على الفور استنادًا إلى بناء الجملة الدور الذي تخدمه العناصر الفردية.
يمكن أن تكون الصعوبة في تمييز الأدوار مشكلة عندما يشاهد المستخدمون الموقع باستخدام أدوات الوصول مثل قارئات الشاشة. نظرًا لعدم وجود لغة HTML الدلالية المناسبة ، قد لا يتمكن المستخدم النهائي من التنقل في موقع ما عند استخدام أدوات إمكانية الوصول.
في حين أن الطريقة المفضلة لحل هذه المشكلة هي استخدم العناصر الدلالية المناسبة في HTML5، هذا ليس عمليًا أو ممكنًا دائمًا. هذا هو المكان الذي تدخل فيه سمات ARIA في عناصر HTML. تساعد هذه السمات في تحديد دور وسمات عنصرك بطريقة يمكن لأدوات الوصول معالجتها.
لماذا تعتبر سمات ARIA مهمة؟
باختصار ، تتيح سمات ARIA للمستخدمين ذوي الإعاقة استخدام موقع الويب الخاص بك. تحدد هذه الأدوار والسمات معلومات إضافية حول العناصر المختلفة على موقعك والتي قد لا تكون متاحة بسهولة بخلاف ذلك.
هناك مجموعة متنوعة من سمات ARIA التي يمكنك تعيينها. يجب عليك استخدامها في أي مكان يحتاج إلى سياق إضافي للسماح للمستند بأن يكون ذا معنى بطريقة غير مرئية.
على سبيل المثال ، ضع في اعتبارك موقعًا يحتوي على تنقل رئيسي مكون من ملف عنصر ملفوف في عنصر بدلاً من ملف عنصر:
<شعبةفصل="تنقل">
<ماي>
<لي>بيتلي>
<لي>محللي>
<لي>عنلي>
ماي>
شعبة>يمكنك استخدام سمات ARIA لمساعدة المستخدمين على التنقل. إضافة سمات الدور و aria-label إلى ملف يسمح element لقارئ الشاشة والتقنيات المساعدة بمعرفة مكان قائمتك.
<شعبةفصل="تنقل">
<مايدور="ملاحة"أريا التسمية="رئيسي">
<لي>بيتلي>
<لي>محللي>
<لي>عنلي>
ماي>
شعبة>بينما يجب عليك في معظم الحالات استخدام العناصر المناسبة ، فقد لا يكون هذا ممكنًا دائمًا ضمن قيود ما تفعله. على سبيل المثال ، إذا كان موقعك يتطلب استخدام شريط تقدم ، لكنك تريد تصميمًا لا يسمح به الشريط القياسي.
في هذا السيناريو ، يمكنك إنشاء مجموعة مخصصة من العناصر لعرض شريط التقدم الخاص بك. لكن بالنسبة لقارئ الشاشة ، ستبدو هذه العناصر وكأنها فوضى مختلطة ؛ لن يكون قادرًا على تقديم معلومات مفيدة لزوار موقعك.
من خلال تعيين دور الغلاف على شريط التقدم، وإضافة أريا فالوينو, آريا فالويمين، و aria-valuemax إلى الغلاف ، فلا يزال بإمكانك الإشارة إلى التقدم.
في العصر الحديث ، أصبح بناء مواقع الويب التي يمكن الوصول إليها أكثر أهمية من أي وقت مضى. هناك تم إنشاء العديد من مكتبات مكونات React مع مراعاة إمكانية الوصول.
لا يقتصر الأمر على أن الحصول على موقع ويب يمكن الوصول إليه يساعد في ترتيب البحث للعديد من محركات البحث الرئيسية ، بل يضمن أيضًا أنك لا تقطع مجموعة محتملة من المستخدمين من قاعدة المستخدمين الخاصة بك.
ستساعد إضافة سمات ARIA المناسبة إلى موقعك على ضمان تقديم المعلومات لجميع المستخدمين. ستكون النتيجة النهائية موقعًا يرحب بجميع الجماهير ويقدم أقرب تجربة ممكنة للجميع.
ما هي سمات ARIA التي يجب علي استخدامها؟
هناك الكثير من السمات المختلفة التي يجب أن تستفيد منها على موقعك. بشكل عام ، تنقسم هذه السمات إلى فئتين مختلفتين. الأول هو سمات عنصر واجهة المستخدم التي تصف عادةً عنصرًا تفاعليًا مخصصًا.
الفئة الأخرى التي يجب أن تكون على دراية بها هي سمات العلاقة. هذه هي السمات التي تنقل المعلومات إلى التقنيات المساعدة حول كيفية ارتباط عنصر معين ببقية الموقع أو العناصر الأخرى.
عندما يتعلق الأمر بالتفكير في سمات ARIA التي يجب تضمينها ، فإن الإجابة البسيطة هي أكبر عدد ممكن. في أي مكان لا يصف فيه العنصر الذي تستخدمه الدور الذي يؤديه العنصر ، يجب عليك استخدام سمة الدور.
إذا كان لديك حقل به تسمية ، فيجب أن يحتوي هذا الحقل على aria- المسمى بواسطة يصف. طالما أن السمات التي تستخدمها منطقية ، فأنت تجعل الوصول إلى موقعك أكثر سهولة عن طريق إضافتها.
سمات القطعة هي فئة أكبر بكثير. يحتوي على معظم سمات ARIA التي ستحتاج إلى إضافتها إلى موقع قياسي. في المثال السابق لشريط التقدم المخصص ، تعد كل من aria-valuenow و aria-valuemin و aria-valuemax سمات عنصر واجهة المستخدم. يصفون الحالة أو الحالات المحتملة للعنصر الموجود فيه.
هناك الكثير من السمات المختلفة التي يمكنك استخدامها لوصف حالة العنصر. أحد أكثرها شيوعًا هو أريا التسمية. تطبق هذه السمة تسمية على العنصر الذي تضعه عليه والذي يكون مرئيًا فقط للتقنيات المساعدة.
زوج آخر شائع من سمات ARIA التي تقع ضمن هذه الفئة هما نغمة مخفية و آريا المعوقين. يمكنها توصيل الحالة الحالية للعنصر وما إذا كان يجب على قارئ الشاشة قراءته للمستخدم. هذا مفيد لمجموعة متنوعة من الأجهزة المختلفة مع قارئات الشاشة الخاصة بهم.
سمات العلاقة
بخلاف سمات عنصر واجهة المستخدم ، تعطي سمات العلاقة مؤشرات للتقنيات المساعدة حول علاقة عنصر ما واستخدامه مع العناصر الأخرى المحيطة به. أكثر هذه السمات شيوعًا هي سمة الدور. تحدد الوظيفة الغرض الذي يخدمه العنصر داخل الموقع.
إذا قمت بتعيين ملف دور يعزو إلى ملاحة، سيتم التعرف عليه فورًا على أنه برنامج تضمين تنقل.
تحدد بعض سمات العلاقة كيفية ارتباط العنصر بالعناصر الأخرى المحيطة به. ال aria- المسمى بواسطة السمة ، على سبيل المثال ، تُظهر العنصر الذي يعمل كتسمية لهذا العنصر. يمكن أن يكون هذا مفيدًا عند استخدام التخطيطات التي تبدو منطقية بصريًا ولكن لها تسميات لعناصر تحكم نموذج معينة بعدها في تدفق المستند.
على الرغم من وجود سمات علاقة أقل من سمات عنصر واجهة المستخدم ، غالبًا ما تحمل هذه السمات أهمية أكبر. يمكنهم في كثير من الأحيان وصف تدفق المستند والتحكم فيه ، وإعطاء تفاصيل إضافية حول الطريقة التي يمكن للمستخدم التنقل بها في موقعك.
هذه السمات لها أهمية خاصة عند تصميم النماذج وعناصر التنقل على موقعك.
لماذا من المهم جدًا تضمين سمات ARIA في HTML الخاص بك
تخدم سمات ARIA غرضًا بسيطًا وضروريًا على موقع الويب الخاص بك. إنها تعمل على ضمان إمكانية الوصول إلى الموقع لجميع المستخدمين ، بغض النظر عن استخدام برامج الوصول. بالنسبة للمستخدمين ذوي الاحتياجات الخاصة ، فإن وجود هذه السمات على موقعك يمكن أن يجعل الموقع قابلاً للاستخدام.
الطريقة المفضلة للعمل مع التكنولوجيا المساعدة هي استخدام العناصر الدلالية المناسبة. عندما يتعذر القيام بذلك ، فإن سمات ARIA تجعل من الممكن العمل بحرية دون أن يخسر المستخدمون المحتوى.
