Skip to Main Content

Accessible Web Design

Teach Access Project

Whether you are learning about accessibility for the first time or are just looking for a refresher on the basics, the Teach Access tutorial offers an interactive, hands-on experience covering a variety of different web accessibility topics. The site provides examples and solutions for those writing code or those interested in different design practices all in support of web accessibility.

The Teach Access project is supported by a group of technology companies focusing on a common challenge: to train, educate, and prepare developers, designers, engineers, researchers, and students in thinking about accessible user experiences and diverse audiences. As part of this effort, the Teach Access initiative has created a tutorial identifying and explaning the best practices associated with accessible web design.

Best Practices

Even the most basic web pages can include accessible design solutions to facilitate navigation and engagement with content. Often times, websites may focus on advanced techniques and interactive elements while overlooking basic best practices to support access.

Headings

Headings can provide an organizational and navigational framework for a document's content. Headings, when used appropriately, can be effective to communicating the document's informational hierarchy and the relationship between different sections of content. For an individual using assistive technology, the presence of headings offers a simple mechanism to determine the organization of the content and to "jump" from heading to heading when navigating the document.

Images

Recommended Reading for Images:

Images can be a powerful method in communicating a significant amount of information visually. Not everyone, however, may be able to view images used in web pages and so it becomes necessary to provide alternate solutions. For images that convey content, you can add a text description (also called "alt text") that communicates the purpose and/or content of that image. This text description may be then communicated to individuals who cannot view the image using their assistive technology.
 
Image descriptions should be short and communicate the main purpose of the image. If a longer description of the image is necessary to fully explain its content, consider inserting a more detailed description of the image within the document text that precedes and/or follows the image.

Sample:
<a href=”/”><img src="/logo.png" alt="California Community Colleges Chancellor's Office"></a>

Descriptive Link Text

Hyperlink text is simple to implement and providing descriptive link text can support accessibility by ensuring that it can be more easily understood by the site visitor. Individuals using assistive technologies can often bring up a list of all the hyperlinks on the web page. One challenge can be in recognizing the destination of such links when many of the links have the same hyperlink text, such as "Click Here" or "Read more."

Rather than identifying the hyperlink text as "Click Here" the solution is to include additional information regarding the purpose or destination. Such hyperlink text could be set as "Click Here for Enrollment Information" or "Click Here for Programs and Services". You may even begin to ask yourself if the words "Click Here" are even necessary.

Skip Navigation

Recommended Reading:

Skip navigation links allow individuals using assistive technologies or the keyboard to skip past repeated sections and interact with the main content of a page. A skip navigation element may be a visible or hidden hyperlink on a page that, when activated, shift the browser focus to the desired content area. This is particularly advantageous to keyboard users to avoid “tabbing” all through a full set of page elements to get to the desired region.
 
If there is concern about the visual design of the page and the use of skip navigation links, it is possible to hide the hyperlink using CSS until it receives browser focus.
 
The target region that will receive focus should also include the attribute tabindex=-1. This will set the browser’s focus on that region so that the next time the tab key is pressed, the focus will shift to the next focus-able item in that region. Otherwise, the browser focus will return to the top of the page defeating the purpose of the “skip to” link.

Example Code:

<body>
<header>
<p class=”skip”>
<a href=”#content”>Skip to content</a>
</p>
</header>

<div id=”content” tabindex=”-1”>
...
</div>
</body>