DesignOps 2020-The Importance of Accessibility Design Systems (Session Notes)

Speaker: Sheri Byrne-Haber, Staff Accessibility Architect, VMWare

— The fervent wish of this talk is that everyone walk away thinking differently about customers with disabilities

— Sheri assumes people don’t have familiarity with accessibility and design systems
— She will talk about design systems and how they fit into DesignOps (see the rest of  the slide)

— How many people work with product manager who say they want to throw out 20% of audience?
  • No one would
— The problem is  that when software isn’t accessible, you are effectively throwing out broad swathe of potential customers
— Moreover, the definition is disability is far broader than you think
— Most people think disabilities are permanent. but disability can be any number of things like a rotator cuff injury. Examples of disability include
  • Situational Disability: A glare blinding your screen
  • Temporary Disability: A shoulder injury
— See the Microsoft Design Toolkit on accessibility for more details
— Big chunk of audience to be dealt with from design phase
— Apple’s Sadie video shows 13 different pieces of technology being used to help someone with a disability navigate the world
  • Ranging from switch to control computer
  • To using iPhone watch to track workouts
  • Connection between iPhone and hearing aids. Before that, you can’t communicate over phone

— What is a design system?

  • A design system consists of all standards for using a set of repeatable components, using documentation videos and text

 

— Typical components that go into design system include UX guidelines and best practices, design resources, components/code, and icon library fonts
— Accessibility can typically be incorporated as well but is dependent on person following accessibility guidelines
  • Clarity design resources included clean and accessible fonts
— Make sure guidelines (WCAG 2.1. Level AA) can the provide rules you need for accessibility
— Icons are not there to be pretty, but to work

 

— Goal of system is to be efficient. Code once and do it a bunch of times
— Be consistent, decisions made on
— Consistency will lead to better UX
  • If you load accessible website, you can navigate easily to where you want to go on the site
— WCAG isn’t prescriptive. You need to have certain information and decide things on your own.
  • Put together standards to explain what to do with components when implementing them in accessible manner

 

— Design systems really fit into the DesignOps framework
— Design systems  helps DesignOPs as it is a built-in framework to help things get done at scale
— Accessibility a key part of DesignOps that company should take very easily, and accessibility should be trained in champions program

— Only one standard for accessibility used in world, and it is the WCAG standard
  • The most recent WCAG was built and launched 16 years ago, with April 2021 as the next date for having a new standard being introduced
  • A link to WCAG 2.1 Level AA is included in the slide-deck
— Sheri then reviews eight aspects of accessibility to explain why accessibility important

— Sheri has a friend who is deaf and who is Welsh
  • This means the friend has a deaf accent and Welsh accent
— Auto-captioning cannot handle multiple accents
— Auto-caption is bad at accents. If you don’t speak American English as native language, the captioning hard to grasp
  • In addition, technical terms not in a dictionary I.e. VMware products, are also poorly captured by the captioning system
— Need to have live captioning for true accessibility

— Color contrast ratio is about 1. 5. Whatever information in yellow in the slide is hard to see
— Cut off for color contrast is 4.5 and 20% of color combinations disallowed
  • Color on color not allowed (i.e. pink on red background)
  • Avoid pastels and mixed use of red/green

— Men are mostly color-blind, and 4.5% of population is color-blind
— 80% male, that means 6.5% people can’t tell difference between read and green
— For red/green add in other information to distinguish the colors from each other

 

— Font choices or text imagery
— After twenty minute of reading wrong font-size a person can’t focus on the screen.
  • Use dynamic fonts like San Serif
  • Avoid use of Italics

— Need to manage “rivers of text” for people with dyslexia, and need to allow people to easily start reading text on the next line down
— Six things to avoid people to impact with dyslexia
  • Blurriness
  • No Italics
  • Minimizing rivers of text

— Alt-text tells screen-readers what image should look-like.
  • Meant to provide blind person with something
— Analyze every graphic used, and decide what alt-text to use and how to use it
— Any image description can be used, but context determines which description is best
— If pretty, set text to NULL, to prevent screen-reader from getting stuck on irrelevant information
  • If  it’s not important to know set alt-text null and have screen reader pretend it’s not there
— Shortest amount text necessary to convert appropriate number of information, given the context
  • Head of lettuce to imply menu choice is healthy, or that menu choice is vegetarian

— If there is a bug in accessibility, it will show up in every place a component used
— Design system does not know how components would be used
  • A developer must configure code for component, compose code, and customize label to be accessible for screen reader users
  • A design system can’t do this automatically

 

— After saying “yes we want design system”, do you adopt a system or build your own?
  • The threshold question for this whether you will act as a contributor to the system (i.e. building the system), or primarily a user (i.e. adoption of an existing system)

— Open source works because it is legally supported and can be shared with third-parties
— For example, IBM is contributing and Dell contributing to open-source systems
— Open source, and sharing work for managing it, and leveraging skills that exist
— Greater reach and awareness
  • Can make changes and release as new design system

