Слепой / слабовидящий - Перенаправление на веб-сайт Accessible

Question

Есть ли способ добавить что-то на выбранную страницу на веб-сайте, где людям, использующим доступное программное обеспечение, например NVDA, нужно перейти на страницу X для полной доступности.

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

Думайте как мобильная страница, куда вы можете перенаправить на mobile.mysite.com

Я хочу, чтобы mysite.com/mySelectedFolder/index.xyz?accessibilty=on Эта страница удаляла всю пользовательскую графику, JavaScript и другие вещи, которые создают трудности для NVDA. Вероятно, измените способ отображения некоторых данных.

Это плохие вещи?

Answer 1

WCAG 2.0 допускает альтернативную версию, но

• вам нужно убедиться, что недоступная страница доступна в определенной степени (иначе ваши пользователи не смогут получить доступ к ссылке на доступную страницу на недоступной странице), и

• Вы должны предоставить "все ту же информацию и функциональность".

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

Я почти во всех случаях стараюсь избегать создания альтернативных версий. Сделайте одну страницу для всех и сделайте ее доступной.

Answer 2

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

Код довольно прост в исполнении. Пример HTML и CSS ниже даст вам ссылку, которая не видна на странице, если она не имеет фокуса (которую большинство зрячих пользователей никогда не сработает).

HTML

<a class="assistive-text" href="http://yoursite.com/accessible version">Go to Accessible Version of this site</a>

CSS

.assistive-text {
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
}
.assistive-text:focus {
  clip: auto !important;
  display: block;
  position: absolute;
  z-index: 100000;
  /* everything below this comment is just for the look */
  background: #fff;
  border: 2px solid #333;
  border-radius: 3px;
  color: #000;
  font-size: 12px;
  padding: 12px;
  top: 5px;
  left: 5px;
}

Если вы хотите, чтобы это было для каждой страницы вашего сайта, вы можете создать ссылку на основе ссылки на текущей странице (но это совсем другое обсуждение).

Я должен согласиться с комментарием BrendanMcK, что не стоит создавать отдельную доступную версию вашего сайта. Большинство программ чтения с экрана отлично справляются с JavaScript и графикой, и существуют платформы (например, jQuery-UI), которые должны быть доступны с самого начала. Устранение проблем, возникающих в программах чтения с экрана, обычно также помогает вашим обычным пользователям.