Это вторая часть из 2 частей, вы можете найти предыдущий пост здесь: Что такое веб-доступность? »
В нашем последнем посте мы представили концепцию доступности и ее значение для нас и наших пользователей.
В этом посте мы сосредоточимся на том, что именно мы можем делать как разработчики приложений, чтобы убедиться, что наш опыт предназначен для всех пользователей.
Определение того, как выглядит идеальная доступность, может быть чрезвычайно сложной задачей. Это связано с тем, что у разных приложений будут разные требования и разные пользователи.
Хорошая новость заключается в том, что есть некоторые основные области, которые, если мы сможем изучить и встроить в наш рабочий процесс как инженеры, мы сможем создать доступный пользовательский интерфейс с очень небольшими накладными расходами.
Давайте посмотрим на них.
Написать семантический HTML
Семантический HTML - это использование разметки HTML для усиления семантики или значения информации на веб-страницах и веб-приложениях, а не просто для определения ее представления или внешнего вида. - Википедия
Написание семантического HTML считается одним из лучших методов во всех аспектах веб-разработки, а не только из-за доступности. Когда мы пишем семантический HTML, это облегчает инструментам доступности интерпретировать структуру страницы, легко перемещаться по ней и четко понимать ее значение.
Давайте взглянем на некоторые ключевые области, в которых действительно важно правильно разобраться с семантическим HTML.
Якоря и кнопки
И якоря, и кнопки передают смысл пользователю, убедитесь, что понимаете, когда и как использовать и то, и другое.
Якоря (<a></a>) используются для навигации. Если пользователь будет перемещен в другую часть текущей страницы или на совершенно новую страницу, вы должны использовать <a>.
Кнопки (<button></button>) используются для отправки форм или выполнения кода при нажатии пользователем. Не поддавайтесь соблазну использовать <div> с событием onClick, вам следует стремиться использовать <button> в таких ситуациях.
Данные листинга
Когда вам нужно отобразить связанные биты данных, например ингредиенты для рецепта, вам следует избегать использования базовых блоков div и вместо этого использовать элемент <li>.
В случае ингредиентов для рецепта, где порядок ингредиентов не имеет значения, мы можем использовать тег <li> вместе с <ul>.
Если порядок элементов в списке имеет решающее значение для значения данных, например, если они являются шагами в рецепте, тогда вы должны использовать <li> с <ol>
Заголовки
Частью хорошей практики веб-дизайна является разбивка страницы на разделы, каждый из которых имеет видимый заголовок, который передает значение этого раздела.
При его создании обязательно используйте теги заголовков, такие как <h1> <h2> <h3> etc вместо <div> с классом «heading1», чтобы оформить его как заголовок. Наличие заголовков помогает пользователям быстро переключаться между содержимым на странице.
❗ На страницах должно быть ровно 1 <h1>, не больше и не меньше.
❗ Не пропускайте уровни заголовков, т. Е. Не используйте много <h2> тегов, и тогда под ними используйте <h4>, вам следует использовать <h3>.
Используйте ярлыки
При создании форм вы должны убедиться, что используете элемент <label> и что он правильно «связан» с помощью атрибута for с правильным элементом формы.
Когда инструмент специальных возможностей встречает поле ввода, подобное <input type="text>, он не понимает, что это значит, это поле поиска? Поле адреса? 🤷. Однако при правильной маркировке он может передавать текст внутри метки, чтобы помочь пользователю понять контекст.
Даже если вы не хотите, чтобы текст был виден рядом с полем формы, вы все равно должны использовать метку. В этом случае вы можете визуально скрыть эту метку.
❓ Подробнее о том, как эффективно визуально скрыть элементы, можно узнать здесь: « Как визуально скрыть контент »
HTML-ориентиры
При создании разметки вашей веб-страницы вместо того, чтобы определять все в серии бессмысленных <div>’s, узнайте и используйте ряд «знаковых» HTML-элементов, к которым у нас есть доступ, для основных частей вашего сайта.
Вы можете использовать подобные _21 _, _ 22_, <aside> и <footer> для описания основных фрагментов вашей страницы.
<nav> можно использовать для ваших..эрр..навигационных ссылок.
Используйте <form> на тех частях страницы, где пользователь должен вводить данные.
Используйте <section>, чтобы обернуть отдельные части связанных элементов, которые не могут быть выражены с помощью других ориентиров. Обязательно дайте каждому разделу заголовок.
Используя ориентиры, вы позволяете пользователям быстро и легко находить определенную часть сайта и переходить к ней. Например, чтобы найти навигацию для смены страницы, им больше не нужно будет просматривать все на странице и выяснять, является ли это навигацией или нет, они могут просто перейти к элементу <nav>.
Подробнее о семантическом HTML вы можете прочитать на html.com.
❗ Семантика очень важна для программ чтения с экрана. Ознакомьтесь с программой чтения с экрана, чтобы понять, как другие могут использовать ваше приложение. Ваше приложение все еще можно использовать? Abilitynet.org - отличный ресурс, чтобы узнать больше о программах чтения с экрана .
Используйте цвета с сильным контрастом
Использование цвета на веб-страницах очень важно, мы используем их, чтобы сообщить о намерениях (например, об ошибках), привлечь внимание (например, кнопки с призывом к действию) и просто сделать сайт привлекательным.
При рассмотрении того, как мы используем цвета, важно помнить, что не все видят цвета одинаково. Чтобы помочь нам в этом, мы можем подумать о чем-то, что называется «контрастом».
Контраст в своей простейшей форме - это разница между двумя цветами, в веб-доступности это обычно означает разницу между цветом переднего плана и цветом фона.
Вы можете проверить соответствие разных цветов с помощью средства проверки контраста webAIM или использовать инструменты разработчика Google, чтобы проверить контрастность в браузере.
Вот несколько примеров того, как выбор цвета и контраста может иметь влияние.
Контраст кнопки
При выборе цвета кнопок убедитесь, что цвет текста достаточно контрастирует с цветом кнопки.
❗ Не забудьте подумать о других состояниях, в которых может находиться кнопка, и о том, какой там контраст, то есть о состояниях при наведении и отключении кнопки
Не используйте только цвет
Пытаясь передать какую-либо форму смысла, например, в какой-то легенде, избегайте использования только цвета. Для дальтоников цвета могут быть почти неотличимы друг от друга.
Возьмем этот пример, где, помимо использования разных цветов, для каждого варианта используются разные визуальные эффекты, что делает разницу между ними более четкой.
Другой пример - проверка формы. Использование одного цвета для информирования пользователя об отсутствии поля может чрезвычайно затруднить дальтоникам определение того, какое поле им необходимо заполнить.
Обязательно используйте текст и значки в сочетании с цветом, чтобы привлечь внимание пользователя.
Не игнорируйте состояние фокусировки
Для пользователей с двигательными нарушениями чрезвычайно важна возможность использовать клавиатуру для навигации по сайту.
Фокус - это то, как пользователь определяет, какой элемент на странице «выбран». Для разработчика фокус означает, на какие элементы клавиатуры будут влиять события, например ввод в поле ввода или отправка формы.
Мы помогаем передать фокус элемента с помощью «кольца фокусировки», по умолчанию браузеры будут отображать кольцо фокусировки на элементах.
Не поддавайтесь соблазну полностью удалить эти кольца фокусировки. Если кольца фокуса браузера по умолчанию действительно не подходят вашему сайту, почему бы не проявить творческий подход?
Посмотрите пример того, как Slack отображает фокус кнопки:
Если вам нужно внести небольшие изменения в кольцо фокусировки, вы можете использовать свойство CSS outline для управления размером, цветом и стилем кольца. Вы также можете использоватьoutline-offset, чтобы контролировать, насколько близко или далеко вы хотите, чтобы кольцо фокусировки было расположено к элементу.
Если вы хотите сделать что-то более сложное, вы можете установить outline:none в элементе и применить некоторые пользовательские стили с помощью псевдокласса :focusCSS.
❗ Попробуйте использовать свои приложения только с помощью клавиатуры, используя Tab и Shift + Tab для перемещения по сайту. Вы видите, на чем сосредоточены? Вы можете взаимодействовать со всем?
Изображения и значки
Использование изображений и иконок в веб-дизайне невероятно популярно. Они используются, чтобы радовать, информировать и привлекать внимание пользователей.
Когда дело доходит до доступности, изображения являются невероятно важным фактором, учитывая их визуальный характер и то, что, как мы уже обсуждали, не все находятся на одном игровом поле в этом отношении.
Один из самых мощных инструментов, к которым у нас есть доступ, когда дело доходит до доступа к изображениям, - это атрибут alt. Атрибут alt позволяет нам предоставить некоторую форму описательного текста для изображения, позволяя инструментам специальных возможностей понять контекст и значение изображения.
Есть разные типы изображений, которые мы используем в нашем веб-дизайне, каждый со своей собственной стратегией доступности.
Давайте рассмотрим несколько наиболее распространенных типов изображений, с которыми вы, вероятно, столкнетесь, и то, как мы можем работать с ними доступным способом.
Информативные изображения
Информативные изображения - это изображения, которые используются для графической передачи идей, концепций и информации. Большинство изображений, которые вы используете, скорее всего, будут информативными.
Возьмите этот пример изображения. Он указывает шаги, необходимые для мытья рук.
Поскольку значение здесь отображается визуально, мы можем использовать атрибут alt, чтобы передать его значение.
Декоративные изображения
Декоративные изображения не содержат дополнительной информации для пользователя. Это могут быть изображения, используемые для презентационных целей, такие как узорчатый фон или разделители для контента.
Давайте возьмем это изображение, которое мы можем использовать для визуального разделения двух частей контента, оно служит только для декоративных целей.
Итак, мы знаем, что должны использовать замещающий текст для сообщения намерения, но что, если намерения нет?
Что ж, в этом случае нам нужно указать инструментам доступности, чтобы они эффективно игнорировали это изображение, мы можем сделать это, установив для атрибута alt значение «ничего».
❗ Важно добавить атрибут alt и оставить его пустым, а не не добавлять его вообще. Если вы не добавите его, инструменты специальных возможностей будут озвучивать имя файла, что может сбивать с толку!
Функциональные изображения
Функциональные изображения, как следует из названия, представляют собой изображения, используемые для определенной функции. Эти функции включают использование изображений в качестве якорей или кнопок.
Примером функционального изображения, которое мы обычно используем, являются логотипы в заголовках веб-сайтов, часто это изображения, содержащиеся в якоре, например Amazon.
Не забудьте использовать здесь семантический HTML. Используйте кнопку или тег привязки с изображением внутри. Обязательно укажите в замещающем тексте значение, например «Домашняя страница», если привязка ведет на главную страницу, или «Поиск», если вы используете изображение для кнопки поиска.
Изображения текста
В идеале при добавлении изображений на наши сайты мы должны стараться не использовать изображения с текстом, а вместо этого использовать комбинацию фоновых изображений и текста в DOM.
Понятно, что будут моменты, когда текст на изображении неизбежен, например, контент, который регулярно и потенциально изменяется «нетехническим» лицом, примером этого могут быть некоторые рекламные изображения.
При работе с этими типами изображений мы всегда должны убедиться, что атрибут alt содержит текст, отображаемый на изображении.
Другие интересные биты
Дерево доступности
Мы, наверное, все знакомы с моделью DOM, которую браузер создает при загрузке веб-страницы. Помимо создания модели DOM, браузер также создает так называемое дерево доступности.
Дерево доступности, как следует из названия, представляет собой древовидную структуру, которая содержит узлы на странице и связанные с ними свойства, относящиеся к доступности, например aria-label и role. «Скрытые» узлы не обнаруживаются в дереве доступности, например элементы с display:none или aria-hidden.
Это дерево используется средством чтения с экрана и другими вспомогательными устройствами.
Вы можете узнать о том, как увидеть дерево специальных возможностей в своем браузере, на availableweb.com.
Поиск проблем с доступностью
Взять всю информацию, которую мы узнали выше, и применить ее к уже существующей кодовой базе кажется пугающим опытом - с чего начать?
Существует множество бесплатных и простых в использовании инструментов и расширений для браузера, которые могут упростить поиск и устранение проблем со специальными возможностями.
Бесплатный инструмент аудита от Google, который охватывает ряд областей, важных для веб-разработчиков, включая доступность. Доступно автономно, через интерфейс командной строки или встроено в инструменты разработчика Chrome.
Простые в использовании расширения Chrome, которые помогут вам быстро проверить свой сайт на наличие проблем с доступностью.
Используйте Pa11y для автоматизации проверок доступности как части конвейера сборки.
Funkify - это расширение для Chrome, которое позволяет вам сочувствовать своим пользователям. Он позволяет вам применять фильтры к открытой вами странице, которые имитируют различные профили различных доступных пользователей. Он может имитировать различные варианты дальтонизма, дрожание рук, нечеткое зрение и даже дислексию.
Вывод
Как разработчики, дизайнеры, менеджеры по продукту - создатели веб-контента, мы несем ответственность за инклюзивность продукта, над которым мы работаем.
Доступ в Интернет - непростая задача, но она может быть полезной, ведь знание того, что вы поступаете правильно, приносит огромное удовлетворение.
Если вы не знаете, с чего начать - просто застряйте, попробуйте использовать свое приложение без мыши, перемещаясь только с помощью клавиатуры, или закройте глаза и попробуйте использовать программу чтения с экрана, послушайте, что говорит ваш веб-сайт, и вы увидите это с совершенно новой точки зрения.
Ключевая проблема доступности - это недостаток осведомленности и сочувствия, поэтому, если вы собираетесь убрать что-то одно, примите следующее:
Будьте чемпионом, делитесь осознанием и пониманием с людьми, с которыми работаете, помогайте им проявлять сочувствие и осознавать проблемы, с которыми люди, борющиеся с ограниченными возможностями, сталкиваются изо дня в день.
Давайте сделаем Интернет лучше. 🙂
Этот пост был исследован, написан и отредактирован в сотрудничестве с Kinga Koziol.
