Accessibility is more than conformance

Accessibility is about people. Addressing accessibility often begins with understanding how people with disabilities interact with websites, digital content and technology. A good place to start is learning the different types of disabilities and exploring how each of those disabilities effects a user’s experience with technology.

View Web Accessibility Perspectives from WAI on YouTube.

Types of Disabilities

1. Visual: blindness, low-vision, color-blindness, tunnel vision
2. Auditory: deaf or hard-of-hearing
3. Speech: slowed speech, stutters
4. Motor/physical: spinal, loss of limb, disease, and congenital conditions
5. Cognitive/learning (largest group): greater difficulty with mental tasks than the average person — Attention Deficit Disorder, oral/written language disorders, like dyslexia, dyscalculia, etc.
6. Neurological: individuals with brain conditions or as a result of seizure or stroke

Not a specific type, but situational or temporary disabilities acknowledge that anyone can experience a disability even if only briefly — broken arms or legs, in a loud environment, in a bright environment, post stroke or seizure etc.

Types of Assistive Technology and Adaptive Strategies

• text to speech apps
• screen readers*
• joysticks or mouth sticks for a mouse
• special keyboards
• voice recognition
• digital braille display
• customizable text: increase font sizes, up to 400%; increased letter spacing; greater space between lines (low vision, cognitive)
• closed captions, transcripts, sign language, (deaf or hard of hearing)
• tab navigation (motor/physical impairments)
• contact is only a phone number, no contact form or email (speech impaired)
• browser extensions
• viewing mobile width on a desktop
• and more

*Screen reader apps and technology vary in reading execution, including how uppercase, acronyms, punctuation, and symbols are read. Additionally, users of screen readers can customize their own verbosity settings. Terrill Thompson is a web developer and accessibility specialist at the University of Washington. His tests “Upper Case Character Test” and “ABBR and ACRONYM Test” indicate that there is no consistency in reading versus spelling uppercase letters. We recommend not altering content to accommodate certain screen readers. Reading acronyms and uppercase text is an experience users will have across the internet, if they have preferences, they have adapted ways that works for them.

Ultimately accessibility is about being considerate and conscientious of others. 61M or 1:4 Adults live with a disability.

Because of the variety and combinations of disabilities it is impossible to solve for everyone’s specific needs. The process of making your website accessible is a journey that will constantly evolve. Maintenance and keeping up with Web Content Accessibility Guidelines (WCAG) will keep you and your team adaptable, knowledgeable and prepared!

 

---

Write Accessible Content

According to WebAIM, the most common form of disability is cognitive / learning — here are some tips for writing content to be accessible.

• A journalism best practice is to write for a 7th–8th grade reading level.
• Avoid overly complex language, jargon or unexplained acronyms.
• Do not use metaphors or slang that requires nuance.
• Be brief and concise. Overly wordy paragraphs or walls of text can be challenging for people with cognitive disabilities or screen reader users who have to listen to all of a page’s content. Break up content into smaller sections with appropriate headings. Note some useful internet statistics —
  • On average, users typically read 20% of the text on a webpage.
  • “2.6 seconds scanning a website before focusing on a particular section.“
• Make use of summary introductory sentences. “…95% of subjects viewed all or part of it.”

 

---

Proper Semantic Headline Structure

Each page should have proper semantic structure for better accessibility. Some screen reader users may only have headlines read to them to get a general idea of the content on the page and determine what part of the page they want to dig into. This means every page should have a single <H1> heading (usually the page title), followed by sequential headings, as applies to the content —

H1 Example Title

Read to a screen reader user as “H1 example title, heading level one.”

H2 Example Title

Read to a screen reader user as “H1 example title, heading level two.”

H3

H4

H5

H6

Do not skip heading levels in order to achieve a visual aesthetic, such as a smaller font size or a different color.

 

---

Text Links

Some screen reader users will scan a webpage by only having the page’s text links read to them. For example, a page with 10 “Learn More,” “Read More,” or “Click Here” text links is not very helpful — there is no context provided for those text link examples.

Text links on your webpages should be descriptive. For example, text links on this page tell you the website and the article title of the link. It will be read to screen reader users as “Link, WebAIM’s ‘Alternative Text.'”

 

---

Images

Do not embed text in images.

By flattening text in JPG, PNG and GIF images, the text becomes a pixel and is not accessible to screen readers. It is best to include that text information in image captions as HTML text, accessible to screen readers and use the <alt text> to briefly describe the image.

<alt text> = “SCFD employees welcome job seeker at job fair.”

Add alternative text <alt text>.

• This is important for screen reader users and is how blind users will get to experience the image.
• <alt text> can be added through the Media Library by clicking on the image or by editing the image when it is added to a field.
• <alt text> does not need to be very detailed, just a short description of an image. Simple, to the point.
• You can find <alt text>guidelines at WebAIM’s “Alternative Text”.

 

While the <alt text> isn’t visible, the image’s <alt text> will be read to screenreader users — “Flat Iron mountains in Boulder, Colorado.”

 

---

Use Lists

When you have content that is ideally a list, use the bulleted or numbered HTML element to convey that information over a large paragraph of list items separated by commas. This is helpful to a screen reader user because if there are many items in the list, they can choose to bypass it.

The screen reader will read —

“List of three items.
Bullet, ….
Bullet, ….
Bullet, ….”

 

---

PDFs

Meeting WCAG 2.1 Level AA encompasses not only website content but also any electronic media that is hosted on your website, such as PDFs. PDF accessibility requirements are similar to a webpage —

1. Specifying the document language <lang> and <title> attributes.
2. Follow proper, semantic heading structure, lists and data tables.
3. Ensure text is “editable” and not embedded within a image.
4. Add <alt text> to images.
5. Ensure proper contrast for text and document background colors.
6. Include navigational aids, if applicable (links, bookmarks, headings, a table of contents).
7. Follow a logical tagged structure for reading order.

Learn more at WebAIM’s “PDF Accessibility” and Adobe’s “PDF Accessibility.”

 

---

Video or Time-based Media

Accessibility tips

• Videos and slideshows should not auto play, especially if they cannot be turned off.
• Avoid moving, blinking or flickering content that is not user-controlled. At a minimum these are annoying, in extreme cases they can trigger seizures for some.

Accessible adaptive strategies

• Transcripts.
  • Transcripts benefit ALL.
  • Allow videos to be skimmed or read rather than watched or listened to.
  • Used without needing to download video files. For example, to save data on mobile.
  • Used offline, printed, or converted to braille or other languages.
• Closed Captions (CC)
  
  • Text displayed while in sync with the video’s audio.
  • Some platforms, like YouTube, are incorporating CC services on their platform.
  • Closed Captioning benefits ALL.
  • Can be used in loud environments where users cannot hear the audio.
  • Used in quiet environments where users cannot turn on the sound.
  • Used by people who cannot understand the spoken language well and understand the written language better.
  • Used by people learning to read, including people learning a new language.
  • Used to better understand the content because users can hear the information in audio and see it in text at the same time.
• Subtitles
  • Spoken audio translated to another language.
• Sign Language
  • Picture in picture overlay using hand / arm gestures to convey information.
• Audio Descriptions
  • Audio descriptions for video are required to meet WCAG 2.1 Level AA conformance.
  • Typically, a narrator describes the visual-only content in the multimedia.

Some of these services have costs in order to implement. Further info and guidelines for video and time-based media can be found at WebAIM’s “Captions, Transcripts, and Audio Descriptions.