Key Principles of Web Accessibility
Below you will find a list of some key principles of accessible web design. Most accessibility principles can be implemented very easily and will not impact the overall "look and feel" of your web site. The links provided below will take you away from Auburn University's website to more detailed explanations of the topic located on the webaim.org and other accessibility websites.
Providing Appropriate Images Descriptions
Alternative text provides a textual alternative to non-text content in web pages. It is especially helpful for people who are blind and rely on a screen reader to have the content of the website read to them. WebAIM Article on using Alternative Text
General Best Practices for Describing Images
- Every image should hav an alt attribute, even if it is null (alt="")
- Do not use phrases like "image of ....., picture of ...., graphic of ...., etc." Screen reading technology tells the user it is a graphic. For example. "Samford Hall Tower" should be used to describe a picture instead of picture of "Samford Hall Tower".
- Be clear and brief. There is no steadfast rule, but generally image descriptions should be less than a hundred characters.
- Do not use CSS to display images unless they are purely decorative. The Alt attribute cannot be added to CSS images.
Improving Document Structure
Headings, lists, and other structural elements provide meaning and structure to web pages. They can also facilitate keyboard navigation within the page. WebAIM article on Improving Document Structure
Including ARIA Roles and Landmarks.
ARIA (Accessible Rich Internet Applications) is an easy and powerful technical specification for ensuring your site structure is accessible. By assigning ARIA roles and landmarks to web elements, you enhance the ability of screen reader users to navigate and interact with your content. ARIA roles and landmarks can be easily added to your HTML, in the same way that you add classes to HTML in order to load attributes from CSS. WebAIM article on using Landmarks and Roles
More resources from the Office of Information Technology at North Carolina State University describing the coding behind ARIA Landmarks.
Creating Accessible Tables
Tables are used online for layout and to organize data. Tables that are used to organize tabular data should have appropriate table headers (the <th> element). Data cells should be associated with their appropriate headers, making it easier for screen reader users to navigate and understand the data table. WebAIM article on Table Accessibility
Improving Form Navigation
Ensure that every form element (text field, checkbox, dropdown list, etc.) has a label and make sure that label is associated to the correct form element using the <label> element. Also make sure the user can submit the form and recover from any errors, such as the failure to fill in all required fields. WebAIM article on Creating Accessible Forms
Writing Better Link Descriptions
Every link should make sense if the link text is read by itself. Screen reader users may choose to read only the links on a web page. Certain phrases like "click here" and "more" must be avoided. WebAIM article on Creating more Usable Links
Providing Captioning and/or Transcripts for Online Media
Videos and live audio must have captions and a transcript. With archived audio, a transcription may be sufficient.
In addition to all of the other principles listed here, PDF documents and other non-HTML content must be as accessible as possible. If you cannot make it accessible, consider using HTML instead or, at the very least, provide an accessible alternative. PDF documents should also include a series of tags to make it more accessible. A tagged PDF file looks the same, but it is almost always more accessible to a person using a screen reader. WebAIM article on Accessible Media
Allowing Users to Skip Repetitive Elements on the Page
You should provide a method that allows users to skip navigation or other elements that repeat on every page. This is usually accomplished by providing a "Skip to Main Content," or "Skip Navigation" link at the top of the page which jumps to the main content of the page. WebAIM article on the Skipping Repetitive Elements
Do not rely on Color alone to convey Meaning
The use of color can enhance comprehension, but do not use color alone to convey information. That information may not be available to a person who is colorblind and will be unavailable to screen reader users. WebAIM article on Using Color
Making sure Content is Clearly Written and Easy to Read