💡
💡
💡
💡
Lottie-Player
Search
⌃K

WCAG 2.0 AA

Explains accessibility guidelines for making your player more disabled-friendly.
​Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.
The WCAG documents explain how to make web content more accessible to people with disabilities. Web “content” generally refers to the information in a web page or web application, including:
  • natural information such as text, images, and sounds
  • code or markup that defines the structure, presentation, etc.
The following tables list the conformance of the default Lottie player instance with the WCGAG guidelines.
Section 1: Alternatives
Criteria
Explanation
Conformance Level
​
  • Alt text (1.1.1)
All images and non-text content needs alt text (there are exceptions)
not applicable
​
  • Video & Audio alternatives (1.2.1)
All video-only and audio-only content has a text transcript. Transcripts are clearly labeled and linked below the media.
not applicable
​
  • Closed captioning (1.2.2)
All video with sound contains accurate closed captioning.
not applicable
​
  • Audio description (1.2.3)
For any video with relevant information not conveyed by audio, add an audio description of information conveyed visually or include a text transcript.
not applicable
​
  • Live captions (1.2.4)
Any more formal, live presentations must have closed captions.
not applicable
​
  • Audio description (1.2.5)
​
  • An audio description is optional under 1.2.3 level A but not in 1.2.5 AA.
not applicable
Section 2: Presentation
Criteria
Explanation
Conformance Level
​
  • Website structure (1.3.1)
​
  • Use proper markup techniques to structure your website’s content (e.g. use correct heading tags and HTML for ordered and unordered lists)
not applicable
​
  • Meaningful order (1.3.2)
​
  • Present content in a meaningful order and sequence so that it reads properly.
conformed
​
  • Sensory characteristics (1.3.3)
​
  • When providing detailed instructions, make it so they are not reliant on a single sensory ability.
not applicable
​
  • Use of color (1.4.1)
​
  • Do not rely on color alone to convey information.
not applicable
​
  • Audio control (1.4.2)
​
  • Any audio must be able to be paused, stopped, or muted.
not applicable
​
  • Color contrast (1.4.3)
​
  • There must be a color contrast ratio of at least 4.5:1 between all text and background.
not applicable
​
  • Text resize (1.4.4)
​
  • Text must be able to be resized up to 200% without negatively affecting the ability to read content or use functions.
conformed
​
  • Images of text (1.4.5)
​
  • Do not use images of text unless necessary (e.g. logo).
not applicable
​
Section 3: User Control
Criteria
Explanation
Conformance Level
​
  • Keyboard only (2.1.1)
​
  • All content and functions on a website must be accessible by keyboard only (i.e. no mouse).
conformed
​
  • No keyboard trap (2.1.2)
​
  • Keyboard-only users must never get stuck on any part of the website; they must be able to navigate forwards and backwards.
conformed
​
  • Adjustable time (2.2.1)
​
  • If there any time limits on a website, users have the ability to turn it off, adjust it, extend it.
not applicable
​
  • Pause, stop, hide (2.2.2)
​
  • If there is content that blinks, scrolls, moves, users must have the ability to pause, stop, or hide it.
conformed
​
  • Three flashes or below (2.3.1)
​
  • Web pages must not contain anything that flashes more than three times a second.
conformed
​
  • Skip navigation link (2.4.1)
​
  • A “Skip to Content” or “Skip Navigation” link allows users to bypass the header / navigation menu and go straight to the main content.
not applicable
Section 4: Understandable
Criteria
Explanation
Conformance Level
​
  • Page titles (2.4.2)
​
  • Each page of a website needs to have a unique and descriptive page title.
not applicable
​
  • Focus order (2.4.3)
​
  • Users must be able to navigate through a website in a logical order that preserves meaning.
conformed
​
  • Link anchor text (2.4.4)
​
  • The purpose of each link should be clear, based on its anchor text (e.g. do not use “click here”)
not applicable
​
  • Multiple ways (2.4.5)
​
  • There are multiple ways to access different pages/information on a website (e.g. search bar, nav menus, sitemap, breadcrumbs, helpful links after content).
not applicable
​
  • Descriptive headings and labels (2.4.6)
​
  • Headings and programmatic labels must be clear and descriptive. They do not need to be lengthy.
not applicable
​
  • Website language (3.1.1)
​
  • Set the language for your website.
not applicable
​
  • Language changes (3.1.2)
​
  • Indicate any language changes for an entire page or within the content.
not applicable
Section 5: Predictability
Criteria
Explanation
Conformance Level
​
  • No focus change (3.2.1)
​
  • Nothing changes merely because an item receives focus; a user must actively choose to activate an item (e.g. hit space to activate) before a change takes place.
conformed
​
  • No input change (3.2.2)
​
  • Nothing changes just because information is entered into a field (e.g. form does not auto submit once all fields are filled out).
conformed
​
  • Consistent navigation (3.2.3)
​
  • Keep navigation layout consistent throughout all pages of the website (e.g. same links in the same order).
not applicable
​
  • Consistent identification (3.2.4)
​
  • Components that have the same function within a website are identified consistently (but not necessarily identically) (e.g. two check marks can indicate two different things as long as their function is different — one indicates “approved” on one page but “included” on another).
not applicable
​
  • Error identification (3.3.1)
​
  • Make any form errors easy to identify, understand, and correct.
not applicable
​
  • Form labels and instructions (3.3.2)
​
  • Programmatically label all form or input fields so that a user knows the expected input and its format.
not applicable
​
  • Error suggestions (3.3.3)
​
  • If an input error is automatically detected, then suggestions for correcting the error should be provided.
not applicable
​
  • Error prevention on important forms (3.3.4)
​
  • For pages that create legal commitments or financial transactions or any other important data submissions, one of the following is true: 1) submissions are reversible, 2) the user has an opportunity to correct errors, and 3) confirmation is available that allows an opportunity to review and correct before submission.
not applicable
​
  • Parsing (4.1.1)
​
  • Make sure HTML code is clean and free of errors, particularly missing bracket closes. Also, make sure all HTML elements are properly nested.
conformed
​
  • Name, role, value (4.1.2)
​
  • For all user interface components (including forms, links, components generated by scripts), the name, role, and value should all be able to be programmatically determined; make sure components are compatible with assistive technology.
conformed
​
Previous
Styling
Next - Components
Lottie-React
Last modified 1yr ago