Visually inspect web pages for accessibility

On this page:


Overview

Important:

This information is intended for web developers, providing a holistic process for performing an initial pass of evaluating your website for accessibility. This is not a substitute for performing a complete Web Content Accessibility Guidelines (WCAG) 2.0 AA site evaluation, but following this full process will capture most of the WCAG 2.0 AA Guidelines more efficiently.

It is impossible to meet the website accessibility standards in IU's Americans with Disabilities Act Policy (UA-02) using only automated tools.

Looking at each web page before running any tools or doing any other checking can reveal many possible accessibility issues and identify areas that need a closer look.

Index the website

Start by creating a list of the URLs and page titles of each page in the website. This index is helpful for identifying specific pages and tracking which pages have been evaluated.

Page titles

Pay attention to page titles. The page titles help identify individual pages if you are indexing the website.

The page title should be unique within a website and indicate what the page is about. If a website has multiple pages with the same title, it can be confusing to identify an individual page, especially when using a screen reader or bookmarking the page.

Well-written page titles should be unique and descriptive. The current subsection and website name can be included, with a preferred order of page title, section, then website name.

Learn about checking page titles [one minute video].

Things to check now

Remember the goal of the visual check at this step is to survey the entire site, including the content structure, check some content immediately, and identify those areas which may require closer examination in the next steps. Learn more about checking content structure in this short video.

We have listed the most relevant guidelines for each area below, but realize other guidelines in the WCAG 2.0 AA standards may also apply.

Color and sensory characteristics

Note any use of color to convey meaning and instructions that rely on sensory characteristics. Sensory characteristics include shape, color, size, visual location, orientation, and sound.

Some examples of using sensory characteristics include:

  • A calendar where available times are shaded green and unavailable times are shaded red
  • Instructions such as "click the button on the left to continue"
  • A list with color-coded items

Guidelines relevant to color and sensory characteristics

Video and audio files

Check any videos and audio files for the following:

  • Transcripts: Documents including correctly sequenced text descriptions of time-based visual and auditory information
  • Audio description: Narration added to the soundtrack to describe important visual details that cannot be understood from the main soundtrack alone
  • Closed captions: Synchronized visual or text alternative for both speech and non-speech audio information

The closed captions, transcripts, and audio description must accurately reflect the video or audio content.

For a brief overview, view this one minute video about captions.

Guidelines relevant to video and audio files

For more about video and audio, see Make video and audio accessible.

Images and alt text

Note images, icons, and any other graphics. While many automated tools will find images missing alt attributes, a manual check is necessary to verify that the alternative text is appropriate.

Pay special attention to any images of text, which should rarely be used. Images of text do not respond when resizing text and may become blurry when magnified. If the image of text is necessary, such as in a logo or as part of a picture such as a graph, screenshot, or diagram, the alt text should provide equivalent text.

  • Image elements (<img>) should always have an alternative (alt) text attribute.
    • If the image is considered decorative or the description is provided in surrounding text, the alt should be null. Null alt is empty alt text, where alt equals double quotation mark followed by a double quotation mark, with no space between (alt="").
    • Otherwise, the alt text should describe the image.
  • SVGs that are in an image element will have alt text. SVGs that are not in an image element do not have alt text but should have a title instead.

Turn off images in your browser and reload the page. This will help you discover informative images that do not have properly descriptive alt text as well as any layout problems that may occur if images fail to load.

To turn off images in Chrome, open Settings. At the bottom of the page, select Advanced. Select Site Settings, and then Images. Toggle the switch from Show all (recommended) to Do not show any images. Reload your web page to view it without images.

For more about alt text, see Alternative text for images.

Guidelines relevant to images and alternative text

Responsiveness

Check different screen sizes, including mobile. Also check both portrait and landscape orientation. This can be done by changing the size of the browser window, using a tool such as the device toolbar in Chrome's developer tools, or by opening the web page on a mobile device. A responsive web site should not have content that is overlapping or obstructing other content. Content and functionality should not be lost in mobile.

Guidelines relevant to responsiveness

Navigation should be consistent throughout the website. The names and order of items within a navigation area should be the same across pages, and navigation areas should be consistently located. Look at the navigation areas in both desktop and mobile on the website.

Guidelines relevant to navigation and menus

Flashing and moving content

Note any flashing or moving content. Moving content will require additional checking with keyboard and screen reader.

Flashing should be three flashes per second or less to prevent seizures.

Moving content lasting more than five seconds, such as animated GIFs, auto-playing videos, and auto-advancing carousels should:

  • Have the ability to be paused
  • Be operable with a keyboard and have keyboard focus
  • Communicate informative changes to all website visitors

Guidelines relevant to flashing and moving content

Timed content

Most often, non-moving timed content is caught when pages time out. If you have pages that time out, you will need to note these.

Other examples of timed content include content that automatically advances or updates, including page refreshes and the moving content identified under Flashing and moving content.

Verify that time limits are adjustable to at least ten times the default, allow extension of the time limit at least ten times, or allow the time limit to be turned off.

Exceptions:

  • Real-time events like auctions
  • Time limit is essential and extending time limits would invalidate the activity
  • Timed content that extends beyond 20 hours

Guidelines relevant to timed content

Language changes

Note any changes of language. For example, on a page written in English, there may be a paragraph in Mandarin or Spanish. You should verify that the language change has been indicated in the code.

Guidelines relevant to language changes

No styles

View each page with styles turned off. This will allow you to quickly check the reading order and spot potential problems that appear if the style sheet fails to load.

Potential problems include instructions or information that rely on color (for example, overdue items marked in red) or style (for example, unavailable dates marked with a strikethrough). Turning off styles also reveals places where styles were used instead of meaningful HTML elements, such as increased text size rather than a semantic heading element.

To turn off styles in Firefox, open the View menu. Select Page Style and then No Style.

Guidelines relevant to reading order

Things to check later

Look for the existence of the following, which will require in-depth checking with keyboard, screen reader, and automated tools:

  • Forms and form elements
  • Carousels and slide shows
  • Accordions
  • Tables
  • Widgets: maps, calendars, social media, chats
  • PDFs and other documents

Details about how to check these are in the next steps.

Next step: Check keyboard access and visual focus on web pages
Return to the index: Perform an accessibility review on your website

Get help

For questions or consultations, email the User Experience Office's accessibility team.

This is document atev in the Knowledge Base.
Last modified on 2023-10-04 10:58:32.