Accessibility in a design system | firez
Web Services

Accessibility in a design system

This post continues our series on our new design system as part of the re-launch of the University of Dundee website.

What does accessibility mean?

Accessibility for digital products such as websites, emails and apps is measured in four different ways:

  • Perceptible: Making text and media perceivable for everyone
  • Operable: Helps users navigate content easily
  • Understandable: Make multimedia texts understandable
  • Robust: Maximize compatibility

Accessibility has always been something we have considered as part of our work in the Web Services team. As you have no doubt heard, we are relaunching the University website. This is a fresh start and an ideal opportunity to see how we can ensure the new website is fully accessible.

Screenshot showing the Stark plug-in for the Sketch design tool in action

How is accessibility measured?

Accessibility for websites is measured by WCAG compliance levels (A, AA and AAA – the highest grade). Our goal is AA compliance as a minimum. However, our goal is not to simply pass a WCAG test, but rather to provide all of our users with the best possible experience regardless of how they access our website.

Some examples of what an accessible website looks like:

  • Provide text alternatives and captions for non-text media (videos and images)
  • Allow users to traverse the page with keyboard only
  • Give users control over which features to upload or edit
  • Draw page text with sufficient contrast

Why is accessibility important?

Making websites accessible means including the 10 million people in the UK who live with a disability:

  • the 8.1 million people with significant visual impairments, including 2.0 million blind people
  • hearing impaired people
  • people with learning disabilities or cognitive limitations, including ADD, Asperger’s, dyslexia etc.
  • people who have difficulty lifting their hand and have limited movement
  • people who have difficulty speaking

Screenshot showing the Funkify Disability Simulator Chrome extension in action

Screenshot showing the Funkify Disability Simulator Chrome extension in action

Meaningful statistics

Given that the UK population is 65 million at the time of writing, this is more than 1 in 6 people in the UK living with a disability. Among them will be prospective students browsing our website, as well as staff, alumni and the general public.

Statistics for 2013 give the number of students in the UK with a self-reported disability equal to 72,852 of the total student population (743,380). That’s almost 1 in 10 students.

10% of University of Dundee students disclosed a disability. This number varies every year but we can safely say we’re talking at least 1,000 current students. The actual number is likely to be higher when unreported disabilities are taken into account. An estimated figure of more than 2,000 would not be unrealistic.

As well as this, we also have a legal responsibility to ensure that people are not excluded (Equality Act 2010).

What are we doing for accessibility?

Our new accessibility guidelines are the latest result of our design system. These guidelines measure our designs against the four principles mentioned above (Perceptible, Usable, Understandable, Robust). We will use the Web Content Accessibility Guidelines (WCAG) as our standardized guide to make our website more inclusive.

Screenshot showing example of accessibility work done on colors

Screenshot showing example of accessibility work done on colors

An accessible design system

Our design system will document every component that we will use in our future designs (form fields, buttons, videos, menus, and so on). This documentation will include research on how it can be more accessible: How do these components perform in tools used by people with disabilities? People with visual impairments could use screen readers. People with motor disabilities could use a keyboard (no mouse) or voice activation software. It is our job to anticipate this, by testing our designs as often as possible using these tools.

Websites often make the mistake of overcomplicating important features like navigation, such as taking control of mouse movements and scrolling, without considering how this affects the experience for all of their users. It’s important to remember that our audience is made up of a diverse range of people with different abilities, nationalities, ages and goals.

Our friendly challenger

We are working with Rhouri McAlpine from Disability Services who is our ‘friendly challenger’ who can test and validate the work we are doing. Rhouri and the Disability services provides a range of services for disabled students and staff. They will be a great asset in ensuring our design system is a solid and accessible foundation for future digital design work.

Accessibility is usability

A Venn diagram showing the overlap of accessibility and usability

A Venn diagram showing the overlap of accessibility and usability

Accessibility has ‘ease of use’ at its heart and it overlays the work we do to ensure that our website is usable. By making our website work better for people with accessible needs, we will automatically make it better for everyone.

This article is part of our ongoing Design Systems series. Learn more about our digital design system