It’ одна вещь, чтобы создать веб-приложение и совсем другое, чтобы держать его доступным — независимо от устройства, которое пользователь использует и свои возможности.

That’ почему Хейдон Pickering ¹ , теперь редактор доступность на Smashing Magazine, написал книгу Программы для всех: кодирования, имеющая веб-Applications __10 | | 34__3 2 изложением дорожную карту для хорошо продуманных, доступных приложений .

Эта статья выдержка из главы в книгу, которая вводит многие из идей и методов, представленных.Отзыв от Стив Faulkner ³ , it’ S книга вы определенно shouldn’ пропустите, если you’ повторно разработчика, который заботится о хорошо структурированный контент и дизайн интерфейса включительно.– Эда .

Из миссия W3C от самого начала был сделать веб доступными, специальные возможности встроены в его спецификации.Как ответственные дизайнеров, мы имеем работу по созданию убедительных веб-опытом, не нарушая инклюзивных особенности проще дизайн .

Как Скотт Jehl said ⁴ :

“ Доступность не то, что мы добавляем на сайт, но что-то мы начинаем с и риск потери с каждого расширения.Это должно быть сохранено .”

К сожалению, не все веб-сайты предназначены, чтобы быть как простой, как провокационный манифест, который “ This Is Мать **** ING Website ⁵ ” и, как веб-интерфейсы развиваться, соблюденияс Web Content Accessibility Guidelines __51 | 6 (WCAG 2.0) становится все труднее.Как мы вместе принять прогрессом в Интернете и наш вновь обретенную власть, чтобы построить до сих пор невозможно веб-программное обеспечение, мы должны решать доступности новых идиом.Мы должны найти способ, чтобы принять новые инструменты и методы, чтобы сохранить уровень игровое поле .

Пора принять изменения .

АРИЯ: страсть к Parity

Web Accessibility Инициативы (WAI) спецификация Текстовая Rich Internet Applications ⁷ (WAI-ARIA) является доступность ресурсов, какWCAG 2.0, с некоторыми заметные различия.Если это поможет, вы могли бы думать о двух ресурсов, как братья и сестры: Оба были воспитаны в той же среде и были привиты с теми же основными ценностями, но они отличаются в личности.WCAG 2.0 осторожны домосед, который держит дома пожарами, в то время как более общительным WAI-ARIA имеет амбиции занять доступ к новым территориям .

В отличие от WCAG 2.0, ария не только набор рекомендаций, но набор атрибутов, которые будут включены в HTML.Его инструменты позволяют изменять и увеличивать количество информации о вашем общей HTML с пользователей вспомогательных технологий.Это очень полезно, когда вы делаете веб-приложений, так как роли, свойства, состояния и отношения элементов в веб-приложение, подлежат намного более сложный и динамичный.Один из способов, глядя на него, что АРИЯ дает вам инструменты для удовлетворения потребностей в WCAG в веб-приложениях .

⁸

Два целей ARIA

АРИЯ дает вам возможность реклассификации и иным увеличить воспринимаемую значение (семантику) или вашего HTML.Это довольно мощный, но то, что цель его?ВСС имеет два основных приложения .

Remedy

АРИЯ может быть использован как средство для улучшения качества информации, предоставляемой вспомогательных технологий в плохо закодированы, unsemantic разметку .

⁹

Например, разработчик может использовать <div>, а некоторые JavaScript, чтобы эмулировать type="checkbox".Они не должны, но они могли бы.Чтобы сделать это <div> фактически понятно, так как флажок, в ARIA роль checkbox | __6 10 | __10 могут быть добавлены в качестве атрибута, делая чтения с экрана думаю, что это, в самом деле, стандартФлажок.Кроме того, наша разработчик должен использовать aria-checked атрибут, чтобы указать ли флажок действительно проверил .

<div class="toggle-thingy" role="checkbox" aria-checked="false" tabindex="0">Yes?</div>

Использование надлежащего input элемент, type атрибут и checked атрибут довести эту информацию лучше — они лучше, чем поддерживается ARIA (который является относительно современные), и input элемент будет автоматически фокусируемый, каксемантическая <button> (так, нет необходимости в tabindex).Тем не менее, мы можем использовать ARIA таким образом, чтобы сделать быстрые решения для разметки, часто, не нарушая дизайн приложения .

Enhancement

Как мы установили, веб-приложения являются более сложными, чем простые веб-документов, и наше использование HTML элементов, как правило, превышают основные семантика подарены им.Убийца особенность ARIA является его способность помочь авторам, как вы и я, общаться многие из этих более амбициозных целей в доступной форме .

Возьмите Арии aria-haspopup attribute ¹¹ .Она представляет собой свойство некоторых элементов, которые имеют скрытый подменю.Собственником этого имущества, вероятно, будет <a> или <button> элемент и, без этого специального атрибута, это all было бы для пользователя читателя экрана: Нет подсказка не будет, учитывая, что подменю существует.

