blind/visually impaired - Redirect to Accessible w

Question

Is there a way to add something on selected page on a web site that said to people using accessible software, like NVDA, to go to the page X for full accessibility.

I have some page with a lot of thing hard to make accessible and keeping the user design.

Think like a mobile page where you can redirect to mobile.mysite.com

I want mysite.com/mySelectedFolder/index.xyz?accessibilty=on This page will remove all user graphic, javascript and other things that cause difficulty to NVDA. Probably change the way that some of the data are showed.

Is this a bad things to do?

Answer 1

WCAG 2.0 allows an alternate version, but

• you need to make sure that the inaccessible page is accessible to a certain extent (otherwise your users would not be able to access the link to the accessible page on the inaccessible page), and

• you have to provide "all of the same information and functionality".

There is no reliable machine-readable way to detect that a user would benefit from or require an accessible page. Not all visually impaired users use screen readers (and even if, you can’t detect every screen reader use).

I’d in almost all cases try to avoid creating alternate versions. Make one page for all, and make it accessible.

Answer 2

If you want to notify your users that an accessible version exists, but only those needing it, I suggest having a hidden link at the top of your page (as in literally the first element in your body).

The code is fairly simple to do. Example HTML and CSS below will give you a link that is not visible on the page unless it has focus (which most sighted users will never trigger).

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;
}

If you want it for every page on your site, then you might want to generate the link based on the link of the current page (but that's a whole other discussion).

I have to agree with BrendanMcK's comment that it's not a great idea to make a separate accessible version of your site though. Most screen readers can deal with JavaScript and graphics just fine, and there are frameworks out there (like jQuery-UI) that are supposed to be accessible to begin with. Fixing issues encountered in screen readers usually helps your regular users too.