Доступность FontAwesome, Bootstrap и программы чтения с экрана

Мне интересно узнать о специальных возможностях программы чтения с экрана с использованием фреймворка Twitter Bootstrap и шрифтов со значками FontAwesome.

Я смотрю на две разные ситуации с иконками:

1) У значка есть вспомогательный текст, который подхватит программа чтения с экрана:

<a href="#" class="btn btn-default" role="button"><span class="fa fa-pencil"></span> Edit</a>

2) И отдельный значок без вспомогательного текста:

<a href="#" class="btn btn-default" role="button" title="Edit"><span class="fa fa-pencil"></span></a>

В идеале в обоих случаях программа чтения с экрана сообщит, что элементом является кнопка «Изменить».

На сайте FontAwesome:

Font Awesome не сбивает с толку программы чтения с экрана, в отличие от других шрифтов со значками.

Я не вижу никаких speech тегов css, связанных с FontAwesome или Bootstrap, и мне не совсем понятно, как программа чтения с экрана отреагирует на каждую из этих ситуаций.

Я также знаю aria-hidden и .sr-only Bootstrap, и должен быть идеальный способ справиться с обеими ситуациями.

Изменить: добавлен title="Edit к примеру 2.

В чем преимущество использования aria-label="Edit" перед стандартным title="Edit"?

Изменить 2: я наткнулся на эта статья, в которой объясняются плюсы и минусы различных реализаций использования.


css twitter-bootstrap accessibility font-awesome screen-readers
person dmathisen    schedule 06.01.2014    source источник
comment
Если вы хотите поддерживать программы чтения с экрана, я полагаю, у вас есть одна или несколько программ чтения с экрана, с которыми вы тестируете? Вы пытались увидеть, как они сейчас реагируют?   -  person user247702    schedule 06.01.2014
comment
Возможно, я неправильно понимаю это, но, конечно же, во втором примере вы можете просто использовать атрибут title в теге a href? - title = Редактировать. Черт возьми, вы можете полностью посвятить себя обеспечению доступности и фактически добавить информацию о том, к чему относится кнопка редактирования - title = Edit the content xyz. Думаю, это зависит от вашего окружения. Если ваша кнопка редактирования находится в статье или разделе, я думаю, программа чтения с экрана сможет точно определить, что будет отредактировано. Так что, на самом деле, ваш вопрос хороший, но он открывает другие вопросы. В основном, опишите, что редактируется!   -  person Matthew Trow    schedule 06.01.2014
comment
@MatthewTrow Вы совершенно правы. Я забыл title = Edit в ситуации 2. Если это все, что мне нужно для чтения с экрана, это прекрасно! Я также читал об aria-label = Edit, но не уверен, что преимущество перед стандартным атрибутом title.   -  person dmathisen    schedule 06.01.2014
comment
@Stijn Это было бы идеально. Просто кажется большой проблемой настроить и научиться использовать программы чтения с экрана. Если есть общепринятый стандарт доступности, который люди используют, я бы предпочел ему доверять и придерживаться его.   -  person dmathisen    schedule 06.01.2014
comment
Атрибут title ненадежно объявляется вспомогательными технологиями. Не полагайтесь только на него для выполнения основных функций.   -  person steveax    schedule 07.01.2014

Ответы (2)


arrow_upward
9
arrow_downward

Прежде всего, вам, вероятно, следует использовать <button> вместо <a href="#">. Пустые ссылки могут сбивать с толку читателей с экрана, но кнопка есть кнопка. Короче говоря, ссылки переносят вас на места, кнопки выполняют действия. (http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/; https://ux.stackexchange.ru/questions/5493/what-are-the-sizes-between-buttons-and-links).

Я бы выбрал вариант вашего первого примера кода и использовал класс Bootstraps .sr-only. Если мы обновим ваш код с помощью button и добавим в класс, у нас будет:

<button type="button" class="btn btn-default"><span class="fa fa-pencil"></span> <span class="sr-only">Edit</span></button>

Теперь у нас есть более семантически правильный элемент кнопки; зрячие пользователи видят значок карандаша редактирования; и пользователи программ чтения с экрана услышат «Изменить». Все выигрывают.

(Обратите внимание, что код button взят прямо из раздела Bootstraps CSS Buttons.)

person tjameswhite    schedule 06.01.2014
comment
да. Для меня это имеет смысл. Спасибо. - person dmathisen; 07.01.2014
comment
Изменить: глядя на мое приложение, многие кнопки содержат href = ... и ссылаются на страницу редактирования содержимого. Итак, это ссылки, похожие на кнопку. - person dmathisen; 07.01.2014
comment
Рад, что это имеет смысл. И для кнопки против ссылки, это, конечно же, не вырезано и не высушено. Удачи! - person tjameswhite; 08.01.2014
comment
.sr-only - это именно то, что я искал! Я поделюсь этим со своими учениками! - person Quincy Larson; 12.02.2015

arrow_upward
3
arrow_downward

Насколько я понимаю, я думаю, что может быть полезно также добавить:

aria-hidden="true"

классу span, содержащему значок карандаша. Это предотвратит попытку программы чтения с экрана прочитать этот элемент.

<span class="fa fa-pencil" aria-hidden="true"></span>
person ben charman    schedule 12.09.2016