Эй, фронтендеры, давайте поговорим о доступности?

CoderStudio, 17.03.2023 02:23
Эй, фронтендеры, давайте поговорим о доступности?

Поговорим немного о теории, как реализовать и несколько советов

Введение

Когда я начинал работать в мире разработки программного обеспечения, я не имел представления о том, что такое доступность. Это была тема, которая казалась очень далекой от моих знаний и моей повседневной жизни, но иногда я сталкивался с чем-то, связанным с этим (Linkedin, Medium или работа).

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

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

Доступность - это способность каждого человека, независимо от его состояния, получить доступ к чему-либо.

Я говорю так, потому что доступность на 100% связана с пользовательским опытом, знаменитым UX. Доступное приложение означает, что оно просто в использовании, прямолинейно в своих намерениях, ясно в идеях и элегантно в реализации.

В конечном счете, удобство использования и доступность - близнецы-сестры.

Если вы не думаете о доступности в своих внедрениях сегодня, начните думать об этом, потому что это определенно поднимет уровень ваших доставок.

"Но, чувак, как мне сделать мои поставки доступными"?

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

HTML

Сделать доступный экран - это не такой уж монстр как может показаться на первый взгляд

Это довольно объективная задача. Используйте его более корректно, например, соблюдая семантику элементов и их свойств.

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

Цвета и контрастность

Уважайте понятия атрибуты и свойства тегов Программы для чтения с экрана экранные лупы

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

Изображения

Будьте осторожны с цветами и их контрастами Постарайтесь определить начало и конец цветов

Программы чтения с экрана не читают изображения, поэтому описывайте изображение с помощью атрибута "alt" тега "img".

Если изображение не является важным и просто декоративным, оставьте атрибут "alt" пустым. Таким образом, программа чтения с экрана будет знать, что изображение нужно пропустить.

Видео

Если изображение не является важным и просто декоративным оставьте атрибут "alt" пустым

Вы знаете то действительно классное видео? Не забудьте сделать так, чтобы его можно было смотреть и с субтитрами.

Субтитры очень важны.

Иерархия текстов

Субтитры очень важны

В HTML существует иерархия текста, которой необходимо следовать. Соблюдая иерархию, вы дадите понять, что в вашем интерфейсе есть поток чтения, которому необходимо следовать.

Используйте теги заголовка, подзаголовка, абзаца и т.д. соответствующим образом.

Навигация по клавиатуре

Используйте теги заголовка подзаголовка абзаца и тд соответствующим образом

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

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

Ссылки

Соблюдайте иерархическую структуру HTML Соблюдайте теги HTML чтобы можно было

Ссылаясь на тему "Навигация по клавиатуре", ссылки должны быть навигационными, чтобы по ним было легко перемещаться с помощью клавиши табуляции.

Кроме того, убедитесь, что ваша ссылка выглядит как ссылка (lol).

Формы

Кроме того убедитесь что ваша ссылка выглядит как ссылка (lol)

Формы эволюционировали в сторону минимализма, что хорошо... но это может быть и плохо. Не прячьте метки и границы.

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

Шрифты