— Thirteen different open-source design systems that can be used as a reference.
  • Name of Company
  • Name of System
  • Link to System
— General design systems that can be implemented in an accessible manner
— Topic-specific systems are to be avoided, unless actually developing a specific product
— Most of time, people advertise their design system as successful, even if it isn’t
— There is paper work, which discloses nature of accessibility, and how they tested out the system, and where they are not accessible
— Couple places where few people are woking on to track version on bug that is being fixed in
— If you are on the nerds side, look for “ARIA” an acronym for HTML tool that has something look the way you want it to look, but have the link behave differently to disabled individuals
  • I.e. linking Oreos to an image
  • ARIA provides a way to make things accessible without changing end product
  • No need to dumb-down user interface to satisfy accessibility. Only an issue with colors, for other 49 guidelines, things can be implemented without guidelines
— Government design system from country that takes accessibility seriously, are a good place to start. Countries include:
(US, Canada, EU, UK, Australia, China, Israel, UAE)
— One weeks worth of brand new litigation in US regarding accessibility lawsuits represented $33 billion dollars in annual revenue.

 

— The Clarity Design system is framework agnostic.
— Sheri provides a list of websites to use , places to see components, and places to download packages

 

— Accessibility team worked to make the VMWare Clarity Team, which managed Design System, understood the accessibility guidelines
— The accessibility team works with WCAG guidelines to  help accessibility guardrails
— The team provides tactical recommendations on what to do and guardrails for design system, and tested the design system
— The team is close to VMWare and having open accessibility hackathon for next year

 

— TL;DR: If you care about sales, not getting sued, and being a good corporate citizen, user research with people for disabilities must be considered
  • Important to do it in order for you and your DesignOps practice to thrive

 

Questions

  1. Are there any checklists for design system accessibility?
— If you will use checklist, use checklist from WCAG 2.1 AA available
— w3.org has checklist for guidelines
— Goal is to train people to point where they don’t rely on checklists anymore
  • Require everything to be keyboard operable, but how do you deal with drag-and-drop feature?
  • Feature could be missed if blindly following checklist
— Get away from checklists if you can
  1. Twenty years in future, what is the biggest barrier for accessibility?
— See two things in the future:
  1. Unbiased AI for  people with disabilities. Need to make sure developers working on AI have exposure to people with disabilities and data involves people with disabilities
  • A bad example of this not being accounted for is person moving backward in wheel-chair being interpreted by an autonomous vehicle as a shopping cart which could be hit by the vehicle
  1. Personalization will be next step in accessibility
  • Example, that every time a deaf person went on Amazon’s website, Amazon didn’t recognize her as deaf
  • Products will be like a curb-cut— a feature improving the lives of people with and without disabilities
  1. Advice about screen-reader support for design system components?
— Pay particular attention to data-grids, as VMWare display complex products in data grids
— Salesforce system would be pre-disposed to do what Salesforce needs
— Look for design system that reflects thought and complexity of what you are trying to do
— If it doesn’t do it well enough, contribute to the design system
  • Open-source shouldn’t be one way street
  1. What are the ways individuals can drive company to proactive accessibility?
— Number one item in success for efforts, is whether company has disability employee resources group
— Employees can effectively self-identify. Will provide broader variety of assistive technology and approaches to assisting with data
— Part of a D&I initiative, include disability within the group
  • Bulk of companies don’t support disability as part of D&I and making sure there is a resource group
— Lot of places to put accessibility
  • Best place to put it is in design
  • Accessible products start with accessible design

 

  1. Always shocked how companies don’t take accessibility seriously. How has increase in litigation boosted companies attention?
— Two parts 1) Get accessible and 2) Stay accessible
— Companies that suffered from litigation had issue, because content was not accessible
— Information on safety was inaccessible
Accessibility has to be baked into everything from the design review to the minimum viable product.
  • If it’s not integrated, it won’t be considered
— The United States is on track for 4,000 lawsuits regarding accessibility issues this year, and people are still not getting message despite litigation and trials
  • The companies are backsliding as soon as checks are cut.
  • Nothing says you can’t be sued by multiple people or in a class-action law suit, and disability suits are a cash-cow for law firms
  1. Total litigation dollar amount?
— Across 82 organization, it was $30 billion in annual revenue that was sued in one week
— Sheri is also seeing that people with disabilities who have jobs are suing employers for discrimination, since tools are inaccessible
— First case involving litigation when to trial and finished last February with one million dollar
  1. How do we keep track of everything for accessibility compliance?
— Most important thing to do is to incorporate accessibility guidelines within your design and to give developers good instructions on what needs to be done
  • Goal to accommodate for accessibility
— Pick up other two thirds and review updates and updates to content to make sure content management updates doesn’t break accessibility