Доступность в одностраничных приложениях (ARIA и т.д.)

Ответ 1

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

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

<div id="mysuperflashybutton" ... role="button" aria-label="Super flashy" tabindex="0"></div>

Эта кнопка, выбранная устройством чтения с экрана, будет называться "суперкритическая кнопка", поэтому вам не нужно нажимать кнопку в свой атрибут aria-label. Есть более сложные примеры, но это иллюстрирует основы этого, в значительной степени. Роль, ария-метка и тадиндекс будут наиболее распространенными атрибутами ARIA, которые вы видите.

Элементы индексирования табуляции, которые вы хотите, чтобы пользователи экранного клика нажимали, имеют жизненно важное значение для этого. Установите tabindex в 0, чтобы включить его в свое местоположение по умолчанию в документе. Если вы не хотите, чтобы люди обычно пользовались навигацией по клавиатуре, обычно устанавливали ее равной -1. Это означает, что он не соответствует обычным настройкам табуляции, но все равно может быть перенесен на него, если вы хотите вручную установить его вручную с помощью javascript/jquery.focus().

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

$('#linkmenuactivator').on("click", function () {
    $('#linkmenu').find('li:first a').focus();
});

Я знаю, что в JQuery я не знаком с AngularJS, но мой краткий взгляд заставляет меня думать, что это скорее контроллер ViewModel, а не какой-то пользовательский интерфейс, такой как JQuery, но исправьте меня, если я ошибаюсь.

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

<p id="ariastatusbox" ... role="status"></p>

Затем в JQuery (например, вы загружаете документ и затухаете его, когда вы его получили):

$('#maincontent').fadeIn(function () {
    $('#ariastatusbox').text('Document loaded');
});

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

Наконец, что касается тестирования доступности, есть несколько вариантов. Что-то я недавно наткнулся на Wave, который, как представляется, является онлайн-инструментом тестирования. Это выглядит хорошо с первого взгляда, вы можете попробовать. Другой вариант - захватить устройство для чтения экрана и дать ему уйти. Я рекомендую NVDA, который является открытым исходным кодом (поэтому, следовательно, бесплатным). Это мой читатель экрана по выбору и довольно чертовски хорош. Синтезатор, в который он входит, не имеет приятного голоса, но есть и другие варианты, или вы можете отключить речевой выход и просмотреть текстовое отображение того, что он будет говорить, используя программу Speech Viewer. Последний вариант - попросить тестировщиков доступности принять ваше приложение для тестового диска. Для потребительских товаров или вещей в этих скобках слепые люди и другие пользователи доступной технологии могут добровольно сделать это, если его спросят. Для более ориентированных на бизнес-приложений приложений, которые вы, возможно, не захотите на открытом форуме, существует несколько организаций, которые могут консультироваться по вопросам доступности веб-приложений.

Это ни в коем случае не всеобъемлющее руководство по доступности, я надеялся, что вы действительно начнете в правильном направлении. Для немного более глубокого взгляда попробуйте посмотреть ARIA role документацию (все это поможет, но код находится под заголовком определений), и отсюда ARIA States and Properties documentation. Они оба могут быть немного сухими, но также имеют полный список всего, что вы можете использовать ARIA. Надеюсь, Google тоже сможет дать некоторые уроки.

Надеюсь, это поможет вам начать. Удачи!