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.
Accessibility Principles
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.
Quick Tips
- 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
– Use bulleted lists instead of lots of text
– Paragraph < 150 words
– Provide definitions for unusual words or phrases
– Define acronyms the first time you use it on the page
– Headings: there should only be one H1, then nest H2 and H3 properly
– Your writing should be a lower secondary reading level (70 or higher in Flesch test, as shown in Yoast plugin)
– Utilize Grammarly, Hemmingway, and Yoast tools to analyze your writing level
Bulleted and numbered lists help people quickly digest important content. Screen reading software informs the user that they have landed on a list and provides additional information, such as the number of items in the list. This helps the user decide whether to continue with the list or move on to other content.
Headings act as an outline to help people quickly find information. When adding headings, nest the headings in a hierarchical manner, as you would in an outline or table of contents. For example, start a section with a heading 2 and use a heading 3 for each subsection. Avoid skipping levels — you shouldn’t have a heading 3 without a heading 2 above it. H1 is usually reserved for the Page Title and there should be only one H1 per page.
Using “click here” or “read more” does not make the best link text, because it doesn’t give screen reader users any indication of where the link goes. The software will say something like, “Link: click here.” It is better to use the page title or name of the resource you are linking to. This also helps search engines understand your site better.
– 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 must be entered for all images so that screen readers and search engines can understand what the image is. It needn’t be long and detailed, just a basic indication of the image’s content. Screen reader software will say something like, “Image: your alt text.”
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 on 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
Authoring well-structured, accessible PDFs requires special steps. Unless you are posting an extremely long document or a form, consider turning the PDF into a standard web page. This will make it easier to read across devices, and easier to maintain over time (cuts out the steps of editing the file, saving the file, uploading the file, etc.)
Accessibility Guides
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.