От автора: новичкам сложно понять, что такое доступность сайта. Научиться разрабатывать совместимые, полностью доступные сайты и приложения очень сложно, несмотря на благородную цель. В этой области очень сложно найти правильный совет, так как все постоянно меняется и растет. Я написал эту статью, чтобы дать вам пару небольших советов, которые многое изменить, не затрагивая процесс разработки. Поехали!
Структура документа и семантика
Для вас не должно быть сюрпризом, что семантическое структурирование HTML может сильно повлиять на сайт. Скрин ридеры полагаются на хорошо структурированный документ, чтобы следовать описанию. Поэтому обязательно используйте HTML5 адаптивные и эффективные элементы.
Разберем три вещи, которые помогут хорошо структурировать документ и придать ему семантики.
Используйте один тег main
Хороший пример создания адаптивной, семантической структуры документа – использовать только один тег main. Это указатель на самый важный контент на странице для пользователя.
Добавьте к нему ID, а в хедер вставьте ссылку на main:
<header role="banner"> <h1>Your main page title</h1> <a href="#main-content">Skip to the main content</a> </header> <!-- Further down the document --> <main id="main-content"> <!-- Put your main body of content in here and other really important stuff --> </main>
Этот небольшой трюк должен сильно помочь пользователям на скрин ридерах. Так они смогут сразу перейти к важному контенту. Пользователи с клавиатурой также могут воспользоваться этим преимуществом.
Также можно добавить стиль :focus к ссылке, чтобы она стала видимой. Попробуйте нажать Tab на GitHub.com. Классно, да?
Используйте элементы правильно
Стилизовать button очень сложно, так ведь? Но это не значит, что нужно цеплять JS события к DIV или <a href=»#»>. Если использовать тег button, то вы сразу получаете события клавиатуры. Вы также помогаете пользователям на скрин ридерах – программа будет правильно называть элементы. Посмотрите пример ниже:
document.getElementsByTagName('button')[0].addEventListener('click', evt => { alert('Oh, hey there!');
});
Событие будет запущено, если пользователь поставит фокус на кнопку и нажмет enter. Так ваша жизнь и жизнь пользователя станет немного проще. Оно же того стоит, да?
Заблокируйте иерархию заголовков
Пользователи скрин ридеров часто перемещаются по странице по структуре заголовков. Поэтому нам стоит помочь им и создать хорошую иерархию. Разберем стандартный пост в блоге:
<main id="main-content"> <article> <!-- The page title is up in the main <header> in this instance --> <h2>My awesome blog post</h2> <p>Vestibulum id ligula porta felis euismod semper.</p> <p>Vestibulum id ligula porta felis euismod semper.</p> <h3>A sub-section of this post</h3> <p>Vestibulum id ligula porta felis euismod semper.</p> <h4>A sub-section of the sub-section</h4> <p>Vestibulum id ligula porta felis euismod semper.</p> </article> </main>
В этом примере пользователь может переместиться в начало «My awesome blog post» и затем перепрыгнуть к подразделам и вложенным разделам. Также они могут вернуться обратно. Отличный способ максимально упростить пользователям потребление контента.
Рекомендуется иметь на странице всего один h1 элемент, хотя спецификация W3C HTML5 говорит об обратном. Лично я предпочитаю использовать один h1, но вы можете использовать много заголовков первого уровня. Главное, чтобы была хорошая иерархия.
Правильно настройте контраст цветов
Для совместимости с WCAG 2.0 AA необходимо иметь коэффициент контраста нормального текста 4.5:1. Это относится к параграфам, кнопкам, меню и т.д. Для крупного текста (заголовки) используйте соотношение 3:1. Я бы сказал, что это должен быть ваш минимум – правильной контрастности можно достичь в инструментах типа Tota11y, Contrast и WebAim contrast checker. Но вы можете не ограничиваться этими значениями, в дизайне может быть множество вариантов.
Почему контраст так важен – очень много разных устройств и факторов, которые вы даже не учитываете, такие как яркое солнце и экраны плохого качества. Добавьте к этому ухудшение зрения или мигрень, и вы уже проблема для своих пользователей.
Правильный контраст окажет огромный позитивный эффект на весь спектр пользователей.
Ответственные текстовые лейблы
Все мы делали списки элементов без описания с визуально привлекательной кнопкой More, так ведь? А что же это more? Нам нужно быть более ответственными и давать контекст.
Один способ – визуально прятать описательный текст через CSS и прятать неописательный текст от скрин ридеров. Первое, что приходит в голову, использовать display: none;. Однако скрин ридеры могут игнорировать такие элементы, поэтому нужно быть более креативным. Я использую что-то наподобие:
.visually-hidden { display: block; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); clip-path: inset(1px); visibility: hidden; white-space: nowrap; position: absolute;
}
С этим CSS мы можем делать что-то типа:
<a href="/link-to-your-page"> <!-- This is hidden from a screen reader, but visible visually --> <span aria-hidden="true">More</span> <!-- This is visible to a screen reader, but visually hidden --> <span class="visually-hidden">Continue reading: "Your post title here"</span> </a>
Пользователи с нормальным зрением увидят лишь More, а пользователи скрин ридеров услышат «Continue reading: ‘Your post title here». И тот и тот пользователь счастливы.
То же самое можно сделать через aria-label на теге <a>. Этот атрибут перезаписывает текст внутри ссылки для скрин ридеров:
<a href="/link-to-your-page" aria-label="Continue reading: 'Your post title here'"> More </a>
Небольшие правки в шрифте, которые окажут большое влияние
Всегда стоит учитывать, что ваш контент могут читать люди с нарушением зрения или психики, поэтому небольшие правки в шрифте могут сильно помочь.
Тело контента, например, статьи должно иметь размер 16px (или эквивалентный размер в других единицах) минимум. Также стоит увеличить line-height до 1.5. Расстояние между строками поможет читателям с дислексией лучше понять контент. Комбинация размера и отступов хорошо подходит для старых людей и/или людей с близорукостью. Даже небольшие заключения и боковой контент должен быть минимум 12px. Более мелкий текст люди не смогут прочитать.
Еще один трюк – выделять ключевые слова и фразы, если контент сложный. Это поможет не только людям с затруднениями в понимании, но и тем, кто любит поверхностно сканировать статьи, как я.
И последнее в этом разделе: осторожно выбирайте шрифт. Шрифты со сложными лигатурами и декоративными элементами могут сильно отвлекать. Поэтому ограничьте их использование только заголовками. Также читатели с дислексией лучше воспринимают шрифты sans-serif.
Улучшите поддержку клавиатуры
Вы можете внести несколько маленьких правок и помочь пользователям, которые используют клавиатуру для перемещения по сайту.
Скажем, у вас есть маленькая кнопка, показывающая диалоговое окно по клику. Прицепите событие к клавише escape, чтобы прятать окно. Пример кода:
document.addEventListener('keyup', (evt) => { if(evt.keyCode === 27) { // Run whatever code hides your dialogue }
});
Еще один трюк для пользователей с клавиатурой – вы можете не прятать от них фокус. С outline браузеры дают нам состояния фокуса. Знаю, выглядит страшно, но это работает для пользователей с клавиатурой. Если хотите избавиться от синей подсветки, просто используйте :focus для стилизации изменения состояния. Пример:
.your-element { background: red;
} .your-element:focus { outline: none; /* Reset the default */ box-shadow: 0 0 0 3px black; /* A very obvious state change */
}
Не полагайтесь только на цвет при передаче смены состояний
Закончим статью важным советом. Нельзя полагаться только на цвета при смене состояний. Разберем примерный сценарий:
У вас есть кнопка, которая публикует форму. Вы написали JS, который делает ее серой, когда посылаются данные. Затем кнопка становится либо зеленой, либо красной, в зависимости от состояния.
Для дальтоников это просто кошмар. Для них кнопка может почти не менять цвет, и они могут просто кликать и кликать по ней, пока совсем не запутаются. Это не хорошо.
Поэтому давайте к цвету добавим сообщение, поддерживающее состояния кнопки при получении ответа.
Так можно быстро сообщить пользователю, что что-то изменилось. Цвет, текст и иконки четко передают изменение состояния. Также можно на время обработки ответа блокировать кнопку.
Заключение
Эти маленькие советы должны оказать большое влияние на пользователей. Надеюсь, вы что-то реализуете в своих проектах. Чем больше вы знаете, тем лучше будут становиться ваши сайты и продукты для более широкой аудитории. А это же хорошо, так ведь?
Автор: Andy Bell
Источник: https://css-tricks.com/
Редакция: Команда webformyself.