CODEWITHSUNDEEP
htmlaccessibilityscreen-readers
kerafill
kerafill

Reputation: 274

What exactly is a screen reader and what should I do with my site?

Sorry if this is a too naive question, but what exactly is a screen reader? How should I consider them when designing a web page (html document)?

Doing a google search doesn't help much... and wikipedia's entry is too general.

Is there anything I should be adding into my html markup to deal with screen readers in particular?

Upvotes: 4

Views: 254

Answers (3)

Patrick Hofman
Patrick Hofman

Reputation: 156978

Your question is two folded:

  1. A screen reader is a piece of software that reads the screen and converts that to something people with visual disabilities can consume, like audio or Braille. In terms of the web, it reads the DOM, versus the actual screen.

  2. What you have to do can be quite simple: make your application easy to understand for screen readers. You do this for example by providing alt with an image. There is a standard for working with screen readers at the W3C called WCAG. What you really need to do primarily depends on your audience. If it is unlikely to have people with such disabilities on your site, you probably have to do none to less work for it.

Upvotes: 1

scunliffe
scunliffe

Reputation: 63588

Screen readers are typically used to make the computers accessible to users with visual disabilities, e.g. If you are blind you won't be able to see a website but with software you can have it "read" to you.

The most common screen reader I know of is the JAWS screen reader.

JAWS is short forL J ob A ccess W ith S peech (hence the name) and is a common tool used when trying to ensure your website or Web application is accessible. E.g. Creating sites for the U.S. Government require ensuring your content is accessible according to the Section 508 of the Rehabilitation Act: http://www.section508.gov/

All of the info you might need is on that site but a few of the quick tips would be:

  • add informative descriptions to images with alt attributes
  • use <TH> tags to properly define table headers and use the scope attribute
  • ensure that your site/app still renders in a readable manner when the CSS is disabled

Upvotes: 2

rvighne
rvighne

Reputation: 21897

A screen reader is software that "reads" a document (in your case, a webpage) and outputs it in a way that people with visual disabilities (e.g. blindness) can easily consume.

A screen reader can only understand text (and some formatting). Here are things you can (and should) do to improve accessibility for blind or almost-blind people:

  • Use the <strong> and <em> tags rather than non-descriptive <b> or <i>. If it's being read aloud by the computer, it can put emphasis on those words.
  • Always include the alt attribute on images. You can even leave it blank (also known as null - alt=""); this signifies that the image is not essential/decorative. Otherwise, put a text description of the image.
  • The title attribute is generally ignored by accessibility software. In effect, only people that can use computer mouse can ever read it, so avoid it.
  • Turn of CSS and look at your page. If it doesn't make sense, you should reconsider the layout.
  • ARIA roles (via the role attribute) are helpful. For example, if you make a link look like a button, assistive technology provides different interactions. So by setting the role correctly, people using assistive technology can use that element as you intended. In that case you set role="button"
  • Use tags with semantic meaning (like section, article, nav, aside, header, as well as the more common h1...6 tags) rather than divs and spans that you style with CSS. This lets software make an outline of your page and a blind person can jump straight to the main content just like you can scan it with your eyes.
  • Related to the last one; make it a point to use lesser-known tags like time and abbr and address rather than yet another CSS class.

And that's just for screen readers. Not even considering deaf people -- look into captions for your videos and audio (with the new HTML5 <audio> and <video> tags).

Please be aware that I am not an expert on accessibility (and I'm not blind either, so I don't speak from experience). The W3C has standards on accessibility that are probably more advisable than mine (and a list of quick tips as well).

Upvotes: 2

Related Questions