ADA Web Accessibility
"Accessibility allows us to tap into everyone's potential." - Debra R
Like UNF students, the web is full of potential. In order to make the most of that potential we aim to ensure that the web is accessible to individuals with disabilities. Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web as well. A key principle of Web accessibility is designing Web sites and software that are flexible to meet different user needs, preferences, and situations. Web accessibility is essential for people with disabilities and useful for all. Learn about the impact of accessibility and the benefits for everyone in a variety of situations by watching this video on web accessibility perspectives.
Our Standard & Goal: WCAG 2.1 level AA Compliance
Introduction to WCAG 2.1
The Web Content Accessibility Guidelines (WCAG) were developed by the World Wide Web Consortium (W3C) to provide international protocols and guidelines in order to ensure the ongoing growth of the web. WCAG 2.0 has been replaced as the W3C's recommended web standard by WCAG 2.1 as of June 2018. For more detailed information on WCAG 2.1 visit the W3C's guide to the Web Content Accessibility Guidelines (WCAG) 2.1.
WCAG 2.1 Layers of Guidance Reference
W3C has specified several layers of guidance in order to meet the varying needs of its audience, an audience that includes web designers and developers, policy makers, purchasing agents, teachers, and students.
These layers of guidance include overall principles, general guidelines, and testable success criteria. Provided below is a map of the WCAG 2.1 guideline layout:
- Principles - At the top are four principles that provide the foundation for Web Accessibility: perceivable, operable, understandable, and robust.
- Guidelines - under each principle are guidelines. These provide the basic goals that authors should work toward in order to make content more accessible to users with different disabilities. Guidelines are not testable, but provide the framework and overall objectives to help authors understand success criteria.
- Success Criteria - set to meet guidelines. For each guideline, testable success criteria are provided to allow WCAG 2.1 to be used where requirements and conformance testing are necessary, such as in design specification, purchasing, regulation, and contractual agreements. In order to meet the needs of different groups and situation, three levels of conformance are defined: A (lowest), AA, and AAA (highest). Level AA is considered the minimum standard to meet as agreed by Web Accessibility Experts and the US Department of Justice.
- Guidelines - under each principle are guidelines. These provide the basic goals that authors should work toward in order to make content more accessible to users with different disabilities. Guidelines are not testable, but provide the framework and overall objectives to help authors understand success criteria.
WCAG 2.1 Checklist of Success Criteria
The following list is a list of all of the WCAG 2.1 level AA guidelines and their success criteria. If you'd like more information, each guideline's title links to its individual W3C reference page for guidance on passing that guideline's criteria. WCAG 2.1 added an additional 12 success criteria to address mobile accessibility, people with low vision, and people with cognitive and learning disabilities. You can learn more about what's new in WCAG 2.1 from the W3C. All WCAG success criteria from 2.0 are included verbatim, word for word, in 2.1.
Note that the entire web page with all its component parts must be meet all of the following guidelines, a part of a web page that is not compliant results in the entire page being non compliant.
Guideline | Summary |
---|---|
1.1.1 - Non-text Content | Provide alt text for all non-text content. |
1.2.1 - Audio-only and Video-only (Pre-recorded) | Provide an alternative to video-only and audio-only content. |
1.2.2 - Captions (Pre-recorded) | Provide captions for videos with audio. |
1.2.3 - Audio Description or Media Alternative (Pre-recorded) | Videos with audio have a second alternative such as a transcript. |
1.2.4 - Captions (Live) | Live videos have captions provided. |
1.2.5 - Audio Description (Pre-recorded) | Users have access to audio description for video content. |
1.3.1 - Info and Relationships | Information, structure, and relationships conveyed on the page can be programmatically determined or are available in text. |
1.3.2 - Meaningful Sequence | When a list is present, that list is programmatically set into the web page. |
1.3.3 - Sensory Characteristics | Instructions for operating or understanding content do not rely on only sensory characteristics such as shape, size, visual location, or sound. |
1.3.4 Orientation (added in WCAG 2.1) | Content does not restrict its view and operation to a single display orientation, such as portrait or landscape. |
1.3.5 - Identify Input Purpose (added in WCAG 2.1) | The purpose of each input field collecting information about the user can be programmatically determined when the input field services a purpose identified in the input purposes for user interface components identified by the W3C and the content is implemented using technologies with support for identifying the expected meaning for form input data. |
1.4.1 - Use of Color | Don't use presentations that rely solely on color. |
1.4.2 - Audio Control | Don't play audio automatically. |
1.4.3 - Contrast (Minimum) | Contrast ratio between text and background is at least 4.5:1. |
1.4.4 - Resize Text | Text can be resized to 200% without loss of content or function. |
1.4.5 - Images of Text | Don't use images of text instead of text. |
1.4.10 - Reflow (added in WCAG 2.1) | Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for 320 CSS pixels for vertical scrolling and 256 CSS pixels for horizontal scrolling. |
1.4.11 - Non-text contrast (added in WCAG 2.1) | Essential visual information for user interface component used to indicate content meet color contrast requirements. |
1.4.12 - Text spacing (added in WCAG 2.1) | Content and functionality is not lost for people with disabilities who override text spacing to read text. |
1.4.13 - Content on Hover or Focus (added in WCAG 2.1) | When additional content becomes visible or hidden upon point hover or keyboard focus the follow is true: content is dismissible, hoverable, and persistent on focus. |
2.1.1 - Keyboard | All content is operable through a keyboard interface. |
2.1.2 - No Keyboard Traps | Do not trap keyboard users so that they cannot navigate. |
2.1.4 - Character Key Shortcuts (added in WCAG 2.1) | If keyboard shortcuts are in place using only one letter, punctuation, number, or symbol character at least one of the following is true: the shortcut can be turned off, remapped or is only active during focus of an interface component. |
2.2.1 - Timing Adjustable | Provide user controls for any time limits. |
2.2.2 - Pause, Stop, Hide | Provide user controls for moving content. |
2.3.1 - Three Flashes or Below | Ensure no content flashes more than three times per second. |
2.4.1 - Bypass Blocks | Provide a 'Skip to Content' link on the page. |
2.4.2 - Page Titled | Use clear, informative, and precise page titles. |
2.4.3 - Focus Order | Ensure the content order of the page is logical. |
2.4.4 - Link Purpose (In Context) | Ensure every link's purpose is clear from its text context. |
2.4.5 - Multiple Ways | Offer several ways to find pages within a website. |
2.4.6 - Headings and Labels | Use headings and labels that describe topic or purpose. |
2.4.7 - Focus Visible | Ensure keyboard focus is visible and clear with indicators. |
2.5.1 - Pointer Gestures (added in WCAG 2.1) | All functionality that uses multipoint or path-based gestures (such as requiring two fingers moving to access content) can be operated with a single pointer without a path-based gestures unless essential. |
2.5.2 - Pointer Cancellation (added in WCAG 2.1) | For all functionality that can be operated using a single pointer (such as a single click or tap) the function can be canceled unless essential. |
2.5.3 - Label in Name (added in WCAG 2.1) | User interface components (such as link buttons) with labels that have text or images of text have labels that match the same text presented visually. |
2.5.4 - Motion Actuation (added in WCAG 2.1) | Functionality that can be operated by device motion or user potion can also be operated by an alternative method and be disabled to prevent accidental actuation. |
3.1.1 - Language of Page | The default human language of the page is programmatically determined. |
3.1.2 - Language of Parts | Inform users when the human language on a page changes. |
3.2.1 - On Focus | When a page component receives focus, it does not initiate a change of context for the user. |
3.2.2 - On Input | Setting changes do not change automatically without informing users that a change will occur once prompted. |
3.2.3 - Consistent Navigation | Use menu navigation and format consistently throughout the web site. |
3.2.4 - Consistent Identification | Use and identify icons and buttons consistently. |
3.3.1 - Error Identification | When an input error is automatically detected, that error is identified and described to the user in text. |
3.3.2 - Labels or Instructions | Labels or instructions are provided when content requires user input. |
3.3.3 - Error Suggestion | Provide suggested fixes when users make input errors. |
3.3.4- Error Prevention (Legal, Financial, Data) | Reduce the risk of input errors for sensitive data. |
4.1.1 - Parsing | Ensure there are no major code errors. |
4.1.2 - Name, Role, Value | Build all page elements for accessibility. |
4.1.3 - Status Messages (added in WCAG 2.1) | Messages about status changes (such as adding an item to a cart) can be presented to the user without receiving focus. |
Web Accessibility Guides
There are people available who can and will help you with web accessibility; for Questions and Comments about ADA Web Compliance contact Either:
- ADA Compliance by phone at (904) 620-2870 or by email at rrgonz@unf.edu.
- UNF's Webmaster by email at webmaster@unf.edu.
For more perspectives and tips on web accessibility visit the following.
- University of Washington - Information on ADA Web Accessibility and Accessible Technology
- Penn State - Web Accessibility Guides
- W3C - Intro to Web Accessibility
- W3C Official WCAG 2.0 Quick reference
General Tools and Guides
- W3C Better Web Browsing: Tips for Customizing Your Computer
- General Keyboard Shortcut reference for Mac and PC
Testing for Compliance
- NV Access: NVDA Screen Reader
- WAVE Accessibility Tool
- WebAIM: Color Contrast Testing Tool
- The Paciello Group Color Contrast Tool
Help with Meeting WCAG 2.1 level A & AA Success Criteria
The following are guides and tutorials to help you achieve web compliance.
Alternative Text
Captions & Transcripts
Change of Context (On Focus)
- W3C: Opening new windows and tabs from a link only when necessary
- W3C: Giving users advanced warning when opening a new window
- W3C: Failure of Success Criterion 3.2.1 and 3.2.5 due to opening a new window as soon as a new page is loaded
Color Contrast
- Penn State: Color Contrast on Web Pages
- Penn State: Problematic Combinations for Color Deficient Vision
- Penn State: Vibrating Color Combinations