Как вы можете легко сделать свой веб-сайт более доступным

1656657382 kak vy mozhete legko sdelat svoj veb sajt bolee dostupnym

Ярослав Ванькат

1*uCdCezP7OthCclgq_fDM7Q
Фото Джейми Стрит на Unsplash

Как дизайнер, разработчик или даже менеджер по продуктам, у вас есть тысячи обязанностей. Каждый проект требует большого внимания — компоновка на рабочем столе, мобильная компоновка, iPhone X (спасибо, Apple), поддержка IE, поддержка Safari…

Итак, почему вы должны заботиться о доступности?

Вот несколько неубедительных фактов:

  • Около 15% населения мира живет с определенной формой инвалидности, из которых 2–4% испытывают значительные трудности в жизнедеятельности. (Всемирная организация здравоохранения)
  • Каждый человек иногда временно теряет работоспособность — в определенном смысле — независимо от того, порезали ли вы палец, или попытались прочитать на низкоконтрастном экране в солнечный день.
  • В некоторых случаях доступность может потребоваться законом.

И самое главное:

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

– Адриан Розелли

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

Не изобретайте велосипед заново

Мы в Site Search 360 разработали плагин, позволяющий нашим клиентам легко интегрировать наше поисковое решение в существующий веб-сайт.

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

Вы не просто «включаете» доступность.

Но не переживай. Даже если вы никогда не думали о доступности в вашем текущем проекте, вам не потребуется много времени, чтобы внести некоторые улучшения. Я не могу назвать точное количество времени, которое мы потратили, чтобы сделать наш плагин более доступным, но это было не более нескольких рабочих дней (и около 30 комитов).

Сейчас я проиллюстрирую весь процесс (на основе нашего плагина JavaScript, а не веб-сайта), так что вам не придется начинать с самого начала. Но сначала:

Что такое доступность?

Прежде чем приступить к работе, вы должны понять, что такое доступность. Я не буду надоедать вам долгими определениями. Это короткое предложение подытоживает доступность, как я ее представляю:

Доступность – это искусство сделать свой продукт удобным для всех.

Кто все? Какие виды инвалидности следует учитывать?

  • Слепота и дальтонизм
  • Когнитивные нарушения
  • Физические изъяны
  • Пороки слуха (да, ваше видео требует субтитров)
  • Возраст

Несколько простых шагов

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

Напишите семантическую разметку

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

Вы, вероятно, видели такую ​​разметку (я пропустил классы и идентификаторы, поскольку они не имеют никакого семантического назначения):

<div>  <div>Recipes<span>98</span></div>  <div>Menu Items<span>1</span></div>  <div>Grocery Products<span>1</span></div></div>

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

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

Посмотрите на следующий фрагмент разметки:

<nav role=”navigation”>  <ul role=”menubar”>    <li>      <button role=”menuitem”>Recipes<span>98</span></button>    </li>    <li>      <button role=”menuitem”>Menu Items<span>1</span></button>    </li>    <li>      <button role=”menuitem”>Grocery Products        <span>1</span>      </button>    </li>  </ul></nav>

Гораздо лучше, не правда ли? Давайте рассмотрим важнейшие концепции семантической разметки:

  • Используйте смысловые элементы
  • Всегда используйте <главная роль=”майn”> для обозначения основного содержимого
  • добавить роль атрибут для поддержки старых браузеров
  • В соответствующих случаях используйте разделы вместо div
  • Пролет не является кнопку — не изменяйте значение элементов (если это не абсолютно необходимо)
  • использование кнопки для взаимодействия на странице
  • Заголовки являются одной из самых важных частей каждой веб-страницы. Всегда иметь единственный h1 заголовок и не пропускайте уровни заголовков

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

Что делать: Просмотрите текущую разметку, проверьте содержимое и структуру заголовков, убедитесь, что интерактивные элементы представлены a кнопку или элементы и использовать семантические теги HTML5.

Сделайте все функции доступными с помощью клавиатуры.

Это тоже важно. Каждое отдельное взаимодействие должно быть возможно с помощью клавиатуры.

