• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Digital A11Y

Digital A11Y

Your Accessibility Partner

  • About
  • Articles
  • WAI-ARIA
  • WCAG
  • Resources
    • Cheat Sheets
    • A11Y Blogs
    • A11Y Toolkit
  • Contact
You are here: Home / Web Accessibility / WCAG / Understanding SC 1.1.1 Non-text Content

Understanding SC 1.1.1 Non-text Content

Last Modified: December 26, 2019 by sathish kumar 3 Comments

1.1.1 Non-text Content: 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. (Level A)

  • Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Guideline 4.1 for additional requirements for controls and content that accepts user input.)
  • Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
  • 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 technology.

This success criterion requires that any
non-text content that includes active images (imagelinks), area maps,
informative images, complex charts and graphs, 
CSS images, decorative images, input image controls, CAPTCHA and audio
and video contents must have text alternatives. Out of these non-text elements,
prerecorded audio and video, live audio and video are specifically handled in
SC guideline 1.2.

What types of images are we talking about here?

We are talking about:

  • Image links: images buried inside anchors and redirect you to destinations
  • Area maps: Areas that trigger different actions/different destinations
  • Informative images: images that are meant to inform users
  • Purely decorative: images that are here to decorate your pages and appeal to users
  • CSS images: Self explains Input type=”images”: That submits a form
  • CAPTCHAs: Confirms whether we are human
  • Audio and video file images: Images that play audio or video contents
  • Complex charts and graphs: explains themselves

How are we to fix them?

WCAG’s sufficient techniques are not exhaustive as new ways would emerge. Yet, we suggest you have a look at them.

But here are a few of the for you:

  • Alt attribute: Works on img tags; let the values be meaningful and impregnated with equivalent purpose of the image!
  • Role=”img” and aria-label: works on anchors, CSS images
  • Title attribute: Works on imagelinks
  • Role=”presentation” or alt=””: Works on decorative images
  • Value or name attribute: Works on input type=”image”.
  • Plane text on the page: Every media content would accept and would users far and wide.

Points to Ponder

  • Always provide alternative options like audio or OTP (one time password) for CAPTCHA.
  • Always provide textual summary or description for complex charts and graphs apart form shot alt text.
  • Always use title attribute for additional info while using alt attribute in image links.

References

Understanding Success Criterion 1.1.1

See Also

Guideline 1.4.5 – Images of Text

Share A11Y Love

  • Twitter
  • LinkedIn
  • Facebook
  • Reddit

More Accessibility Articles

Filed Under: WCAG

Reader Interactions

Comments

  1. Praveen says

    July 29, 2019 at 1:09 pm

    Excellent Information Sathish.

    Reply

Trackbacks

  1. Understanding SC 1.2.2 Captions (Prerecorded) • Digital A11Y says:
    December 26, 2019 at 6:33 am

    […] Guideline 1.1.1 – Non-text Content […]

    Reply
  2. Understanding SC 1.2.3 Audio Description or Media Alternative (Prerecorded) • Digital A11Y says:
    December 26, 2019 at 10:48 am

    […] Guideline 1.1.1 – Non-text Content […]

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Get Digital A11Y in Your Inbox

Recent A11Y Articles

  • Understanding SC 4.1.3 Status messages
  • Understanding SC 2.5.4 Motion Actuation
  • Understanding SC 2.5.3 Label in Name
  • Knowbility looking for mentors in its Accessible Internet Rally
  • Understanding SC 2.5.2 Pointer Cancellation

Recent Comments

  • Al on Understanding SC 4.1.2 Name, Role, Value
  • Randy on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Understanding SC 1.4.12 Text Spacing
  • Raghavendra Satish Peri on Understanding SC 4.1.2 Name, Role, Value

A11Y Categories

  • Design
  • Events
  • HTML
  • IOS
  • Mobile Accessibility
  • News
  • Tools
  • Uncategorized
  • WAI-ARIA
  • WCAG
  • Web Accessibility

  • Privacy Policy
  • Sitemap
© 2021 Digital A11Y