Дизайн, который я реализую, имеет общую кнопку «Учетная запись», единственным содержимым которой является значок пользователя (и крошечный значок раскрывающегося списка).
Достаточно ли добавить атрибут заголовка к кнопке ("Ваша учетная запись"), или я должен добавить текст внутри кнопки, который я просто визуально скрою (оставаясь доступным для программ чтения с экрана), или и то, и другое?
Если вы используете input кнопка с изображением, используйте ее alt атрибут:
<input type="image" src="account-icon.png" alt="Your account">
Если вы используете button с img используйте img. noreferrer">alt атрибут:
<button type="button"><img src="account-icon.png" alt="Your account"></button>
Если вы используете a с img используйте атрибут alt img:
<a href="/account.html"><img src="account-icon.png" alt="Your account"></a>
Если вы добавляете значок с помощью CSS (вместо HTML), вы должны включить текстовую метку в HTML и визуально скрыть ее с помощью CSS.
Для удобства использования вы можете рассмотреть возможность использования как значка, так и текста. Но это можно обсудить на User Experience SE. См., например, вопрос "когда использовать значки, значки с текстом или только текстовые ссылки?" .
Чтобы решить, какой alt текст использовать, см. мой ответ на вопрос "Каким должен быть текст ALT для изображения, которое также является ссылкой?". Вы не должны использовать атрибут title для указания альтернативного текста.
<button><span class="icon user"></span></button>). Я предполагаю, что это не квалифицируется как изображение, и я должен просто добавить визуально скрытую метку?
- person Elise; 08.02.2014
Так что, если это кнопка со значком, у меня есть пример на CodePen: Супердоступная кнопка с подсказкой
Это разметка, которую я использую:
<button type="button" class="button">
<span class="button-icon" aria-hidden="true" data-icon="x"></span>
<span class="button-text"><strong>Navigation menu</strong></span>
</button>
Вы можете скрыть текстовое содержимое с помощью css и сделать его видимым при наведении/фокусе. См. пример для более подробной информации о CSS.
Вот список того, что этот метод обеспечивает доступность:
<button> and therefor inherits:
Вы можете либо добавить текст кнопки и визуально скрыть идентификатор, либо добавить к значку атрибут alt (если это img). Последний даже лучше, на мой взгляд.
В следующей статье представлена информация об использовании ARIA для повышения доступности SVG: Использование ARIA для повышения доступности SVG. Он датирован 2013 годом и содержит несколько таблиц совместимости, а также следующий фрагмент кода, который имел наилучшую доступность:
<svg xmlns=http://www.w3.org/2000/svg role="img" aria-labelledby="title desc">
<title id="title">Circle</title>
<desc id="desc">Large red circle with a black border</desc>
<circle role="presentation" cy="60" r="55" stroke="black" stroke-width="2" fill="red" />
</svg>
Поместите это в button, и вы получите широкую поддержку. Конечно, теперь, когда появился SVG2.0, использование ARIA может измениться незначительно.
Если для размещения значка используется CSS ::after, ваша кнопка, вероятно, будет выглядеть примерно так:
<button></button>
В этом случае вы можете сделать это и полностью пропустить ARIA:
<button>the label</button>
В противном случае следующее должно помочь:
<button aria-label="the label"></button>
А вот сопоставления SVG Accessibility API (черновик на январь 2019 г.), которые отображает, как SVG должны работать в сочетании с API специальных возможностей, если вы хотите получить больше технических знаний.
Хотя, если вы просто вставите title внутри SVG, это, скорее всего, будет работать сейчас просто потому, что это очевидно.
Используйте для этого aria-label. Пример:
<button aria-label="Close" onclick="myDialog.close()">X</button>
Из MDN:
Атрибут aria-label используется для определения строки, помечающей текущий элемент. Используйте его в тех случаях, когда текстовая метка не видна на экране. Если есть видимый текст, обозначающий элемент, используйте вместо него aria-labelledby.
