Accessibility in Copy [Web applications]

“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]

  1. How does copy sound on a screen reader?
  2. Use your tone but not at the expense of your user.
  3. Use alt descriptions.
  4. Be more descriptive than Read more for links and buttons.
  5. All microcopy should appear as live text – not as an image.
  6. Readability – permanent text in high contrast.
  7. Write simple copy.
  8. 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:

  1. How can I test this?
  2. Why do I care? – consider that readers don’t perceive a full picture of the screen.
  3. 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]

Recommendations

Consider how to test accessibility and put together an accessibility checklist. Consider hearing how your copy sounds using a screen reader.

[1] https://medium.com/booking-writes/writing-accessible-copy-at-booking-com-5927a137221e?fbclid=IwAR0Oa87t9oPZpBwAWo2dETqHM8UOiwd8Mx5oKbJvMSLgjezYwxEoZahxgeA [Accessed 20/03/2019]

[2] https://docs.microsoft.com/en-us/style-guide/a-z-word-list-term-collections/term-collections/accessibility-terms [Accessed 20/03/2019]

[3] https://www.invisionapp.com/inside-design/writing-accessible-microcopy/ [Accessed 20/03/2019]

[4] https://styleguide.mailchimp.com/writing-for-accessibility/ [Accessed 04/04/2019]

[5] https://styleguide.mailchimp.com/writing-for-accessibility/ [Accessed 04/04/2019]

[6] http://www.europarl.europa.eu/cmsdata/151780/GNL_Guidelines_EN.pdf [Accessed 05/04/2019]