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.
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.
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.
According to the World Health Organisation
An estimated 253 million people live with vision impairment: 36 million are blind and 217 million have moderate to severe vision impairment (1). 81% of people who are blind or have moderate or severe vision impairment are aged 50 years and above (1). Globally, chronic eye diseases are the main cause of vision loss.
Most of the above usability tips are easy to apply, so I say: TRY IT!
Thanks in advance on behalf of some 2,5 million visually impaired people.
How does the Users Interface (UI) of Wealthy Affiliate score for visually impaired people?
Quote from my profile: Thank you for your interest to visit my profile here at Wealthy Affiliate.
I have been a student at this amazing university for almost 4 years. And if you are not a member yet, I strongly recommend you sign up for a free account today to check out this excellent training facility. When you click the image you will end up on my WA profile.
Interview with Edwin
I have asked Edwin, visually impaired, and a member of Wealthy Affiliate since August 2016.
Loes: Is Wealthy Affiliate accessible with a screen reader?
Edwin: The WA platform is not fully accessible to a screen reader. Ideally it would take sighted assistance to figure out how to get around the accessibility issues; otherwise, doing it alone as it has been my case, takes a considerable amount of time and frustration.
Loes: Which difficulties do you encounter on this platform?
Edwin: In general clickable elements are not properly labeled or formatted for screen readers. This means many links and buttons do not respond to keyboard commands and can only be activated with a mouse, and often times no information is provided to the blind user as to what these elements are supposed to do.
Similarly, graphics are not properly labeled either, which means I may not even know of their presence on the page. This includes the images available in the SiteContent platform, which are identified by a long string of numbers without description.
I haven’t been able to use the SiteContent platform anyway because of lack of accessibility, as it is the case of the live chat as well.
There is not a consistent use of headings across the platform, which makes navigation more difficult since screen readers rely on these to facilitate moving effectively onto specific sections.
There are certain pages which cause the screen reader to behave erratically, such as losing focus or crashing altogether, which might be because of the presence of moving elements on the page. I haven’t taken the time to explore the possible causes with a sighted person, so I wouldn’t know exactly what the reason is.
Loes: Can you easily interact with other members on the forum?
Edwin: Interestingly, interacting with the platform via a screen reader is not the same with every browser. I use I.E. and Firefox interchangeably, sometimes having to jump between them to accomplish a single task.
Loes: Can you do the training videos?
Edwin: Obviously, training videos are also a concern for the blind user, and possibly the deaf, since there are no effective text transcripts and for the deaf no subtitles.
Loes: Thank you very much for this interview Edwin
Edwin: I hope this feedback helps you with your post, and if you have any other questions just ask.
Loes: Thank you, the investigation and your user experience helped me a lot. EG. I have used H3 h-tags on this page, but you will encounter H4 – H6 on the rest of my pages frequently. I will do my utmost best to make my future posts more user-friendly for the visually impaired community.
Loes: Although Wealthy Affiliate is an awesome educational business platform, there is room for improvement to make this platform better accessible for impaired people. I know that the technical team is always working on a better experience for all members, and I have mentioned these findings to the development team.
Kyle, co-owner of Wealthy Affiliate, answered:
Thanks for your feedback, we know we could be better, but there are A LOT of moving pieces here. We do consider all standards though and we certainly will only continue to get better as time goes on, with such a fast moving platform with evolving technology and designs, it can be tough to cross every.
We already get a lot of feedback and hope to get more feedback from the deaf and visually impaired audiences.
Give it a try
However, our platform isn’t fully accessible for the visually impaired, they are working hard to make it also for you a unique way to create your own opportunities to make money online too. I invite you cordially to take up my offer to experience our platform for the next 7 days with a premium access for free.