Make Your Pages Readable for People Who Are Blind

Make Your Pages Readable for People Who Are Blind
Drupal Version

TWO simple things you can do, which make your web pages easier to use for people who are losing their eyesight or are blind.

Eyes vs. Software

People who cannot see your actual page often use software called screen readers, which reads that page read aloud. This software reads pages differently than one might visually. But TWO simple changes in the way we edit web pages can make that difference easier to manage.

If you'd like to get a better understanding of how someone experiences the web when using screen reader software, watch the YouTube video below. Otherwise, you can skip to the first tip for making your pages more accessible.


Describe Each Image With "Alternative Text"

Because the software cannot read images, any pictures or graphics on your website are big blobs of meaninglessness.

But don't worry, there's a way to add text to those images: "Alternative Text"!

When you are following the instructions on how to add an image to your page with the GT Editor, one of the final steps is to type descriptive words into the "Alternative Text" area of the image popup box. By describing what each image is supposed to communicate, you make it accessible. This is especially crucial when your image contains actual words (which, because they are part of an image, cannot be read as text by the screen reader).

How long should my Alt Text be?

While there is no official length restriction on the length of alt text, many experts recommend 125 characters or fewer because of restrictions within the JAWS screen reader. In addition, Google will stop reading alt text after 16 words.

Add Real Headings to Your Pages

Another way that people visually use your page is to quickly scan it to see what it is about. This is especially important on pages that have a lot of content!

To make it possible for screen readers to do the same thing and quickly skim your page's content, you need to provide an outline of your page using headings.

Headings are not just visual clues, but have special code behind the scenes. This means you cannot make text bold and have it work as a heading.

To make a real heading, first, highlight a line of text on your page that indicates another section or division of content on the page. Then, in your GT Editor toolbar, select the "Styles" option in the toolbar.

A list drops down underneath "Styles" and offers you a number of options, but the most important for your outline are these four:

  • Heading
  • Subheading 1
  • Subheading 2
  • Subheading 3

By choosing one of these headings, you are allowing the software to quickly scan the page for its users and read just the headings to them, so they can skim a page's contents just as one might do visually. Unless your pages are very long, you will probably only use the "Heading" and "Subheading 1" options with any regularity.