Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильей. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.
Сегодня мы рассмотрим следующие аспекты:
- что можно сделать лучше для пользователей с дислексией;
- как незаметно улучшить интерфейс для пользователей с травмой кистей рук;
- есть ли сложности с сокращениями для пользователей скринридера.
Давайте начнём!
▍ Делаем веб-интерфейсы дружелюбнее к пользователям с дислексией
Опечатки это моя огромная проблема. Большинство из них я не вижу даже, когда перечитываю текст. И не знаю, почему так. Меня радует, что браузеры умеют подсвечивать слова, в написании которых я ошибся.
Только это можно очень легко сломать. Достаточно неправильно использовать атрибут spellcheck. Если вы используете значение false, то браузеры отключат проверку правописания.
<body>
<form class="form" spellcheck="false">
<!-- здесь элементы формы -->
</form>
</body>
Не делаете так, пожалуйста! Подсветка ошибок очень сильно помогает мне. Но я не только думаю о себе. Она также полезна для людей с дислексией.
Я познакомился с Викторией. У нее есть дислексия. Я попросил рассказать, какие сложности она встречает в интерфейсах.
«Типичная ошибка, которая очень сильно портит мне жизнь — это бесконечные опечатки. Представьте, что я легко могу сделать ошибку в своём ФИО. И даже Т9 тут не справляется.
Он может исправить слово до начальной формы, но этого недостаточно. Мои предложения просто становятся несогласованными, а я этого не замечаю. У меня слепота к ошибкам. Пока пальцем в неё не тыкнут, не увижу».
Пока я слушал Викторию, у меня появлялись идеи, как помочь. В CSS появился псевдо-класс ::spelling-error. Он даёт нам больше возможностей для стилизации. На примере формы отправки сообщения покажу, как он работает.
<body>
<form class="form">
<div class="form__group">
<label for="name">Имя</label>
<input id="name" type="text">
</div>
<div class="form__group">
<label for="email">Email</label>
<input id="email" type="email">
</div>
<div class="form__group">
<label for="msg">Сообщение</label>
<textarea id="msg">Здравсвуйте! Я хотела спросить. Сколько будет стоеть эта футболка?</textarea>
</div>
<div class="form__group">
<button>Отправить</button>
</div>
</form>
</body>
::spelling-error {
background-color: rgba(255, 42, 81, 0.2);
text-decoration: underline 2px solid rgba(255, 42, 81, 1);
text-underline-offset: 4px;
}
Когда пользователь кликнет в поля для ввода текста, браузер применит стили к словам, где есть опечатки.
Только мы можем использовать ограниченный набор свойств, а именно: color, background-color, cursor, caret-color, outline, text-decoration, text-emphasis-color и text-shadow. Не густо, но раньше не было ничего.
Я спросил у Виктории, будет ли полезно выделение опечаток, и получил интересный ответ.
«Да, это полезно. Если выбирать из вариантов с подчёркиванием ошибок и без, то, конечно, я выберу вариант с подчёркиванием. Только есть нюанс. Красная волнообразная линия под словом дает вайб учительницы, которая ставила двойки за диктант. Это неприятная ассоциация.
А вот окантовка вокруг слова с ошибкой воспринимается так, что исправляет программа. На неё уже не обижаешься».
Общаясь с Викторией, я понял, как тяжело ей было в школе и университете. Поэтому для неё важна форма выделения ошибки.
У меня не получилось узнать какие-то практические советы. Надеюсь, у меня получится в будущем. Поэтому пока остановимся на том, что нужно вдумчиво подходить к вопросу выделения ошибок. Как минимум, не надо использовать только подчеркивание, как в школе.
▍ Просто увеличим кликабельную область пунктов в навигации
Давайте представим, что нам нужно сверстать горизонтальную навигацию. Вот самую обычную, которую вы делали сотни раз. Например, как на Хабре.
Как вы бы реализовали отступ между пунктами? Я сделал опрос среди подписчиков. Большинство выбрали использовать свойство gap. Что ж, это вполне себе рабочее решение. Внешне проблем не будет. Но я предлагаю вам улучшить его.
Я напомню, что у меня есть травма рук. Тремор, боль в суставах и всё такое. Для меня критичны размеры интерактивных элементов. Честно говоря, мне хочется, чтобы они были максимально большими. К моему сожалению, так не будет. В этом случае интерфейс будет выглядеть некрасиво.
Только не спешите сдаваться. Можно поступить хитрее. Вернёмся к примеру с навигацией. По дизайну есть отступ между пунктами меню. Почему бы его не сделать тоже интерактивным?
В этом поможет свойство padding. Например, отступ между вторым и третьим пунктом разделим пополам. Первую половину добавить ко второму элементу справа, а вторую — к третьему слева. Именно так сделано на самом сайте Хабра.
Разработчикам я ставлю лайк! Да, я понимаю, что такое решение не всегда можно использовать. Здесь важнее смысл.
Всегда старайтесь делать размеры интерактивных элементов больше, чем они визуально отображены. Это необходимо мне, как человеку с травмой рук. Да что мне, вам же тоже удобнее будет.
А какое решение будете использовать вы лично — это дело второстепенное. Вы сами решите без моего участия. Но если нужна помощь, то у вас уже есть приём со свойством padding. А ещё я рассказал о трюке на основе псевдо-элементов. Тоже посмотрите.
▍ Что думают пользователи скринридера о сокращениях
В интерфейсах очень часто используются сокращения. Зрячие пользователи уже давно к ним привыкли. Например, сокращение «пн» (понедельник), «м-н» (микрорайон), «200К» (двести тысяч) не вызывает проблем. Мне стало интересно узнать, как пользователи с потерей зрения воспринимают такие элементы.
Как сказал Илья, многое зависит от опыта. Если человек ранее был знаком с сокращением, то быстро сориентируется.
«В целом популярные сокращения, например, дни недели, не вызывают сложностей. Это дело практически мгновенной привычки».
Только в этой ситуации всё равно могут возникнуть небольшие сложности. Сокращения можно перепутать на слух. В этой ситуации пользователи скринридера используют возможность озвучки посимвольно.
«Даже если не расслышу с первого раза, то могу пройтись клавишами стрелками посимвольно. Например, я могу так сделать, чтобы различить сокращения пн и пт».
Теперь перейдём к более сложной ситуации с малоизвестными сокращениями. Они вызывают у многих проблемы. Зрячие пользователи видят, в каком контексте сокращения используются. Например, сокращение «К», обозначающее тысячи.
Зрячим пользователям легко понять смысл, потому что они воспринимают сразу экран интерфейса. Они видят заголовок, число, иконку глаза и сразу думают: «О, это просмотры статьи!». Пользователи с потерей зрения не могут так.
Пока незрячему человеку не скажут смысл этого символа, то маловероятно, что он сам догадается. Я бы даже сказал, что он не поймет. По этой причине наша задача — избегать таких ситуаций. Но так получится не всегда.
Вернёмся к блоку с количеством просмотров статьи. Я думал, как реализовать символ «К». Можно обвернуть его в отдельный элемент <span> и скрыть атрибутом aria-hidden. Рядом добавить альтернативный текст, используя паттерн «vissualy-hidden».
<body>
<svg height="24" width="24" aria-hidden="true">
<!-- здесь иконка «Глаз» -->
</svg>
<span>4.5</span>
<span aria-hidden="true">К</span>
<span class="visually-hidden" role="presentation">тысячи просмотров</span>
</body>
Скринридеры скажут: «Четыре точка пять тысячи просмотров». Уже неплохо.
Правда, в этом решении меня смущает, что индексироваться будет сразу символ «К» и альтернативный текст. Мне кажется, что это нехорошо. Честно, не знаю почему. Просто боюсь, что негативно повлияет на индексирование. Могу быть неправым.
В итоге я придумал второе решение. Символ «К» сверстал, используя графику, и скрыл её атрибутом aria-hidden.
<body>
<svg height="24" width="24" aria-hidden="true">
<!-- здесь иконка «Глаз» -->
</svg>
<span>4.5</span>
<svg height="24" width="24" aria-hidden="true">
<!-- здесь иконка «К» -->
</svg>
<span class="visually-hidden" role="presentation">тысячи просмотров</span>
</body>
В этом случае поисковые роботы поймут, что на странице текст «4.5 тысячи просмотров». Вроде гораздо лучше. Но тут я хочу попросить вашей помощи. Что вы думаете? Как лучше верстать такие сокращения? Я буду рад услышать любые мысли. Спасибо!
▍ Заключение
С помощью этой статьи мы с Ильей хотели рассказать вам:
- какие сложности есть у пользователя с дислексией и как CSS помогает нам улучшать их пользовательский опыт;
- призвать вас увеличивать кликабельную область, если рядом с элементом есть свободное пространство;
- а также продумывать, как будут восприняты пользователями скринридеров сокращения в интерфейсах.
Также нам будет интересен и ваш опыт. Делитесь своими кейсами в комментариях. Спасибо за чтение.
P.S. Если вы хотите больше узнать о цифровой доступности, пишите мне в ТГ. Ссылка в профиле.
P.S.S. Все статьи серии доступны по тегу html_css_a11y_story_melnik909.
