Web Sites and Pages
Websites and web pages created or maintained by any university division, department, sponsored student organization, or individual acting in their capacity as a university employee, must meet the accessibility requirements of WCAG 2.1 at the AA level. In addition to the general accessibility requirements applicable to all online content, websites must also consider other potential barriers to accessibility, including the structure of the overall site and component pages.
Web Pages
Well-structured content allows all users to navigate a webpage more easily, but is particularly important for disabled users, who may rely on assistive technology, keyboard navigation, and other techniques to locate relevant content. Webpages or websites that do not meet accessible design requirements may be difficult or impossible to use for these individuals.
In general, information about the content structure of a webpage that is conveyed by visual or auditory formatting should also be conveyed to persons who cannot perceive such formats.
Example: Larger headings typically convey a higher priority level in an outline of content. For a blind or visually impaired user, however, these headings must be properly identified in HTML so that screen reading technology can recognize and convey their priority level.
These structural techniques are so commonplace that it is easy for non-disabled users and designers to miss their importance, and thus miss potential barriers to accessible navigation. List items are preceded by a bullet and perhaps indented, paragraphs are separated by a blank line, items that share a common characteristic are organized into tabular rows and columns, words that have special status are indicated by changing the font or bolding, italicizing, or underlining them, or by using a different text color.
Example: An online form contains several required fields. The labels for the required fields are displayed in red. To make this form accessible for a visually impaired user, one might include and asterisk at the end of each label. The instructions for completing the form would indicate that "all required fields are displayed in red and marked with an asterisk *".
By using appropriate heading structures for pages and the items they contain, website developers ensure that all users can readily access the content they seek. Additionally, by ensuring that sections and fields are properly sequenced, they avoid confusing or trapping persons making use of screen readers and other assistive technologies.
Website Structure
In addition to principles for accessible design of individual webpages, the entirety of a website should be structured and organized in a way that permits individuals using keyboard navigation, screen readers and/or other common assistive technology to locate and navigate to desired content without undue difficulty.
Generally, WCAG requires that all websites be operable and navigable by all users. The core elements of operability include:
Clear Titles and Links
Titles for webpages and subsections should clearly convey their contents. Both screen reader users and non-disabled users rely on clear information about page and section contents to navigate efficiently.
Clear Links
Screen reader users rely on text descriptions of links that are clear in the context they are presented. Where links lack a clear text description, or are located far from the corresponding description or explanation, it can be difficult or impossible for a blind or visually impaired user to determine their function.
Example: A webpage tells users to “click below for more information on nutrition programs for children in the Mississippi Delta.” The actual link to the nutrition program's webpage is located several sections away and is an image of a child with the alt text description “nutrition”. It would be difficult for a visually impaired user to associate this link with the specific content described above. A better approach in this case might be to remove the “click below” instruction and embed the link in the words “nutrition programs for children in the Mississippi Delta.”
Keyboard Navigability
The entire site can be navigated using only a keyboard interface. And if a user can navigate to a given piece of content, they can likewise move away from it using only a keyboard. Where content can be navigated sequentially with a keyboard, the sequence must ensure that the meaning and operability of the content is preserved.
Example: A website includes a form for submitting information in fields such as name and address, and by checking boxes for potential interest in various topics. If the keyboard navigation sequence jumps from the name field to a given subject’s box, then back to the address field, then to another subject’s box, a keyboard user may become confused and a screen reader user may not understand the context of what is being asked at all. Presenting the fields and instructions in a logical order prevents this.
Avoid or Mitigate Time Limits
To the greatest extent possible, time-limited content should be avoided. If the site employs any time limit to access content, the user is able to turn off or adjust the time limit before encountering it.
Example: If a site currently includes rotating headlines that must be clicked to access a news story, consider another format for presenting this content that does not rely on time limits. If a time limit is genuinely necessary, the user must be given the option to deactivate it via a simple action such as pressing the space bar.
Bypassing Content Blocks
If a block of content is repeated multiple times on a website, such as a header, advertising, or filter options for search results, users must be able to bypass it to access featured content directly.
Example: A website’s internal search function includes multiple search filters that a screen reader and keyboard would have to navigate through prior to reaching actual results each time they search. A link directly to the results above these filters allows the user to avoid having to tab through a dozen fields before reaching their search results.
Multiple Ways to Navigate
Websites should have sufficient navigation options to allow users, including users with disabilities, to orient themselves and locate desired content. This can be accomplished in a variety of ways, including providing a table of contents or site map that organizes the site's pages in a logical way and provides links to each. However this information is presented, site developers must ensure that navigation tools remain up to date as revisions to the site are made.
Example: The main landing page of an academic department’s website should enable a visually impaired user relying on a screen reader and keyboard navigation to locate key topics of interests, such as majors, concentrations, and faculty listings quickly from a top-level menu or site map. If the contents of the website in these areas change, all navigation options must be updated to reflect those changes and allow effective navigation.
Additional Tips for Web Designers
Ultimately, the goal of accessible webpage design is to ensure that disabled users can navigate content with substantially equivalent access and ease of use. Some tips for achieving that goal include:
- Style Sheets: Style sheets may be used to control layout and presentation, but documents should nonetheless be organized so they are readable without requiring an associated style sheet.
- Frames: Generally avoid frames, but if you use them, always clearly title each frame. Frames create printing problems and are not easily bookmarked, and search engines have trouble indexing sites with frames.
- Web Forms: Use appropriate mark up, such as label, legend, and field set. Provide labels close to their form controls. Clearly indicate required fields. Ensure controls are keyboard navigable. Ensure form elements have visual focus indicators. Be sure error messages communicate clearly and are easy to identify for assistive technology users. For more information, see W3C’s guidance on Form Concepts.
- Verification: If using a CAPTCHA or other similar verification system, ensure it is accessible via a screen reader.
For more in-depth information on page and site structure see the W3C's information on Page Structure Concepts.