by

Loes Knetsch ©

When you write your blog, have you ever considered to implement the rules which count for the screen reader of the visually impaired? The web guidelines have been drawn up to make websites accessible, and therefore usable, for people with a disability. Now ‘usable’ is a stretchable concept. Do these guidelines also guarantee user-friendliness? No, unfortunately, that is not the matter. Learn here how to increase the usability for visually impaired people. You don’t have to be technically skilled to offer assistance on your website. Beneath are 10 usability tips on visually impaired people.

How do visually impaired people use the web?

Perhaps it’s good to first think about how blind and visually impaired people navigate and read web pages. Then you might understand the usability tips better. Many blind and visually impaired people use a screen reader: software that reads the text on the screen. Fortunately, they do not have to wait until the entire page has been read out. The blind also scans web pages. With the keyboard, they can navigate the page: jumping from headline to headline or with the ‘tab’ key from link to link. They can also let the screenreader sort all links by alphabet, and walk through them. Many users set a high reading speed up to 300 words per minute! To scan a page faster.

What is a braille reading line?

Many blind people use also a braille reading line. These are often additionally used on a screen reader, to read more accurately. For example, to check the spelling of what they have typed. Braille reading users only have a half line of text at a time and therefore do not have an overview of the larger picture.

How works Magnification software?

Some of the visually impaired use magnification software, which greatly enlarges a small part of the screen. Because people who enlarge their page by 600% always see only one piece (1 / 36th part) of the screen, it is very difficult for these users to see the coherence of elements on a page.

What are skip links?

Most accessible web builders place so-called skip links at the top of the code. With these hyperlinks, usually invisible to the average user, users of a screen reader can skip parts of the page and directly navigate to where the main menu, the search function or the content begins.

Why add alt text to images?

Information in images goes completely blind to the blind and to the visually impaired. Therefore it is good practice to add that information to the ‘alt’ (alternative) attribute of an image. If the alt text is left empty, the screen reader will ignore it. For decorative images, this is useful, because otherwise you only create noise.

Tables on your website make it difficult

Tables are difficult to read. Screenreader users must navigate from cell to cell to take the information. By attributing attributes to the row and column headers, the user is fortunate enough to hear which row or column he navigates with every movement within the table.

Forms for visually impaired readers

Filling in forms takes a lot of time. Both reading, filling in, checking the input and signaling and responding to error messages require a lot of patience.

Don’t blindfold visually impaired people on your blog

10 usability tips on visually impaired people

1. Prevent noise on the page

Many websites try to provide the visitor with as much interesting information or functionality (s) as possible. The blind and visually impaired should generally invest much more time in determining which information a page contains. It can, therefore, be very confusing if the page contains content that is only indirectly related to the purpose of that page. It makes it difficult to scan the page and can even put him on the wrong track.

Present the core content or functionality as quickly as possible. Present the ‘also interesting’ parts only afterward or leave them out altogether.

2. Header lines (h2, h3): only for title and paragraphs

Many screen reader users scan a web page by quickly running all (h2-h3) headers. With this, they hope to encounter all main paragraphs and important page sections.

Do not use header lines for titles in a list of news items. Just use bold. Otherwise, the screen reader will cost users a lot of extra time to scan the page.

Also, avoid the use of header levels 4 and 5 (h4 and h5). Visually impaired people who use shortcuts to scan headers expect titles (h2) and at most subtitle-paragraphs (h3). Screenreader users therefore rarely scan whether a page contains h4 headers. In any case, do not use h4 and h5 for other purposes as layout.

3. Links: the main word in front

Put in the links the most important word in the front. This is a general usability recommendation, but for visual reasons, it is very useful for another reason: In some screen readers, you can have all the links on a page in an alphabetically sorted list to find a specific link faster.

4. Skip links

In addition to the previous tip: skip-links appear on every page and are often read during an average website visit. Screenreader users know exactly the function of these links and want to be able to use them as quickly as possible. Keep them short, so not “Go directly to the content”, but “Content”. Not even “To content”. After all, put the most important word first.

Do you offer many documents in PDF and Word? Do not put an alt text under each icon like “Document type: Microsoft Word” or even longer, but “PDF” or “Word”. Longer alt texts are unnecessarily and cost more time to be read aloud.

5. Decorative images: no alt text

Decorative images actually belong in the stylesheet at home. But because this is not always possible, we also regularly see decorative images in the HTML code. If you do this, do not think of any alt text; it only causes noise. So leave the alt text empty (alt = “”).

6. Functional images

Write an understandable alt text with your functional images. Like, when you show an infographic, the alt text can be:
Chart, comparison, 4.8 out of 5 stars Wealthy Affiliate.

7. Predictable layout

For the visually impaired, consistency is even more important than for the rest. It takes them more effort to reach a random spot on the page. They have to go looking for it – either with their keyboard or with magnification software. With a fixed placement of parts, you help them so much. This concerns eg. contact info at the top and/or at the bottom.

8. Lack of context

Some visually impaired people have to zoom in so strongly on the screen that they can only see a small piece of a page. As a result, they lack a lot of contexts. Taking this into account will be a difficult task. In any case, try to make menu links sufficiently recognizable.

9. Tables

Use tables only for what they are intended for: Presenting relational information. And not for layout purposes.
And vice versa: if you present information that is excellent for table layout, use a table. Then visually impaired people can navigate through them faster than through something that looks like a table, but it is not. Make the table visible, so recognizable as a table and provide it with row and/or column headers. Put the most important information in the first column.
Does a table contain a call-to-action on every line? Eg “place in my shopping cart?” Then these buttons are expected in the rightmost column.

10. Forms

Place labels and corresponding input fields as close together as possible. Especially useful for people zooming in on the screen.
Keep format labels as short as possible. The screen reader user gets a lot of messages via voice and the shorter the command, the better.
Required fields are often marked with a *. Preferably use the alt-text ‘required field’. Not only does this alt text provide more information than an asterisk, but screen readers are often set by users to read “no punctuation and other characters” due to speed gains when reading.
If an error message is displayed after sending a form, state that error message in the page title. This way, a screen reader user knows immediately what is going on.

Avoid pre-filled fields. Screen reader users often do not notice that there is already a default value or an input hint. And if you apply it anyway: make sure that the text is selected automatically as soon as the input field gets the focus. Then he does not have to remove the pre-filled text first, but is automatically removed when typing. If street and house number are to be entered in two consecutive fields, provide each field with its own label. This gives the best overview of both screen reader and magnification software.
Make sure you can use the arrow keys to scroll through a drop-down box.

Avoid captchas. Only very experienced screenreader users have a tool to solve captchas.

Numbers

According to the World Health Organisation

Others also read...

How To Focus On The Family?

Loes Knetsch © Long hours at work and raising children needs a lot of organization. You have to take the children to the daycare of Read more...

Guest blogging at Work at Home, the Future is Yours

Loes Knetsch © Are you busy blogging, but it doesn't get you anywhere? Then you probably place your writings in the wrong place. On LinkedIn Read more...

by