CenturyLink
Lumen
Lumen Enterprise Portal
  • Getting Started
    • Introduction
    • Installation
    • Development workflow
    • Browser support
    • What's new
  • Foundations
      • Overview
      • Using the keyboard
      • Page structure
      • Color and sensory
      • Images
      • Text
      • Links and forms
      • Tables
      • Other
      • Color
      • Design tokens
      • Grid
  • Components
    • Accordion
    • Activity
    • Alert
    • Avatar
    • Badge
    • Brand
    • Breadcrumb
    • Button
    • Button group
    • Cache Loader
    • Card
    • Carousel
    • Checkbox
    • Copy text
    • Data table
    • Date picker
    • Divider
    • Drawer
    • Dropdown
    • Expansion panel
    • File input
    • Flag icon
    • Footer
    • Header
    • Icon
    • Label
    • Link
    • Marketing icon
    • Mobile navigation
    • Modal
    • Number input
    • Pagination
    • Phone Input
    • Picker
    • Picker group
    • Popover
    • Price
    • Progress
    • Radio button
    • Range slider
    • Search input
    • Select
    • Sidenav
    • Skeleton
    • Spinner
    • Stat
    • Steps
    • Table
    • Tabs
    • Tags
    • Text input
    • Textarea
    • Time picker
    • Toggle switch
    • Toolbar
    • Tooltip
    • Transfer list
  • Utilities
    • Border
    • Color
    • Display
    • Flex
    • Image
    • Opacity
    • Overflow
    • Position
    • Shadow
    • Sizing
    • Spacing
    • Text
    • Vertical-align
    • Z-index
  • Templates
    • App Layout
    • Card
    • Error 404
    • Error 500
    • State

Images

Non-text content#

  1. WCAG 2.2 Guideline
  2. 1.1 Text alternatives
  3. 1.1.1 Non-text Content

Benefits: Blind disabilities.

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below:

  • Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose.
  • Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content.
  • Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content..
  • Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content..
  • CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities..
  • Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technologies..

Images can be one of the following:

  • Informative: Conveys a simple concept or information that can be expressed in a short phrase or sentence..
  • Functional: Initiatse interactive actions..
  • Decorative: Does not add information to the content of a page, and thus the image can have null/empty alt text. Assistive technologies can ignore the image. The image may have adjacent text that sufficiently describes the image..
How to pass
  • Do all (non-decorative) images have alt text?
  • Does the alt text provide meaningful information about the image?
  • If the image is a link, does the alt text describe the link purpose?
  • Are background images informational? Alt text is needed.
  • Are background images decorative? Alt text is not needed.
  • Can background images be hidden, but still have access to information and functionality?

Images of text#

  1. WCAG 2.2 Guideline
  2. 1.4 Distinguishable
  3. 1.4.5 Images of Text

Benefits: Low vision, visual tracking problems, cognitive disabilities.

Text is used to convey information rather than images of text. Achieve desired default visual presentation, to enable people who require a particular visual presentation of text to be able to adjust the text presentation as needed.

How to pass
  • Is an image of text used to convey information instead of text?
    • If text cannot be formatted to get the same effect as images of text.
    • If the effect won't be reliably presented on the commonly available user agents.
    • If using an Assistive Technologies to meet this criterion would interfere with meeting other criteria such as 1.4.4 Resize Text.
    • Example - where a particular presentation of text is essential to the information being conveyed, such as type samples, logotypes, branding, etc.