Common Accessibility Issues

Keyboard Access

Setting up a page so that a user can tab through all interactive elements on the page

  • This includes widgets
  • No information conveyed only through mouseover (title attribute): If a user cannot hover on an element, they will miss the information shown in the mouseover
  • All controls must be able to be accessed through the keyboard, typically through hitting 'tab'
  • Best practice: Minimize the number of times a user has to hit tab by grouping related objects under one a tag
    • Example: an icon and its text should be grouped together
  • Example: A user must be able to tab to an image carousel's controls

Accessible Media and Multimedia

  • 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.

 

  • Potential solutions to create accessible media
    • Use only videos with captions available
      • To learn how to caption a video yourself, visit the Multimedia page
    • Describe images accurately, including any important text that appears in the image in your description
      • Think about how you would describe an image and use this as the basis for your alternate text
      • Consider using the Caption feature in Aurora or having a descriptive paragraph for long descriptions
    • Describe all audio-only media, either in a transcript or in an accompanying paragraph
      • Example: If the audio is just a sound, like a lion roaring, the description would be "lion roaring"

Color Contrast

  • Provides users with low vision or color blindness with perceivable content
    • Like color dependence, avoids providing information in a way that is not able to be apprehended by all users
    • 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
    • Example: UConn's logo (white on UConn blue) has a foreground to background color contrast ratio of 14.46:1

UConn banner demonstrating high color contrast

    • For comparison, pure white (#FFF) on black (#000) has a perfect contrast ratio of 21.0:1
  • Check all content for color contrast before purchasin
    • Check the foreground and background colors, especially text, for contrast levels
    • Download the Color Contrast Analyser to check color contrast
  • Avoid elements that rely on color to convey information
    • Example: For images or interactive content, this means avoiding 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".

Operating System Accessibility Features

  • Some users use their operating system's (OS) accessibility features, such as screen magnification or high contrast.
  • Accessible products do not interrupt use of these features, but rather work with these features to create a more accessible experience for the user.
  • An accessible product will adopt high contrast display settings or offer alternative color options, enlarge text appropriately, and maintain functionality of other features like Sticky Keys and Sound Sentry.
  • Learn more about Windows accessibility features.
  • Learn more about Mac accessibility features.

Last modified April 25, 2019