(Фото Cookie Pom. на Бессмысленно )
Разработка надежных, доступных, приложений – это действительно целое командное усилие, и что-то, о чем я много не написал раньше, это то, как я приближаюсь к вещам, когда я нет один написание кода.
Это ни в коем случае не является полным руководством по реализации или тестированию на доступность, но, надеюсь, он дает общее представление о том, чтобы подумать о том, чтобы рассмотрение запроса на тягу 🙂 Не стесняйтесь оставлять какие-либо свои собственные советы, предложения или вопросы в комментариях Действительно
Если вы хотите пропустить непосредственно в раздел:
- Что даже это особенность?
- Первоначальная проверка с топором
- Работа клавиатуры
- Проверки считывателя экрана
- Соображения по управлению фокусом и динамически отображаемым контентом
1. Что даже это особенность? 🤔
Я считаю, что довольно полезно сделать шаг назад и рассмотреть, какой узор UI мы пытаемся ввести/рефакторировать, и проверять Wai Aria Aroring Практики Для напоминания о том, как такого рода UI Pattern Должен вести себя.
Эти документы очень привлекательны для закладки для разработки, поскольку они выкладывают ожидаемые поведения, атрибуты ARIA и ссылку на примеры реализаций.
Ухожу назад и спрашиваю себя “Что это за вещь?” Также помогает точечные возможности заменить Div с более семантическими альтернативами. Я потерял счет количества раз, когда у меня был момент лампочка «О, подожди, это на самом деле [вставить что-то, что должно быть очевидно здесь]!».
2. Первоначальная проверка с топором 🪓
Усиление оси браузера Помогает нам захватить много низких виситных фруктов, например Цвет контраст, отсутствующие ориентиры или этикетки.
Если есть несколько государств, функция может быть в том, что я попробую повторно запустить топор В каждом состоянии (например, раскрывающийся раскрывающийся друг, против расширенного), поскольку топор может проверять только текущий DOM.
3. Работа клавиатуры 👩🏻💻.
NB: Если вы используете Mac и/или Safari, пожалуйста, убедитесь, что ваши настройки позволяют вкладками к интерактивным элементам. Посмотреть Навигация клавиатуры браузера в MacOS
Все функции должны работать только на клавиатуре, и это включает в себя:
- Нажатие
ВкладкаЧтобы перемещаться по каждому из интерактивных элементов в логическом порядке (например, часто это было бы сверху вниз, слева направо) - Нажатие
Shift + Tabдвигаться назад через эти элементы - Фокусированный в настоящее время элемент должен быть четко виден (например, с контуром фокусировки).
- Вы должны иметь возможность взаимодействовать с фокусируемыми элементами согласно конвенциям в Wai Aria Aroring Практики Отказ Например, активируя ссылку с
Введите, двигаясь через Combobox Предложения сСтрелка вверх/вниз стрелкаОтказ - Возможность раскрывать контент, который в противном случае был бы сработан на колесе мыши (например, всплывающая подсказка, которая делает текст вспомогательного вспомогательного изображения)
Бонусный совет: невидимые проблемы со фокусом
Если вы когда-нибудь застряли отладки невидимых проблем фокусировки, вы можете добавить это в консоль для выхода сфокусированного элемента, поскольку он меняется:
document.addEventListener('focusin', () => console.log(document.activeElement))
4. Проверки считывателя экрана 🤖
Мне было задано несколько раз “Вы всегда проверяете с помощью считывателя экрана?” И честный ответ – «нет».
Мой личный взгляд состоит в том, что проверка считывателя экрана – это Должен когда:
- Мы представляем новую интерактивную функцию (в отличие от изменения содержимого): вещи динамически обновляются/появляются/исчезают
- Любой
АрияАтрибут был изменен или введен: они всплывают только через вспомогательную технологию, поэтому, если мы не проверяем с помощью считывателя экрана, мы на самом деле не проверяем вообще
Немного ноя начальная установка
Я обычно использую VoiceOver и Safari для проведения проверок считывателя экрана. Это в основном, потому что VoiceOver – это экран для экрана Mac по умолчанию, и предназначен для лучшей работы с Safari (если вы пытаетесь использовать его с другим браузером, вы заметите некоторые багги/необычные вещи).
Если вы используете MAC, у меня есть пост с некоторыми начальными инструкциями настройки:
3 Быстрая задача, чтобы ознакомиться с помощью считывателей экрана (VoiceOver на Mac)
Suzanne Aitchison (она/она) · 1 декабря 1919 · 4 мин читать
Если вы не используете Mac, я бы порекомендовал использовать NVDA И Firefox/Chrome, чисто потому, что NVDA – это бесплатная загрузка и очень широко используется (посмотрите последние Screen Reader Sears .
Переключение голосовой завесы
Если у вас есть клавиатура с функциональными клавишами в верхней строке, вы можете включить и выключить голосовой задержку с CMD + F5 Отказ
Если у вас нет функциональных клавиш, вы можете нажать кнопку насильника в три раза в краткую последовательность, чтобы открыть параметры доступности, где вы можете проверить/снять флажок «Включить VoiceOver».
Ротор
Я обычно начинаю проверку рисования экрана, используя Rotor VoiceOver (открытый с комбинацией клавиш Ctrl + Option + U ) – это интерактивное меню, которое перечислены различные элементы по типу (например, ориентиры, ссылки, элементы управления форм):
Нажмите клавиши со стрелками влево/вправо, чтобы перейти через различные меню и получить быстрый обзор соответствующих ориентиров и доступных имен элементов на странице. В приведенном выше примере вы можете быстро определить ссылку «Главная» случайно названа дважды!
Чтобы перейти к определенному элементу/раздел, используйте стрелки вверх/вниз, чтобы выделить и Введите выбирать.
Вам не нужно вообще использовать ротор, если вы не найдете его полезным, я просто предпочитаю его по сравнению с чтением через много страницы, чтобы добраться до раздела, в которой я заинтересован.
Доступные имена
AX обычно поможет флаг такого рода проблемы, но, как я ориентируюсь на функцию с помощью считывателя экрана, я склонен к поиску элементов, где:
- Нет доступного имени (например, мы использовали кнопку ICON без метки ARIA)
- Доступное имя расплывчато (например, нажмите здесь, – делать что?)
- Доступное имя повторяется (например, множество «перекрытия переключения» – выпадают?)
Бонусный совет: Hylencing VoiceOver
Иногда может быть немного слышать все Объявлено о том, что вы навигаете, особенно если вы отлаживаете один конкретный раздел. Вы можете заставить замолчать любое объявление о прогреме голоса, нажав Ctrl ключ 🙂.
5. Соображения по управлению фокусом и динамически отображаемым содержанием ✨
Я обычно уделяю особое внимание любым функциям, которые включают в себя контент динамически появления/исчезновения – например: раскрывающееся меню, предупреждающий баннер, модаль.
Основное, что я буду думать о это:
- Как пользователь Low-Vision знает, что содержимое появилось/исчезло? Что-нибудь объявлено через ридер экрана?
- Если новый контент содержит любой фокусируемый элемент (например, ссылка) – как я ее достичь? Если я должен нажать
Вкладка20 раз что-то, вероятно, не правильно. - Если мой фокус клавиатуры был внутри некоторого контента, который сейчас исчез – где сейчас фокус?
Обычно некоторые Ария Атрибуты или ручное управление фокусом с JavaScript требуется для того, чтобы сделать такие компоненты доступными. Опять же, вы обычно можете найти то, что нужно в Wai Aria Aroring Практики Отказ
Оригинал: “https://dev.to/s_aitchison/5-things-i-m-thinking-about-when-i-check-a-pull-request-for-accessibility-3gmo”