Email or username:

Password:

Forgot your password?
Мя :sparkles_lesbian:

Вопрос к пользователям скринридеров, или разбирающимся в теме доступности

Я тут открыла стандарт #aria, прочитала немножко, охуела от объемности и закрыла

Но вопрос остался: стоит ли проставлять роли элементам на статичном сайте (не веб-приложении), или достаточно будет не усложнять разметку и использовать теги #html5 в соответствии с их семантикой?

10 comments
Ваня

@mo ну если он у тебя статичный и ты пользуешься h1-6, section'ами и не делаешь

<button href="ya.ru" onclick="open(event.target.href)">link</button>

то проблем быть не должно. Но вообще можешь пройтись axe [1] и посмотреть что он тебе скажет.

[1]: deque.com/axe/

Мя :sparkles_lesbian:

@bano section, header-main-footer, заголовки все в соответствии с уровнем, альт-тексты для картинок, велосипедов стараюсь не изобретать

Щас прогоню, посмотрим

Ваня

@mo возможно тебе подойдёт то, что рассказывается в этом видео
youtu.be/cOmehxAU_4s

Мя :sparkles_lesbian:

@bano пока что я нашла какой то опенсорсный чекер, он посмотрел, нашел пару проблем, я их пофиксила
(Он нашел больше, но проблемы с контрастностью вызваны моими настройками браузера)

DELETED

@mo
* dir="ltr" на <html> повесь. Хотя для твоего случая это, скорее всего, ничего не изменит :)
* role="banner" на <div id="avatar"> тебе не нужен, потому что он всё равно в <header>, который уже имеет соответствующую роль.
* Есть мнение, что <h1> должен быть только один, а всё остальное — h2, h3… Т.е. можно, но бест практис — так не делать.

В общем и целом, элементы HTML сами имеют роли по умолчанию. Если ты не знаешь, зачем хочешь прописать какую-то — не прописывай.

@mo
* dir="ltr" на <html> повесь. Хотя для твоего случая это, скорее всего, ничего не изменит :)
* role="banner" на <div id="avatar"> тебе не нужен, потому что он всё равно в <header>, который уже имеет соответствующую роль.
* Есть мнение, что <h1> должен быть только один, а всё остальное — h2, h3… Т.е. можно, но бест практис — так не делать.

Мя :sparkles_lesbian:

@tennoseremel но разве lang="en" не подразумевает ltr?

DELETED

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

Мя :sparkles_lesbian:

@tennoseremel у меня нет символов с RTL :blobcatgooglyshrug:

DELETED

@mo Не совсем связано, но если хочется ещё странного, то есть:

developer.mozilla.org/en-US/do

Делаешь html { color-scheme: light dark; }, а потом с помощью той media прописываешь цвета для тёмной и светлой темы, в зависимости от. Обычно, одни цвета прописывают как есть (дефолт), а другие в media. Ну или с помощью кастомных свойств (CSS переменных) и media.

Go Up