Low Vision Accessible Web

By Oliver Simões

As the internet continues to grow and more emphasis is placed on web accessibility, more and more businesses are incorporating accessible features on their websites. One such feature is the text resizer, also known as text resizing tool, text magnifier or font zoomer. It's usually represented by a letter in different sizes or a magnifier icon or whatever can be used to graphically represent the idea of zooming text:


When low vision visitors click on the text resizing tool, bingo! They are quickly rewarded with instant magnification. Now the visitors can read the blown-up text on their screen more easily. The problem is that instant magnification soon becomes short-lived gratification. When they move to the next page, the text reverts back to its original size (whatever size was coded in CSS) and they have to start it all over: look for the tiny icon, click again, and maybe with two or three more clicks they're lucky to get the zooming level just right.

As a webmaster who's always striving to find better ways to do things, I came across a nice solution that doesn't require any coding (text resizers are no more than plain javascript). The solution is very simple and only takes a small gif and a pop-up window with instructions to the visitor on how to magnify the view of the web pages.

Adding low vision accessibility (and value!) to your website


Accessibility makes your website more inclusive, more appealing to all audiences, but not only that. It also adds value to the website! What's the point of having a wonderful website if it cannot be accessed by certain groups of people? If it continues to treat those people as an invisible category? The following tips are designed to make your website accessible for people with low vision:

STEP 1. Place a magnifier or text resizer icon in a conspicuous place of your web page. I have mine just above the top navigation bar. Here's what it looks like: Accessibility

STEP 2. Create an html page with instructions to your site visitor. Basically, the instructions will direct the visitor to adjust the zoom level of the page using his/her mouse and keyboard controls.

That's right! The advantage of this method is that the magnification level stays the same when moving from one page to the next.

On my page I used an image instead of text. I did that for aesthetic reasons, knowing that it's not the best for screen readers. I guess it's safe to assume that most people with low vision don't rely on screen readers anyway (blind people do), so I guess it wasn't such a bad idea!

Here's the graphic/textual representation of my message. Of course, the actual text looks much bigger. Remember you're addressing a low vision audience!

Accessibility: How to magnify a web page

Image: Courtesy of Maxiaids, adapted for our website

STEP 3. Finally, you will need to link the icon to the html pop-up, and the way to do it is by using an onClick declaration in the href tag right before the image:

Make Text Larger

Translating to plain English:

- a href: creates a hypertext reference or hyperlink.
- http:// introduces the URL or path to the hmtl page.
- onClick tells the browser to open the page when you click the image link.
- width and height determine the size of the pop-up window or the gif image.
- resizable: whether you want to make the pop-up window resizable or not.
- scrollbars: whether you want to add scrollbars to the pop-up window.
- alt: provides a textual alternative for the image(s).

For a live demo of my solution, scroll to the top of this page and click the A+ icon to the right of the language menu. Cool, huh?

A word of caution: Pop-up windows do present some accessibility issues. For example, if visitors are using a screen reader and are not given the option to close the window, they are stuck. This problem can be easily solved by using a javascript-enabled link button ON the page that would allow them to close the pop-up on click.

STEP 4 requires no physical action on your end. Simply pat on your back. You've done your part. You provided low vision users with the necessary information to make their browsing experience more accessible and enjoyable. They are now more in control of the situation as they go on surfing the web. You helped dispell the myth of the "minority user". And you deserve credit for all that.

The Myth of the Minority User

The above chart debunks the myth of the "minority user" by comparing the number of internet users worldwide to the number of online users with accessibility needs in the United States. The number of deaf and hard-of-hearing users in the US is almost the same as the number of all Internet users in South Korea. Blind and low vision users are smaller in number, but they still rank neck to neck with the populations of Canada, Italy, or Spain as far as internet use is concerned. The underlying message is clear: It's hard to ignore a whole "nation" of people with accessibility needs!


- Building Accessible Websites (book) - by Joe Clark
- Building Accessible Websites (podcast) - sponsored by GeeksAndGod.com
- Browser zoom great for accessibility
- JavaScript usage: Pop-up windows
- Interactive Accessibility

Oliver Simões is the founder and owner of Assistech, a company specializing in assistive technologies (AT) for people who are blind, low vision, deaf, hard of hearing, speech impaired, physically challenged as well as those with learning disabilities and/or cognitive disorders. He served as a language instructor, technical trainer & translator prior to getting into this field. He has a genuine interest in disability issues. With the help of a collaborator, he currently manages a blog on assistive technologies.

Please spread the word !

If you like this tutorial, please share it on your blog, website, Facebook page and/or Twitter. Let's make the Web a place accessible for all!


Add Your Review

comments powered by Disqus
There are no products to list in this category.