Рассмотрим пример, похожий на предыдущий. У нас была кнопка «Показать больше результатов», которая на самом деле не являлась кнопкой. Вы можете догадаться? Да, это был стиль разд.

Можем ли мы поддерживать управление клавиатурой для такого элемента? Да, мы могли бы, сделав его фокусным и управляемым нажмите и keyup события во время проверки того, введите или пространство была нажата клавиша.

Тем не менее, это все еще сложнее, чем просто сменить разметку в/в и гt; к <бutton> — в этом случае вы просто имеетеe к привяжите событие щелчка, и вам не нужно заставлять элемент DOM быть фокусированным (и в качестве бонуса, вам не нужно писать столько стилей).

Основные выводы:

  • Все функции должны быть доступны с помощью клавиатуры.
  • Не удаляйте контуры из выделенных элементов (если вам не нравятся эти контуры, вы всегда можете их стилизовать)
  • Взаимодействия на странице должны быть представлены a кнопку
  • Взаимодействия вне страницы (ссылки) должны быть представлены привязкой (<;a>)
  • * Кнопки предназначены для активации щелчком, вводом и пробелом, привязки щелчком и нажатием ввода

Что делать: Убедитесь, что все интерактивные элементы доступны (и можно управлять) с помощью клавиатуры, выделенные элементы выделены, а порядок вкладок имеет смысл.

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

Посмотрите на следующее изображение:

1*SK1QQ_SJ4N7LwQQkqLJ5NQ
Слой Site Search 360 как видят зрячие люди.

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

1*2MHSkfIy4KyJd7BC3bYxyw
Слой Site Search 360 в виде слепых людей.

Вы уже видели полное изображение и знаете, какое действие должна выполнять та же кнопка. Смогли бы вы сказать, взглянув на второе изображение? Вы бы этого не сделали – крест визуализируется с помощью свойства CSS background-image, а кнопка вообще не имеет внутреннего содержимого.

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

<!-- Wrong markup --><button></button>
<!-- Accessible markup --><button aria-label=”Close layer”></button>
<!-- Alternative accessible markup --><button style="text-indent:100%;overflow:hidden;padding:0;white-space:nowrap;">Close layer</button>

Вы заметили, что я тоже удалил изображение из просмотра программы считывания с экрана? Вы также можете пометить их, используя ту же технику (где ария-labeledby может быть более уместным). Я удалил эти изображения, потому что в нашем случае они не имеют семантического назначения и обозначены тегами роль=”презентация”. Даже если они имели семантическое предназначение, мы обычно этого не знаем. Большинство из этих изображений будут иллюстративными, и маркировка их будет лишней — заголовок уже несет то же значение.

Атрибуты, которые вы должны знать:

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

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

Как проверить: Использование программы считывания с экрана для зрячего человека может показаться неестественным, поэтому сначала найдите время и ознакомьтесь с выбранным программным обеспечением (и, возможно, вы захотите попробовать все самые распространенные – VoiceOver на Mac, NVDA и Jaws на Windows и TalkBack на Android). Затем попробуйте перемещаться по веб-сайту только с помощью программного обеспечения считывания с экрана (выключите монитор). Даже краткий тест поможет вам понять, насколько хорошо работает ваш веб-сайт и выявит наиболее значительные проблемы.

Бонус: Вот краткий (и немного упрощенный) пример того, как мы улучшили наши автопредложения. Выделенные части (и две <спаns>) были добавлены как часть наших улучшений доступности.

<!-- Search Field --><input type="text" placeholder="search something"   autocomplete="off"   role="combobox"   aria-describedby="unibox-controls-description"   aria-owns="unibox-suggest-box"   aria-expanded="true"  aria-activedescendant="unibox-active">
<!-- Search Suggestions --><div id="unibox-suggest-box" role="listbox">;  <section aria-labelledby="unibox-suggest-cluster-heading-recipes">    <h3 id="unibox-suggest-cluster-heading-recipes"&gt;Recipes</h3>    <div aria-selected="false" role="option">      <img src=[...]         alt=""         aria-hidden="true"         role="presentation">      </div>      <;a href=[..]>Chicken Curry</a>    </div&gt;    <div aria-selected="true" role="option" id="unibox-active">      <img src=[...]         alt=""         aria-hidden="true"         role="presentation"&gt;      </div>      <a href=[..]>Curried Chicken</a>    </div>  </section>  </div>
<!-- Announce search suggestions have been changed --><span aria-live="polite" aria-atomic="true" role="status" class="ss360-sr-only">2 Search Suggestions Shown</span>
<!-- Suggest Box User Interface Controls --><span id="unibox-controls-description" class="ss360-sr-only">Use up and down arrows to select available result. Press enter to go to the selected search result.</span>

