Attribute

Доступность с помощью tabА

Атрибут tabindex="1" позволяет обратиться к элементу с помощью tab даже если это не предусмотрено спецификацией, как для тегов input, например.

Также этот атрибут может изменять порядок переходов, заданный по умолчанию (по порядку объявлению элементов в DOM)

hot-key

Если клавиши клавиатуры не заняты ОС (операционной системой), то эти клавиши можно присвоить DOM элементам с помощью атрибута accesskey="a"

Атрибуты - указатели

Возможна ситуация когда элемент (сложный график, к примеру) требует подробного пояснения в другом элементе (например, в параграфе или даже section). Такие элементы для программы чтения не связаны между собой. Но существует способ связать элемент и пояснение. Способ заключается в том, что элементу-пояснению задают id="myId", а элементу - источнику задают атрибут aria-labelledby="myId" или longdesc="#myId"

Лучше использовать теги figure, figcaption

Произвольные атрибуты

Атрибут data- позволяет создавать собственные атрибуты. Например можно создать атрибут data-message="...". Программы для чтения смогут прочесть название атрибута и озвучить текст при надлежащих настройках программы.

Пример

See the Pen Accessibility by Gennadiy ( @Gorbulin) on CodePen.

back