Accessibility Criteria

Our Custom Smart SVG™ Designs Meet The World Wide Web Consortium (W3C) International Web Standards

We ensure our services for custom Smart SVG™ designs will adhere to Web Content Accessibility Guidelines (WCAG 2.2 Level AA). This keeps your organization legally protected, and offers an inclusive and equivalent experience for all.

Web Content Accessibility Guidelines (WCAG)

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.

Americans with Disabilities Act (ADA)

The ADA is a civil rights law that prohibits the discrimination of people with disabilities in all areas of life, including when using electronic and information technology. These standards require companies to offer and maintain websites that people with disabilities can use and access. Web Accessibility Laws & Policies.

Section 508

The Rehabilitation Act mandates that federal agencies develop, acquire, maintain, and use information and communications technology (ICT) that people with disabilities can access. A federal law that requires federal agencies to maintain and use information and communications technology that people with disabilities can use.

While Section 508 focuses on federal agencies and departments, ADA encompasses a broad audience. Organizations in the private and public sectors must adhere to ADA standards. Finally, WCAG serves as a guide for anyone building an accessible website for ADA or 508.

WCAG Standards Our Smart SVG™ Meet:

Informative Images

• Images must have alternative text. WCAG 1.1.1

• Alternative text must be meaningful. WCAG 1.1.1

• The length of the alternative text for informative images should be concise (no more than about 125 characters).

• Avoid restating that the element is an image.
  
  Accessible Rich Internet Applications (WAI-ARIA)

  ARIA provides semantics so authors can convey user interface behaviors and structural information to assistive technologies (such as screen readers). The ARIA specification provides an ontology of roles, states, and properties that define accessible user interface elements.

  The ARIA suite includes API mapping specifications that provide user agent implementation guidance. It also include modules for Graphics and Digital Publishing.

  Note: Our Smart SVG™ (Scalable Vector Graphics) files will include aria-labelledby attributes along with alternative text.

Unessential images

• Images that do not convey content, are decorative, or are redundant should not be visible to screen readers. WCAG 1.1.1

Complex Images

• Complex images must be briefly described using alt text with a more complete extended description available. WCAG 1.1.1

Images that are Links, Buttons, or Controls

• Image links should describe the link destination. WCAG 1.1.1

• Button/control links should describe the purpose and/or resulting action of the button or control. WCAG 1.1.1

Color and Contrast

Use of Color

• Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. WCAG 1.4.1

• Information conveyed by color alone needs a text alternative that is accessible by assistive technology. WCAG 1.4.1

• Color needs additional visible alternatives that do not rely on color for meaning when used to convey information. WCAG 1.4.1

Color Contrast, Fonts and Font Weights

• Small text (under 18 point regular font or 14 point bold font) must have a contrast ratio of at least 4.5 to 1 with the background. WCAG 1.4.3

• Large text (at or over 18 point or 14 point bold) must have a contrast ratio of at least 3 to 1 with the background. WCAG 1.4.3

• The contrast of UI control boundaries compared to adjacent areas must be at least 3 to 1 to distinguish the UI control from the adjacent areas. WCAG 1.4.11

• The contrast of all visual focus indicators against the background must be at least 3 to 1. WCAG 1.4.11

• We additionally meet the future WCAG 3.0 Accessible Perceptual Contrast Algorithm (APCA) color contrast requirements. This advanced tool considers color pairing, font choices, sizes and weights.

Visual Presentation and Dark Mode:

• Foreground background colors can be selected by the User WCAG 1.4.8. We highly recommend installing a dark theme on your website before installing our accessible Smart SVG™ files.

• Web content should retain all essential visual information in Contrast Themes or Dark Mode.

• The design should not override Contrast Themes or Dark Mode.

• Our Smart SVG™ files can adapt and change colors for various media queries including dark mode.

Text Styles

Text Resize and Reflow

• The page should be functional when only the text is magnified to 200% of its initial size. WCAG 1.4.4

• The page must allow users to zoom in on mobile devices. WCAG 1.4.4

• Our Smart Scalable Vector Graphics (SVG) will magnify beautifully no matter how much they are zoomed into.

Text in Images

• Do not include informative text in a rasterized image. WCAG 1.4.5

Character and Paragraph Styles

• Users need to be able to override certain author specified text spacing to improve their reading experience without loss of content or functionality. WCAG 1.4.12

• Text is not justified (aligned to both the left and the right margins).

• Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.

• Fonts should be easily readable by sighted users.

CSS-Generated Content

• Avoid using CSS-generated content to display informative text.

• Provide a text alternative for informative CSS-generated content, and set the CSS-generated text to aria-hidden=”true”

• Set decorative or redundant CSS-generated content to aria-hidden=”true”

Emphasis and Highlighting

• Critical emphasis in the text should be conveyed in a text-based format, not visual styling alone.

• Supplement critical highlighted text with a text-based method to convey the meaning of the highlighting.

• Highlighted text should be marked with the <mark> element.

Graphic Design and UI Components

Visual Meaning

• Content must not rely solely on visual characteristics such as shape, size, visual location, or orientation to convey meaning. WCAG 1.3.3

Visual Layout

• Visually separate blocks of content so they are distinct from each other via margins, padding, or other methods of achieving visual “white space.”

• Labels should be visually adjacent to their controls.

• Have only one main visual focal point for each layout, and draw attention to the intended visual focus.

Responsive and Adaptive Design

Device Orientation

• Do not restrict view and operation of the content to a single display orientation. WCAG 1.3.4

Magnification

• Our Smart SVG files will magnify indefinitely, creating a better user experience for low vision users.

Screen Sizes

• Our Smart SVG™ files can adjust and resize for larger and smaller screen sizes.

Animation

• Our custom services for Smart SVG™ files can be animated and could use “prefers-reduced-motion” CSS Media Query and meets WCAG 2.3.3

Design

Non-text Contrast (Minimum)

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s)

Text Contrast (Minimum)

• APCA WCAG 3 With a contrast calculator that uses the APCA contrast method, calculate the predicted contrast between foreground text and background colors.

• Important: do not swap the background or text colors in the tool entry fields. WCAG 2.1

• Regular Text- The visual presentation of text and images of text has a contrast ratio of at least 4.5:1

• Large Text- Large-scale text and images of large-scale text have a contrast ratio of at least 3:1

• Equivalent recommends no less than 10:1 for text contrast ratios.

Color Usage

• Is information conveyed by means other than just color alone? For example, using color and text both to indicate that a form field has an error, or using colors with text to label chart categories.

• Is link text distinguishable from non-link text by more than just color?

Colorblind Friendly

Colors have been checked using a colorblind perception simulator, and the colors maintain a visible difference.

Legible Fonts

Fonts are legible and provide increased readability to those with dyslexia and other cognitive disabilities.

Responsive Layouts

Create alternate design layouts for multiple screen sizes.

Plain Language

Use of Plain Language. Unusual Words: A mechanism is available for identifying specific definitions of words or phrases used in an unusual or restricted way, including idioms and jargon.

Reading Levels

Checking reading levels to be the correct for the audience.

Aural descriptions

Written contextual description and approved by the company unless image is purely decorative.