Html - доступная обработка ошибок с wai-aria - лучшая практика?

Creating an external style sheet

An HTML page does not have to be limited to just one style sheet, and many large websites will break-up their styles into separate pages, making them easier to organize and maintain. You can even use style sheets for specific functions such as printing a page or for displaying a site on mobile devices. Specific style sheets can even be used to make sites compatible with older web browsers when they are used to visit sites you create.

In this exercise, you will create a new external style sheet, move the style rules from your current document to the external style sheet, and then attach the style sheet to a new HTML page.

1 Choose File > New Text Document.

The text editor you are using may have a different menu command. You may need to choose the equivalent command. For example, many editors will allow you to choose File > New CSS document.

2 Choose File > Save. Name the document styles.css and save the file into the HTML5_02lessons folder. An external cascading style sheet has a specific .css file extension, but it is simply a text file.

3 Switch to the HTML document from the last exercise, but keep the style sheet open as well.

4 In the HTML document, locate the rules you created within the <style> tags, and then select them. Do not select the style tags themselves, just the rules that start with h1 and end with the closing bracket }.

Select just the style rules, not the <style> tag.

5 Choose Edit > Cut, then switch to the styles.css file and choose Edit > Paste to paste the rules into the external style sheet document. Choose File > Save to save your style sheet.

The entire external style sheet acts as a substitute for the <style> tags in the HTML document. Now that you have moved the rules to this document, you need to link it to your HTML page so that a web browser knows where to find the style rules that apply to the HTML.

6 Switch back to the index.html page and choose File > Save. You will add the <link> tag, pointing to the styles.css document. If you do not link to the external styles, the HTML page will have no styles.

7 Place your cursor after the closing style tag </ style> then press return to start a new line. Now type the following:

You have added the rel, type, and href attributes. You may recall the href attribute from when you added the hyperlink in an earlier exercise. In order for your external style sheet to work properly, the name of the file, and the path to the file must both be accurate.

8 Choose File > Save and then preview the HTML page in your browser. The page should not change, as the same style is being used; it is simply being applied from outside the document.

9 Close the browser and return to your text editor. You’ll now create a new HTML document, and add the same link to the external CSS file, seeing how the rules are applied.

10 Choose File > Open and locate the file test.html in the HTML5_02lessons folder. This is an empty HTML document.

11 Continuing to work in your text editor, switch back to the index.html file and select the entire <link> element you typed in step 7:

and then choose Edit > Copy.

12 Switch back to the test.html document, and then click below the <title> element and Choose Edit > Paste to place the <link> element, then save the the file by choosing File > Save.

Attaching an external style sheet using the <link> element.

The external style sheet is now attached to this HTML document. Any HTML tags you add to this new document will be styled if there is a corresponding rule in the CSS file. For example, the <h1> tag has a style of the color purple.

13 Click inside the <body> element and type:

<h1>The Benefits of Smoothies </h1>

Save the file and preview it in your web browser.

The <h1> tag gets its style from the external CSS style sheet you created.

The heading is purple because the style rule for the <h1> element is color:purple and because this rule is located in an external sheet and linked in two places: the index.html and test.html pages. Because of this, you can control the style of both HTML documents from a central location.

Styling a heading

To get a sense of how CSS works, you’ll create a simple CSS rule that changes the style of a heading in your page. In your index.html page, you already have the content “SmoothieWorld” nested inside an <h1> tag. Perhaps one of the best ways to begin thinking about how CSS works is to consider how the default style of this heading is rendered in the browser.

1 Examine the heading of the file you previewed in the last step of the previous exercise. The style and formatting instructions are being provided by the browser. The size, color, and font are provided by the browser because exact formatting instructions are not specified. The browser only knows that this is a headline. You will redefine this style with a CSS rule.

2 In your code, locate the <title> tag on line 5, click once at the end of the line following the closing tag, then press return to add a new line of code. Type the following:

3 Press Return three times and then type </style>. This is a style element which you will use to place your rule for the style of the <h1> element.

The <style> element is nested within the head section of the page, and is where the CSS rules will be placed.

The <style> element is nested within the <head> tags of your page. In HTML, everything nested inside the <head> section is not rendered by the browser on the page. For example, there is also a <title> element inside this section; this title appears at the top of the web browser, not on the actual page.

4 In the empty line below the opening <style> tag, type the following:

