“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

– Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Disabilities aren’t always obvious or declared. We should not screen for disabilities and we should not shut out any potential users. We write for the Social Model of Disability and currently follow the https://www.w3.org/WAI/ Web Accessibility Initiative standards.

This is a table comparing the medical model with the social model.

The medical model says:

You are the problem
You need curing
You cannot make decisions
You are not equal

The social model says:

Disability is not an individual problem
Society contructed barriers
Society must remove barriers
Disabled people have the right to equality

Audience

The audience for accessible content is everyone. 100% of people will experience disability or impairment at some point in their lives.[1] Types of impairments vary and include visual impairments, neurodiversity, hearing loss, mobility, manual dexterity, and cognitive impairments.

Personas

It would be beneficial to consider four personas here.

Mary

20 year old student, she has weakness in her hands due to MS. She hates complex password requirements that involve special characters and can’t type long passages.

Carlos

Carlos is a 50 year old man who moved to the US two years ago. English is his second language. While he is proficient in English he does need extra time to read and write English phrases. He loves a clear basic sentence without jargon.

Sophie

Sophie is partially sighted and uses a screen reader. She hates that there are gaps in websites (probably when text is embedded in images) meaning that she doesn’t always get the full experience.

Eric

Eric is very techie and dyslexic. He likes a UX that explains itself and concise explanatory labels. He hates how certain fonts take away from his experience online.

Accessibility terms

Use the following accessibility terms as outlined by Microsoft.[2]

Use this	Instead of this
Blind, has low vision	Sight-impaired, vision-impaired
Deaf or hard-of-hearing	Hearing-impaired
Has limited mobility, has a mobility or physical disability	Crippled, lame
Is unable to speak, uses synthetic speech	Dumb, mute
Has multiple sclerosis, cerebral palsy, a seizure disorder, or muscular dystrophy	Affected by, stricken with, suffers from, a victim of, an epileptic
Without disabilities	Normal, able-bodied, healthy
Person with a prosthetic limb, person without a limb	Maimed, missing a limb
People with disabilities	The disabled, disabled people, people with handicaps, the handicapped
Cognitive disabilities, developmental disabilities	Slow learner, mentally handicapped, differently abled
TTY (to refer to the telecommunication device)	TT/TTD

Considerations when writing

Here are some considerations when writing including the ABC of accessibility, headings and landmarks, ARIA attributes, and clarity.

The ABC of accessibility

Use the ABC of accessibility: https://the-pastry-box-project.net/anne-gibson/2014-july-31?_sm_au_=iVV60tHmlqtBNDDH

Consider the following guidelines for UX copy[3][4]

How does copy sound on a screen reader?
Use your tone but not at the expense of your user.
Use alt descriptions.
Be more descriptive than Read more for links and buttons.
All microcopy should appear as live text – not as an image.
Readability – permanent text in high contrast.
Write simple copy.
Does this language make sense to someone who doesn’t work here or at your customer’s company?

Headings and landmarks

Use headings and landmarks with correct semantics to provide a clear idea of the page structure. Landmarks can help the user navigate the page.

ARIA attributes

ARIA (Accessible Rich Internet Application) attributes. This can help explain what a user needs to select or to explain what defaults are already selected.

Example

aria-label=”Choose your language. Your current language is English” role=”button”

Clarity

Each button has to be clear in its action. For example replace nonsensical trendy words like let’s go for confirm.
Choose link text that is clear and helpful. Write copy for links and buttons that can function without context or work with developers to come up with some alt-text for screen readers.
Avoid click here or learn more.
Write short sentences and use familiar words.
Use words with 1-2 syllables when possible.
Use the Hemmingway Editor to measure the readability of your text.
If you need to use an abbreviation or acronym, explain it on the first reference.

Writing for screen readers

When writing for screen readers we need to ask 3 questions:

How can I test this?
Why do I care? – consider that readers don’t perceive a full picture of the screen.
Think top-down and left to right

Placing the microcopy in front of the action is critical. The accessible order of elements is: Label > Instruction\Hint > Field

Here’s how Facebook does it:

Image shows a Facebook form and when you hover over the i next to the Languages field, the following text appears "Leave this blank unless the audience you are targeting uses a language that is not common to the location you have chosen above."

And here’s how Walmart does it:

Image shows a form on Walmart's log on system. The label is "Security code" and there is a question mark next to the label.

Note for developers: The elements can appear in any order on screen as long as you set the keyboard focus shift in the correct accessible order. Never place microcopy under a confirmation button.

Avoid directional instructions and any language that requires the reader to see the layout or design of the page.[5] We don’t want people to skip the question or abandon the task.

Alt tags

Alt tags describe images and must be included on all images.

If the image is serving a specific function, a screen reading user needs to come away with as much relevant information as someone who has seen the image.
If you’re including graphs or charts, include the data in the alt text.

Important text

Screen readers do not see the following:

Colour
Bold
Italic
Strikes
Underlines

So do not use these styles as the only way to indicate importance. Red text looks like alert text but users of screen readers won’t know the text is red so you need to give a strong visual clue like an exclamation mark to show it’s an alert or important message.

Pronouns

Use gender neutral language.

“Gender-neutral language is a generic term covering the use of non-sexist language, inclusive language or gender-fair language. The purpose of gender-neutral language is to avoid word choices which may be interpreted as biased, discriminatory or demeaning by implying that one sex or social gender is the norm. Using gender-fair and inclusive language also helps reduce gender stereotyping, promotes social change and contributes to achieving gender equality.”[6]