Skip to Main Content

Basic Guide for Web Accessibility

This guide distills the WCAG 2.2 requirements into basic forms and how to apply it to LibGuides and web content.

Adding in Code

HTML, ARIA and CSS are some of the markup languages you can use to enhance the information in the back end. Screen readers can pick up what is included and can relay to the user what is happening.

 

There are exceptions for many rules depending on the circumstances, but reading through the linked "Understanding Success Criterion XXX" can help with these issues.

Success Criteria A Levels

____ Information is clearly conveyed through text that has appropriate text headings and is marked up with HTML/ARIA or other code (1.3.1)

____ Add HTML/ARIA instructions so that the webpage order can be followed by a screen reader. (1.3.2)

____ If the same information is found on several different pages within 1 website, it can be bypassed with a programmed command. (2.4.1)

____ Progressing through or the required sequence of a webpage or site should be clear and easy to follow. (2.4.3)

____ A user with a keyboard navigation can see the keyboard focus indicator. (2.4.7)

 ____ If a section of text is labeled, the HTML/Aria name can be included for the assistive technology to read. The name should be the same as the labels. (2.5.3)

 ____ HTML/ARIA can be used to state the language of words or sections. (3.1.1)

 ____ The focus/zoom does not change the information on the page. (3.2.1)

 ____ Setting changes by the user do not alter the context unless there is a warning. (3.2.2)

 ____ Errors in input data are automatically detected and are reported to the user through text. (3.3.1)

 ____ When the user adds information, instructions make it obvious what the user needs to type in. (3.3.2)

Success Criteria AA Levels

____ The screen can be changed to either landscape or portrait. (1.3.4)

____ Boxes that need information typed in are clearly described through HTML/ARIA. (1.3.5)

____ The user can change the images of text to adjust to their needs. (1.4.5)

____ Focus appearance has >1 CSS pixel border/8 CSS pixels on the short side; contrast ratio of 3:1 of focused to unfocused area; 3:1 neighboring colors or 2 CSS pixels; and the focus does not obscure other content. (2.4.11)

____ The language of the content is determined through code (proper names, technical terms, etc. are not required to have this). (3.1.2)

____ If a user is typing in incorrect information, suggestions can be provided. (3.3.3)

Success Criteria AAA Levels

____ Widgets, icons and sections of the webpage can be programmed to be read with assistive technology. (1.3.6)

____ The user can always figure out where they are located within a website. (2.4.8)

____ Links will be identified through the name of the link, unless all users will find the linkambiguous in general”. (2.4.9)

____ Focused area is >2 CSS pixels; contrast of 4.5:1; and does not cover other content. (2.4.12)

____ Information can be added in many different ways. (2.5.6)

____ Provide hints about possible mistakes without distracting the user from what they are doing. (3.3.5