Accessibility

Best Practices

Color: Colors and contrast are of great importance to creating accessible web. Use of color should not cause interference with the ability to view the content on a page.

- Color alone should be not used to convey information. If color is used to convey information, then also include information in plain text.
- Links should always be identifiable through non-color means.
- Hover states, default states should be identifiable through non-color means. This can be achieved by underlining.
- Fields in forms must be identifiable through non-color means, this can be achieved by using focus states.

Contrast: The University web colors are preset to accommodate enough contrast between the content and background so that text and non-decorative images are legible for users with low vision or color deficiencies.

Text:

- Page Titles – Use of <title> is required and should precisely represent the unique title of the page. Each page must have a unique <title> which is enough to differentiate each page from other pages on the site.
- Headings – All headings are marked with a <h> tag that follows with a number representing the hierarchy of the title, each page must follow meaningful and proper nesting of headings. Always remember to use one heading H1 per page and the rest of the headers must follow the hierarchy. Do not skip headings from H3 to H5. Always be sure to style headings in a way that works both for the design follow the correct hierarchy starting all the way from H1 – H6
- Links - Links should be easily identifiable in text, use unique link text for each link. Avoid using “click here”, “learn more”, “read more”. These types of repeated links can cause confusion to users using screen readers to interpret sites.
  - - Non-color indicators such as underline must be used to represent links.
    - Proper contrast ratio must be followed between the surrounding or background color and foreground font color which is 4:5:1.

Multimedia – Audio & Video: It’s best if audio or video does not start automatically upon loading a web page. Audio and videos should have the option to stop, pause at any time. Each of these multimedia elements must also include a volume control option.

- Captions: Closed captions must be provided for videos with audio content in non-live synchronized media, and live audio or video.

Forms: Instructions, labels and error handling are extremely crucial for form accessibility. Each form field must include visible labels for easy identification.

Required fields must be identified and clearly indicated. Be sure to indicator does not solely rely on color. Most users with color contrast issues cannot access colored labels.

Error handling must be handled with the utmost clarity. Be sure to provide guidance to help users understand and fix the error.

Focus and Keyboard Operability: Keyboard focus should be visible and should follow a logical order through the page elements. Visible keyboard focus could be a border or highlight.

- Tab to all: Check that you can tab to all the elements, including links, form fields, buttons, and media player controls.
- Tab away: Check that you can tab away from all elements that you can tab into.
- Tab order: Check that the tab order follows the logical reading order (e.g., for left-to-right languages: top to bottom, left to right) in sequence.
- Visual focus: Check that the focus is clearly visible as you tab through the elements, that is, you can tell which element has focus, e.g., links have a gray outline around them or are highlighted.
- All functionality by keyboard: Check that you can do everything with the keyboard; that is, you don't need the mouse to activate actions, options, visible changes.
- Drop-down lists: Check that after you tab into a drop-down list, you can use the arrow keys to move through all the options without triggering an action.

Navigation: Consistent navigation and identification is very important for an accessible site. Use of spaces such as main navigation, quick tabs, headers and footers will help users identify landmarks of your site which in turn helps them find content easily.