Как сделать страницу отзывов более доступной для пользователей программ чтения с экрана?

Question

Как сделать страницу отзывов более доступной для пользователей программ чтения с экрана?

Страница имеет заголовок вверху, за ней следуют цитаты пользователей, логотип их организации и ссылку на их домашнюю страницу, а также их имя и должность.

Прямо сейчас, схема для программ чтения с экрана имеет единственный заголовок в основной части страницы. Я думаю, в идеале, должны быть подпункты для каждого отзыва, предпочтительно идентифицированные организацией (но тогда я новичок в этой сделке доступности). Но я не могу найти подходящую роль ARIA, чтобы добавить.

Там также будет кнопка "показать больше" внизу.

Другое решение, о котором я думал, это бросить <h2>Там, но я понятия не имею, может ли это быть хорошей практикой или нет.

Вопросы:

Должен ли подпункт для каждого отзыва появиться на экранах?
Если так, есть ли роль ARIA, которая была бы уместна?
Если нет, есть ли альтернативное решение, или я должен его отпустить?

Спасибо.

1

html accessibility wai-aria testimonials

Источник

user3701303 14 июл '15 в 20:23

2 ответа

Другие вопросы по тегам html accessibility wai-aria testimonials

user1604592 14 июл '15 в 22:56 2015-07-14 22:56 · Answer 1 · 2015-07-14 22:56

Вы не обязаны делать каждый отзыв подзаголовком. Если вы сделаете это, вам вовсе не нужна роль ARIA: сделайте ее просто h2,
Но вы можете выбрать другой способ: сделать так, чтобы каждый из ваших пользователей цитировал blockquote или, если это не подходит по какой-либо причине, article (либо как <div role="article"> или как <article> HTML 5 семантическая разметка).

user76714 21 июл '15 в 20:22 2015-07-21 20:22 · Answer 2 · 2015-07-21 20:22

Попытайтесь представить (не каламбур), как пользователь программы чтения с экрана будет перемещаться по комментариям. Заголовки очень полезны для навигации. Я могу нажать "1" или "2" или "3", чтобы перейти к каждому H1, H2, H3 соответственно. Или я могу использовать "H" для перехода к каждому заголовку независимо от уровня.

Например, при поиске в Google каждый результат представляет собой H3. Очень легко перейти к следующему результату поиска.

Вы должны решить, какой текст должен быть H3 (или H2 или любой другой уровень). Должно ли это быть название организации, имя пользователя, сам отзыв? Это своего рода вопрос дизайна.

Если вы не используете собственный тег заголовка html (H1, H2), убедитесь, что вы указали правильные теги aria:

   <div role='heading' aria-level='2'>