<li>
  <a href="#submenu" aria-haspopup="true" aria-controls="submenu1">Main link</a>
  <ul id="submenu">
    <li><a href="/somewhere/">Submenu link</a></li>
    <li><a href="/somewhere/else/">Another link</a></li>
  </ul>
</li>

Некоторые из этих атрибутов ARIA, как ожидается, должны быть заменены простой HTML элементов и атрибутов.Как я пишу, <dialog> элемент будучи медленно adopted ¹² в качестве преемника dialog и alertdialog АРИЯ роль атрибутов, например .

Где можно, заменяя ARIA с простой HTML (5) хорошо, потому что это упрощает разметку и централизует совету W3C,.Тем не менее, многие атрибуты, которые общаются определенный контекстную информацию, например, aria-haspopup и aria-controls ¹³ недвижимость в коде выше, вряд ли удастся найти столько массовую поддержку для включения в качестве, возможно,haspopup и controls придется .

Как Стив Фолкнер указывает в “ HTML5 и миф о WAI-ARIA Redundance ¹⁴ “, гораздо ВСС будет продолжать существовать unbested.Уникальная сила ВСС является разрыв между опытом зрячих и Неприцельный пользователей веб-.

Ролевая Playing

Много моих друзей и коллег заинтересованы в настольные ролевые игры, которые, в случае, если вы не знакомы с ними, игры, в которых участники играют вымышленных персонажей, которые отправляются на квесты и сражаться в битвах в фантастических мирах.Хотя я не большой показатель из этих игр я, я заметил сходство между тем, как персонажей ролевой играл в игры и способ HTML элементы действуют в рамках веб-приложений.Соответственно, я буду использовать этот ролевой метафоры, чтобы объяснить роли, свойства и states в большейподробно .

Не волнуйтесь, вам не придется быть большой ролевой выродка следовать вдоль.Я не

Roles

Каждый игрок в ролевой игре, как правило поддерживает “лист персонажа”, в котором перечислены важные характеристики персонажа, которую они играют.В HTML, имя персонажа может быть id элемента.Каждый должен быть уникальным .

Персонажи имеют намного больше информации, чем в листе, хотя.Например, персонажи, живущие в этих фантастических мирах, как правило, принадлежат к одной «расы» или другой.Общие резервных аккредитивов эльфы, гномы и тролли.Это как типов HTML элементов: широкие группировки участников с общими характеристиками .

¹⁵

В ARIA, role атрибут переопределяет тип элемента, так же, как игрок в игре отменяет их будни существование как человека 21-го века, чтобы стать могучим карлик.В примере из предыдущего раздела, невкусная <div> на себя роль флажка, будучи дано role="checkbox" .

¹⁶

Роли в ARIA ¹⁷ , как рас в ролевой игре, являются частью идентичности персонажа, что мы могли бы быть заинтересованы в нас может ожидать гномы быть сильным и хорошо.построения машины, как мы ожидаем, <button> иметь характеристики и поведение уже обсуждали.Поставив role="button" на элементе, который на самом деле не <button>, мы просим вспомогательные технологии, чтобы определить его как кнопки, вызывая те характеристики .

Properties

Персонаж листы с именами всего и рас будет немного ограничен.Мы бы, вероятно, немного неудобно с таким акцентом на гонке тоже.Весь смысл ARIA является то, что распознает элементы не только для их общего, восстановительного классификации.Гораздо лучше определить символы и элементы их отдельных активов и талантов .

Типичный лист можно было бы перечислить набор характеристик для персонажа, который, так или иначе, игра определяет как имеющие определенный валюту и значение.Например, вы могли бы быть эльфом, но тот, кто специально для способности, чтобы бросить некоторую магиюзаклинания.Во многом таким же образом, мы смотрели на <a> элемента, который сделан специально для имеющих свойство подменю.Это можно было бы определить в доступности слоя, как и основную роль, через aria-haspopup="true" атрибута собственности .

¹⁸

Огромное количество properties __13 | 19 были указаны и задокументированы.Некоторые из них глобальные, что означает, что любой элемент может иметь их, в то время как другие зарезервированы для конкретных контекстах и ​​элементов.Гномы, как правило, исключается из имеющих хорошую точность Longbow, в то время как умение является общим для эльфов.aria-label, что мы хотели бы использовать для обозначения Кнопка является глобальным, в то время как aria-required, который обозначает требуемую запись пользователя, как правило, используется в полях формы или элементов с роли форм-поля, например, listbox и textbox .

States

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

В ролевых играх, вы должны следить за состоянием вашего характера: Здоров ты?Какие предметы вы собрали?Кто вы подружился?Это все написал вниз, стирается и написал вниз еще немного на листе персонажа.Отслеживание состояния интерактивных элементов важно для доступности, тоже .

В приложении состояние элемента, как правило, представлены визуально.В ролевых играх и в экран-чтения буферов, это не так: Он должен быть себе.Если карлик персонаж надел свою магическую мантию-невидимку, вы, вероятно, хотите, чтобы это записать на листе персонажа, так что вы помните.Точно так же, писать aria-hidden attribute ²⁰ на элемент гарантирует, что доступ состояние невидимости записаны правильно .< ...

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