Людоедский интерфейс

Все интерактивные элементы, при нажатии или фокусе с клавиатуры, имеют активное состояние.
Все интерактивные элементы имеют текстовое описание.

DX

UX

Людоедский?

Недоступный

Сломана мышка, маленький экран, медленная сеть.
Мелкий текст и заблокироваанный вьюпорт.
Скрипты вместо ссылок.
Поля блокируют вставку или автозаполнение.
Яркое солнце, плохой контраст цветов.
Неправильный размер или поворот экрана.
Физиологические сложности.

Иконка доступности: человек расставил руки в голубом круге.

Контроль

Семантика

Парень и девушка сравнивают знание HTML-тегов: она знает много, он — только div.

Диватоз

			<div class="floor floor--bigleft-aside">
			    <div class="floor__bigleft floor__bigleft--smaller">
			        <div class="project__ladel">Ресторан</div>
			        <div class="project__description">Запустили сайт
			        <div class="project__footer">
			            <div class="project__tag">Вёрстка</div>
			            <div class="project__tag">Разработка</div>

Диватоз

        	                                        
                                                                    
                                                Ресторан            
                                                      Запустили сайт
                                                 
                                                  Вёрстка            
                                                  Разработка

Диватоз

        	                                        
                                                                    
                                            <h2>Ресторан</h2>       
                                                   <p>Запустили сайт</p>
                                          <ul>   
                                              <li>Вёрстка</li>       
                                              <li>Разработка</li>

Зачем списки?

			<nav>
			    <ul>
			        <li><a href="">Главная</a></li>
			        <li><a href="">Проекты</a></li>
			        <li><a href="">Контакты</a></li>
			    </ul>
			</nav>

Навигация,
Список, первый из трёх.
Ссылка, главная.

Зачем списки?

			<div class="menu">
			    <a href="">Главная</a>
			    <a href="">Проекта</a>
			    <a href="">Контакты</a>
			</div>

Ссылка,
главная.

Ориентиры

			<header>Логотип</header>
			<nav>Ссылки</nav>
			<main>
			    <h1>Заголовок</h1>
			    <p>Полезное</p>
			</main>
			<footer>Информация</footer>

Заголовки

			<h1>Название компании</h1>
			    <section>
			        <h2>Услуги</h2>
			        <article>
			            <h3>Дизайн</h3>
			        <article>
			            <h3>Разработка</h3>

Название компании
- Услуги
  1. Дизайн
  2. Разработка

Интерактивные

Ссылка

Это <button>
Если нет, то <a href="…">
Всё.

Фокус

Главная AliExpress с фокусом на интерактивных элементах.

			:focus {
			    outline: 0;
			}

Tab

Shift Tab

Как попасть в порядок

tabindex управляет фокусом.
tabindex="0" добавляет в порядок.
tabindex="-1" делает интерактивным.
tabindex больше 0 проблемный.

API кнопки?

Кнопка

			<button class="button">Кнопка</button>
			<div class="button">Кнопка</div>
			<button class="button">Кнопка</button>
			<div class="button">Кнопка</div>

Кнопка

:Focus

			.button:focus {
			    box-shadow:
			        0 0 0 3px #ffffff,
			        0 0 0 6px #2f7cc0;
			    outline: none;
			}

Active

			.button:active {
			    border-color: #4777a6;
			    background: #4e87c0;
			    color: #ffffff;
			}

Tabindex

			<button class="button">Кнопка</button>
			<div tabindex="0" class="button">Кнопка</div>
			<button class="button">Кнопка</button>
			<div tabindex="0" class="button">Кнопка</div>

Кнопка

Скрипт

			var buttons = document.querySelectorAll('.button');
			 
			for(var i = 0; i < buttons.length; i++) {
			    buttons[i].addEventListener('click', function() {
			        this.disabled = true;
			    });
			}

Кнопка

Disabled

			.button:disabled {
			    background: linear-gradient(
			        #cccccc,
			        #fefefe
			    );
			    color: #aaaaaa;
			}

Лейблы

Содержимое элемента: <a href>Главная</a>
Заголовок группы: <legend>Адрес</legend>
Связанный элемент: <label for="input">Имя</label>
Спрятанный лейбл: <span class="visually-hidden">
Добавленный лейбл: <nav aria-label="Содержимое">

► звучит как чёрный треугольник, направленный вправо,
× звучит как умножить, х как ха, как хлопок одной ладонью.

Legend

			<input type="radio" name="color" id="white" checked>
			<label for="white">Чёрный</label>
			<input type="radio" name="color" id="black">
			<label for="black">Белый</label>

Чёрный, выбран.
Радиокнопка.
Первая из двух.

Legend

			<fieldset>
			    <legend>Цвет холодильника</legend>
			    <input type="radio" name="color" id="white" checked>
			    <label for="white">Чёрный</label>
			    <input type="radio" name="color" id="black">
			    <label for="black">Белый</label>
			</fieldset>

Цвет холодильника
чёрный, выбран.
Радиокнопка.
Первая из двух.

Цвет холодильника
белый, выбран.
Радиокнопка.
Вторая из двух.

Иконки

			<button>
			    <svg aria-label="Лайк!">
			        <use xlink:href="#like"></use>
			    </svg>
			</button>

Юникод

			<button aria-label="Меню">
			    ☰ Меню
			</button>
			<button>
			    <span aria-hidden="true">☰</span>
			    Меню
			</button>

А что если… нет заголовка?

			<main>
			    <h1 class="visually-hidden">
			        Заголовок
			    </h1>
			    <p>Полезное</p>
			</main>

Добавляйте и прячьте. Прятать такое не вредит SEO.

Визуально спрятано

			.visually-hidden {
			    position: absolute;
			    width: 1px;
			    height: 1px;
			    overflow: hidden;
			    clip: rect(0 0 0 0);
			}

Инструменты

VoiceOver
NVDA
JAWS

100% результат тестирования доступности.

			:focus {
			    outline: 0;
			}

			alt="picture-1"
			alt="picture-2"
			alt="picture-3"

axe-cli

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

Открыть флаги chrome://flags
Найти и включить Developer Tools Experiments
Открыть настройки отладчика в кебаб-меню
Включить в экспериментах Accessibility Inspection
Найти вкладку Accessibility при выбранном элементе.

Google Maps search field in accessibility inspector.

Это фича!

			<i onclick="site()">
			<a href="site">

			<div class="button">
			<button class="button">

Это баг.

Кнопки и ссылки
Таб и фокус
Заголовки
Текстовые лейблы

Читать дальше

Шоу Роба Додсона A11ycasts.
Блог Хейдона Пикеринга Inclusive Components.
Книга Хейдона Пикеринга Inclusive Design Patterns.
Документация Родни Рейма Hiding DOM Elements.

Людоедский интерфейс

DX

UX

Людоедский?

Недоступный

Недоступный

Контроль

Семантика

Диватоз

Диватоз

Диватоз

Зачем списки?

Зачем списки?

Ориентиры

Заголовки

Интерактивные

Фокус

Tab

Shift Tab

Как попасть в порядок

API кнопки?

Кнопка

:Focus

Active

Tabindex

Скрипт

Disabled

Лейблы

Лейблы

Legend

Legend

Иконки

Юникод

А что если… нет заголовка?

Визуально спрятано

Инструменты

axe-cli

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

Это фича!

Это баг.

Читать дальше

sokr.me/ihu

@pepelsbey

Shower

Вопросы?