The web has a long way to go before it’s truly accessible. A 2021 study found that some 90% of all websites were inaccessible to people with visual, hearing, and cognitive disabilities or anyone reliant on assistive technology. The most recent report from WebAIM showed that over 96% of home pages had detectable WCAG 2 failures – a marginal improvement from nearly 98% in 2019.
This slow pace of progress despite growing legal pressures to be accessible online speaks to the fact that accessibility is challenging. Ensuring accessibility requires that it be factored into every calculation of a project, and with design teams typically faced with time and budgetary constraints, it often gets overlooked. This ends up costing clients more time and money in the long run, as sites then require modification to pass accessibility requirements.
Why accessibility matters
Aside from simply being the right thing to do, why does accessibility matter? For one, it’s the law. Title II of the Americans with Disabilities Act (ADA) prohibits discrimination against people with disabilities in all services, programs, and activities of public institutions, while Title III of the ADA applies the same rules to businesses open to the public. While not originally intended to apply to the web, courts are increasingly taking the view that the act applies to web accessibility.
For another, being accessible is good for business. Roughly one in four American adults has a disability that affects their daily life. Of these, around 80% use some kind of assistive technology or specialized equipment to help them move, communicate, learn, or engage in other activities. People with disabilities use public services, spend money, and use the Internet to do both, and to not be accessible online is to cut yourself off from a very significant economic bloc.
Thirdly, accessibility positively impacts everyone regardless of their physical or cognitive abilities. For example, good color contrast can not only positively impact a person with visual deficits but also a normal-sighted person in a very bright room. Similarly, closed captioning can benefit people who have normal hearing but happen to be in a noisy environment. Moreover, good accessibility translates into good SEO, which leads to better search engine rankings.
What are design systems?
Design systems are collections of reusable components with defined use standards. They include pattern libraries, colors, fonts, and other elements with standardized design guidelines, which help organizations achieve consistent visual design at scale.
Design systems are typically leveraged across teams and embedded into workflows to enable consistent user experiences across multiple related projects. They serve as central reference points, enabling designers, developers, copywriters, project managers, and others to collaborate on designing and building digital products.
Why use design systems? For one, they enable faster website builds by way of reusable components. They also generally lead to better products by facilitating a cohesive user experience and a consistent design language, while also making for easier maintenance and greater scalability. From a business perspective, design systems save money, while from a user experience side they provide a consistent experience.
Furthermore, design systems are a galvanizing force for project teams, as they encourage close collaboration between developers, UX designers, project managers, and others.
Accessible design systems in action
Not only do design systems help bring teams together, but they also allow for organizations to embed certain values – such as accessibility – into the DNA of their work.
Design systems are meant to make projects easier and more efficient. By embedding accessibility principles into design components, whether that be color contrasting, accessible font design, or alt text, simplifies the process of making websites accessible. This makes building accessible websites straightforward, regardless of individual team members’ level of expertise in accessibility.
An simple example of the value of accessibility-informed design systems is text heading levels. Consistent use of heading sizes (i.e., <h1>, <h2>, <h3>) is very important from an accessibility standpoint because they indicate content hierarchy for screen reading devices. Building design systems with proper headings embedded in them is key in ensuring that your web text is accessible to readers who use assistive technology.
Accessible design systems are particularly important for the construction of very large websites with a lot of repeatedly used components, or collections of websites with identical components. A large site or group of sites might use a single icon-only button in a multitude of places. This means it’s important to have this component as part of a design system with the appropriate screen reader-friendly alternative text baked into it.
Of course, having accessible design systems doesn’t mean you no longer have to test for accessibility. Ideally, accessibility testing should take place at multiple stages of a project in both automated and human form. Accessibility testing tools like JAWS, SortSite, and Google Lighthouse, while very valuable, are far from perfect and are no substitute for a real human being – ideally one with lived experience using assistive technology and the like.
Accessibility: who should lead?
Accessibility is an area where everyone on a team has a role to play. While it’s not reasonable to expect everyone on a team to be an expert in this domain, everybody should have accessibility as a line item in their work and should have some baseline knowledge. Awareness of accessibility should include the business development side, from whom there needs to be buy-in for it to be effectively prioritized.
As not everyone can be expected to be an accessibility expert, it’s important to have internal advocates within teams to ensure it doesn’t fall off the radar. Project retrospectives are opportune times for such advocates to raise the subject and check that accessibility standards are being followed. Internal advocates also have a role to play in ensuring that design systems are built and maintained in a way that prioritizes accessibility.
Conclusion
Design systems exist to make life easier for everyone involved in a project, from the developers and designers to the client to the end user. Likewise, accessible design benefits everyone that comes into contact with it, from people with disabilities to those who simply care about good user-friendly design. The thoughtful merging of the two is the key to making the web a more inclusive and welcoming place – one website at a time.
