Skip to content

Styleswitcher

View the site with:

Screen reader css

What is this?

Webdevelopers often forget they can get visitors with visibility disabilities on their sites. For a somebody who can see markup, it is easy to navigate through the web. People with disabilities who surf the web with a screen reader often have problems navigating because they can't see or notice through speech where sections start and end.

I never thought about that to a time ago. When I first noticed what the problems were, I started designing with this in mind. Still the sites I made were inaccessible. Then I saw the screen reader extension for Firefox: Fangs. I wanted to have this in my Opera browser too so I started making a css.

How does it work

By replacing your css file with the screen reader css, all html elements will get the same state of use. No color, no font related settings... Making it work requires a browser that has support for css3. Opera 8.50, Firefox 1.5, Safari 2.0 already support parts of it (enough to work). Internet Explorer currently doesn't support css3 in that way it will work.

Test your site

Would you like to see your site as if you would browse your site with a screen reader? Download the screen reader css file

General way

Just replace your css by screenrader.css and you'll see. No script involved but it requires a browser with css3 support.

Adding the screen reader css to User Mode in Opera

  1. Close Opera
  2. Copy screenreader.css to: <Drive letter>:\Documents and Settings\<username>\Application Data\Opera\Opera\profile\styles\user
  3. Start Opera
  4. Select View > Style > User mode
  5. Select View > Style > Screen reader

Using the Fangs plugin for Firefox

Download Fangs: The Screen Reader Emulator for Firefox.

Examples

Click "Screen reader css" in the styleswitcher menu to see these examples with the screen reader css

Lists

Ordered List

  1. makes this list item number 1.
  2. makes this list item number 2.
  3. makes this list item number 3.

Definition Lists

Dweeb
young excitable person who may mature into a Nerd or Geek
Hacker
a clever programmer
Nerd
technically bright but socially inept person

Tables

Table 1. The three levels of website complexity
Website type Complexity Staffing level
Basic Plain content (HTML/XHTML) About 1 person
Dynamic Dynamically generated from a database About 2–3 people (or more on a very large or busy site)
Transactional Fully-transactional content, e.g. e-commerce From 3 people upwards (many more on a large or busy site)

Forms

Personal Information
Medical History
Current Medication Are you currently taking any medication?
Medication transport

Images

Sannoise Logo