Упростите презентацию

Доступность, дизайн пользовательского интерфейса, UX — все это стороны одной трехсторонней медали.

Низкий контраст между фоном и передним планом усложнит чтение текста.

Дикие анимации делают ваш сайт трудным для похмельных людей (вас это не волнует? Подумайте о тех, у кого СДВГ — им может быть трудно сосредоточиться). Знаете ли вы, что существует a предпочитает уменьшенное движение медиа-запрос (хотя он еще не широко поддерживается)? Вы можете просто отключить всю свою анимацию, если установлен этот медиа-запрос. Вот как мы это делаем:

if(window.matchMedia &&   window.matchMedia("(prefers-reduced-motion: reduce)").matches){    animationSpeed = 0;}

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

Передача информации только цветом сделает информацию недоступной для дальтоников.

1*dKxQL7ZYNIblkZNlXrgkmQ
Классический пример – кнопки переключения работают без цвета.

Вот пример того, как мы изменили макет по умолчанию в окне просмотра – более короткие блоки текста и более высокий коэффициент контрастности.

1*y8GYLqsaPoRJ8iW3TzUeSw
Старый вид нашей остановки по умолчанию.
1*p6cWlFXDWggkXPecyUHKHA
Новый вид по умолчанию для нашей остановки.

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

1*fFNLYS8lSNZZoYy487bfwQ
Автопредложения по умолчанию.
1*0TvVZaH1RW0UeEG20NglEQ
Новые мобильные автопредложения.

Что делать:

  • Убедитесь, что длина блоков текста не превышает 80 символов и используйте высота линии что примерно в 1,5 раза больше, чем размер шрифта (который также должен быть достаточно большим – выбирайте 16 пикселей и больше)
  • Разрешить масштабирование (по крайней мере до 200%)
  • Проверьте свои коэффициенты контрастности
  • Убедитесь, что ваши объекты касания достаточно велики (44 x 44 пикселя – эмпирическое правило)
  • Там, где цвет передает информацию, убедитесь, что есть альтернативный способ получить ту же информацию
  • Просмотрите свои анимации и подумайте, действительно ли они вам нужны. Также предусмотрите механизм их отключения.
  • Забудьте о капчах…

Оценивайте, развивайте и интегрируйте свой рабочий процесс

Это только здесь, потому что «5 шагов» звучит лучше, чем «4 шага». Несмотря на это, всегда сосредоточьтесь на доступности в своем ежедневном (или, по крайней мере, еженедельном) рабочем процессе.

Вам не придется тратить большие суммы своего бюджета, чтобы сделать это правильно. Поэтому, планируя новую функцию, подумайте обо всех группах, которые я назвал в разделе «Что такое доступность?» часть данной статьи.

Тестирование

Есть много инструментов, которые помогут вам оценить, насколько доступен ваш веб-сайт. Я бы рекомендовал Tenon.io, FAE и Lighthouse для Google Chrome (откройте Dev Tools, перейдите к Audits и нажмите «Perform an audit…»).

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

Дополнительные источники

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

TL; DR

Используйте семантическую разметку, поддерживайте программы считывания с экрана, сделайте все интерактивные элементы доступными с помощью клавиатуры, упростите свою презентацию и прочтите по крайней мере все пункты в разделе «Несколько простых шагов».

Ладно, это все. Если вас интересуют точные изменения, которые мы внесли, просто спросите комментарии. И если вы ищете решение для поиска на сайте, которое работает на доступность (или просто альтернативу Google Site Search), Site Search 360 для вас.

И не забывайте хлопать.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *