Вы не далеко от того места, где вам нужно быть с этим. Ниже приведены несколько соображений / предложений.
Доступные «Советы»
Вместо использования aria-describedby на вашем наконечнике, почему бы не сделать клавиатуру наконечника доступной. Возможно, вы рассматривали программы чтения с экрана, но как насчет тех, кто использует клавиатуру или другие вспомогательные технологии без программы чтения с экрана? В настоящее время они не могут получить доступ к вашему «наконечнику».
Самый простой способ (хотя и не идеальный) - показать tooltip на фокусе, а также навести курсор и превратить наконечник в фокусируемый элемент с помощью tabindex="0" , Недостатком этого является то, что пользователям ваших программ чтения с экрана все еще потребуется aria-describedby
. Лучшим решением было бы сделать сам наконечник доступным, а также сделать его постоянным / переключаемым.
Таким образом, вы должны использовать div или span с display:none для содержимого, рядом с кнопкой в DOM, а затем активировать и скрыть на Enter нажатие клавиши.
Думайте об этом, как о мини-модале (поэтому используйте кнопку закрытия и убедитесь, что его можно закрыть клавишей Escape . В отличие от модального режима вам не нужно ловить фокус, однако вы следует переместить фокус на всплывающую подсказку, используя tabindex="-1", а некоторые JS и вернуть фокус на кнопку, открывшую ее, когда она закрыта).
Эта статья о всплывающих подсказках и «подсказках» является хорошим ориентиром, 'toggletips' - это метод, который я предлагаю, поскольку он лучше соответствует назначению вашей кнопки 'i'.
Звездочка для 'Обязательный'
Я заметил, что вы добавили несколько здесь программа чтения с экрана, и это здорово. Однако вы не рассматривали людей с когнитивными нарушениями. Звезды не такие четкие, как надпись «(обязательно)».
Используя «(обязательно)» (записывается в <label> после имени ввода, например, <label for="Textbox3836">First Name (required)</label>) вместо «*», вы затем устраняете необходимость в тексте «только для sr» и зависимость от шрифтов-офигенных шрифтов (у которых есть свои проблемы с доступностью ... см. заключительный заголовок "Заключительные замечания").
Использование aria-labelledby для отображения текста-заполнителя для программ чтения с экрана, которые не поддерживают это.
Нет правильного или неправильного ответа на этот вопрос. Да, некоторые программы чтения с экрана не раскрывают эту информацию, а другие - независимо от того, что вы делаете, для некоторых пользователей - неоптимальный опыт.
Я бы лучше придерживался того, как вы это сделали, лучше чтобы некоторые пользователи слышали информацию дважды, а не вообще.
Однако вы можете утверждать, что, поскольку вы правильно указали информацию о подсказках в пункте 1, второй бит информации не является необходимым, поэтому его можно удалить, оставив его в качестве заполнителя для тех программ чтения с экрана, которые делают прочитайте его.
То, что вы могли бы сделать, это включить информацию в свой «совет» в конце. «Совет: Пожалуйста, введите ваше официальное имя. (например, Эндрю) »
Дойдя до крайности, не зная, следует ли вам использовать, например, «например» или «Ex:», я go проведу некоторые исследования, как я всегда использую «например», но вы заставили меня задуматься.
Заключительные замечания
Как я упоминал ранее, "font-awesome" и другие шрифты значков могут сделать ваше приложение менее доступным, если конечный пользователь заменит шрифты.
Например, пользователь с дислексией может использовать пользовательскую таблицу стилей, чтобы переопределить все шрифты на вашей странице. В этот момент ваши иконки становятся «пропущенными шрифтовыми квадратами гибели» и теряют всякий смысл.
Вместо этого используйте встроенный SVG, они быстрее, доступнее, уменьшают необходимость в более чем 100 КБ шрифтов, замедляющих визуализацию вашей начальной страницы. вниз и позволит вам больше контролировать background) должен иметь контрастность 3: 1 к фону, где он находится на странице.
Также вы можете найти этот частично связанный пост интересным в отношении того, как я предлагаю обрабатывать атрибут title на изображении. Это может помочь вам составить шаблон для раздела «Советы».
Что бы я сделал?
Я бы упростил задачу: сначала спроектируйте все эти элементы на странице.
Это делает все более чётким в вашей разметке, проще в обслуживании, предоставляет подсказки для всех, избавляет от необходимости использовать шрифт, и с небольшим переворотом может выглядеть так же красиво (мой пример немного грубо).
См. пример:
.input-container label, .input-container span{
display: block;
}
.input-container label{
font-weight: bold;
font-size: 1.2rem;
cursor: pointer;
}
.input-container span{
color: #555;
}
.input-container input{
display: block;
width: 94%;
margin-top: 10px;
padding: 2% 3%;
border: 1px solid #666;
border-radius: 5px;
}
.input-container {
width: 75%;
padding: 15px;
background-color: #f8f9fa;
border: 1px solid #333;
}
<div class="input-container">
<label for="ID1">First Name (Required)</label>
<span>Tip: Please enter your legal first name. For Example 'Andrew'</span>
<input id="ID1" placeholder="Your First Name"/>
</div>