Fixing Accessibility Issues

Use this page to address any issues found during the Accessibility Audit Methodology.

Audio

If the audio file does not have a transcript or text description, add a transcript or other textual description.  For example, if an audio file is just sound effects, like lion roaring, there would be a textual description of the sound saying "Lion roaring".  A transcript can be added as a link to a document or as a paragraph following the audio file.

Auto-Updating Content

If user controls are available for automatically updating content, such as a counter ticking off the time until an event that updates every second, provide access to user controls.  The user should be able to pause, stop, hide, or control the frequency of automatically updating content.  Furthermore, the page should provide notification of each automatic update or change in content.  This can be done through a dialog box or another notification format.  If user controls and notifications are not available, refrain from using the automatically updating content.

Color Contrast

If the color contrast of text's foreground to background colors is lower than 4.5:1, adjust the colors until the text has a contrast ratio of at least 4.5:1.  Use Color Contrast Pal to determine a color combination that raises the ratio.

Color Dependence

If there are areas where information is only provided by color, add an additional way to present information to users.  For example, instead of saying "All red items are required", amend to "All red items with an asterisk are required".  The asterisk provides a non-color dependent way of showing which items are required.

Consistent Identification

If interactive elements are reused throughout a website, such as a "print page" button that appears at the bottom of every page of the website, ensure that the accessible name and description are consistent for all components that perform the same function.  Using the "print page" example, the button would have the same name on each page and consistently cause the webpage to be printed.

Data Tables

Cells would likely be programmatically identified by the program where the table was created.  If creating a table in Aurora, edit the Table Cell Properties and define the cell type as Header and the cell's scope as row or column.  For complex data tables, if creating a table in Aurora, edit the Table Cell Properties and define the cell type as Header and the cell's scope as row or column group.  Refrain from using images of data tables, as these will always be less accessible than the original table.

Forms

Provide descriptive text with complete instructions and cues for each form field.  In Aurora, fill out the Field Label with descriptive text.  For example, a field asking for the user's first name would have a field label of "First Name".

For form controls, provide labels that identify the control's purpose.  In Aurora, under Form Settings and Form Button, fill out the Button text with a description of the button's purpose.  For example, a button submitting the form would have Button text reading "Submit".

Frames

If using frames of iframes, provide a title or name by editing the embed code to include the "title" attribute.  Within the embed code, add title="Name".

Images

Every image should be provided with alternative text, also known as the ALT attribute.  If using Aurora, go to the Media library and select an image.  Under Alternative Text, enter text that describes the image's form and function.  Be sure to include all text shown in the image in the alternative text.  For example, an image of the UConn logo should have an ALT that reads "UConn University of Connecticut logo".

For decorative images, or images that do not add any meaningful information to a page, the alternative text should equal "", a pair of double quotes.  This signals to a screen reader that it can skip over this image.  For example, a stock image used to give a page visual interest could have ALT="".

If there are CAPTCHA or reCAPTCHA images on the page, they also must have an ALT describing their purpose and an alternate way to access them.  For example, some CAPTCHAs offer an audio version.

Keyboard Accessibility

If an element can not be reached via keyboard controls only, the page's tab order may need to be adjusted to include the element.  If the website was designed in Aurora, contact the ITS Web Development and Design team for assistance at webdev@uconn.edu.

If an element does not receive visible focus when receiving mouse hover or keyboard focus, add :hover and :focus to the element's CSS.  To learn more about this solution, visit Web Accessibility Style Solutions.

 

Language

If the page language is not declared, edit the page's HTML to include a language attribute.  For example, a page where the primary language is American English would have lang="en-US".  In Aurora, the page language is automatically declared.

Links and User Controls

Provide each link or button with a unique, meaningful name that describes its destination or function. For example, a link's text might read "Learn more about web accessibility" instead of "Learn more".

List Type

Change any visually apparent lists into programmatically identified lists.  Using Aurora, create lists using the bullets or numbering controls.  Outside of Aurora, define lists using <ol> and <ul>.

Multimedia

Create captions for each piece of multimedia (synchronized audio and visual).  Captions must be accurate or users will be provided with misinformation.  Captions can be created using Kaltura, YouTube, or 3Play Media.  Learn more about captioning options.

Multiple Ways

Provide more than one way to navigate to each webpage in a site.  This can include providing menus and sitemaps.

Page Titles

Using Aurora, provide a page title when creating or updating a page using the "Add Title" field at the top of the page editor.  Outside of Aurora, use <title> to define the page's title.

Repetitive Content and Links

Using Aurora, links allowing users to skip repetitive content like navigation bars will be provided.  Outside of Aurora, add a link above the repetitive content whose target is the page's main content.  Check that the link works properly.  Repetitive content, like navigation bars, should be in the same relative page on each page on which it is used.

Required Plugins

If plugins are required to access any information, provide notice to the users.  This notice might look like a paragraph in the footer: "Some content on this website may require the use of a plug-in, such as Adobe Acrobat Viewer or Microsoft Word.  If a different plug-in is required, it will be noted".

Section Headings

Using Aurora, identify headings using the built-in styles.  The default style for all text is Paragraph.  Use styles instead of emphasizing text with bold and italics.  Outside of Aurora, define styles like H1, H2, etc. using CSS.  These styles can be referenced as heading styles.

Sensory Information

Provide multiple ways to access information.  Do not make information rely on a single sense, as not all users have access to a sense.  For example, provide both auditory and textual information for a video.

Style Sheet Dependence

Consider if content needs to be injected using ::before or ::after.  If it is not necessary for content to be presented in this way, modify content so that it is always visible.  Otherwise, consider if users who disable CSS will still be able to access the hidden content.  If they cannot, make content visible.

Time Outs

If a page times out, save the user's information so that they can return to the page.  Also, display a time out notification for at least 20 seconds and provide an option for the user to request additional time.

Video-only and Animation

Provide equivalent text or audio descriptions for any video-only information or animations.


Last modified October 21, 2019