h1 {

This is your selector. The selector is the HTML element you want to style, in this case, the Heading 1 element.

5 Press Return and then press Tab to place your cursor below the curly bracket. The tab is optional, but it helps make your CSS more readable. As you will soon see, the number of lines in this rule will grow and it’s worthwhile keeping the code easy to read.

6 Type the following code below the h1 {:

color:purple;

The word color is referred to as a property in CSS syntax and the word purple is a value. The combined pair of a property and a value is called a declaration.

The combination of the property (color) and the value (purple) is often referred to as style rule.

7 Press Return again and on the next line, type } which is the right curly bracket character.

This closes the curly bracket you added in step 4.

You now have three lines in this rule:

h1 {

color:purple;

}

8 Choose File > Save, and then preview your page in the browser. The head is now a light purple color and you have successfully created your first CSS rule. Close your browser and return to your text editor.

Your H1 color is now being styled by a CSS rule.

9 In the HTML file, select the word purple and type the following for the color value: #800080. This hexadecimal color is the equivalent of purple. You can use either named colors or hexadecimal colors when defining colors using CSS.

Save your file and then preview it in the browser. The color remains the same. Hexadecimal colors are a more common method for describing colors.

Is there any confusion on how/if/when to use ARIA in the developer community?

Yes! There’s some confusion and even controversy around the use of ARIA for several reasons. Several of them include:

Adding to a link, expecting it to work as a button

This issue comes down to how AT uses a button versus how they use a link. A link can be activated by an AT user by pressing Enter/Return, while a button can be activated when they press the Spacebar. If you add a link with , the AT is going to detect it as a button. However, the user can become confused when they try to press the Spacebar with no result. This is why it’s best to keep links as links, and buttons as buttons.

Keep in mind that which element you use is a structural decision, not a decorative one. You should use a button instead of a link when:

The link is empty or has no href attribute:
The link has scripting attached using an onclick attribute: or similar event listeners

Adding redundant ARIA landmark roles to HTML5 elements

I’ve seen several sites where with good intentions, they’ve added ARIA attributes to HTML5 elements. The issue is that those HTML elements already have the landmark role built into them, so adding them becomes redundant. Here’s a list of HTML5 elements and their paired HTML4 landmark roles.

HTML4 Landmark Role	HTML5 Element
role=”banner”	<header>
role=”complementary”	<aside>
role=”contentinfo”	<footer>
role=”form”	<form>
role=”main”	<main>
role=”navigation”	<nav>
role=”region”	<section>

Using aria-controls attribute, which isn’t widely supported

There’s a lot of confusion in the accessibility world as to which screen readers support aria-controls. A couple of great articles on the subject can be found at “Aria-controls is Poop” by Heydon Pickering aka @heydonworks, and “Using the aria-controls attribute” by Leonie Watson aka @LeonieWatson. After a lot of research, I became even more confused on the subject myself, so I then sent out a tweet to the top search engine companies as well as the authors of the two blogs mentioned to see if I could get more clarification. You can check back on my Twitter post to see its progress, in addition to visiting any one of these Twitter accounts of the main screen reader companies:

Freedom Scientific (JAWS):
Apple Support (VoiceOver):
NV Access (NVDA):
Microsoft Accessibility (Narrator):
GNOME (Orca):

Some say “never use ARIA!”

It’s understandable that some feel this way, mostly because of the overuse of ARIA. However, according to the Paciello Group’s own , there are several ARIA roles and properties that are not available in HTML5, but are needed to make the web easier to navigate and use for users of AT. It’s all about sticking with native controls whenever possible, and using ARIA as a last resort when an element cannot be made accessible otherwise. It’s a balancing act.

General confusion on using HTML5 + WAI-ARIA

This is one of the biggest areas of confusion for developers, and it relates to the First Rule of ARIA Use: “use native HTML at all times unless it’s absolutely, positively impossible to make an element accessible otherwise.” An example would be HTML5 required vs. WAI-ARIA aria-required. Luckily, there is now a W3C HTML Accessibility Task Force that is addressing these issues as we speak.

Aria-live

Этот атрибут используется для определения важности изменений, которые произошли с элементами. То есть значения данного атрибута отражают то, насколько срочно и быстро вспомогательным технологиям нужно сообщить пользователям об этих изменениях

У атрибута есть три значения: , и

То есть значения данного атрибута отражают то, насколько срочно и быстро вспомогательным технологиям нужно сообщить пользователям об этих изменениях. У атрибута есть три значения: , и .

(значение по умолчанию) — указывает на низший приоритет, поэтому такие изменения не объявляются. Это поведение встроено в элементы с и . Его можно задавать тем областям, которые не важны, или слишком быстро изменяются.
— обозначает низкий уровень приоритета. Используется в случаях, когда в области происходят изменения, которые вспомогательным технологиям не нужно объявлять моментально. Скринридеры делают перед таким объявлением паузу, не прерывают текущие задачи и ждут, пока пользователь перестанет взаимодействовать с интерфейсом. Так себя ведут элементы с и . Подходит для оповещений о новых сообщениях, лайках, автосохранении и тому подобном.
— указывает на наивысший уровень приоритета. О таких изменениях будет объявлено сразу же, а изменения с более низким приоритетом встанут в очередь и будут объявлены позже. Так себя ведут элементы с , так что этот атрибут можно использовать для сообщений о важных изменениях, например, о серверной ошибке или о том, что данные не сохранились. Спецификация не рекомендует использовать это значение, когда нет необходимости сразу же сообщать пользователям об изменениях.

Приведу пару простых примеров использования и .

В этом примере с при нажатии на кнопку с помощью скрипта меняется название блюда в параграфе.

<p aria-live="polite">Моё любимое блюдо   <span id="food">лютефиск</span>.</p><button type="button">Следующее блюдо</button>

Скринридер сделает перед объявлением паузу.

А здесь у нас есть форма с несколькими настройками и кнопкой сохранения. Если изменения не сохранились, то должно появляться сообщение об этом. Зададим ему :

<form>  <p>     <label for="devil-fruit">Любимый дьявольский фрукт</label>    <input type="text" id="devil-fruit">  </p>  …  <button type="submit">Сохранить настройки</button></form><div class="alert-window" role="alert" aria-live="assertive">  Ваши настройки не сохранились,  попробуйте ещё раз, йо-хо-хо!</div>

Здесь скринридер сделает объявление немедленно.

В стандарте WAI-ARIA также указано, что в некоторых случаях вспомогательные технологии могут переопределять значения атрибута и объявлять о каких-то изменениях моментально.

Не только роли

Спецификация ARIA в HTML также затрагивает использование определенных ARIA-атрибутов, у которых есть соответствующие эквиваленты в HTML. Среди разработчиков распространено заблуждение, что атрибуты ARIA имеют более высокий приоритет, по сравнению с собственными атрибутами HTML. Хотя это справедливо в отношении ролей элементов, в остальных случаях атрибуты HTML имеют более высокий приоритет по сравнению с ARIA.

Рассмотрим фрагмент:

<button disabled aria-disabled=false>...</button>

Хотя деактивированный ARIA-атрибут должен указывать на то, что элемент <button> находится во включенном состоянии, на самом деле у этого атрибута есть неявная функциональность, которая удаляет кнопку из порядка фокусировки веб-страницы. Таким образом, кнопка становится недоступной для указывающих устройств (мыши, тачпада), а браузер игнорирует ее по умолчанию.

Что касается приведенного выше примера, и других атрибутов, определенных в спецификации, система проверки соответствия может демонстрировать предупреждения или ошибки, уведомляя разработчика о том, что в такой разметке нет необходимости, либо значения атрибутов вступают в конфликт и приводят к неверному функционированию элемента.

Log

Тип интерактивной области, в которой содержатся логи. Например, история сообщений из чатов, список ошибок и тому подобное

Для логов имеет важное значение последовательность, в которой появляется новая информация. Вспомните журнал событий в Windows. В этом примере показано обновление контента в чате

Когда пользователь вводит сообщение в текстовое поле, то оно добавляется в конец переписки

В этом примере показано обновление контента в чате. Когда пользователь вводит сообщение в текстовое поле, то оно добавляется в конец переписки.

<div role="log">  <h4>История сообщений</h4>  <ul>    <li>        Одолжишь своего вельш-корги-кардиганадо понедельника? Очень нужно.    </li>  </ul></div>

Теперь скринридер объявляет о новых комментариях после того, как пользователь перестал набирать или отправлять сообщение.

на всякий случай лучше сочетать с атрибутом :

<div role="log" aria-live="polite">  <h4>История сообщений</h4>  <ul>    <li>        Одолжишь своего вельш-корги-кардиганадо понедельника? Очень нужно.    </li>    <li>Тебя снова взломали?</li>  </ul></div>

В этом случае все изменения будут наверняка объявляться с паузой и не прерывать другие более важные изменения.

Role Attribute Genericized Proposal

Possible non-text media relevant role keywords

Image/*
- decorative
- layout or spacer
- icon
- logo
- photo
- illustrative (indicates the image is merely an illustration of the surrounding text, adding no more meaning to the surrounding text)
- albumphoto (a photo presented along with a collection of photos as an album or slideshow, either presented entirely within the same document or a collection of related documents)
- portrait
- satelliteimage
- visualization (mathematic visualization like fractals, topological, etc)
- chart (including graphs such as: bar chart, line graph, pie chart, organizational chart, bar chart)
- diagram
- drawing
- geomap (a map of geography as opposed to a site map or other diagram)
- text (styled text: the equivalent semantic markup should be presented OBJECT element contents, though obviously not when using the plaintext only alt attribute)
- mathexpr (similar to richtext since few UAs support math XML vocabularies)
- musicscore (similar to richtext since few UAs support music XML vocabularies)
- livecam (for stills generated from a live webcam)
Audio/*
- musicaccomp
- spokenequivalent
Other mime types
- interactive (for interactive multipmedia, e.g., an applet or flash based game)
- camera (like photo for video to distinguish camera originated video from digitally generated video)
- livecam (also for video stream as opposed to stills)

Each role keyword might correspond to different specific advice for alt text for a resource, allowing authors a simplified two-step process to providing text equivalents For example, some role keywords might require no alt text or text equivalent whatsoever. While on the other hand, something like role=’portrait’ might specify a list of the names of the individuals in the portrait from left to right (for ltr text): e.g., alt=’Mona Lisa»).

Relation to alt text replacement

The following table shows the relation of the alt text to the role keyword. Authors must include at least one of the following keywords on the element for each embedded resource. In some cases a null value for the alt text can be automatically inferred by UAs from the author designated role and conformance checkers can alert authors when the role and alt attributes are inconsistently specified. Conformance checkers can also provide focussed guidance to authors based on the role attribute keywords. The role attribute must always be specified, while the alt attribute might sometimes be null (note the various required, recommended and optional categories for alt text are only suggested as one possible approach the role attribute makes possible; these could all be required for strictness).

keyword	description	alt text requirement
decorative		null
layout or spacer		single space (U+0020)
icon		non-null text signifying what the icon represents
logo		non-null text signifying what the logo represents
illustrative	indicates the image is merely an illustration of the surrounding text, adding no more meaning to the surrounding text	null
photo		description
albumphoto	a photo presented along with a collection of photos as an album or slideshow, either presented entirely within the same document or a collection of related documents	description
portrait		names of persons portrayed
chart	including graphs such as bar chart, line graph, pie chart, organizational chart, bar chart	WCAG alt text replacement
diagram		WCAG alt text replacement
geomap	a map of geography as opposed to a site map or other diagram	WCAG alt text replacement
text	styled text	WCAG alt text replacement
mathexpr	similar to richtext since few UAs support math XML vocabularies	WCAG alt text replacment
musicscore	similar to richtext since few UAs support music XML vocabularies	WCAG alt text replacement
livecam	for stills generated from a live webcam	subject of livecam
musicaccomp	a musical accompaniment to a document	description
spokenequivalent	audio provided as a spoken equivalent for the document or a portion of the document	null
interactive	for interactive multipmedia, e.g., an applet or flash based game	WCAG alt text replacement
camera	like photo for video to distinguish camera originated video from digitally generated video	WCAG alt text replacement
livecam	also for video stream as opposed to stills	subject of livecam

Как изменять файловые атрибуты с помощью attrib.exe?

Атрибуты можно устанавливать (+) или снимать (-). Чтобы атрибуты увидеть, нам придётся кликнуть по папке правой мышкой и выбрать Свойства.

Кое-что о файле мы уже можем сказать. В последних операционных системах представленные на фото характеристики присваиваются каждой папке по умолчанию. Для дальнейшей или более полной работы с атрибутами можно щёлкнуть по кнопке Другие…

Если вы желаете познакомиться с синтаксисом команд, можно набрать в консоли команд (cmd с правами админа) команду attrib /? и после нажатия клавиши ввода присмотритесь к экрану:

Вы увидите описанные выше мною команды по работе с атрибутами и последовательное написание синтаксиса для изменения атрибутов. Тоже самое можно проделывать прямо из-под проводника windows. Но мы же не ищем лёгких путей?

Зачем, спросите вы?

Для работы с известной только вам скрытой папкой не нужно будет постоянно проделывать путь к настройкам в свойствах файлов и папок. Оставьте скрытыми папки , файлы и их расширения. Но с помощью синтаксиса, описанного ниже, и которого легко запомнить, у вас будут свои маленькие секреты, появляющиеся ниоткуда как по волшебству. Дальше — больше. Вы уверены, что никто из использующих этот же компьютер или ноутбук не пользуется преимуществом изменения атрибутов? Узнайте секреты коллег или домочадцев с помощью той же команды. Об этом — ниже.

Кто заинтригован, читаем дальше.

Давайте потренируемся…

Давайте спрячем папку. Создайте новую папку на Рабочем столе и для облегчения задачи присвойте новое имя покороче, например, 1.

Щёлкните Свойства и в окне выберите Скрытый — Применить. Если у вас в параметрах папок не выставлена функция отображения скрытых папок, значок папки немедленно исчезнет. Если функция активирована — ярлык папки станет прозрачным.

Отключение проверки

В некоторых случаях может потребоваться отключить проверку. Например, вы хотите протестировать свой серверный код на правильность обработки поступивших некорректных данных. Чтобы отключить проверку для всей формы, в элемент <form> добавляется атрибут novalidate:

Другой подход — это отключить проверку в кнопке для отправки формы. Такой способ иногда полезен в настоящей веб-странице. Например, вместо отправки, может быть, требуется сохранить наполовину заполненную форму для дальнейшего использования. Чтобы получить такую возможность, в элемент <input> соответствующей кнопки вставляется атрибут formnovalidate:

Обнаружение незаполненных полей — это только один из нескольких типов проверки. Позже мы рассмотрим обнаружение ошибок в данных разных типов.

Понимание ARIA

Вещи могут получить очень сложным с ARIA, и это легко получить перегружены. Но основы его довольно легко сломать. Как только вы поймете эти, изучение более продвинутых концепций будет оснастки.

Разметка ARIA состоит из трех атрибутов: роли, состояния и свойства.

Ария Роли

Роли определяют элементы на странице, такие как кнопки и флажки. Они помогают читателям экрана рассказать, какие части страницы делают, и у них есть четыре различных подкатегории: ориентир, документ, виджет и абстрактные роли.

Ориентир роли – Разделите сайт на различные разделы, как основной контент, навигация, и дополнительные области. Это может помочь посетителям получить их подшипников и легче найти то, что они ищут на странице.
Роли документов — Опишите определенные разделы на странице, такие как статьи, документы, списки и строки.
Роли виджетов – Определите элементы и интерфейсы. Вкладки, текстовые ящики, оповещения и кнопки — вот некоторые элементы, которые может описать ARIA. Когда HTML не определяет эти элементы, или вы используете виджет из множества различных частей, роли виджетов могут помочь.
Абстрактные роли – Они используются браузером. Вам не нужно беспокоиться о них.

Государства и свойства

Государства и свойства работают одинаково друг с другом. Свойства, которые когда-то устанавливались, редко меняются, так как они описывают только отношения с другими элементами. Государства являются динамичными и могут меняться самостоятельно или при взаимодействии с пользователем.

Примером состояния является , который говорит читателю экрана, что элемент обновляется. Другой , который указывает на то, что кнопка была нажата. Это элементы, которые могут активно меняться.

С другой стороны, свойства включают атрибуты, подобные тому, который устанавливает максимальное число в селекторе диапазона, или указывает на то, что элемент вызовет всплывающее окно. Они вряд ли будут обновляться.

И это основы ARIA. Гораздо проще, как только он сломался, не так ли? Но вы будете удивлены, как много вы можете сделать с ним.

Log

Для логов имеет важное значение последовательность, в которой появляется новая информация. Вспомните журнал событий в Windows

<div role="log">  <h4>История сообщений</h4>  <ul>    <li>        Одолжишь своего вельш-корги-кардиганадо понедельника? Очень нужно.    </li>  </ul></div>

на всякий случай лучше сочетать с атрибутом :

<div role="log" aria-live="polite">  <h4>История сообщений</h4>  <ul>    <li>        Одолжишь своего вельш-корги-кардиганадо понедельника? Очень нужно.    </li>    <li>Тебя снова взломали?</li>  </ul></div>

Инструменты для разработки и тестирования¶

Далее перечислены инструменты, которые могут быть полезны при разработке веб-приложений с доступным контентом.

Тестирование клавиатуры

Самый простой и одновременно наиболее важный вид проверки — это тестирование клавиатуры. Такая проверка позволяет определить доступность контента на вашем сайте при работе только с клавиатурой. Чтобы протестировать клавиатуру, выполните следующие действия:

Отключите мышь.
Используйте и для перемещения по странице.
Используйте для активации элементов.
Там, где необходимо, используйте клавиши со стрелками, например, для работы с меню или выпадающими списками.

Инструменты разработчика

Выполнение некоторых требований по доступности контента можно контролировать непосредственно в JSX. Обычно среда разработки обладает средствами автоматической подстановки, которые могут использоваться при написании JSX для выбора ролей, состояний и свойств ARIA. Кроме этого можно воспользоваться следующими инструментами:

eslint-plugin-jsx-a11y

Плагин eslint-plugin-jsx-a11y для ESLint выполняет проверку абстрактного синтаксического дерева JSX на предмет поиска проблем, связанных с доступностью контента. Многие среды разработки могут интегрироваться с этим инструментом и выводить сообщения линтера в окно анализа кода или прямо в окно исходного кода.

В Create React App этот плагин используется с заранее установленным набором правил. Если необходимо задействовать дополнительные правила, вам нужно создать в корне проекта файл со следующим кодом:

Тестирование доступности контента в браузере

Существуют инструменты для аудита доступности контента веб-страниц в браузере. Используйте их совместно с теми инструментами для проверки HTML, которые были описаны выше.

aXe, aXe-core и react-axe

Компания Deque Systems предлагает модуль aXe-core для автоматизированного и сквозного тестирования веб-приложений. Этот модуль имеет интеграцию с Selenium.

На основе разработан продукт компании Deque Systems под названием The Accessibility Engine или aXe. Это расширение для браузеров, предназначенное для комплексного тестирования доступности контента сайтов.

Также вы можете использовать модуль react-axe для вывода сообщений от aXe в консоль в процессе программирования или отладки.

WebAIM WAVE

Web Accessibility Evaluation Tool ещё одно расширение для браузера, которое используется для улучшения доступности контента веб-сайтов.

Инспекторы доступности контента и дерево доступности

Дерево доступности — это подмножество DOM-дерева. В нём содержатся объекты, которые нужны для работы технологий поддержки доступности контента, например, для экранных считывающих устройств.

В некоторых браузерах можно легко получить информацию обо всех элементах в дереве доступности:

использование инспектора доступности в Firefox
активация инспектора доступности в Chrome
использование инспектора доступности в OS X Safari

Экранные считывающие устройства

Проверка работы экранных считывающих устройств должна быть частью комплексного тестирования доступности контента.

Учтите, что сочетание браузера и экранного считывающего устройства имеет большое значение. Рекомендуется протестировать ваше приложение в том браузере, который лучше всего подходит для избранного вами экранного считывателя.

Общедоступные экранные считыватели

NVDA в Firefox

NonVisual Desktop Access или NVDA — это широко распространённый экранный считыватель с открытым исходным кодом для Windows.

Вот несколько руководств по работе с NVDA:

WebAIM — использование NVDA для улучшения доступности контента
Deque — сочетания клавиш для NVDA

VoiceOver в Safari

VoiceOver — это экранный считыватель, встроенный в продукты Apple.

Здесь приведены руководства по активации и использованию VoiceOver:

WebAIM — использование VoiceOver для улучшения доступности контента
Deque — сочетания клавиш для VoiceOver в OS X
Deque — комбинации жестов для VoiceOver в iOS

JAWS в Internet Explorer

Job Access With Speech or JAWS — это экранный считыватель, который чаще всего используется в Windows.

Руководства по JAWS:

WebAIM — использование JAWS для улучшения доступности контента
Deque — сочетания клавиш для JAWS

Прочие экранные считыватели

ChromeVox в Google Chrome

ChromeVox — это встроенный экранный считыватель для ноутбуков Chromebook. Он доступен для Google Chrome в виде расширения.

Ссылки на руководства по ChromeVox:

Google Chromebook — как использовать встроенную программу чтения с экрана
Сочетания клавиш для ChromeVox

Документы

В Инициатива веб-доступности опубликовал обзор WAI-ARIA, который знакомит с предметом и направляет читателей к документам WAI-ARIA Suite:

Доступные полнофункциональные интернет-приложения (WAI-ARIA) Версия 1.0: Это в первую очередь нацелено на разработчиков Веб-браузеры, вспомогательные технологии, и другие пользовательские агенты, помимо разработчиков других технические характеристики, а также разработчики инструментов оценки доступности. WAI-ARIA был отмечен как завершенный 20 марта 2014 г. и поэтому Рекомендация W3C.
Обзор WAI-ARIA: Это техническое введение в WAI-ARIA. В нем описываются проблемы, которые пытается решить WAI-ARIA, лежащие в основе концепции, технический подход и бизнес-причины для принятия WAI-ARIA.
Лучшие практики WAI-ARIA: В этом документе описываются передовые методы доставки полнофункциональных интернет-приложений с помощью WAI-ARIA: в нем обсуждаются такие темы, как общие шаги по созданию доступных виджеты, навигация с клавиатуры, отношения, форма характеристики, перетаскивание поддерживать, тревога и диалоговые окна, многоразовый компонент библиотеки и тестирование.
Дорожная карта для доступных полнофункциональных Интернет-приложений (Дорожная карта WAI-ARIA): Большая часть содержания этого документа была перенесена в другие документы.

В редакторы спецификаций ARIA включены Лиза Симан, Рич Швердтфегер, Джеймс Крейг, Майкл Купер, и Лиза Паппас.

Роли ARIA

Роли ARIA добавляются в разметку HTML как атрибуты. Они определяют тип элемента и указывают цель, которой он служит. В следующем примере элемент идентифицируется как баннер:

Еще один пример: здесь роль сообщает сведения о том, что элемент содержит информацию о содержимом страницы.

Оповещение будет выглядеть так:

role=”alert” полноценно работает с элементами, динамически добавляемыми в DOM или при смене отображения, например, с to

Следующая роль одна из моих любимых, ее я использую, когда элемент используется чисто декоративно. Если вы представите человека со скринридером, подумайте об элементах, содержимое которых нет смысла зачитывать. Это могут быть декоративные элементы или пустые элементы, используемые для фона.

Элементы span (как и div) в большинстве случаев не нуждаются в указании role=”presentation”, так как не являются объектами в дереве доступности браузера (accessibility tree). Но для семантических элементов типа — это имеет смысл.

Хорошая разметка означает хорошие деревья

Семантическая разметка эта такая разметка в которой максимально используются элементы HTML, которые лучше всего отражают желаемое поведение. Например, если вы хотите, чтобы элемент, при нажатии отправлял бы форму или выполнял какое-либо действие на странице, обычно лучше использовать тег . Когда мы пишем семантический HTML, браузеру гораздо проще выбирать нужные объекты. Кроме того, браузер может сделать грязную работу, чтобы убедиться, что объекты имеют все необходимые свойства, без каких-либо дополнительных усилий с нашей стороны.

Тем не менее, возможности семантики не без граничны. Иногда нам нужны новые, , которые семантические элементы просто еще не поддерживают, такие как:

Сообщения, которые могут быть изменены, включая сообщения об ошибках
Вкладки, списки и панели вкладок
Tooltips
Switches

Что делать в этих случаях? По-прежнему важно спроектировать весь функционал так, чтобы вспомогательные программы могли все это понять. Во-первых, мы должны реализовать как можно больше с помощью семантической разметки

Затем мы используем атрибуты ARIA, чтобы настроить/подкорректировать дерево доступности.

ARIA не изменяет DOM и не добавляет новую функциональность к элементам. Она никак не изменит поведение элементов. ARIA исключительно управляет представлением элементов в дереве доступности. Другими словами, ARIA используется для изменения роли, имени, состояния и свойств элемента для вспомогательных технологий.

Это прекрасно в теории, но как это работает на практике?