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.
Types of Disabilities
- Visual: blindness, low-vision, color-blindness, tunnel vision
- Auditory: deaf or hard-of-hearing
- Speech: slowed speech, stutters
- Motor/physical: spinal, loss of limb, disease, and congenital conditions
- Cognitive/learning (largest group): greater difficulty with mental tasks than the average person — Attention Deficit Disorder, oral/written language disorders, like dyslexia, dyscalculia, etc.
- 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 —
- 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.”
Do not skip heading levels in order to achieve a visual aesthetic, such as a smaller font size or a different color.
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.'”
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.”
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.
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 —
- Specifying the document language <lang> and <title> attributes.
- Follow proper, semantic heading structure, lists and data tables.
- Ensure text is “editable” and not embedded within a image.
- Add <alt text> to images.
- Ensure proper contrast for text and document background colors.
- Include navigational aids, if applicable (links, bookmarks, headings, a table of contents).
- Follow a logical tagged structure for reading order.
Video or Time-based Media
- 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 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.
- 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.
The Forty West Art Line is a four mile walking and biking arts experience in the heart of Forty West Arts Creative District near historic West Colfax Avenue and the West Line light rail in Lakewood, Colorado.
The Art Line is part of a major effort to encourage and promote the West Colfax corridor as an economic and artistic destination.
Supported by a major grant from the National Endowment for the Arts, over two dozen artists created [brown] ground murals, fence art, interactive sculptures, large installations and local parts, art line story totems with changeable and interactive art panels and other art treasures along the route, with countless volunteers assisting artists with installation.
This free outdoor art gallery with over 70 pieces of art in addition to numerous existing murals and sculptures is accessible to all and is envisioned to be a place for community interaction and inspiration. For Lakewood and others visiting the metro Denver region and eventually to become the longest continuous arts experience in Colorado.
Visit the Art Line Facebook page and FortyWestArtLine.org for more information and to sign up for the Art Line newsletter and FortyWestArts.org to learn more about the creative district.