The needs of screen magnifier users are often overlooked when implementing web accessibility on to a website. Screen magnifiers are used by partially-sighted web users to increase the size of on-screen elements. Some users will magnify the screen so that only three to four words are able to appear on the screen at any one time.
The good news is that some of the basic principles for improving accessibility and usability for screen magnifiers users, also increase usability for everyone. To help, we’ve listed 6 ways to improve accessibility and usability for screen magnifier users:
1. Don’t Embed Text Within Images
Text embedded within images can become blurry and pixelated when viewed on screen magnifiers, and therefore become completely illegible. This is especially true when the image text is poor in quality. So, if you absolutely have to embed text within images, make sure the image is of high quality. Screen magnifier users can find it difficult to read text even at the best of times. So, when it appears fuzzy to them, it can become close to impossible to read the text.
It’s not usually necessary to embed text within images anymore, as most presentational effects can now be achieved with CSS. By embedding text within images the download time of each page can become significantly greater due to the weight of these images – for users on dial-up modems it can be a real pain waiting for these images to download and render.
If you’re not sure if a piece of text on the page is embedded within an image or not, try highlighting the text. If you can highlight each letter individually then the text is real text and isn’t embedded within an image.
2. Clearly Separate Sections of The Page
Different sections of each web page should be clearly separated using borders and different background colours. Screen magnifier users can only see one tiny section of a web page at any one time. So, it can sometimes be hard for these users to orientate themselves within the page.
By using a blue background colour for the navigation, for example, screen magnifier users can quickly move through the page and when they see a blue background they instantly know that the content has finished and the navigation area begun.
Likewise, by separating different sections of the page with borders, when a screen magnifier user moves over that border they know they’re moving into a different section. A common form of this, is the use of a vertical bar to separate horizontal navigation items.
Separating different sections of the page with background colours and borders doesn’t only increase usability for screen magnifier users – it increases usability for everyone. When regularly sighted users scan through a web page, if the content, footer and navigation are all effectively differentiated, it will be very easy to gain a quick understanding of the on-page layout. Below is an example of a layout template, it has clear borders and different background colours.
3. Use Clear and Descriptive Headings Often
When screen magnifier users move their magnifier across the screen, one of the items that stand out to them is headings. By ensuring the heading text is large, and perhaps by differentiating it through the use of colour or font, it will stand out to these users.
Screen magnifier users usually have to stop the movement of the magnifier when they want to read a piece of text. So, when they see a heading, they can stop and read it. Because headings (in theory at least!) describe the content contained beneath them, screen magnifier users can read a heading to gain an understanding of the content below before deciding whether they want to read that content or not. If not, they can simply move the magnifier down the screen and stop at the next heading.
Headings are incredibly useful for fully sighted users too, for essentially the same reason. When you scan through a web page, headings are one of the items that stand out to you. Again, you can read the heading (or listen to it for a screen reader user), and through it’s description, instantly gain an understanding of the content below. You can then read on or skip on to the next heading down the page.
4. Ensure Link Text is Descriptive of Its Destination
Link text such as ‘click here’ and ‘more’ should be avoided and replaced with link text that adequately describes the link destination. Link text, along with headings, is one of the items that stands out to screen magnifier users (and all users for that matter) when browsing a web page. If ‘click here’ is used, then these users (and in fact all users) will have to search through the text before and after the link in order to work out its destination. Instead of “click here”, the link text could write “Learn more about Accessibility”, for example.
5. Avoid Scrolling or Flashing Text
Scrolling or flashing text is generally known for offering poor usability, as it means that users can’t read the text in their own time. This is doubly true for screen magnifier users who read web pages at a slower rate – chances are that they won’t have time to read the text at all before it disappears.
6. Front-load paragraph content
By front-loading paragraph content, screen magnifier users can access the main point of each paragraph immediately. Front-loading means placing the conclusion first, followed by the what, why, when, where and how. By placing the conclusion first, screen magnifier users can read the conclusion of the paragraph straightaway and then decide whether they are interested in reading the rest of the paragraph or not.
If screen magnifier users aren’t interested in the content of a paragraph, they can move the magnifier down the screen and when they see white space they know that the paragraph has ended and the next paragraph begun.
This rule about front-loading paragraph content benefits absolutely everyone. By putting the conclusion at the start of the paragraph, all users can instantly gain an understanding of the point of the paragraph and decide whether they want to keep reading it (or skip to the next paragraph).
All-in-all, there are quite a few things that can be done to improve usability and accessibility for screen magnifier users. The good news though, is that all of them improve usability for everyone too!