It is critical to integrate accessibility throughout the design, content creation, and development phases of each web-based project's lifecycle, as well as to consider accessibility when maintaining or updating websites.
Creating Accessible Web Content
Most web content can be made accessible by following the simple guidelines listed below. For a full list of web accessibility guidelines and how to meet them, visit WebAIM's WCAG 2.0 Checklist page and W3C's How to Meet WCAG 2.0 page.
Use of Color
Color is an important aspect of web design. However, some users have difficulty perceiving color. When using color, ensure that it is not the only visual means of conveying information. If you do use color to convey information (e.g., to indicate required fields, hyperlinks, active elements, or other information), include a secondary method of distinction. For example, if a webpage directs site visitors to press a green button for help, it should also include the word "Help" on the button. This way, a person who is colorblind can still identify that the button is for help.
When using color, provide sufficient contrast between text and its background so that people who have visual impairments can read the content.
- The minimum contrast ratio between text and its background should be 4.5:1.
- Text that is larger (at least 18 points if not bold or 14 points if bold) can have a contrast ratio of 3:1.
- These requirements also apply to images of text if those images are intended to be understood as text.
- Text that is decorative and conveys no information has no contrast requirement.
Use the WebAIM Color Contrast Checker to test the contrast ratio between text and its background:
Forms are commonly used to provide user interaction on websites and in web applications. For an online form to be accessible, every form field must have a descriptive label that identifies its purpose. The label should be placed adjacent to its respective field and must be associated with the field.
You can improve the accessibility of your form by following these best practices.
- Provide clear instructions on how to complete the form.
- Clearly indicate required fields.
- Place form fields in a logical order.
- Group related form fields and label them appropriately.
- Ensure that form fields can be navigated using the keyboard.
- Ensure that errors are communicated clearly and are easy to identify.
If your webpage is hosted on the University's Drupal web platform (www.calstatela.edu), you can easily create accessible forms by using the Webform content type. When you add a new form field, the label you enter for the field is automatically associated with the corresponding field. You can also easily group and sort fields using a drag-and-drop functionality. For instructions on how to create a form in Drupal, visit the Creating Webforms page.
Frames are used to separate a webpage into different sections, with each section being its own window. If possible, avoid using frames because they create usability and accessibility issues. If you must use frames, ensure that each frame has a meaningful title which gives a clear indication of the content within that frame. Also, include a noframes tag to specify equivalent content for web browsers that do not support frames or are configured not to display them.
Inline frames (iframes) are used to embed content from one webpage into another (e.g., a video from YouTube or a social media widget). If you incorporate an iframe on your page, ensure that it has a meaningful title. Also, provide alternative content by including a text description between the opening and closing iframe tags.
For more information, visit WebAIM's Creating Accessible Frames and Iframes page.
Headings help users understand what information is contained on a webpage and how that information is organized. Headings also allow screen-reader and assistive technology users to skim the structure of a page and navigate to or skip over sections.
When designing the structure of your page, follow these best practices.
- Use headings to denote a page's structure rather than for visual effect.
- Apply heading markup (h1-h6) to all visual headings. Do not format text to make it look like a heading.
- Use only one main heading (h1) which should be the page title.
- Order headings properly. Subheadings of h1 are h2s, subheadings of h2s are h3s, etc.
- Make headings short and descriptive so users can easily find the information they are looking for.
- Make sure all headings have associated content (i.e., no empty headings).
If your webpage is hosted on the University's Drupal web platform (www.calstatela.edu), you can apply heading styles (Heading 2, Heading 3, etc.) using the Format button on the WYSIWYG toolbar. In Drupal, the page title is marked up as Heading 1, so the first level of subheadings within the page content should be marked up as Heading 2.
If your webpage is hosted on the University's web server (web.calstatela.edu) or by a third-party, use correct HTML markup to style headings (h1, h2, h3, etc.). For more information, visit W3C's Headings page.
A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
A text equivalent means adding words to represent the purpose of a non-text element. This provision requires that when an image indicates a navigational action such as "move to the next screen" or "go back to the top of the page," the image must be accompanied by actual text that states the purpose of the image. This provision also requires that when an image is used to represent page content, the image must have a text description accompanying it that explains the meaning of the image.
<img src="logo-green.gif" alt="Green Company Logo">
Empty ALT Attribute
If an image is purely decorative and contains no informative content, use an empty string as the "alt" attribute, i.e., alt="". This technique is widely supported by screen readers, which respond by ignoring the image.
Web page authors often utilize transparent graphics for spacing. Adding a text description to these elements will produce unnecessary clutter for users of screen readers. For such graphics, an empty ALT attribute is useful.
<IMG src="transparent.gif" alt="blank space">
<IMG src="transparent.gif" alt="">
D-link and LONGDESC
When an image has complex data, you can refer a user to another page that provides a detailed textual description using the LONGDESC attribute. The values for LONGDESC would be the page description's url. Unfortunately, most browsers do not support this attribute (Note: JAWS does). Which is why a "D" link is also recommened.
<a href="graphexample.html" title="Detailed Description of Ice Cube Trade Sales">D</a>
Finally, yet another way of providing a textual description is to include it in the page in the surrounding context:
Below is a picture of the Cal State LA Solar Eagle III!
Links are one of the most basic and important elements of a website. They are essential for website navigation and can be used to cross-reference related content. As a result, inaccessible links are one of the biggest issues a website can have.
You can improve the usability and accessibility of your links by following these best practices.
- Use link text that is meaningful when read out of context. Avoid using redundant or ambiguous link text such as "click here" or "read more".
- Keep link text concise. A long link is more likely to break across lines on a webpage, making it look like two links.
- Avoid using URLs as link text. If a URL is relatively short such as a site's homepage, it may be used as the link text.
- Do not use the same text for links that go to different destinations.
- Ensure that links can be navigated using the keyboard.
- Style links to make them distinctive from other types of text on a webpage. Underlining links is a standard convention to denote that text is clickable.
For more information, visit WebAIM's Links and Hypertext page.
Plug-ins enable web browsers to display a particular file format (PDF, Word, Excel, PowerPoint, etc.). When a webpage links to a file that requires a plug-in to display the content, a link must be provided to a page where the plug-in can be downloaded.
If your webpage is hosted on the University's Drupal web platform (www.calstatela.edu), this requirement is automatically met for common file types via the File Viewers link located in the website footer. If you link to a file which requires a plug-in that is not listed on the File Viewers and Plug-ins page, you need to add a link to a page where the plug-in can be downloaded.
If your webpage is hosted on the University's web server (web.calstatela.edu) or by a third-party, you can meet this requirement by adding a link to a page where the appropriate plug-in can be downloaded. For a list of plug-ins for common file types, visit the File Viewers and Plug-ins page.
Many websites have redundant navigation links across multiple pages. For screen reader users and users navigating by keyboard, these links can become burdensome if there is no way to efficiently skip past them. To improve the accessibility of your site, include a skip navigation link on each page to allow site visitors to skip over repetitive page elements and get to the main content.
If your webpage is hosted on the University's Drupal web platform (www.calstatela.edu), this requirement is automatically met. Every page that is created in Drupal includes a "Skip to content" link.
If your webpage is hosted on the University's web server (web.calstatela.edu) or by a third-party, you can meet this requirement by adding a link at the top of each page that goes directly to the main content. For more information, visit WebAIM's Skip Navigation Links page.
Tables should be used to present data; they should not be used to create a page layout. For a data table to be accessible, it needs to include column and/or row headers and markup that associates data cells to their respective headers.
If your webpage is hosted on the University's Drupal web platform (www.calstatela.edu), you can easily create accessible tables. When you add a table to your page, make sure to specify column and/or row headers in the Table Properties dialog box. Based on your selection, Drupal will automatically add the appropriate markup to your table to associate data cells with their headers. For instructions on how to add a table in Drupal, visit the Adding Tables page.
If your webpage is hosted on the University's web server (web.calstatela.edu) or by a third-party, make sure to create accessible tables by using the appropriate HTML markup to associate data cells with their headers. For more information, visit W3C's Tables Concepts page and WebAIM's Creating Accessible Tables page.
To be accessible, website text must have a high level of readability and legibility. Readability is the ease with which a reader can recognize words, sentences, and paragraphs. Legibility is the ease with which a reader can recognize individual characters in text.
You can improve the accessibility of your text by following these best practices.
- Write clearly and concisely.
- Structure content with headings and lists.
- Use real text rather than text embedded within graphics.
- Provide sufficient contrast between text and its background.
- Select simple, readable fonts.
- Avoid small font sizes.
- Use relative units for font size.
- Avoid fully-justified text.
- Avoid blinking or moving text.
- Limit the use of font variations such as bold, italics, and ALL CAPITAL LETTERS.
- Do not underline text unless the text is a link.
- Identify any changes in language (e.g., English to Spanish).