Интернет-доступность

Автор оригинала: Abdullah Furkan Özbek.

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

Что такое веб-доступность

Доступность сильно связана с универсальным дизайном, который является процессом создания продуктов, которые используются людьми с самым широким широким спектром способностей, работающих в самых широком широком диапазоне ситуаций. Это связано с доступом для всех людей (есть ли у них инвалидность или нет).

Сделать доступный сайт означает, что делает его для «почти» всех.

Веб-доступность означает, что веб-сайты, инструменты и технологии спроектированы и разработаны так, что люди с ограниченными возможностями могут использовать их. (Веб-эришебиларлиги, веб-сайтлеверинин, арачларин .Е. Тенололозилерин Engelli Kişilerin Bunları Kullanabileceği şekilde Tasarlandığ ve Geliştirildiği Anlamına Gelir.)

Более конкретно, люди могут:

• воспринимать, понимать, ориентироваться и взаимодействовать с сетью
• внести свой вклад в сеть

Веб-доступность охватывает все недостатки, которые влияют на доступ к сети

В том числе:

• служащий
• познавательно
• неврологический
• физический
• речь
• визуальный

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

Например:

• Люди, использующие мобильные телефоны, умные часы, смарт-телевизоры и другие устройства с небольшими экранами, различными режимами ввода и т. Д.
• Пожилые люди с изменяющимися способностями из-за старения
• люди с «временными нарушениями», такие как сломанные руки или потерянные очки
• люди с «ситуационными ограничениями», такие как в ярком солнечном свете или в среде, где они не могут слушать аудио
• люди, использующие медленное подключение к Интернету, или у кого есть ограниченная или дорогостоящая пропускная способность

Видео о доступности

Основные функции при разработке доступных сайтов

Семантика

HTML (язык разметки гипер текста) является именно так: язык разметки. Это означает, что это не только простой текст, но текст, отмеченный знаком – так называемый «семантика». Для этого HTML предлагает много тегов, каждый с присущим, уникальным семантическим значением. И абсолютно решается, что эти теги используются правильно.

Теги без значений

Чтобы понять важность надлежащей семантики, давайте сначала посмотрим исключения: теги, которые действительно не предоставляют семантическую информацию.

В HTML есть только два тега, которые не имеют смысла семантического значения:

Тег со значениями

Элементы содержимого используются для придания значения к содержанию (например, заголовки, абзацы или ссылки). Разметка текста с помощью Теги сообщает пользователю агенту, что это не просто простой текст, но – на самом деле – заголовок определенного уровня!

Структурные элементы используются для групповых элементов на веб-странице, отделяя их в разные регионы (как заголовок, навигация, основной или нижний колонтитул). Они были введены в HTML 5.

Клавиатура доступна

Все интерактивные элементы вашей страницы например Текстовые поля, кнопки и т. Д. Доступны на клавиатуре. Это означает, что вы должны иметь возможность привлечь внимание на них, используя Вкладка и Shift + Tab Ключи.

Большинство интерактивных элементов – это клавиатура, доступная по умолчанию, i.e. браузер заботится о том, чтобы сделать их клавиатурой ».

Неипреактивные элементы, такие как Div, Span и Images, не находятся на клавиатуре по умолчанию. Это нормально, потому что пользователи, как правило, не должны взаимодействовать с ними.

Вкладки

• Порядок, в котором элементы получают фокус, называется вкладкой. Разработчики должны позаботиться о том, чтобы интерактивные элементы имеют логическую вкладку-заказ. Заказ TAB должен следовать естественной последовательности чтения, то есть сверху вниз и справа налево (для языка типа RTL). Если ваша вкладка фокусируется на странице непредсказуемо, то ее не будет иметь большой опыт для пользователей.
• Вкладка – порядок в основном зависит от Дом-заказ, I.e. Как вы написали свой HTML. Любой элемент, который впереди в дереве DOM автоматически идет вперед на вкладке.
• Иногда люди используют CSS для того, чтобы элемент появился в порядке, который отличается от DOM-DOCE. Пример

Right aligned link 
Link 1 
Link 2

• В приведенном выше примере сначала фокус будет двигаться вправо, а затем он придет налево, потому что в DOM появится правая ссылка. Это не здорово, потому что вы, как правило, ожидают, что сбывающие ссылки будут сосредоточены первыми.

Вот как вы можете решить Это:

Link 1 
Link 2 
Right aligned link

Инертный Является ли библиотека JavaScript, которая состоит из сосредоточенной или неразрешенной приложения. Под капотом он добавляет Tabindex = "0" или Tabindex = "- 1" к элементу.

Github inert.js.

Tabindex.

Рекомендуемое использование 0 для вкладок Accessible и -1 для вкладки недоступен

• Чтобы сделать не интерактивный элемент сосредоточиться, вы можете дать ему Tabindex = "0" атрибут. Это не только делает элемент вкладка доступна Но также делает его программным обеспечением сосредоточиться Отказ Это означает, что вы можете позвонить .focus () на этом элементе.
• Tabindex = "- 1" выберет любой интерактивный элемент из вкладки. Это означает, что вы не можете получить доступ через клавиатуру. Это особенно полезно, когда вы хотите внести несколько ссылок/кнопок недоступными, когда они находятся за наложением или переходом из дисплея (E.G. Hamburger Menus)
• Позитивное значение Tabindex делает вкладку элемента доступной, а также помещает элемент впереди на вкладку-порядок на основе значения атрибута. Но позитивные значения Tabindex считаются анти-образцом, потому что он может стать очень запутанным, более одного элемента имеют положительные значения Tabindex. Итак, Не использовать Позитивный Tabindex.

