Accessibility Checklist: UT Websites

This guide is based upon WCAG 2.0 AA standards, as well as the Voluntary Product Accessibility Template (VPAT), Section 1194.22, which is in turn based upon WCAG 1.0. It should be consulted when building or updating any/all websites published under the utk.edu domain. This is a living document and may be updated as criteria evolve. Find a printable version here.

INFORMATION DESIGN: ADAPTABLE CONTENT

Content managers

• Content is organized in a meaningful sequence. There is a logical reading order.
• Content is not “hidden” in images.
• All fonts/typefaces are readable at a variety of sizes.
• Text color contrasts adequately with background color.
• Color is not used as the sole way to convey information (e.g. green circle for “yes” and red circle for “no”).
• Instructions for understanding and using the content do not rely solely on the sensory characteristics of page elements (e.g. audio or directional cues).
• Users have a way to control (pause, stop) video/sounds that auto-play when a page is loaded. Better yet, video/sounds do not auto-play on page load.
• Text is the primary means of conveying information (rather than images or colors).

Web designers/developers

• Designs are created for different viewport sizes (i.e. responsive design).
• Proper semantic HTML markup is consistently used (e.g. correct use of hierarchical elements such as header tags, list tags for lists, etc.).
• Pages are structured/organized so that they are easily readable without stylesheets (CSS) turned on.
• ARIA landmarks are used to identify regions of web pages.
• Headings, form controls, and other elements are identified and properly labeled.
• Spacing and proximity are used to make relationships between content more apparent (CSS).
• CSS is used to control page design/structure, rather than HTML elements such as tables. The only exception to this rule is for building HTML email.
• Table markup is used for the presentation of tabular data/information.
• When scripting, functions of the DOM are used to add content to pages.
• Informative text can be resized (without using assistive technology) up to 200% without losing/obscuring content or functionality.

INFORMATION DESIGN: NAVIGABILITY

Content managers

• Navigation across pages is grammatically consistent.
• The number of links per page is not overwhelming.
• In longer, more verbose pages, there is a way to navigate to different sections of the page (e.g. anchor links).
• Repeated material is grouped so that it can be easily skipped.
• Page titles relate directly to the content on the page.
• Top-level page headings are adequately descriptive.
• The purpose of each link is clear (e.g. avoid “click here,” “read more,” and other ambiguous instructions for links).

Web designers/developers

• Navigation across pages is consistent in design, style, and position.
• Interactive elements (buttons, linked text) are visually distinct from running text (e.g. underlined, different color with adequate contrast, etc.) and have clearly identifiable styles for hover, focus, and click states.
• The code provides a way for users to skip repetitive navigation and move directly into the content.
• Orientation cues are provided to let visitors know where they are within the overall site (e.g. clear headings, breadcrumbs, etc.).
• There are multiple ways to find pages (e.g. search, navigation, etc.).
• On search results pages, search terms are highlighted.

INFORMATION DESIGN: ALLOW ADEQUATE TIME

Content managers and web designers/developers

• Site visitors are allowed enough time to read and use your content.
• Pages are easy to scan and understand (e.g. divide sections with headline tags).
• When there must be time limits on content, content can be easily paused/stopped.
• There are clear methods available to pause/stop moving/scrolling content, including carousels and sliders.
• If a timed response is required, the time limit is made clear to users, and users are given sufficient time and a clear method to indicate that more time is required.
• Scrolling content, including carousels and sliders, is used sparingly.
• Blinking content is avoided.
• Flickering or flashing content is not used.

IMAGES: TEXT ALTERNATIVES

Have you provided text alternatives for informative non-text content, including video, images, and the like?

Content managers

• All images (img elements) are assigned “alt” text.
• All videos are captioned.
• All input controls (e.g. “submit” buttons on forms) are properly labeled.
• All pdf posters, flyers, documents, etc., have text alternatives or are created in such a way that they are accessible with assistive technology.
• All purely decorative images and other non-text content can be ignored by assistive technology.
• If CAPTCHA is used, alternative forms (other than text) are provided to accommodate users of varying abilities.
• Any icons—including those created by icon fonts—should be labeled with a text alternative.

