Hiding Text From The Blind

[wige]

I am attempting to ensure that my web site is accessible as possible. To that end, I want to change some of the links on the page so that the site can be navigated more easily by an aural (text to speech browser). For example, the site uses pulldowns for general users to allow the user to view the subpages for every section of the site. This amounts to 75 links that, visually, can be easily organized but would probably be overwhelming to someone using text to speech. Rather than showing every link, I want the reader to read the links to pages in the current section, and only the links to the index pages of the other sections. I know it is possible, but I am not sure how to implement this. My theory is to do the following:

@media all {
   p.othersectionpage {
      font-family: san-serif;
      font-size: 9pt;
   }
   p.othersectionindex {
      display: none;
   }
   p.thissectionpage {
      font-family: san-serif;
      font-size: 10pt;
   }
}
@media aural {
   p.othersectionpage {
      display: none;
   }
   p.othersectionindex {
      font-size: 9pt;
   }
}

My questions are, is this the right way to do it, using display: none? And is this the proper way to override the general rule?

[jtracking]

I wonder if you would need a reader to test this or is there a site that tests the reader-ness of a website...cause if you had one or found a site that reads reader-ish websites you could test this yourself.

[Dubbya]

I had to do something similar several years ago. A shopping site we'd built utilized DHTML menus to navigate through complex lists of products and categories. I kept getting phone calls from blind customers pleading for us to make changes that'd allow them to shop our site.

I'd bet money that the blind browsers would still try to read the menus hidden in the "display: none" code.

I'd recommend that you do a server side browser detection and serve up a stripped down version of your site.

If your site is static, you could use a meta refresh (not the best way to go) or use a 301 redirect in your .htaccess file (much better) to bounce the blind user to another page.

If you can run .php or .asp pages to build your pages dynamically, you could use a browser detection script to "response.redirect" the user to another page or just flag the script not to print out pulldown menus but a list of links instead.

Why not test it with some actual browsers developed for the blind?

Alternative Web Browsing

Go git 'em.

[wige]

The problem with using browser detection is one of the most common screen readers (to my knowledge) is JAWS, which is used in conjunction with Internet Explorer. The browser gives no indication that I have been able to find that a screen reader is being used.