Краткое содержание доклада наших коллег Никласа Капплера и Дианы Нойвирт.

Полезные технологические аспекты, которые следует учитывать

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

Чтобы добраться до места, где осталась часть дизайна, давайте взглянем на «состояния фокуса»:

*:focus {
Outline: none; //BAD IDEA!!!
}

Когда вы пробегаете по такой строке кода, никогда не устанавливайте фокус на «none». При этом вы автоматически недоступны. Лучше создайте лучшее состояние или оставьте его по умолчанию, так вы обезопасите себя!
Состояния фокусировки никогда не должны быть незаметными, пользователи с нарушениями зрения могут не заметить эти незаметные состояния, поэтому лучше создавайте их бросающимися в глаза.

В дополнение к состояниям фокуса, Form использует метки. Метки позволяют программам чтения с экрана, например, сообщать пользователю, что в данный момент выбрано или что вводить.

<label for="name">Name:</label>
<input id="name" type="text" name="name">
<fieldset>
  <legend>Select your pizza toppings:</legend>
  <input id="ham" type="checkbox" name=„toppings"
  value="ham">
  <label for="ham">Ham</label>
  <input id="pepperoni" type="checkbox" 
  name="toppings" value="pepperoni">
  <label for="pepperoni">Pepperoni</label>
</fieldset>

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

Поскольку формы также связаны со структурой и контекстом, давайте придерживаться этого. Давайте посмотрим на семантический HTML:

<html lang="en">
 <head>
  <title></title>
 </head>
 <body>
  <header></header>
  <nav></nav>
  <section></section>
  <article></article>
  <aside></aside>
  <footer></footer>
 </body>
</html>

Для программиста это не редкость. Как бы просто ни выглядела эта страница, она обязательна для доступности! Эти строки обеспечивают структуру, которую может обработать любой скринридер. Но будьте осторожны, если мы начнем создавать слишком много div-контейнеров, программам чтения с экрана быстро не хватит контекста, поскольку они не смогут отличить, где контейнер начинается и где заканчивается. Поэтому, если мы можем избежать контейнеров div, мы должны их исключить.
Кроме того, не стоит недооценивать силу заголовков h1-h6. Заголовки имеют определенную структуру и если применить, т.е. е. здесь слишком много заголовков h1, это также сбивает с толку скринридеров и, следовательно, пользователя.

Давайте перейдем к следующему примеру, языку страницы:

<html lang="de">
<body>
  <head>
  …
    <span title="Spanisch">
      <a lang="es" 
      href="language-es.html">
        Español
      </a>
    </span>

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

Теперь следует очень важный вопрос. Изображение здесь отображается черным цветом для всех нас.

Но почему? Давайте посмотрим на код:

<img src="/images/NYCpark.png" 
alt="" />

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

Тогда связанный код должен выглядеть так:

<img src="/images/NYCpark.png" 
alt="Aerial view of Central Park
 in New York" />

Альтернативные тексты особенно важны для слабовидящих людей для понимания части контекста, поэтому эти тексты должны быть сформулированы как можно конкретнее и как можно короче. Описание также означает не только использование отдельных ключевых слов, но и максимально точное их описание. Также избегайте чего-то вроде «На этом изображении есть…», программа чтения с экрана уже сообщает пользователю, какой элемент сейчас появится, поэтому избегайте дублирования.

Если альт-тегов недостаточно, есть ARIA-метки. Они исходили из того, что альтернативный текст нужен даже в тех местах, где он не предполагался. Например:

<button aria-label="Close"
onclick="myDialog.close()">
  <svg
    aria-hidden="true"
    focusable="false"
    width="17"
    height="17"
    xmlns="[…]">
    <path […]/>
  </svg>
</button>

Здесь ARIA-метка описывает кнопку. Если бы этого описания не было, пользователь не знал бы, что именно делает эта кнопка. Таким образом, метки Aria можно использовать для описания того, что эта кнопка закрывает диалоговое окно.
Когда вы используете ARIA-метки, вы не должны включать элемент type, потому что программа чтения с экрана все равно сообщит, какую роль играет элемент, поэтому в этом нет необходимости.
Что еще более важно, лучше не использовать ARIA, чем использовать плохую ARIA!

Теперь это было много входных данных для кода, так как же нам все это реализовать? Лучше всего автоматизировать его, чтобы он не попал в бэклог. Относитесь к доступности как к любому другому тесту кода. Включите проверки в свои пайплайны. Делайте напоминания, чтобы вы могли постоянно работать над доступностью своих проектов.

Полезные ссылки и инструменты

Теперь мы многое увидели и прочитали, поэтому вот несколько полезных рекомендаций, которые помогут вам внедрить и обеспечить доступность.

С одной стороны, вы можете еще раз посмотреть на примеры и инструменты из этой статьи и использовать их. Но мы также даем вам еще несколько рекомендаций, которые вы можете найти в Интернете.

Во-первых, Google — наш лучший друг, когда дело доходит до поиска информации. Введите термин «доступность» в поле поиска, и вы очень быстро найдете увлекательные и интересные статьи на эту тему.

У нас также есть несколько конкретных советов, таких как контрольные списки доступности и руководства, которые также подходят для новичков в этой теме:

Есть также множество расширений и плагинов, которые вы можете добавить в свой браузер, которые объединяют различные функции. Наиболее известными, вероятно, являются axeDevTools. Здесь вы, например, одним нажатием кнопки получаете оценку наиболее серьезных проблем с доступностью, обнаруженных на странице. Или Stark, который можно использовать для проверки контрастов, альтернативных текстов, порядка фокуса и многого другого на странице. Взгляните на инструменты:

Но это еще не все, когда мы работаем дизайнерами, расширения в соответствующем инструменте, конечно, гораздо полезнее, чем в браузере, поэтому есть такие плагины, например, для Sketch или Figma. Интересно, что инструменты Stark и axe также доступны для Figma, так что любой член продуктовой команды может ознакомиться с ним самостоятельно и просто попробовать:

Крупные компании, такие как Apple, Google, Amazon и Microsoft, тоже думают о том, как сделать продукты доступными, и разрабатывают соответствующие руководства, нативные настройки или конкретное оборудование. Это делает цифровые предложения доступными для более разнообразной пользовательской базы. Узнайте об этих компаниях и о том, как они улучшают доступность своей продукции.

Подведем итог:

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

Об этой публикации:Мы, как Meond, поощряем стремление к гибкости и технологические инновации. Мы верим в силу открытости, прозрачности, признательности и сотрудничества как опоры цифровой корпоративной культуры. У нас разный опыт и личности. И это то, что мы хотим показать здесь.