Broad Principles

Headings create recognizable visible and programmatic landmarks on a page. Where many users visually take in the information a heading provides, some users who access websites and documents use assistive technology to take in the programmatic information headings provide. Think of it as getting heading information through sound or touch, instead of through sight.
Some users have assistive technology that extracts all headings from a page for quick navigation, allowing users to jump from heading to heading, just as visually a user might skip from heading to heading. Think about a news site, where you might skim through headlines until you find an article of interest.
Using headings in order (i.e. using H1 before H2, H3 before H4, etc.) helps all users quickly grasp the page's structure. Visually, heading levels convey different information based on font size or weight. Structurally, heading levels also convey the same information to assistive technology users. For example, announcing that a heading is level four indicates that it is likely not as important as a heading level one (which is typically the biggest, boldest heading).

Potential solutions for accessible headings
- Use preformatted headings
- Use headings in order, if possible
- Check that programmatic headings match visual headings

Accessible media provides information with which all users can engage. Some users can take in audio and visual information, and other users cannot see, hear, or otherwise engage with media unless it is accessible.
Accessible media includes alternate text for all images, transcripts for all audio-only media, textual or audio description for all video-only media, and captions for all videos with sound. Alternate text and descriptions of video-only media provide information for individuals with low to no vision. Typically, these descriptions are accessed via assistive technology in the form of a screen reader. Transcripts and captions provide users who are deaf or hard of hearing with information by allowing them to visually gather information presented via sound.

Adequate color contrast provides users with low vision or color blindness with accessible information. If foreground to background color contrast is below 4.5:1, some users will miss information because they will not be able to differentiate between the foreground and background colors.
Color dependence relies on color only to convey meaning, which is problematic for colorblind users or users with low vision. These users may be unable to see color-based cues and will thus miss important information.
Example of high color contrast: UConn's logo (white on UConn blue) has a foreground to background color contrast ratio of 14.46:1

- For comparison, pure white (#FFF) on black (#000) has a perfect contrast ratio of 21.0:1
Potential solutions for maintaining accessible color contrast
- Check all content for color contrast before publishing
  - Example: Before publishing a promotional poster, check the foreground and background colors, especially text, for contrast levels
- Download the Color Contrast Analyser to check color contrast

Potential solutions for no color dependence
- Avoid creating elements that rely on color to convey information
  - Example: When designing images or interactive content, avoid phrases like "select the yellow item" or "all items in red are required". Instead, say "select the yellow star" or "all bold red items are required".

Many widgets and plugins are not accessible, which means that users with disabilities cannot use them or access the information they provide. For example, a photo viewer may not be keyboard accessible, so users who use the tab key to move through sites cannot advance through images.
It is necessary to test each widget or plugin in a particular site, because they can have behavior that spreads throughout a site. An example of this is the countdown widget, which has to be displayed in a page to fully test it for accessibility.
ITS has a list of approved widgets and plugins which have been tested for accessibility. Contact ITAccessibility@uconn.edu if you would like a widget or plugin tested for accessibility.

Keyboard accessibility involves setting up a page so that a user can use the keyboard to move through all interactive elements on the page. Both users who are blind or have low vision and users who have limited mobility or strength access information via keyboards. Typically, users advance by hitting the tab key or by using the arrow keys. Interactive elements can often be selected through space or enter. If your site has interactive elements that require unusual keyboard commands to activate, notify users about this.
Keyboard accessibility includes widgets and plugins. If a widget or plugin is inaccessible, this renders part of your web page inaccessible and users with disabilities may miss information hosted in the widget or plugin.
A best practice for keyboard accessibility is to group related objects. For example, if an image and a link both lead to the same place, consider grouping them under the same <a> tag.

Potential solutions for creating keyboard accessibility
- To check tab order, open the selection pane (documents and presentations) or tag tree (PDFs) to reorder elements of the page
- If necessary, reorder elements to make the tab order more logical
  - Example: If there are 3 text boxes on a page, determining the logical tab order dictates the order in which a screen reader reads the text boxes

IT Accessibility