{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"ARIA (Accessible Rich Internet Applications)"},{"type":"text","text":" — это "},{"type":"text","marks":[{"type":"bold"}],"text":"спецификация W3C"},{"type":"text","text":", которая добавляет специальные атрибуты в HTML, чтобы "},{"type":"text","marks":[{"type":"bold"}],"text":"улучшить доступность интерактивных веб-интерфейсов"},{"type":"text","text":" для людей, использующих скринридеры и другие вспомогательные технологии."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Проще говоря, "},{"type":"text","marks":[{"type":"bold"}],"text":"ARIA помогает браузеру и скринридеру “объяснить”, что делает элемент"},{"type":"text","text":", если его поведение нельзя понять только из HTML."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 Зачем нужна ARIA"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Современные сайты часто строятся на JavaScript и динамических фреймворках."},{"type":"hardBreak"},{"type":"text","text":"Многие интерактивные компоненты (выпадающие меню, вкладки, модальные окна, слайдеры) создаются из обычных "},{"type":"text","marks":[{"type":"code"}],"text":"

"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" — и для скринридеров они "},{"type":"text","marks":[{"type":"bold"}],"text":"выглядят “пустыми”"},{"type":"text","text":", без роли или состояния."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"ARIA “добавляет смысл” таким элементам, чтобы читалка понимала:"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"“Это кнопка”, “Это диалог”, “Это вкладка”, “Этот пункт сейчас выбран”."}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 Как выглядит ARIA на практике"}]},{"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":"role=\"button\""},{"type":"text","text":" — сообщает, что это "},{"type":"text","marks":[{"type":"bold"}],"text":"кнопка"},{"type":"text","text":", даже если она не "},{"type":"text","marks":[{"type":"code"}],"text":"\n"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Для описания связи между элементами"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"

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

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

\n"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Для динамических списков"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"

Москва
Питер

\n"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 Принцип “ARIA — последняя мера”"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Используй ARIA "},{"type":"text","marks":[{"type":"bold"}],"text":"только тогда"},{"type":"text","text":", когда нельзя достичь нужного поведения нативными HTML-тегами."}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅ Лучше:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌ Хуже:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"

ОК

\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Нативные элементы автоматически доступны — ARIA нужна "},{"type":"text","marks":[{"type":"bold"}],"text":"только для кастомных интерфейсов"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 Зачем ARIA важна"}]},{"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","text":" для людей, использующих экранные читалки."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Сообщает о состоянии элементов"},{"type":"text","text":" (раскрыто, выбрано, активно)."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Повышает доступность single-page и JavaScript-приложений."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Соответствует WCAG"},{"type":"text","text":" — без ARIA невозможно достичь уровня AA и выше."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔸 Вывод:"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"ARIA — это язык “перевода” между вашим интерфейсом и вспомогательными технологиями."},{"type":"hardBreak"},{"type":"text","text":"Она не изменяет внешний вид, а "},{"type":"text","marks":[{"type":"bold"}],"text":"добавляет смысл и структуру"},{"type":"text","text":" для невизуальных пользователей."}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Простыми словами: "},{"type":"text","marks":[{"type":"bold"}],"text":"HTML делает сайт видимым, ARIA делает его понятным."}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Что такое ARIA (Accessible Rich Internet Applications)?

Комментарии