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

That’ почему Хейдон Pickering ¹ , в настоящее время редактор доступность на Smashing Magazine, написал книгу Программы для всех: Кодирование доступны всем пользователям Интернета Applications ^{34 2} , с изложением дорожную карту для проведения продуманной, доступных приложений .

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

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

Как Скотт Джел said ⁴ :

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

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

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

ARIA: страсть к Parity

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

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

⁸

Два целей ARIA

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

Remedy

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

⁹

Например, разработчик может использовать <div>, а некоторые JavaScript для эмуляции type="checkbox".Они не должны, но они могли бы.Чтобы сделать это <div> самом деле понятно, как флажок, то ARIA роль checkbox ¹⁰ могут быть добавлены в качестве атрибута, делая чтения с экрана думаю, что это, по сути, стандартфлажок.Кроме того, наша разработчик должен использовать 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 роль атрибутов, например .

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

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

Ролевые Playing

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

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

Roles

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

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

¹⁵

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

¹⁶

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

Properties

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

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

¹⁸

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

States

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

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

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

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