1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
---
title: ARIA
slug: Web/Accessibility/ARIA
tags:
- ARIA
- Web
- доступность
translation_of: Web/Accessibility/ARIA
---
<p><span class="seoSummary">Accessible Rich Internet Applications <strong>(ARIA)</strong> определяет способ сделать веб контент и веб приложения (особенно те, которые разработаны с помощью Ajax и JavaScript) более доступными для людей с ограниченными возможностями.</span> Например, ARIA делает доступным навигационные маркеры, JavaScript виджеты, подсказки на форме, сообщения об ошибках, автоматические обновления и многое другое.</p>
<p>ARIA - это набор специальных атрибутов, которые могут быть добавлены в любую разметку, но особенно подходят для HTML. Атрибут <code>role</code> определяет тип объекта (такие как статья, оповещение или ползунок). Дополнительные ARIA атрибуты предоставляют другие полезные возможности, такие как описания для форм или текущее значение индикатора выполнения.</p>
<p>Поддержка ARIA реализована в большинстве современных браузеров и программах экранного доступа. Конечно, реализации различаются, и старые технологии не поддерживают их полностью (либо вообще не поддерживают). Используйте постепенно деградирующий "щадящий" ARIA, или просите пользователей использовать новые технологии.</p>
<div class="note">
<p><strong>Note</strong>: Пожалуйста, примите участие в написании и/или переводе статей чтобы сделать ARIA понятнее и доступнее для тех, кто только начинает изучать материал! Не хватает на это времени? Тогда отправьте свои предложения в <a href="https://lists.mozilla.org/listinfo/accessibility">список рассылки Mozilla по теме accessibility</a>, или на <a href="https://wiki.mozilla.org/IRC">IRC канал</a>с тэгом #accessibility.</p>
</div>
<div class="row topicpage-table">
<div class="section">
<h3 id="Начало_работы_с_ARIA">Начало работы с ARIA</h3>
<dl>
<dt><a href="/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets">Введение в ARIA</a></dt>
<dd>Быстрое введение в превращение динамического контента в доступный с помощью ARIA. Смотрите также классическую статью <a class="external" href="http://dev.opera.com/articles/view/introduction-to-wai-aria/">ARIA intro by Gez Lemon</a>, from 2008.</dd>
<dt><a href="/en-US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ">Web Applications and ARIA FAQ</a></dt>
<dd>Ответы на часто задаваемые вопросы о том как и почему нужно использовать ARIA в разработке интерфейсов веб-приложений.</dd>
<dt><a class="external" href="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">Записи использования экранных читалок с ARIA.</a></dt>
<dd>На этих видео можно увидеть реальные и учебные примеры того ARIA улучшает доступность.</dd>
<dt><a class="external" href="http://w3c.github.io/aria-in-html/">Использование ARIA в HTML</a></dt>
<dd>Практическое руководство для разработчиков. Содержит рекомендации по использованию ARIA-атрибутов при разметке.</dd>
</dl>
<h3 id="Простое_улучшение_ARIA">Простое улучшение ARIA</h3>
<dl>
<dt><a class="external" href="https://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Улучшение навигации по странице с помощью ARIA Landmarks</a></dt>
<dd>Хорошее введение в использование ARIA landmarks для улучшения навигации для пользователей с экранными читалками. <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">Стоит также заглянуть в заметки по поддержке ARIA landmarks читалками </a> и примеры использования на реальных сайтах (опубликовано в Июле 2011).</dd>
<dt><a href="/en-US/docs/ARIA/forms">Улучшение доступности форм</a></dt>
<dd>ARIA используется не только для обозначения динамического контента! Узнайте, как улучшить доступность форм HTML используя дополнительные ARIA-атрибуты.</dd>
<dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions" title="Live Regions">Live regions (в процессе написания)</a></dt>
<dd>Live regions подсказывают экранным читалкам как правильно обрабатывать изменения контента на странице.</dd>
<dt><a class="external" href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">Использование ARIA Live Regions для оповещения об изменении контента страницы</a></dt>
<dd>Краткая сводка об использовании live regions от создателей JAWS screen reader software. Live regions также поддерживаются NVDA в Firefox и VoiceOver в Safari.</dd>
</dl>
<h3 id="ARIA_для_виджетов_на_JavaScript.">ARIA для виджетов на JavaScript.</h3>
<dl>
<dt><a class="external" href="/en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets">Навигация с помощью клавиатуры и фокус в виджетах на JavaScript</a></dt>
<dd>Первый шаг в создании доступных JavaScript виджетов, позволяющих производить навигацию с помощью клавиатуры. Статья описывает последовательные шаги по достижению цели. Ещё один хороший ресурс - <a class="external" href="http://www.yuiblog.com/blog/2009/02/23/managing-focus/">статья Yahoo! об управлении фокусом.</a></dd>
<dt><a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/">Style Guide for Keyboard Navigation</a></dt>
<dd>В этом руководстве описываются способы управления самыми распространёнными виджетами с клавиатуры.</dd>
</dl>
<h3 id="Дополнительные_ресурсы_по_ARIA">Дополнительные ресурсы по ARIA</h3>
<dl>
<dt><a href="/en-US/docs/Accessibility/ARIA/widgets/overview">Виджеты. Техники, руководства, примеры.</a></dt>
<dd>Нужен слайдер, меню или другой виджет? здесь вы можете найти все, что нужно</dd>
<dt><a class="external" href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" title="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">JavaScript UI библиотеки со встроенной поддержкой ARIA.</a></dt>
<dd>Если вы начинаете новый проект, то вам стоит обратить внимание на UI библиотеки, имеющие встроенную поддержку ARIA. Внимание: статья 2009 года — то, что она описывает, стоит вынести в отдельную статью на MDN, которая будет поддерживаться в актуальном состоянии.</dd>
</dl>
</div>
<div class="section">
<h3 id="Список_рассылки.">Список рассылки.</h3>
<dl>
<dt><a class="link-https" href="https://groups.google.com/forum/#!forum/free-aria">Открытая Google Group, посвящённая ARIA</a></dt>
<dd>Здесь можно задать вопрос об ARIA, а также предложить улучшение существующей документации, которая находится там же.</dd>
</dl>
<h3 id="Блоги">Блоги</h3>
<p>Хотя информация в блогах быстро теряет актуальность, все же в них можно почерпнуть ценную информацию из первых рук - разработчиков, развивающих ARIA.</p>
<p><a class="external" href="https://www.paciellogroup.com/blog/archive/">Paciello Group</a></p>
<p><a class="external" href="http://www.accessibleculture.org/tag/wai-aria/">Accessible Culture</a></p>
<h3 id="Обнаружение_багов.">Обнаружение багов.</h3>
<p><a href="/en/Accessibility/ARIA/How_to_file_ARIA-related_bugs" title="https://developer.mozilla.org/en/ARIA/How_to_file_ARIA-related_bugs">Сообщайте об ошибках ARIA в браузерах, экранных читалках и библиотеках JavaScript.</a></p>
<h3 id="Примеры">Примеры</h3>
<dl>
<dt><a class="external" href="/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases">ARIA. Библиотека примеров.</a></dt>
<dd>Набор примеров по которым можно многому научиться.</dd>
<dt>Различные демки библиотек с доступными JS виджетами.</dt>
<dd><a class="external" href="http://hanshillen.github.com/jqtest/">jQuery</a>, <a class="external" href="http://yuilibrary.com/gallery/">YUI</a></dd>
<dt><a class="external" href="http://mail.yahoo.com">Yahoo! Mail</a></dt>
<dd>Детище Yahoo! - Yahoo! Mail, веб-приложение, выглядящее практически как нативное и вполне доступное. После <a class="external" href="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/">обзора Yahoo! Mail</a> с использованием экранной читалки Marco Zehe сказал: "Хорошая работа, не сбавляйте обороты!".</dd>
<dt><a class="external" href="http://search.yahoo.com">Yahoo! Search</a></dt>
<dd>Yahoo! проделали невероятную работу по продвижению ARIA в своём поисковике, используя все возможности и <a class="external" href="http://ycorpblog.com/2011/03/23/searchdirect/">делясь своим опытом</a>. Yahoo! Search использует одновременно ARIA landmarks, live regions, и widgets.</dd>
</dl>
<h3 id="Стандартизация.">Стандартизация.</h3>
<dl>
<dt><a class="external" href="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA Activities Overview at W3C</a></dt>
<dd>Authoritative Overview of WAI-ARIA Standardization efforts by the Web Accessibility Initiative (WAI)</dd>
<dt><a class="external" href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Specification</a></dt>
<dd>The W3C specification itself, useful as a reference. Note that, at this stage, it is important to test compatibility, as implementations are still inconsistent.</dd>
<dt><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/">WAI-ARIA Authoring Practices</a></dt>
<dd>
<p>Like the W3C WAI-ARIA specification, the official best practices represents a future ideal — a day when authors can rely on consistent ARIA support across browsers and screen readers. The W3C documents provide an in-depth view of ARIA.</p>
<p>For now, web developers implementing ARIA should maximize compatibility. Use best practices docs and examples based on current implementations.</p>
</dd>
<dt><a class="external" href="http://www.openajax.org/member/wiki/Accessibility">Open AJAX Accessibility Task Force</a></dt>
<dd>The Open AJAX effort centers around developing tools, sample files, and automated tests for ARIA.</dd>
<dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="ARIA Techniques">Under Construction: WCAG 2.0 ARIA Techniques</a></dt>
<dd>The community needs a complete set of WCAG techniques for WAI-ARIA + HTML, so that organizations can be comfortable claiming their ARIA-enabled content is WCAG compliant. This is important when regulations or policies are based on WCAG.</dd>
</dl>
</div>
</div>
<h3 id="Related_Topics" name="Related_Topics">Related Topics</h3>
<p><a href="/en-US/docs/Accessibility">Accessibility</a>, <a href="/en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript">JavaScript</a></p>
|
