Цель WAI-ARIA — сделать динамическое содержимое страниц доступным. WAI-ARIA предусматривает способы описания ролей, состояний и свойств для пользовательских виджетов (динамических частей веб-приложений), чтобы их смогли распознать и задействовать пользователи вспомогательных технологий.
Например, если экранный виджет отображает постоянно изменяющийся курс акций, то как незрячий пользователь, зашедший на соответствующую страницу, сможет узнавать об этих изменениях? WAI-ARIA пытается решить эту проблему Полная реализация ARIA лежит вне рамок этой книги (всю информацию вы сможете найти по адресу http://www.w3.org/WAI/intro/aria). Однако существуют очень легко реализуемые части ARIA, которые мы можем применять для улучшения доступности любого написанного на HTML5 сайта для пользователей вспомогательных технологий.
Когда вам требуется создать сайт для заказчика, часто бывает так, что времени/ денег на внедрение поддержки доступности не предусматривается (печально, но зачастую об этом люди вообще не задумываются). Однако можно прибегнуть к ролям ориентиров ARIA, чтобы устранить некоторые бросающиеся в глаза недостатки семантики HTML и позволить экранным дикторам, поддерживающим WAI-ARIA, легко переключаться между разными областями экрана.
Роли ориентиров ARIA. Реализация ролей ориентиров ARIA нехарактерна для адаптивных веб-дизайнов. Однако, поскольку довольно легко внедрить частичную.
Поддержку этой спецификации (итоговый код сможет пройти валидацию на предмет соответствия требованиям HTML5 без дополнительных усилий с вашей стороны), едва ли имеет смысл включать ее в любую веб-страницу, которую вы будете писать на HTML5 начиная с этого дня и далее. Но хватит слов! Посмотрим, как все это работает.
Взгляните на нашу новую навигационную область на HTML5:
<nav>
<ul>
<li><a href="#">Why?</a></li>
<li><a href="#">Synopsis</a></li>
<li><a href="#">Stills/Photos</a></li>
<li><a href="#">Videos/clips</a></li>
<li><a href="#">Quotes</a></li>
<li><a href="#">Quiz</a></li>
</ul>
</nav>
Мы можем сделать так, что совместимые с WAI-ARIA экранные дикторы смогут легко переходить в эту область. Для этого добавим для нее атрибут role, как показано в приведенном далее фрагменте кода:
<nav role="navigation">
<ul>
<li><a href="#">Why?</a></li>
<li><a href="#">Synopsis</a></li>
<li><a href="#">Stills/Photos</a></li>
<li><a href="#">Videos/clips</a></li>
<li><a href="#">Quotes</a></li>
<li><a href="#">Quiz</a></li>
</ul>
</nav>
Насколько все просто? Существуют роли ориентиров для следующих частей структуры документа.
application — применяется для определения области веб-приложения.
banner — используется для определения области, имеющей ширину сайта (а не документа). Например, такой области, как верхний колонтитул или логотип сайта.
complementary — применяется для определения области, являющейся дополнительной по отношению к основному разделу страницы. На нашем сайте And the winner isn’t. дополнительными будут считаться области UNSUNG HEROES и OVERHYPED NONSENSE.
contentinfo — ее следует использовать, когда дело касается информации об основном содержимом. Например, для вывода информации об авторских правах в нижнем колонтитуле страницы.
form — как вы уже догадались, эта роль относится к формам! Однако если форма, о которой идет речь, предназначена для поиска, то вместо роли form следует использовать search.
main — применяется для определения основного содержимого страницы.
navigation — используется для определения навигационных ссылок текущего документа или связанных документов.
search — применяется для определения области, которая выполняет поиск.
ПОДРОБНЕЕ ОБ ARIA.
ARIA не ограничивается лишь ролями ориентиров. Если вы решите пойти еще дальше, то полный перечень ролей с кратким описанием их предназначения найдете по адресу http:// www.w3.org/TR/wai-aria/roles#role_definitions.
Перейдем к расширению нашей текущей HTML5-версии разметки сайта And the winner isn’t, с использованием соответствующих ролей ориентиров ARIA:
<body>
<div id="wrapper">
<!— верхний колонтитул и навигация —>
<header role="banner">
<div id="logo">And the winner is<span>n’t…</span></div>
<nav role="navigation">
<ul>
<li><a href="#">Why?</a></li>
<li><a href="#">Synopsis</a></li>
<li><a href="#">Stills/Photos</a></li>
<li><a href="#">Videos/clips</a></li>
<li><a href="#">Quotes</a></li>
<li><a href="#">Quiz</a></li>
</ul>
</nav>
</header>
<!— содержимое —>
<div icKcontent" role="main">
<img class="oscarMain" src="img/oscar. png" alt="atwi_oscar" />
<h1>Every year <em>when I watch the Oscars I’m annoyed…</em></h1>
<p>that films like <b>King Kong</b>, <b>Moulin Rouge</b> and <b>Munich</b> get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?</p>
<p><i>We’re here to put things right.</i></p>
<a href="#">these should have won »</a>
</div>
<!— врезка —>
<aside>
<section role="complementary">
<div class="sideBlock unSung">
<h1>Unsung heroes…</h1>
<a href="#"><img src="img/midnightRun. jpg" alt="Midnight Run" /></a>
<a href="#"><img class="sideImage" src="img/wyattEarp. jpg" alt="Wyatt Earp" /></a>
</div>
</section>
<section role=»complementary»>
<div class="sideBlock overHyped">
<h1>Overhyped nonsense…</h1>
<a href="#"><img src="img/moulinRouge. jpg" alt="Moulin Rouge" /></a>
<a href="#"><img src="img/kingKong. jpg" alt="King Kong" /></a>
</div>
</section>
</aside>
<!— нижний колонтитул —> footer role="contentinfo">
<p>Note: our opinion is absolutely correct. You are wrong, even if you think you are right. That’s a fact. Deal with it.</p>
</footer>
</div>
</body>
Протестируйте свои дизайны бесплатно с помощью.
NONVISUAL DESKTOP ACCESS (NVDA).
Если вы разрабатываете сайты на платформе Windows и желаете протестировать свои улучшенные благодаря ARIA дизайны с использованием экранного диктора, то можете сделать это бесплатно с помощью NVDA. Это решение доступно по адресу http://www.nvda-project.org/.
Надеюсь, краткое введение в WAI-ARIA показало, насколько легко внедрить частичную поддержку этой спецификации для пользователей вспомогательных технологий, и вы задумаетесь о том, чтобы задействовать WAI-ARIA для улучшения своего следующего HTML5-проекта.
СТИЛИЗАЦИЯ РОЛЕЙ ARIA.
Как и любые атрибуты, роли ARIA можно стилизовать напрямую, используя селектор атрибутов. Например, вы можете добавить CSS-правило для роли navigation, напечатав следующий код: nav[role="navigation"] {}.
Добавить комментарий