Погледни в АРИА уеб стандартите и достъпността на HTML приложенията
Една наистина отворена и приобщаваща мрежа се нуждае от технологии, които позволяват на потребителите с увреждания да разчитат на помощни технологии, за да се наслаждават на динамично уеб съдържание и модерни уеб приложения. Стандартите за достъпност на уебсайтовете на W3C имат за цел да запълнят мрежата с достъпни богати интернет приложения (ARIA), които потребителите с увреждания могат ефективно да използват.
ARIA е един от многобройните стандарти и насоки за достъпност, публикувани от инициативата Web Accessibility Intitiative (WAI). Той предоставя допълнителен код, който може лесно да бъде вмъкнат в HTML документи. WAI-ARIA е крос-платформено решение за различни устройства, което е насочено към Open Web Platform, така че не мислете само за уебсайтове, но и за игри, цифрови развлечения, здравеопазване, мобилни и други видове приложения.
В тази публикация ще разгледаме как можете да добавите достъпност на HTML документите с помощта на стандартите WAI-ARIA.
Рамка ARIA
Синтаксисът на HTML не винаги позволява на разработчиците да описват правилно елементите, да идентифицират техните роли и да определят връзките между тях. Макар това рядко да е проблем за посетителите, които притежават напълно сетивата си, това може да попречи на потребителите на помощни технологии да разберат какво се случва на екрана и да проучат възможностите им.
Това е точката, в която ARIA ни помага, тъй като прави възможно да се определи целта на различните елементи с помощта на важни роли, и да опише тяхната природа атрибути с ария. Атрибутите с префикси на ария имат два вида: Имоти които описват функции, които е по-малко вероятно да се променят през целия жизнен цикъл на страницата, и състояния които предоставят информация за неща, които често могат да се променят поради взаимодействие с потребителя.
Забележителни роли
Забележителни роли са най-известните форми на модела за ролята на ARIA (други са абстрактните роли, ролите на приспособленията и ролите на структурата на документа). Ролевите ориентири позволяват на разработчиците да идентифицират големи видими региони на уеб страницата, които потребителите на помощни технологии може да искат да имат бърз достъп.
Съществуват 8 вида ARIA ориентирни роли и те трябва да бъдат добавени като атрибути към свързаните HTML тагове.
роля =”знаме”
Ролята на банера е предназначена главно за съдържание, което е свързано с целия сайт, а не само към отделни страници. Обикновено се добавя като атрибут към главната заглавна част на сайта за логото и друга важна информация за целия сайт. Важно е да използвате ролята на банера само веднъж в HTML документи или приложения.
роля =”основен”
Основната значима роля е свързана с основното съдържание на документа. Не може да се използва повече от веднъж на всяка HTML страница. Обикновено следва след Ролята на навигацията е предназначена да се използва за указване на област, която съдържа навигационни елементи като връзки и списъци на даден сайт. Допълнителната роля на ориентира описва допълнително съдържание, което е свързано с основното съдържание на сайта. Тя трябва да бъде поставена на подобно ниво в йерархията на DOM като Ролята на contentinfo информира потребителските агенти за наличието на регион, където могат да бъдат намерени различни видове метаданни, като информация за авторското право, правни и декларации за поверителност. Обикновено се използва за долния край на сайта. Ролята на ориентира на формата показва форма, чакаща за въвеждане от потребителя. За формуляри за търсене, които трябва да използвате Ролята на търсенето е доста очевидна, тя е предназначена да помогне на помощните технологии да идентифицират функционалността за търсене на даден уебсайт. Можете да използвате ролята на ориентира на приложението за регион, който искате да декларирате като уеб приложение, а не като уеб документ. Не е препоръчително да се включва в традиционните уебсайтове, тъй като има намеци за помощни технологии за преминаване от нормален режим на сърфиране към режим на сърфиране в приложения. Трябва да използвате тази забележителна роля само с голяма грижа. Докато ролите ви позволяват да дефинирате значението на HTML таговете, състоянията и свойствата предоставят на потребителя допълнителна информация за това как да взаимодействат с тях. И двете състояния и свойства са маркирани с атрибути с ария със синтаксиса aria- *. Най-известните атрибути на АРИА са вероятно необходимата ария и състоянието, проверено от ария. Изискваната ария е a Имот защото това е постоянна характеристика на входен елемент (т.е. потребителят трябва да го попълни), докато проверената с ария е състояние защото квадратчето често може да променя стойността му поради взаимодействие с потребителя. Държавите и свойствата понякога вземат символични стойности (ограничен набор от предварително дефинирани стойности), например свойството aria-live може да има 3 различни стойности: от, учтив, отстояващ. Синтаксисът в този пример изглежда така: В други случаи стойностите на атрибутите с ария са представени с струни, численост, числа, ID препратки или вярно невярно стойности. Използвайте атрибутите на връзката, за да посочите връзките между различните елементи на сайта си, които не могат да бъдат определени по друг начин от структурата на документа. Например След като зададете ролята на ориентир за ARIA за видима област на вашата HTML страница, тя може да помогне много на помощните технологии, ако промените състоянията и свойствата на дъщерните елементи в ARIA-префикс в съответствие със събития, които се случват на екрана. Това може да бъде от решаващо значение, когато потребителите трябва да си взаимодействат със сайта, например да попълнят формуляр или да изпълнят заявка за търсене. Общото правило на дизайна на достъпността е, че текущото състояние на потребителския интерфейс винаги трябва да се възприема от помощни технологии. Например, ако потребителят избере опция във форма, тя трябва да се появи и за помощни технологии. Това може лесно да се постигне чрез използване на избраното от ария състояние със следния синтаксис: Ръководството на W3C за WAI-ARIA Authoring Practices може да ви даде много други идеи за това как да хармонизирате правилно визуалния и достъпния интерфейс на сайта Ви. Използването на ARIA роли и атрибути понякога може да бъде излишно. Когато използвате семантични маркери на HTML5 като например Например не е необходимо да използвате форма роля на ориентир за определяне на Така че, ако вече сте добавили скрит HTML атрибут към входа на формата, не е необходимо да добавяте ария-скрит състояние, тъй като браузърът го включва по подразбиране.. Последното беше добавено към спецификациите на W3C с цел картографиране на основен Ролята на ARIA в семантичен HTML елемент. роля =”навигация”
роля =”допълнителен”
роля = "главен". Свързани постове, популярни статии, последни коментари са типични примери за автономно допълващо се съдържание.роля =”contentinfo”
роля =”форма”
роля = "търсене" вместо.роля =”Търсене”
роля =”приложение”
Състояния и свойства
Синтаксисът на атрибутите с префикс на ария
Как да се използват ARIA държави и имоти
1. Изградете връзки между елементи с атрибути на връзката
ария-labelledby property идентифицира елемента, който маркира текущия елемент.ария-labelledby - наред с много други неща - може да обвърже заглавията с региони на забележителностите на ARIA по следния начин:Това е заглавие
Главно съдържание… 2. Синхронизирайте състоянията и свойствата с жизнения цикъл на елемента
3. Съвпадение на визуалния и достъпния интерфейс
.Не прекалявайте с ARIA
или , Модерните уеб браузъри добавят подходящата семантика на ARIA по подразбиране. В този случай няма смисъл отделно да се определят ролевите забележителности на ARIA. елемент. Вместо синтаксис е напълно достатъчно, за да се използва само . Също така е излишно да се използват родните атрибути на HTML заедно с подходящия атрибут ARIA.
