Основы WAI-ARIA

Захар Авсиевич, EffectiveSoft

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

Население с ограниченными возможностями

Инвалидность и здоровье

Нуждаются в ассистивных технологиях

Инвалидность и здоровье

Виды нарушений

Кому нужна доступность в вебе

ПОЛЬЗОВАТЕЛИ

инвестиции в будущее

Не иметь нарушений — это временно

How Better design could make mobile devices easier for seniors to use

закон

Доступность и закон

Евросоюз 🇪🇺

США 🇺🇸

ADA Compliance: количество исков

UsableNet Releases its 2019 ADA Web Accessibility and App Lawsuit Report

WCAG
The Web Content Accessibility Guidelines

The Difference Between WCAG A and WCAG AA Conformance? - Level Access

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

Tim Berners-Lee, директор W3C и создатель Всемирной паутины

Бернерс-Ли, Тим — Википедия

Семантика

article, section, nav, aside, h1, h2, h3, h4, h5, h6, header, footer, p, address, hr, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption, main, a, em, strong, small, cite, q, time, code, sub and sups, mark, picture, source, img, table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th, form, label, input, button, select, datalist, optgroup, option, textarea, progress, fieldset, legend, details, summary, dialog.

HTML: The Good Parts - Вадим Макеев

РОЛИ

Assistive Technology - Craig Hospital

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

Web-разработка.Вспомогательные технологии

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

Web-разработка.Вспомогательные технологии

Популярные скринридеры

Web-разработка.Вспомогательные технологии

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

Web-разработка.Вспомогательные технологии

ARIA
Accessible Rich Internet Applications

ARIA
набор специальных атрибутов, которые предоставляют средства описания ролей, состояний и свойств

HTML

DOM

AOM

Firefox

Chrome

Из чего состоит ARIA?

Роль
указание на то, какую функцию выполняет элемент.

Accessibility API и доступность

Роли

Имя
Название (описание) элемента 
                    <button>I'am button</button>
Состояние
это временная характеристика поведения элемента (в фокусе/вне фокуса) 
                    <input type="checkbox" checked>

Accessibility API и доступность

События
связаны с изменениями состояний объектов прямо сейчас (открыли навигацию)

Accessibility API и доступность

Информация о действиях
действия, которые пользователи могут совершать с объектами (перейти по ссылке)

Accessibility API и доступность

❗️ВНИМАНИЕ❗️

ARIA !== Semantics

Не делайте так

<header role="banner"></header>
<div role="button"></div>
<nav role="banner"></nav>
<header role="contentinfo"></header>
ПОЖАЛУЙСТА

Что умеет ARIA?

Менять (добавлять) роли

Хедер или кнопка?
<header role="button">
    Хедер или кнопка?
</header>

Менять (добавлять) состояния

<button aria-disabled="true">
    Кликабельна или нет?
</button>

Чекнут или нет?

<input type="checkbox"
       aria-checked="false"
       checked
>

Менять (добавлять) описание

<button aria-label="Закрыть меню">
    x
</button>

Показывать отношения между элементами

Описывает секцию

<section aria-labelledby="heading">
    <h3 id="heading">
        Описывает секцию
    </h3>
</section>

Показывать отношения между элементами

Контролируется кнопкой 
<button aria-controls="section">
    Контролирует секцию
</button>
<section id="section"
aria-expanded="true">
    Контролируется кнопкой
</section>

Скрывать элементы из дерева доступности

<i class="fab fa-accessible-icon" 
   aria-hidden="true">
</i>
        
            <div class="checkbox"></div>
        
            
<div
  class="checkbox"
  role="checkbox">
</div>
            
        
            
<div
  class="checkbox"
  role="checkbox"
  tabindex="0">
</div>
            
        
            
<div
  class="checkbox"
  role="checkbox"
  tabindex="0"
  aria-label="Включить уведомления">
</div>
            
        
            
<div
  class="checkbox"
  role="checkbox"
  tabindex="0"
  aria-label="Включить уведомления"
  aria-checked="false">
</div>

Для табов

role="tab"
id="tab-id"
aria-controls="item-id"
aria-selected="true/false"

Для панелей

role="tabpanel"
id="item-id"
aria-labelledby="btn-id"

Спасибо!

@ZAVSIEVICH

Ссылки

Основы WAI-ARIA