TIP: When possible, always use text rather than images to convey important information.

Web designers/developers

• Proper ARIA elements have been used to provide labels for objects.
• If Flash video is used to convey information or control inputs, a text alternative is provided.
• CSS is used to control layout (e.g. “spacer images,” tables, and the like are not used to force visual design).
• Metadata is being used to properly associate videos and audio files with their transcriptions.

TIP: Non-informative, decorative, and visual design elements should be easily ignored by assistive technology.

VIDEO/AUDIO: TIME-BASED MEDIA ALTERNATIVES

Content managers

• Captions are provided for pre-recorded video and audio.
• Captions reflect the use of important (informative) sound effects, if applicable.
• Transcripts are provided if the video/audio contains important, substantive content (i.e., not merely a “fluff” piece with no takeaways or calls to action).
• Important events shared via streaming (live) video or audio are livecaptioned (e.g. commencement exercises).
• Live-captioned versions are easy to locate and identify.
• Audio description tracks are provided along with video presentations for synchronized media (e.g. a campus tour).
• A sign-language interpretation is provided in the video stream for synchronized media.

VISUAL DESIGN: SEIZURES

Content managers

• Flashing elements, if included, are set below the general flash and red flash thresholds. It’s preferred to not use flashing elements at all.
• There are no design elements that flash more than three times in a one-second period.

TIP: Don’t use flashing elements.

SITE BEHAVIOR: PREDICTABILITY

Web pages should appear and operate in predictable ways.

Content managers

• Icons and buttons are used (and function) consistently across the site.
• Language changes within the content of the page are clearly indicated (e.g. a paragraph in French within a page of English).

Web designers/developers

• The language of the page is clearly indicated.

USER CONTROL: KEYBOARD ACCESSIBILITY

Web designers/developers

• Webpages can be navigated in a logical manner solely by use of keystrokes.
• The functionality of the webpage can be handled via keyboard input.
• Users can shift focus from page area to page area using only the keyboard.
• Keyboard focus on website elements is obvious (e.g. a visible outline around selected elements in the navigation).

TIP: Avoid adjusting the tab order by using “tabindex” attributes, as this can inadvertently create “keyboard traps.”

USER CONTROL: FOCUS & INPUT

Web designers/developers

• Context of the page and its individual elements do not change upon simply receive focus from a peripheral device (e.g. mouse or keyboard). Exceptions include hover states in navigation and links.
• Elements act as expected and do not automatically change when they receive input. Users are always able to confirm their choices before action is taken

USER CONTROL: INPUT ASSISTANCE

Web designers/developers

• Form controls and input elements are clearly identified and properly labeled.
• Forms offer clear feedback to users (i.e. instructions, error notifications, and text examples of correct inputs).
• When collecting sensitive data, provide a confirmation page prior to final submission, and ensure that users can go back into the form to correct mistakes.
• Labels are utilized properly to maximize the predictability of relationships among form and other elements.
• Color is not used as the sole way to convey information (e.g. a red border alone to indicate a form submission error).
• Form requirements are explicitly stated (e.g. an asterisk alone to indicate a required field is not enough).

CODE: COMPATIBILITY

Web designers/developers

• Your website has been checked to ensure there are no major code errors (e.g. with a validator or validators such as those provided by W3C).
• Ensure that all added elements built by you meet WCAG standards and are well-coded (e.g. plugins, scripts, etc.).
• Ensure that all added elements not built by you (plugins, etc.) meet WCAG standards and are well-coded.
• Code is compatible with current and future agents (i.e. web browsers and assistive devices) and is not deprecated.

TIP: If an HTML element exists, use it. For example, do not attempt to create your own checkbox functionality with JavaScript.