{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В спецификации "},{"type":"text","marks":[{"type":"bold"}],"text":"WAI-ARIA (Accessible Rich Internet Applications)"},{"type":"text","text":" существует три основных типа атрибутов, каждый из которых отвечает за свою роль в обеспечении доступности интерфейса."},{"type":"hardBreak"},{"type":"text","text":"Они помогают экранным читалкам и другим вспомогательным технологиям "},{"type":"text","marks":[{"type":"bold"}],"text":"понимать смысл, состояние и взаимосвязь элементов"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 1. "},{"type":"text","marks":[{"type":"bold"}],"text":"Роли (roles)"},{"type":"text","text":" — определяют "},{"type":"text","marks":[{"type":"italic"}],"text":"что это за элемент"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Роль сообщает, "},{"type":"text","marks":[{"type":"bold"}],"text":"какую функцию выполняет элемент"},{"type":"text","text":" — кнопку, вкладку, диалог, меню, список и т. д."},{"type":"hardBreak"},{"type":"text","text":"Это особенно важно, если используется кастомная верстка на "},{"type":"text","marks":[{"type":"code"}],"text":"

"},{"type":"text","text":" или "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" вместо нативных HTML-тегов."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Примеры:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"

Отправить

...

Москва

\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"💡 Примеры распространённых ролей:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"role=\"button\""},{"type":"text","text":" — кнопка"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"role=\"link\""},{"type":"text","text":" — ссылка"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"role=\"checkbox\""},{"type":"text","text":" — флажок"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"role=\"dialog\""},{"type":"text","text":" — модальное окно"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"role=\"menu\""},{"type":"text","text":" / "},{"type":"text","marks":[{"type":"code"}],"text":"role=\"menuitem\""},{"type":"text","text":" — навигационное меню"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"role=\"alert\""},{"type":"text","text":" — важное уведомление"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 2. "},{"type":"text","marks":[{"type":"bold"}],"text":"Состояния (states)"},{"type":"text","text":" — описывают "},{"type":"text","marks":[{"type":"italic"}],"text":"текущее состояние элемента"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Эти атрибуты динамичны — "},{"type":"text","marks":[{"type":"bold"}],"text":"их значения могут меняться в процессе работы интерфейса"},{"type":"text","text":"."},{"type":"hardBreak"},{"type":"text","text":"Они сообщают пользователю, что сейчас происходит: элемент активен, раскрыт, выбран и т. д."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Примеры:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n

Меню

Москва

\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"💡 Часто используемые состояния:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"aria-checked"},{"type":"text","text":" — отмечен ли флажок"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"aria-expanded"},{"type":"text","text":" — раскрыт ли элемент (аккордеон, меню)"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"aria-pressed"},{"type":"text","text":" — нажата ли кнопка-переключатель"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"aria-selected"},{"type":"text","text":" — выбран ли пункт"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"aria-hidden"},{"type":"text","text":" — скрыт ли элемент от скринридеров"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 3. "},{"type":"text","marks":[{"type":"bold"}],"text":"Свойства (properties)"},{"type":"text","text":" — описывают "},{"type":"text","marks":[{"type":"italic"}],"text":"характеристики и связи элементов"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Эти атрибуты "},{"type":"text","marks":[{"type":"bold"}],"text":"не зависят от состояния"},{"type":"text","text":", они задают дополнительную информацию: описания, связи, роли, группы."},{"type":"hardBreak"},{"type":"text","text":"С их помощью можно “связать” элементы между собой, добавить текстовые пояснения и контекст."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Примеры:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"

Подтверждение

Вы уверены, что хотите удалить файл?

\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"💡 Часто используемые свойства:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"aria-label"},{"type":"text","text":" — короткое текстовое описание элемента"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"aria-labelledby"},{"type":"text","text":" — связывает элемент с заголовком (по "},{"type":"text","marks":[{"type":"code"}],"text":"id"},{"type":"text","text":")"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"aria-describedby"},{"type":"text","text":" — связывает с описанием"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"aria-controls"},{"type":"text","text":" — указывает, какой элемент управляется этим"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"aria-live"},{"type":"text","text":" — сообщает, что контент внутри обновляется динамически (например, сообщения чата)"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 4. (дополнительно) "},{"type":"text","marks":[{"type":"bold"}],"text":"ARIA Live Region атрибуты"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Используются для "},{"type":"text","marks":[{"type":"bold"}],"text":"динамических обновлений"},{"type":"text","text":" контента — когда нужно сообщить пользователю о новых изменениях без перезагрузки страницы."},{"type":"hardBreak"},{"type":"text","text":"Пример:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"

Загрузка завершена

\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Значения:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"off"},{"type":"text","text":" — читалка не сообщает об изменениях;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"polite"},{"type":"text","text":" — сообщает, когда пользователь закончит текущую операцию;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"assertive"},{"type":"text","text":" — сообщает немедленно (для ошибок, предупреждений)."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔸 Итоговая таблица:"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Тип"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Что делает"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Примеры"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"role"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Определяет тип элемента"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"role=\"button\""},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"role=\"dialog\""}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"state (состояние)"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Показывает текущее состояние элемента"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"aria-checked"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"aria-expanded"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"aria-selected"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"property (свойство)"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Добавляет описание, контекст и связи"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"aria-label"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"aria-labelledby"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"aria-describedby"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"aria-controls"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔸 Вывод:"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"ARIA-атрибуты бывают "},{"type":"text","marks":[{"type":"bold"}],"text":"трёх типов"},{"type":"text","text":":"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Роли ("},{"type":"text","marks":[{"type":"code"}],"text":"role"},{"type":"text","marks":[{"type":"bold"}],"text":")"},{"type":"text","text":" — кто это;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Состояния ("},{"type":"text","marks":[{"type":"code"}],"text":"aria-*"},{"type":"text","marks":[{"type":"bold"}],"text":" state)"},{"type":"text","text":" — что сейчас происходит;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Свойства ("},{"type":"text","marks":[{"type":"code"}],"text":"aria-*"},{"type":"text","marks":[{"type":"bold"}],"text":" property)"},{"type":"text","text":" — какие есть связи и описания."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Вместе они делают интерфейс "},{"type":"text","marks":[{"type":"bold"}],"text":"понятным для скринридеров, доступным для клавиатуры"},{"type":"text","text":" и соответствующим стандартам "},{"type":"text","marks":[{"type":"bold"}],"text":"WCAG"},{"type":"text","text":"."}]}]}

Какие основные типы ARIA-атрибутов существуют?

Комментарии