Поместите метки на поля для их идентификации и используйте визуальные средства (цвета

Шрифты могут быть сложной темой. При выборе шрифта руководствуйтесь здравым смыслом. Тяжелый и сложный шрифт только затруднит чтение.

Кроме того, обратите внимание на размер шрифта и межстрочный интервал, не нужно делать все мелким.

Linguagem

Кроме того обратите внимание на размер шрифта и межстрочный интервал не нужно делать все

Идеальным является язык, понятный всем. Избегайте сложных сообщений и сложных слов. Пишите просто! Будьте понятны!

Фокус

Идеальным является язык понятный всем Избегайте сложных сообщений и сложных слов Пишите

Укажите элемент, который находится в фокусе, сделайте эту информацию видимой с помощью визуальных индикаторов.

ARIA

Укажите элемент который находится в фокусе сделайте эту информацию видимой с помощью

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

Эта тема чрезвычайно важна, загляните в документацию .

Ориентиры

Эта тема чрезвычайно важна загляните в документацию

Ориентиры работают как опорные точки. Их использование заключается в определении важных точек в приложении, чтобы пользователю было легче до них добраться.

Чтобы использовать его, просто включите атрибут "role" в элемент.

События Javascript

Чтобы использовать его просто включите атрибут "role" в элемент

Когда это возможно, используйте обработчики событий JavaScript, которые не зависят от устройства.

Примером может служить событие onMouseOver, которое связано с мышью (а кто не пользуется мышью?), в этом случае измените его на onFocus.

15 советов и полезных практик

  1. Установите язык вашего приложения - и элементов, когда он должен быть более конкретным;
  2. Источники иконочных шрифтов не очень хороши для доступности - старайтесь выбирать SVG;
  3. Делайте ссылки самоописательными и простыми для понимания - избегайте текста "нажмите здесь";
  4. Обоснованный текст может быть проблематичным при чтении;
  5. Группируйте радиокнопки вместе;
  6. Не включайте автовоспроизведение видео (особенно со звуком) и музыки. Это раздражает и может отпугнуть людей;
  7. Не используйте устаревшие элементы - такие как summary (table), name (a) и border (img);
  8. При добавлении заголовка к таблице используйте тег caption внутри тега table - это упрощает работу с программами чтения с экрана;
  9. Правильно используйте тег title - он полезен для читателей с экрана;
  10. Избегайте использования изображений с текстом внутри изображения - при необходимости используйте наложение;
  11. Будьте внимательны к зацикленной анимации - она может отвлекать внимание некоторых людей;
  12. Окна, диалоговые окна, модальные окна и т.д. должны иметь возможность закрываться с помощью клавиши escape;
  13. Не отключайте масштабирование - многие люди используют его, чтобы чувствовать себя более комфортно;
  14. Избегайте использования дефисов в структуре предложений;
  15. Избегайте аббревиатур.

Истины

a) Доступность не является препятствием для инноваций

Внедряйте инновации. Быть непохожим на других. Можно быть уникальным и при этом оставаться доступным.

б) Цвет - не единственный способ передачи информации в чистом виде

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

в) Почему нужно бояться использовать белое пространство?

Не располагайте все слишком близко, используйте пробелы для обозначения границ (просто!). Не бойтесь использовать четкие интервалы.

г) Производительность также означает доступность.

Не у всех есть быстрый интернет.

д) ARIA служит для улучшения опыта

Цель ARIA - улучшить опыт, а не постоянно исправлять проблемы доступности, вызванные плохо написанным HTML.

f) Что относится к отзывчивости?

Отзывчивость означает обеспечение доступности веб-сайта или приложения на устройствах разного размера. Обязательно протестируйте ее!

g) Будьте осторожны при использовании "x" и "@" для гендерно-нейтрального языка.

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

h) Есть ли в вашей компании люди с ограниченными возможностями?

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

i) К сожалению, вы не сможете обеспечить идеальный опыт для всех.

Но сделайте все возможное!

Инструменты, которые помогут вам

axe - тестирование веб-доступности

Проверка доступности для разработчиков в Chrome.

Проверка доступности для разработчиков в Chrome

Lighthouse

Автоматический инструмент с открытым исходным кодом для улучшения производительности, качества и доступности ваших веб-приложений.

Автоматический инструмент с открытым исходным кодом для улучшения производительности

BORREAU OF INTERNET ACCESSIBILITY - a11y Tool And Services for WCAG 2.0 Compliance .

Анализ доступности вашего сайта.

Анализ доступности вашего сайта

WAVE Инструмент оценки веб-доступности

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

Набор инструментов который помогает авторам сделать их веб-контент более доступным для

NVDA

Бесплатная программа для чтения с экрана.

Бесплатная программа для чтения с экрана

Заключение

Я надеюсь, что мне удалось предоставить некоторую информацию, дать некоторое понимание и представить важную тему в хорошем свете.

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

Большое спасибо за чтение!

Ссылки

  • WAI-ARIA
  • Контрольный список доступности
  • HTML 5 и ориентиры ARIA

Другие статьи по теме

  • Доступный дизайн - как сделать этот мир лучше для всех
  • Руководство по доступности для UX-дизайнеров
  • Проектирование с учетом доступности - это не так сложно
  • 7 вещей, которые должен знать каждый дизайнер о доступности