Есть ли причины не использовать состояния и роли ARIA в качестве селекторов в CSS?

в настоящее время я работаю над созданием доступного сайта, используя, среди прочего, теги ARIA. Мне пришло в голову, что такие атрибуты, как aria-invalid были бы хорошими селекторами для моего CSS, а не с помощью .error класса.

преимущество этого-более компактный, более значимый HTML, который мне легче подключить из CSS (и JS). Тем не менее, я не видел этого в другом месте, поэтому я подозреваю, что есть недостатки в использовании тегов доступности для стиля. Я подозреваю, что использование неограниченных селекторов атрибутов делает менее эффективным CSS, но есть ли другие недостатки, которые я не рассматривал?

18
css html wai-aria

2 ответов

селекторы атрибутов - очень гибкий способ управления стилями для крупномасштабного CSS, потому что селекторы атрибутов всегда будут иметь специфика 0-0-1-0.

[aria-*] селекторы отлично подходят для использования в качестве крючков для укладки, и я также рекомендую использовать custom [data-*] атрибуты для заполнения пробелов, где вам может понадобиться одноразовый. Конечно, селекторы классов должны продолжать использоваться, однако вы можете сделать некоторые очень элегантные расширения стиля с атрибутом селекторы:

[data-foo] {
    color: red;
}
[data-foo="bar"] {
    color: blue;
}
[data-foo="fizz"] {
    color: green;
}

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

вы можете создать свою собственную форму классов, используя [attr~="value"] селектор если нужно.

С помощью атрибут"содержит" селектор может быть полезно для техника, которую я называю "классные изображения"

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

18

вам нужно понять, что атрибуты, такие как aria-invalid следует избегать в первую очередь. Вы всегда должны использовать родную семантику, если она доступна (например,required на входных элементах). Это называется первое правило арии.

Я думаю, что вы действительно хотите, чтобы добавить стиль к вычисляемые состояния и свойства арии. К сожалению, на данный момент это не поддерживается в CSS.

в резюме: Нет ничего плохого в использовании [aria-invalid] как a CSS-селекторы. Это просто не поможет вам, потому что вы должны избегать этого атрибута в первую очередь.

0