ARIA е съкращение от Достъпни Rich Internet Applications (достъпни Rich Internet Applications), използването на този стандарт дава възможност да се направи сайта по-достъпен за хора с увреждания, като слух или зрение. Да видим какво разработчиците могат да направят, за да направи живота им по-лесно.
Един от начините да се използва този стандарт - добавяне на ARIA маркиране в HTML. Вие вероятно са запознати с семантични HTML елементи като навигация. бутон или глава. Лесно е да се разбере защо можете да използвате тези елементи. Те дават по-голям смисъл и съдържание на страницата, ние можем да използваме комбинация от тези елементи и ARIA маркиране. Въпреки това, за съвместното използване е необходимо да се помисли за няколко неща.
ARIA Ролите се добавят към HTML маркирането като атрибути. Те се определи вида на позиция и да посочи целта, която го обслужва. В следващия пример, елементът е идентифициран като банер:
Друг пример е ролята на информацията съобщи, че елементът съдържа информация за съдържанието на страницата.
Уведомяването трябва да изглежда така:
роля = "предупреди" напълно работа с елементи в DOM динамично Добавяне или промяна на дисплея, като например дисплей: няма да се покаже: блок
Елементи обхващат (как и DIV) в повечето случаи не е необходимо да се уточни ролята = "представяне", тъй като тя не е обект в наличност дърво (достъпност дървото) браузър. Но семантични елементи като h1 - H6 че има смисъл.
ARIA атрибути
ARIA атрибути са малко по-различни от ролите на ARIA. Те също така добавя към оформлението, но вече определен диапазон ARIA атрибути. Всички атрибути, използвани aria- префикс и са разделени в две групи: състояние и свойства.
- Стойностите на атрибутите се променят състояния в резултат на взаимодействие с потребителя.
- Стойностите на атрибутите, имоти, са склонни да останат непроменени.
Пример ARIA-държавен атрибут е ария-проверени. използвани в елементи като квадратчета и бутони за избор.
Всъщност, използването на ARIA атрибут в родния радио бутон ненужно задължителен вход тип = "радио" и ария-проверява автоматично.
Примерни-атрибут имоти от ария-етикет. Този атрибут се използва, когато на етикета на форма елемент не се вижда на страницата (може да бъде продиктувано от дизайна или просто не правят смисъл). За случаите, в които текстът на етикета е удобно ария-labelledby атрибут. Тя се използва и като предишната стойност на атрибута съответства на стойността на номер маркер.
Това може да стане в една фигура елемент.
правила ARIA
Преди да се впускат в битка, не забравяйте, че в продължение на няколко причини, че не е необходимо да се добави ARIA за всеки елемент.
Опитайте се да направите най-много семантични HTML елементи
ARIA семантиката подразбиране се отнася за семантика, прилагани към елементите в браузъра. Такива елементи като NAV. статия и бутон вече определи ролите на ролята = "навигация". роля = "статия" и = "бутон" роля, съответно. Преди появата на семантични HTML елементи беше удължен за маркиране по вид
. Сега ние можем да използваме вместо DIV навигационната и ние не трябва да се добави към семантичен елемент роля = "навигация". защото тази роля тя вече се подразбира. Можете да проверите за наличието на маса W3C и липсата на ARIA атрибути за желаната опция.
Един елемент може да има само една роля
Един елемент не може да бъде няколко роли. Според определението, ролята е:
Основният вид показател. Това семантично се свързват с възможността инструменти за показване и подкрепят взаимодействие с обекти по начин, подходящ за очакванията на потребителя по отношение на други обекти от същия тип.
Не може да има две роли в HTML елемент. Всички семантично роля по някакъв начин и в съответствие с определението по-горе, един елемент не може да бъде два вида. Може ли да бъде един бутон-хедър? Не, само един от тях. Изберете ролята, която най-добре описва функцията на елемента.
Не променяйте семантиката на родния
Не трябва да използвате роля, която не отговаря на семантика елемент, като добавя роля пренаписва родния семантика елемент. Например:
Въпреки това, второто правило ARIA позволява, ако е необходимо, да се използва вложени елементи.
Как иначе може да ви направи по-достъпни маркиране?
Възползвайте се максимално от семантични елементи
Той идва с опит, но ако мислите, че по отношение на функциите, които можете да построите, той може да ви даде добра представа за това, как да се използват елементи, които са подходящи за вашите цели по-добре от една Разделение или от време. На практика, можете да използвате HTML елементи от списък на W3C на сайта. да опознаем по-добре с тях.
Една от любимите ми примери е текстов блок маркер. който често се използва за други цели. Има и други подобни елементи, които служат специфични цели:
- р - се използва за обозначаване малки цитати, като цитати в рамките на един параграф от текст.
- посочи - се използва за позовавайки творческа работа с текста, например, стиховете.
Ето един пример с помощта на тези два елемента:
Има много елементи на HTML, може да не се вземат под внимание, включително и няколко нови, така че отново се препоръчва да се направи оценка на възможностите.
Атрибутът н
Често се забравя, част от оформлението, което може сериозно да повлияе на наличността, особено в случая с екранни четци. Този атрибут се появи в спецификацията, тъй като в блогаHTML2 и описани, както следва:
Текст, се използва вместо на изображението, ако изображението не е на разположение поради ограничения или предпочитания на потребителя.
Хората често запълват атрибут н не е информативен, например, напишете текст като "куче" за вашите снимки на кучето играе в парка. За съжаление, текстът не прави без снимки за хора с увредено зрение. Следващият подход е по-подходящо:
Имайте предвид, че атрибутът н не е настроен за едно и също нещо и figcaption елемент. Целта е да се създаде н алтернативен текст на изображението. figcaption и това е точното заглавие на фигурата. Ако развием предишния пример в figcaption следния текст:
маркиране например използване на семантични HTML и ARIA, фокусирана върху достъпността
Ако се вгледате в примерите в тази статия, можете да очаквате да видите като отправна точка, както следва:
- използвате семантичен HTML за изображение и надпис
- предназначение цитират елемент
- добавете н атрибут
- използването на един от атрибутите на ARIA
заключение
ARIA роли и качества осигуряват огромен ефект, когато съдържанието на сайта ви се обработва от екранни четци и други помощни технологии. С разпространението на помощни технологии трябва да се помисли за интеграцията на ARIA в нашия код като редовна практика.
допълнителни материали