The University of Washington is committed to accessibility — making our websites, videos, newsletters and other electronic communication accessible to users with vision, hearing, mobility and other issues.
Policy #188 requires state agencies to make their “covered technology” (websites, web applications, software systems, electronic documents, E-learning, multimedia, and programmable user interfaces) compliant with Washington State Standard 188.10 – Minimum Accessibility Standard (2016). Part of the policy directs agencies to develop a compliance plan and identify an IT accessibility coordinator. The University of Washington’s IT Accessibility Initiative addresses this policy, along with related requirements derived from Section 508 of the Rehabilitation Act of 1973.
Implementing accessibility follows the principles of POUR: content must be perceivable, operable, understandable, and robust:
“Information and user interface components must be presentable to users in ways they can perceive.”
This means content and interface can be identified using one’s senses. While we predominantly design for sight, hearing and touch are also used to sense page elements.
“User interface components and navigation must be operable.”
Simply put, all interactive interface elements must be useable. This may be by a gesture, mouse or keyboard, touchscreen, or voice command. Not everyone can use all of those options.
“Information and the operation of user interface must be understandable.”
Understandable technology is consistent and predictable, both in design and usage. Understandable content is concise, responsive and consistent in voice and tone. Users should be able to comprehend the content and learn and remember how to use the interface.
“Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.”
Robust technology works with all appropriate technologies and is standards-compliant. Users can choose which technology they use to interact with your content.
- Readability: Short paragraphs (<150 words) and secondary reading level (70 or greater on the Flesch scale).
- Formatting: Let the theme format text. Overriding theme formatting can damage accessibility.
- Headings: Proper heading nesting: One H1 per page. Use for hierarchy, not formatting.
- Links: Use descriptive text. Avoid URLs and “More” in favor of “Register for the next Information Session”
- Color + contrast: Does if work in Greyscale? Is all text clearly legible?
- Alt-text: Skip only for decorative images, like footer background. Describe image contents; “Students celebrating with Faculty at graduation.”
- Captions + transcripts: include transcripts for all video and audio content. Zoom and PanOpto have tools for automatically captioning new recordings.
Accessible Content Considerations
– people scan not read
– keep it simple: eschew obfuscation
– bullet lists instead of lots of text
– paragraph < 150 words
– provide definitions for unusual words or phrases
– define acronyms first time on page
– headings: only one H1, nest H2 and H3 properly
– lowery secondary reading level (70 or higher in Flesch test, as shown in Yoast plugin)
– grammarly, hemmingway, and yoast tools
– make link text clear
– avoid More or Click Here
– don’t use “link” as link text.
– don ‘t use the URL (a screenreader will read it aloud)
– link text “directions to our office” or “course catalog”
– #CapWordsInHashTags because screen readers know to read as separate words
Alt text guidelines
– informative image: “a boy playing with a puppy”
– decorative: alt=”” , ignored by screenreader
– complex images: should have a full-text equivalent. often quite long, describing what the graphic communicates.
– functional images: used as button or link: “submit form” not “form button”
– image of text: ok only for logos, alt=”text of the image”
Color and Contrast guidelines
– contrast ratio: 4.5:1
– color safe: ex: b&w subway map. does yellow disappear? red and black indistinguishable?
– toptal colorblind webpage filter
– never enable autoplay
– text needs to be large, high contrast
– captions or transcript, always
– no flashing content
– CSS layouts, no layout tables
– tables can cause confusing content sequence
– resizing often breaks layout tables
– more onerous browser testing
– manually build HTML.
– th tag to id header as row or column
– caption tags to fully describe table content
– use theme text formatting
– Headings are not for formatting, they have content structure purpose
Resources, Tools, and Testing
Grammarly has free and paid versions, and helps with syntax and spelling. It can also do reading level analysis and suggest other words for overused choices.
Hemingway is a paid app that will highlight problems in your content. Very helpful for old writing in need of a refresh. Will also analyze reading level.
Yoast reading level analyzes your page or post. For public-facing content, you want a score of 70 or greater. This means 70% of Americans will be able to comprehend your content. Lower scores are acceptable for more technical content, but that should be for specialized audiences.
Toptal colorblind webpage filter will show your page simulating several sight conditions and can help identify any color or contrast problems.
WAVE browser extension will evaluate your page for common problems. It is best used in Chrome, and is inconsistent in FireFox.