Достъпност в HTML
Като продължение на последните си две публикации искам да кажа още няколко думи по въпроса как можем да пишем markup-а си така, че той да е наистина удобен и полезен за посетители и роботи, без да правим компромиси със стари браузъри (въпреки, че аз съм “ЗА” прекратяване на поддръжката на IE7/8 примерно). В този урок ще поговорим за предимствата, които ARIA ни предлага
Първо нека изясним какво е ARIA. Това е съкращение от Accessible Rich Internet Applications, или на български — Достъпни Богати Интернет Приложения. Дори и на роден език това може да се стори малко объркващо на някои посетители (на мене лично на български ми е даже по-объркващо, отколкото на английски), затова ето няколко думи, които да изяснят в детайлност точно какво трябва да представлява това.
Нека започнем от “достъпни”. Достъпността е един от факторите, на които през последните 2-3 години се набляга малко повече и все пак е все още твърде слабо засегнат. Идеята е, че на света има хора с увреждания, които заслужават средства, които да им предоставят равна възможност за постигане на целите си, в това число и информираност от интернет, тъй като интернет става все по-голяма част от ежедневието ни.
“Богати Интернет Приложения” е цялостен термин, който, ако си спомням правилно, беше въведен преди около 4-5 години от Adobe, с който те наричаха нашумелите тогава Flash-базирани сайтове, които предлагаха възможности, които браузърите или все още нямаха, или бяха нестандартизирани и трябваше да се отделя многократно повече време, за да работи “приложението” на всички браузъри, или пък просто трябваше да се използват методики, които въпреки че позволяваха постигането на целта, имаха различно предназначение и по тази причина се считаха за неуместни. От тогава насам обаче HTML, JS и CSS се промениха значително, а Apple изиграха важна роля за ограничението на Flash Player и насочването на потребителите към другите технологии.
В предните статии говорихме, че новите тагове в HTML нямат напълно вградена поддръжка при старите браузъри. Вярно, че за да накараме един <header> контейнер да изглежда правилно на IE7/8 не се налага да свършим кой-знае колко много работа, но защо да го правим, ако можем и без това? Единственото, което постигаме чрез тези тогава е някаква псевдо семантика, която обаче можем да получим и по друг начин, а именно като използваме ARIA.
Забележка: ARIA се препоръчва да се използва съвместно с HTML5 тагове, но това не означава, че няма да работи по същия начин и с HTML4 тагове (поне за сега).
Какво всъщност ни предлага ARIA?
ARIA е стандарт за допълнителни атрибути, които се задават на таговете в markup-а ни, посредством които, можем да добавим повече информация относно предназначението на секция от сайта ни. Така че един <header> можем да го заменим просто с <div role="banner">. Атрибутът “role” ще бъде игнориран от браузърите, които не го разбират, а модерните ще го третират правилно. Разликата е в това, че старите браузъри съвсем правилно ще представят и <div> тага, за който е зададен този атрибут.
Освен banner, има и други роли, които могат да се използват за елементите на една страница. Някои от тях са:
- complementary — уместно за
<aside>елементи - contentinfo — обща информация — уместно за <footer> и информация за запазени права
- form — при формуляри на страницата
- main — описва секцията от страницата, където е съсредоточена основната информация
- navigation — уместно за
<nav> - search — редно е да се прилага на контейнер, съдържащ търсачка на страницата
Съществуват и други роли, които можете да видите в една статия на английски, чието заглавие се превежда като “Как да направим семантичните HTML5 елементи по-достъпни“.
Освен role атрибута, спецификацията ARIA включва и други атрибути, започващи с префикс "aria-", които се използват най-вече за да предоставят информация за състоянието на даден елемент. Задължителни полета от един онлайн формуляр, например, може да се обозначат с "aria-required". Навигация с падащи менюта, от друга страна, може да съдържа атрибут "aria-has-popup". При зареждане на динамично съдържание с JavaScript може да добавим атрибут "aria-busy", който да изрази, че елементът в най-скоро време (щом заявката върне резултат) ще промени съдържанието си.
Знам, че сухите спецификации не винаги са най-търсеният източник на информация, но най-точни и правилни обяснения по въпроса, можете да получите на http://www.w3.org/TR/wai-aria/.