Используйте родные элементы

родные элементы

• Насколько это возможно, пожалуйста, используйте родные элементы для любой конкретной цели. Это означает, например, если вам нужна кнопка, а затем просто используйте тег кнопки, а не создавать кнопку с помощью Divs или Swans.
• Нативные интерактивные элементы, такие как кнопки, выбора коробок и т. Д. У многих функций доступности, которые вы можете пропустить, если вы создаете свой собственный.

Руководство для пользовательских элементов

• Если вы должны создать пользовательский элемент, то убедитесь, что вы пройдете руководство по лучшим практикам WAI ARIA: Wai-Aria Arming Practices 1.1
• Эти рекомендации говорят вам, как взаимодействия клавиатуры должны быть для любого элемента. У него также есть ссылки на демонстрационные и код для нашей помощи.

alt.

alt.

Считыватели экрана

• Многие пользователи с нарушениями зрения полагаются на вспомогательные инструменты, такие как считыватели экрана, чтобы получить информацию на странице и взаимодействовать с страницей
• Всегда используйте атрибут ALT для изображений. Считыватели экрана будут читать текст ALT для своих пользователей, которым трудно увидеть изображение.
• Используйте правильные теги заголовка и т. Д. Для заголовков, потому что считыватели экрана позволяют пользователям ориентироваться в содержимое страницы, используя заголовки.
• Сделать эффективное использование семантических меток, таких как
  ,
  ETC, потому что считыватели экрана позволяют пользователям ориентироваться в содержимое страницы, используя эти теги.
• Считыватели экрана должны правильно идентифицировать интерактивные элементы, поэтому он может попросить пользователей взаимодействовать с ними. Например, если вы создали кнопку с помощью <кнопка> Тег, затем считыватель экрана будет называть его кнопкой. Но если ваша кнопка что-то вроде
  Отправить
  Затем считыватель экрана назовет это « Group », поскольку div – это группировка элемента, и пользователь не поймет, что они должны взаимодействовать с этим элементом.

Как элементы HTML поддерживаются считывателями экрана

alt.

Этикетки и атрибуты Aria

Есть действительно ситуации, где стандартный HTML не Обеспечить функциональные возможности для всех требований, которые разработчики могут иметь для внедрения современных и интерактивных веб-сайтов. Для этого Доступные богатые интернет-приложения (ARIA) Техническая спецификация была введена.

• Любой код, написанный в HTML, не только имеет визуальное представление, но также имеет семантическое представление под названием Доступность дерева Отказ Дерево доступности используется вспомогательными инструментами, такими как Считыватели экрана Чтобы сообщить пользователю о свойствах доступности, таких как Тип, имя, состояние и значение элемента. Значения этих свойств доступности вычисляются браузером на основе информации, предоставленной в HTML-код Отказ

• В приведенном выше примере имя вычисляется тегом. Используйте тег метки, где это применимо.
• Использовать Aria-label атрибут, чтобы убедиться, что элемент имеет имя. Предположим, у вас есть кнопка «Сохранить», которая не имеет текстового контента, то браузер не сможет вычислять его имя. Мы можем упомянуть атрибут ARIA-Label, чтобы помочь браузеру вычислить его имя.

• Аналогично используйте различные атрибуты ARIA, как роль, Aria-Labelledby, ARIA-Expled, Aria Checked (и т. Д.) Чтобы помочь браузеру вычислить свойства доступности:

alt.

Использовать инструменты

• топор это удивительный инструмент для определения пробелов на доступность на вашей странице. Это хромированное расширение. Установите его и используйте через инструменты Chrome DEV для анализа доступности страницы.
• Используйте топор для анализа цветового контраста на вашей странице. Коэффициент контрастности плохого цвета затрудняет мало пользователей читать текст. Топор может указать на регионы вашей страницы, где контраст не соответствует WCAG Руководящие принципы Отказ
• У Chrome есть экспериментальная Инспектор доступности в разработке инструментов. Перейдите к настройке -> Эксперименты в инструментах Chrome Dev, чтобы включить его. Этот инструмент помогает, позволяя вам знать вычисленные свойства доступности
• Если вы хотите автоматизировать аудит доступности в вашем проекте, вы можете использовать топорное ядро Отказ Это модуль узла, который вы можете включить в процесс сборки.

Библиотеки и полифилл

inert.js Это очень полезная библиотека, которая помогает вам сделать часть вашей страницы вкладки недоступный или доступный Отказ Это особенно полезно, когда вы хотите внести несколько ссылок/кнопок недоступными, когда они находятся за наложением или переходом из дисплея (E.G. Hamburger Menus)

Focus-Ring – это план, который отображается вокруг контроля, когда он получает фокус. Время от времени, особенно с кнопками, эти кольца фокусировки не очень эстетически приятными, поэтому разработчики имеют тенденцию отключить его в CSS (обстановка: нет). Пользователи мыши не сталкиваются с любыми вопросами из-за этого, но пользователи клавиатуры считают проблематично, потому что не может выяснить, имеет ли элемент управления или нет. Идеально фокусное кольцо должно быть видно для пользователя клавиатуры, даже если он невидим для пользователя мыши. Вот удивительная библиотека;

фокус-кольцо

Скриншоты

Полезные источники

Доступность-введение

Frontend-Handbook

Access-Playlist

Статьи

Статья-веб-доступность

Статья-доступность-контекст

Статья-фокус-кольцо

Статья-пользовательский-выбор-элемент