Designing accessible content for the visually impaired.
Numerous articles and report have already been published describing Universal design and the need of it. Hence, in the interest of skimming users, knowledge seekers and thinker, we are going to skip it 😾. Instead, this one is going to be full of handy practical tips that any designers, product managers, content writers or strategist or literally anyone can apply to their product. Together we can build a better inclusive digital world.
A screen reader is an accessibility tool used by visually impaired people to browse the website and apps in the digital world. We would be exploring the interaction between the screen reader and web content from an experience design and accessibility perspective.
A screen reader basic concept is that it reads aloud what it focuses upon when navigated through tabs or arrow keys. A set of function such as hierarchy, logical flow, labels such as images, links, buttons etc. is hardcoded into the web pages or application during development. Which when focussed upon by SR, is read aloud. Let’s see it in action below.
However, we can observe that information delivery by screen reader is only one piece of information at a time. The gap in context between fields on pages can create confusion or an information gap for screen reader users, information overload for remembering all fields in long forms with related fields and much more.
As a UX writer, let’s answer, How can we make our microcopy more compatible with screen readers?
1. Design content per logical order
While designing interrelated fields on a form or page. Always remember to follow the logical order of arranging the content from left to right or top to bottom, as per the flow of information dissemination from the screen reader. All specific instructional copies related to a particular field should be placed before filling the information in them, to avoid any chances of errors or bad screen reader experience. Let’s look at an example to understand it better.
In the form below, the user goal is to create a new password. While using the screen reader, the user hears “new password” and on pressing the tab next, it reads, “field, empty textbox”. Which notifies the user, that he can fill in text now. But when they create a password, they have no idea there’s a guideline written below the field (“Must be 6 or more characters and contain at least 1 number”) because they haven’t reached it yet. So when users choose a password and click next but then find out that the password is not accepted. Unsure and unaware of his mistake as he may not have scrolled to the instruction below. It can lead to confusion and a bad experience for the visually impaired user.
The accessible order of elements is, therefore: Label > Instruction\Hint > Field
Here’s how Facebook does it:
Following this principle always follow:
a). All the instructions, hints, and notes regarding filling a form or taking any other action should always be available — permanently visible or in a tooltip, you can return to and read at any point in time.
b). For ease of usage by the screen reader, no matter what the visual structure on the screen might look like, but always ask the developer to link the proper aria label in the source code.
c). Never place any informational or contextual microscopy under the button. Which can only be accessed by moving the screen reader focus.
d). All the information for filling the field should be before the field itself.
e). If something or any images that don’t add value to the context at hand. Then they can be skipped from the screen reader focus.
2. All images should be readable — use alt text
Every image or icon that bears visual information should have a short description — alt — set during development. This text will not appear on screen but will be read to users navigating using a keyboard and screen reader.
Icons are images, too. If you have icons representing actions or features and they’re unaccompanied by words (like a cogwheel or a house), add an alt to them that says where they lead to, like Homepage or Settings.
For example, the icons at the bottom of the screen on the Medium app are unaccompanied by text, but a screen reader will read the alt assigned to each: Home, Bookmarks, Write, Activities, You.
If we don’t add an alt, the screen reader will just say image or link or button (depending on the setting decided by developers), and users who can’t see them won’t know about the extra actions or features present.
The icon for more information, indicated by an image of the letter i, or of a question mark or exclamation mark, should also have an alt describing what lies ahead. For example: How to choose a password or More info. If we fail to give these tiny but important icons an alt, users who can’t see them won’t be aware of this crucial information.
These question marks should have an alt description so users know there’s more information here
Heads up #1 There’s no point in being clever with alt text. It should be clear and unequivocal.
Heads up #2 If the information is extremely salient, consider displaying it at all times rather than as a tooltip.
3. Use distinct and different labels for buttons
Navigating with a keyboard allows you to jump between screen sections:
- Navigate between headlines only
- Navigate between links and buttons only
People who aren’t able to see the screen in its entirety can quickly grasp the important elements on the page and then choose to navigate directly to what most interests them.
So what does someone hear when jumping between buttons in the following screen?
Since the headlines aren’t links, this person will just hear “Read More” repeated 3 times, with no indication whatsoever as to what these posts are about.
Instead, we can replace it with something like this below.
It only takes a minor adjustment to solve this — no need to be overly clever. You can see how “Read More” can be replaced with more direct label as: Download Toolkit, Buy the Book, and Take the Quiz.
When links or buttons give a little bit more information about the page they lead to, everyone wins: people with screen readers can decide if it’s relevant, and everyone gets a good specific prompt to keep on reading.
4. Use live text on images (accessible by a screen reader)
As we understand the functionality of screen readers, the idea of mixing copies with images is not a wise one. As screen reader can only read live text. However, if you still want to align your copies with the image, then don’t forget to attach alt text with the source.
5. Readability
For people with limited visual impairment who can partially see or are colour blind please adhere to the following:
Contrast — all microcopy should appear in high contrast (to the background it appears on) so users with a vision impairment or dyslexia can easily see and read it. This will also be much more convenient for others, making it easier for all users to read basic info.
Placeholders — if they contain information important for completing a task, they too should adhere to the high-contrast standards and not appear too bright. If they don’t contain pertinent information, why are they there? Delete them — it’ll benefit all users.
6. Beauty lies in simplicity
The copies we write are not for us, but for our users to understand, and connect with. Hence it’s not what we understand or like, but what our user comprehend. Hence as a practice always:
a). avoid abbreviations/acronym. eg. use date of birth instead of dob
b) avoid puns and wordplay
c). using text to represent long numbers such as telephone numbers.
Imagine screen reader reading, suddenly “It’s oh, so quiet”. scary huh? just imagine.
As a way forward whenever trying to write clever creative copy always remember that they can only experience one thing at a time. So try to write in such a way that describes the situation or a way forward, for eg, we can revise the copy to, “Follow Medium, to get notifications”, “Plan a trip, to get the notification” etc.
I hope this article would help all writer to create more accessible copies for their products and services.
Together, Let’s create an inclusive future ahead.
Reference: https://www.microcopybook.com/
