Я был веб-разработчик в течение 15 лет, но я никогда не смотрел в доступности.

Я не знаю, достаточно много людей с серьезными () инвалидам правильно понять нужно для доступной applicationsи ни клиент не имеет everпотребовал, чтобы я знал, что Ария.Но я связался с ограниченными возможностями в любом случае — и это история, которую я хотел бы поделиться с вами сегодня .

В Fronteers Conferenceв октябре 2014 года я увидел Хейдон Pickering¹выступить с докладом под названием “Не получив нигде с CSS лучших practices²“.Среди прочего, он сделал дело за использование WAI-ARIA³атрибуты, как aria-disabled="true"вместо классов, как .is-disabledчтобы выразить состояние приложения.Он ударил меня тогда и там, что мне не хватает на несколько хорошо подготовленных стандартов, просто потому, что АРИЯ принадлежит к той доступность пространства, что я не имел ни малейшего представления о .

После разговора с Хейдон немного более я наконец понял, что ВСС может помочь мне написать веб-приложений без байк-shed⁴Имена классов для различных состояний (это то, отключена, это видно, это еще загружаются …).Обсуждение не коснуться доступности вообще — мы были просто говорим о том, как сделать веб-разработки чуть-чуть проще .

Я решил, что нужно копаться в ARIA — честно говоря, не потому что я глубоко заботился о доступности, а потому, что у меня не было никакого намерения изобретать колеса они уже.Одним из первых вещей, вы узнаете, когда, глядя на ARIA, что поддержки навигации клавиатура fundamental,И первый шаг к пониманию навигации с помощью клавиатуры, чтобы понять, что focusявляется.И это, где я споткнулся, потому что никто не знал, (подробно), какие элементы могут получать фокус и который не мог .

Имея немного совместимости браузера опыт тестирования (“ CSS3 Переходы: Слава Богу, у нас есть Спецификация ⁵ “), я решил, что потратить некоторое время расследование.Электронная книга охватывает мои выводы в работах и ​​будет готов сделать вы теряете фокус в начале 2016 года Но более важно то, что JavaScript вариант этой книги имеется сегодня:

⁶

ally.js Основные Link

Прежде чем попасть в, почему и как этот проект пришел, чтобы быть, вот краткий список вещей он может помочь вам с:

• ally.js исправления ошибок, касающихся браузера :focusв Интернет Explorer⁸и WebKit⁹.
• ally.js предоставляет инструменты высокого уровня для отключить интерактивную elements¹⁰и скрыть весь branches¹¹в DOM с экрана читателей .
• ally.js обеспечивает простой способ предотвратить браузеры прокрутки элемент в view¹²когда он собирается быть сосредоточены .
• ally.js помогает стиль :focusпутем предоставления :focus-withinpolyfill¹³и способность выделить фокус мыши с клавиатуры focus¹⁴.
• ally.js не только поможет вам понять, какие элементы focusable¹⁵и которые клавиатуры focusable¹⁶, Но также табуляции order¹⁷.

ally.js включает в себя несколько прокладок и polyfill, но не имеет каких-либо серьезных зависимостей.Он предназначен, чтобы быть совместимыми: UMD, компания AMD, CommonJS, ES6, модули или в комплекте — это ваша choice¹⁸.

Покажите мне некоторый код!Link

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

// disable everything that is not a child of #our-dialog
var handle = ally.maintain.disabled({
  filter: '#our-dialog',
});
// re-enable everything that we disabled previously
handle.disengage();

Тот же принцип относится и к любым содержанием (не только интерактивный вид) на убедиться чтения с экрана не получить lost,Мы можем легко скрыть everythingза пределами нашего диалога:

// hide everything that is not a child of #our-dialog by adding aria-hidden="true"
var handle = ally.maintain.hidden({
  filter: '#our-dialog',
});
// re-enable everything that we disabled previously
handle.disengage();

Иногда мы должны действовать на определенные клавиши, как Enterи Escape:

// hide everything that is not a child of #our-dialog by adding aria-hidden="true"
var handle = ally.when.key({
  enter: function(event) {
    // handle the enter event
  },
  escape: function(event, disengage) {
    // handle the escape event…
    disengage();
  },  
});
// stop listening for keys
handle.disengage();

Мотивация Link

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

1. Многие (особенно старше) статьи спорта примеры кода и подходы, которые не так легко понятным и способствуют кодирования практики, по сегодняшним меркам считались бы вредно .
2. Даже хорошие статьи, как правило, только сосредоточиться на доступности, игнорируя все остальное, что это отношение к созданию великолепные веб-сайты и приложения .
3. Буквально не ни одной статьи и ресурсы shareкод.Там, кажется, не намного сотрудничество (на коде) за пределами отдельных проектов, что приводит к тому же кодируется снова и снова .
4. Многие проблемы, кажется, не очень хорошо понимал, или не считается проблемой, чтобы начать с .
5. Через несколько аспектов доступности чувствует undeterministic.Практически все случаи, касающиеся семантики мы в состоянии, чувствует, как начале 2000-х: вы можете создали что-то в соответствии со стандартами, но это не означает, что она работает везде — даже вообще никуда .

В конце концов, я чувствовал, что мы были не хватает надлежащего инструментария.Как jQuery¹⁹является завоевание DOM без заботятся о совместимости браузера, будь то зияющие дыры или тонкие ошибки.Как D3²⁰является завоевание интерактивную визуализацию данных.Или как RaphaelJS²¹было завоевание SVG всего лишь несколько лет назад.Я не мог найти что-нибудь подобное, что не будет делать тяжелую работу за доступности, по крайней мере, ничего всеобъемлющего и рамки-независимая .

ВыполнениеLink

У меня есть несколько принципов, которые определяют, как я работаю:

1. Если вы не понимаете проблему, вы не создаете решения.Исследование является ключевым .
2. Начните с малого, построить в течение долгого времени .
3. Комплексные решения не изменить мир.Простота является ключевым .
4. Один человек может только сделать так много.Сотрудничество является ключевым .

Исследование является ключевым Link

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

После того, как я понял, что ни я, ни Интернет был в состоянии ответить на простой вопрос, какие элементы могут получить фокус, там был только один вариант слева: засучив рук …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров