1 of 20

Accessible Smart SVGs �for the Digitally-Inclusive Age

Heather S. Neff, Founder & CEO Equivalent Design

Caroline Desrosiers, Founder & CEO Scribely

2 of 20

Heather S. Neff

Heather Neff is the Founder and CEO of Equivalent Design, the leading global graphics technology firm for advancing disability inclusion and digital sustainability.

Heather has over 20 years of experience as a graphic and user experience designer. She is currently publishing an accessible graphic design book, “Equity Through Graphics”. She has motor and vision disabilities, which makes her passionate about designing responsive and accessible graphical user experiences.

Heather S. Neff (she/her)

3 of 20

UX Imagery

Imagery can be a powerful tool, used to influence perception and user experience. Successful imagery communicates product appeal while increasing sales and customer satisfaction.

Unsuccessful imagery, or imagery that is not accessible, has a negative overall impact on user experience.

At Equivalent Design we are revolutionizing imagery �by designing accessible Smart SVG graphics. They are personalized and interactive, making brands more inclusive and memorable.��

4 of 20

An accessible design is one that every user can �adapt to their personal ability, experience, perception, understanding, and technological requirements.

— Association of Registered Graphic Designers

5 of 20

Smart SVG Demo

Smart SVGs are a single dynamic file which �are on average under 10 kb, and contain various layouts and responsive behaviors.

To see our technology in action watch �our two minute Technology Demo.

6 of 20

Smart SVGs

While regular SVG files are scalable, Smart SVGs are accessible, customizable, responsive, and sustainable graphics that change �in size, layout, and even color.

  • Responsive to Personalized Settings
  • Works with JAWS, NVDA, Voice Over, TalkBack, and Narrator
  • Optimized and Compressed for Speed
  • Works Across Major Browsers and Mobile Devices
  • No Barriers - Free for all users!

7 of 20

Screen Reader UX

Smart SVGs can be designed �for the ultimate user experience.

  • Include Semantic HTML
  • Keyboard Navigable
  • Searchable, Selectable, and SEO Friendly Text
  • Unlimited Characters
  • Include Metadata such as Keywords

8 of 20

Browser Media Queries

Smart SVGs respond to the Operating System settings, matching each user’s personalized preferences.

  • Contrast Themes | User-Selected Colors
  • Reduced Motion
  • Responsive to screen sizes (desktop, mobile)
  • Dark Mode | Requires a Dark Theme

9 of 20

Contrast Themes

Windows PC users can choose high or low-contrast color schemes, or any combination they prefer. Contrast themes force selected colors across the entire OS, including all browsers. It also removes all background images.

  • 4% of all Microsoft users (56 million users)
  • 50% of blind and low vision users
  • Meets WCAG Success Criteria 1.4.8
  • Without this technology, dark, transparent images �can disappear on dark backgrounds.

10 of 20

W3C�Contrast�Theme

Could be improved using �Smart SVG technology.

  • The logo is lost
  • Handshake icon is extremely low contrast

11 of 20

Equivalent

Design

Contrast

Theme

Looks excellent using �Smart SVG Technology.

  • Logo and vector illustrations reflect �user color preferences

12 of 20

Dark Mode

A Dark Theme allows your site to offer a Dark Mode experience. This enables a more accessible user experience �for those with and without disabilities.

Dark mode is currently trending. Google has reported that 30% of all Chrome users (on both desktop and smartphone) use dark mode.

13 of 20

Dark Mode Stats

Our vector graphics can save up to 95% of total file size compared to pixel based images.

average savings on energy consumption

more battery life on OLED mobile devices

of users �prefer dark mode

14 of 20

Reader Mode

A browser feature that strips away clutter like buttons, �ads, background images, and videos while also letting �users customize the layout and theme to fit their �reading preferences.

  • Strips all CSS - Adds browser specific styles
  • Native to Firefox, Safari, and Edge
  • Preferred by people with dyslexia and ADHD
  • Works well with screen readers
  • We engineer with reader mode in mind for best user experience

15 of 20

Accessible Animation

You can also create amazing Flash like interface components. However, continuously animated interfaces can cause health problems for many people.

Smart SVGs avoid these issues:

  • Listens to the user’s personalized accessibility settings
  • Ability to start and stop animations
  • Plays for less than 5 seconds (WCAG)
  • Designed to be harmless - loading animations

16 of 20

Smart SVG Favicon

Smart SVG Favicons will respond to dark mode, �light mode and contrast themes. This helps the �brand stay visible within the browser.

17 of 20

Tiny File Size

Image and are the single largest contributors to page load times. The more images you use and the larger those image files, the more data that needs to be transferred and the more energy is used.

  • Smart SVGs can save up to 95% of total file size of pixel-based images
  • Websites, native apps and ePub documents load instantly
  • Helps ensure your content is accessible to low bandwidth users
  • Using “live text” can dramatically reduce the file size

18 of 20

Benefits of Smart SVGs

By adopting Smart SVG Technology by Equivalent Design and offering a dark theme, companies and organization will:

  • Save money by reducing energy consumption at scale
  • Increase Visibility and Information
  • Increase Market Share
  • Improve SEO and Load time
  • Diversity, Equity, Inclusion, and Accessibility Promises
  • Enhanced and Personalized User Experiences
  • Create Brand Loyalty

19 of 20

When designers know how to work with imagery, �they are better able to manipulate the emotional reactions of an audience. Product designs can rise �or fall on the quality of their user experience images — which is why it’s vital to get it right.

— Rian Dutra

20 of 20

www.equivalent.design

Heather S. Neff, Founder

heather@equivalent.design

+1 (828) 575-7731�Confidential and Proprietary. © Equivalent Design. All Rights Reserved.