Итак, вы хотите использовать Tailwind CSS в качестве основы для своего приложения, но доступен ли он? A11y (доступность) — важный способ подключения ВСЕ пользователей на ваш сайт. И люди с инвалидностью, и люди без инвалидности могут воспользоваться A11y. Это также расширит сеть пользователей. Не говоря уже о том, что полностью доступный сайт также поможет улучшить SEO.

Если вы привыкли к таким фреймворкам, как Bootstrap, Foundation или Material Design со встроенными компонентами и элементами A11y, вы можете предположить, что Tailwind аналогичен. На первый взгляд в документации так легко может показаться, но Tailwind намного гибче!


Что такое Tailwind CSS?

Tailwind — это инфраструктура, ориентированная на утилиты, которая использует предопределенную систему проектирования с использованием классов. Вы можете легко создавать собственные компоненты прямо в своем HTML.

Некоторые преимущества:

  • Используйте меньше пользовательского CSS в целом.
  • Внесение любых изменений в стили намного безопаснее в больших приложениях.
  • Больше свободы в том, как выглядит ваш сайт, по сравнению с другими фреймворками, которые имеют предварительно стилизованные компоненты.

С этой гибкостью есть некоторые недостатки, когда речь идет об A11y. Одна из ключевых вещей, которую следует отметить, заключается в том, что Tailwind не является полностью доступным, как эти другие фреймворки.


Давайте поговорим о том, что может предложить Tailwind

Tailwind предоставляет нам два класса A11y: ‘sr-only’ а также ‘not-sr-only’. Эти классы сообщают средству чтения с экрана либо прочитать элемент, либо визуально игнорировать его (‘sr-only’) или показать элемент как визуально, так и программе чтения с экрана (‘not-sr-only’).

‘sr-only’ может быть добавлен как класс, чтобы визуально скрыть элемент, но все еще быть прочитанным программой чтения с экрана. Это действительно полезно в ситуациях, когда вам нужно дать инструкции людям, которые не могут получить доступ к сайту визуально.

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

<input type="text" id="search" name="search">
<label for="search" class="sr-only"></label>
Войти в полноэкранный режим

Выйти из полноэкранного режима

‘not-sr-only’ отобразит элемент для пользователя.

Другой пример, где вы можете использовать их, — это кнопка «Перейти к содержимому» или «Перейти к главному», которая визуально отображается только при нажатии на нее и в противном случае визуально скрыта. Класс ‘not-sr-only’ необходимо добавить после вкладки в элемент, чтобы сделать его визуально видимым. Простой способ сделать это — условно перейти в другое состояние, которое позволяет Tailwind. Это может выглядеть примерно так:

<a href="#main" class="sr-only focus:not-sr-only">Skip to Main Content</a>

Войти в полноэкранный режим

Выйти из полноэкранного режима


Новые дополнения Tailwind CSS A11y

По состоянию на Попутный ветер CSS v3.2 бета 2 есть новые варианты атрибутов aria-*. Их можно использовать для условного оформления вещей в зависимости от того, истинно ли состояние атрибута aria.

Подождите, что такое атрибуты ARIA?

Доступные многофункциональные интернет-приложения (ARIA) — это набор ролей и атрибутов, чтобы сделать веб-сайты более доступными для людей с ограниченными возможностями. Атрибуты ARIA могут заполнить пробел, которого могут не хватать некоторые нативные элементы HTML.

Добавление этих вариантов для атрибутов aria-* — это огромное улучшение и большой шаг вперед, чтобы сделать Tailwind доступным.

В примере здесь btn2 использует aria-pressed. Это позволяет пользователю узнать, что есть элемент, кнопка, которая не была нажата, но может быть нажата. Мы используем вариант aria-pressed:ring-2. Это означает, что при нажатии кнопки будет добавлен класс CSS Tailwind. ring-2. Это добавит границу вокруг кнопки. Без использования этого варианта Tailwind, как в btn1возможно, вам придется что-то сделать с прослушивателем событий и добавить класс с помощью JavaScript.

<button id="btn1" aria-pressed="false"></button>

<button id="btn2" aria-pressed="false" aria-pressed:ring-2></button>

Войти в полноэкранный режим

Выйти из полноэкранного режима

кнопка с синей окантовкой

Вы даже можете сами создавать собственные варианты арий в tailwind.config.js

Проверьте Объявления полный список новых дополнений ARIA, которые предложит Tailwind CSS.


Так чего же не хватает в Tailwind?

Другие фреймворки, которые вы, возможно, использовали в прошлом, могут содержать разработанные компоненты, которые полагаются на прослушиватели событий, такие как модальные диалоговые окна, раскрывающиеся меню и т. д., для работы с сенсорным экраном, мышью и клавиатурой из коробки. Поскольку Tailwind CSS настолько настраиваемый, вам как разработчику необходимо убедиться, что вы добавляете необходимые элементы в свои компоненты с помощью предоставленных вам инструментов Tailwind или самостоятельно с помощью JavaScript.

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

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

Бесплатные инструменты A11y:

A11y Информация:

CSS попутного ветра: