Accessibility is a design goal that centers maximizing access and eliminating barriers for all users in all situations. It is more than adopting a set of practices to support users with "disabilities". Users do not fit neatly into homogeneous "abled" and "disabled" groups. They perceive and interact with the world uniquely, collectively forming a spectrum of physical, cognitive, sensory, and perceptual experiences that can be permanent, temporary, situational, or episodic. Ultimately, designing for accessibility is designing for everyone.
For our purposes, designing guides for accessibility means complying with Web Content Accessibility Guidelines (WCAG) standards. See the sections below for help with identifying accessibility issues within your existing guides and creating accessible new guides.
A complete testing plan includes both automated and manual accessibility testing but, if you have a specific design/assessment goal, one may more effectively serve your goal than the other.
Automated testing is optimal for identifying multiple issues at once. Several web accessibility evaluation tools allow content creators to quickly and easily (from their browser window) find page elements that fail to meet accessibility standards or present related usability issues. One of these tools is WebAIM's WAVE, which you can use either by (a) pasting the URL of a website into a box on WebAIM's homepage or (b) installing the WAVE browser extension. Use the "How to Use WAVE" tutorial below to learn how to use it.
Manual testing targets specific issues, rules, and standards, capturing problems automated testing is likely (or certain) to miss. Issues that require manual testing include attached and embedded files (audio, video, document, etc.) and keyboard-only operation. Manual testing tools and methods are also optimal for creating accessible content, as opposed to assessing existing content. See the Accessibility Checklist below for recommended best practices and manual testing tools.
To generate an accessibility report (summary) using WAVE, choose one of the options below:
OPTION #1: Use WAVE's homepage
OPTION #2: Use WAVE's browser extension
Your report, displayed on the left side of your screen, includes six categories. Focus on Errors, Contrast Errors, and Alerts.
To learn more about (how to fix) the accessibility issues identified in your report, select any Errors, Contrast Errors, and/or Alerts icons superimposed on your displayed page.
Once you understand how to fix the issue, do it (and retest to confirm)!
Tip: When pasting your page's URL into the box on WebAIM's homepage, I recommend opening your guide (page) in, and fixing issues from, a different window tab. Clicking "Login to LibApps" at the bottom of your guide's page to open your editing view (to fix issues) will prompt testing of the login page and log you out (forcing you login again to fix issues).
After assessing your page's accessibility, select a new page (tab) to test and repeat!
Check that TEXT:
Is used instead of images of text to convey information, except in specific contexts (ex: logos).
Complies with minimum contrast requirements (4.5:1 for normal sized text, 3:1 for large sized text).
Reserves underlining for links and citations.
Note: Links are automatically underlined in LibGuides; there is no need to add one.
Check that LISTS:
Are unordered (bulleted) for items without a prescribed order and ordered (numbered or lettered) for items with a prescribed order.
Related Resource: Berkeley Digital Accessibility: Lists
Related Tool: List bookmarklet
Check that LINKS:
Use descriptive text that clearly communicates a link's purpose and/or destination.
Note: Avoid using URLs, phrases like "click here", and lone text "learn more" and "read more". Descriptive link text helps all users but is vital for users of assistive technologies that use links to scan a page.
Do NOT repeat text for links that appear on the same page but direct users to different places.
Begin with text most unique for the same reasons it is recommended to do the same with page titles and headers.
Related Resource: Berkeley Digital Accessibility: Links
Related Tool: Alt Text Viewer extension
Check that FILES:
Include only accessible forms, documents, etc.
Are accompanied by their type in parentheses when shared.
Check that PAGE TITLES + HEADINGS:
Use page titles and section headings that clearly describe their page's or section's topic and/or purpose.
Include important words and phrases at or near its beginning.
Note: This helps all users, especially those of assistive technologies, scan your content. It also helps users more quickly identify tabs displaying only partial titles.
Introduce sections with properly ordered headings (H1, H2, H3, etc.) based on sequence / hierarchy, not visual preference.
Note: This helps users quickly understand your content's structure and is necessary for users navigating your content with a keyboard or with assistive technologies. Also, use only one H1. LibGuides headings start with H3 because H1 and H2 are reserved for guide and box titles, respectively.
Related Resource: Berkeley Digital Accessibility: Headings
Related Tool: Heading bookmarklet
Related Tool: HeadingsMap extension
Check that COLOR:
Contrast ratio requirements are met for all page elements (text, links, interactive icons, images of text, graphical objects, etc.).
Is NOT the only visual means of conveying information.
Related Resource: Berkeley Digital Accessibility: Color
Related Tool: TPGi's Colour Contrast Analyser
Related Tool: WebAIM Contrast Checker
Related Tool: WCAG Color Contrast Checker extension
Related Tool: Colorblindly extension
Check that IMAGES:
Use meaningful alternative text ("alt" text) to describe them in a way that is relevant to their context within a page's content.
Note: Alternative text should be succinct, descriptive, and not begin with text like "a photo of" or "a picture of". Images that are strictly decorative need "null" alternative text or to be marked decorative.
Do not contain text with information not provided elsewhere (ex: absent from alt text, image caption, image description, or body text).
Related Resource: Berkeley Digital Accessibility: Images
Related Tool: Image bookmarklet
Related Tool: WebAIM Contrast Checker Image Alt Text Viewer extension
Check that AUDIO:
Provides accurate transcripts as a text alternative.
Is either (a) shorter than 3 seconds or (b) allows volume to be controlled independently from the system.
Related Resource: Berkeley Digital Accessibility: Audio
Check that VIDEO (PRERECORDED):
Provides audio descriptions that describe key visuals not adequately described within the video.
Uses accurate closed captions for all publicly posted or broadly shared content.
Note: Captions should identify each speaker and use proper punctuation and capitalization. Unedited closed captions generated by YouTube, Zoom, and Premiere Pro are insufficient.
Allows users to access all media controls using only keyboard commands.
Related Resource: Berkeley Digital Accessibility: Video
Check that LAYOUTS:
Are simple and linear, with ample negative space to enhance visual hierarchy and make content easier to read and scan.
Note: Simple layouts also maximize content's flexibility by ensuring it better responds to variable viewport sizes, including those common on mobile and tablet devices. This is the best way to avoid requiring users to scroll excessively or in two dimensions. (Tip: Design for mobile to optimize your content's accessibility regardless of device or assistive technology.)
Provide users with consistent navigation that offers users standard, predictable content locations.
Note: Align text to the left and, when available, use consistent layouts that establish familiar patterns, practices, and locations.
Do not rely on tables. Tables are only to be used for tabular data, not for layout purposes.
Check that KEYBOARD-ONLY USE:
Is sufficient to reach all interactive elements.
Does not encounter keyboard traps.
Related Resource: Berkeley Digital Accessibility: Keyboard-only Access
Related Tool: Accessibility Insights (Fast Pass: Tab Stops)
Related Tool: WebAIM Contrast Checker Image Alt Text Viewer extension Taba11y extension