Web Accessibility Guidelines

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.

  Drupal Websites

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.

  Non-Drupal Websites

If your webpage is hosted on the University's web server (web.calstatela.edu) or by a third-party, use correct HTML markup to associate labels with their corresponding fields. If you use JavaScript to manipulate form data or for form validation, ensure that the form can still be navigated using the keyboard. For more information, visit W3C's Forms Concepts page and WebAIM's Creating Accessible Forms page.

Frames

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> element to specify equivalent content for web browsers that do not support frames or are configured not to display them.

Iframes

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 iframe start and end 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).

  Drupal Websites

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.

  Non-Drupal Websites

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.

Images can enhance content or add visual interest to a webpage, but they are inaccessible to people with visual impairments. To be accessible, all images are required to have an equivalent alternative text (alt text). It is read by screen readers in place of an image, allowing the content and function of the image to be accessible. The most appropriate alt text for an image depends on the purpose of the image within the context of the webpage.

• If an image conveys simple information, the alt text should convey the same essential information as the image.
• If an image conveys complex information (e.g., a chart or graph), it should include a short alt text and a long description that provides more detail about the image.
• If an image is purely decorative, the alt attribute should be empty (alt=""). This tells screen readers to completely ignore the image.
• If an image has a caption or is described in adjacent text, the alt attribute should be empty (alt="") so that the information is not read twice by screen readers.
• If an image contains text, the alt text should contain the same text.
• If an image is linked, the alt text should describe the link's destination.
• If an image is used as a button, the alt text should describe the button's purpose.

For more information, visit WebAIM's Alternative Text page.

  Drupal Websites

To ensure that websites hosted on the University's Drupal web platform (www.calstatela.edu) meet accessibility requirements, an alt text is required for all images. For instructions on how to add an image in Drupal, visit the Adding Images page.

  Non-Drupal Websites

If your webpage is hosted on the University's web server (web.calstatela.edu) or by a third-party, ensure that all images include an appropriate alt text. For more information, visit W3C's Images Concepts page and WebAIM's Accessible Images page.

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.

When Using Links

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.

  Drupal Websites

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.

  Non-Drupal Websites

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.

  Drupal Websites

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.

  Non-Drupal Websites

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.

  Drupal Websites

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.

  Non-Drupal Websites

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).

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.

Color Contrast

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: