Accessibility in a design system

This post continues our series about our new design system as part of the University of Dundee’s website relaunch.

What does accessibility mean?

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

  • Perceivable: Making text and media perceivable for everyone
  • Operable: Helping users navigate content easily
  • Understandable: Making and media text understandable
  • Robust: Maximising compatibility

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


Screenshot showing the Stark plugin for the Sketch design tool in action

Screenshot showing the Stark plugin for the Sketch design tool in action


How is accessibility measured?

Accessibility for websites is measured by WCAG conformance levels (A, AA and AAA – the highest grade). We aim for AA compliance as a minimum. However, our goal isn’t to simply pass a WCAG test but rather to give all of our users the best experience possible regardless of how they are accessing 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 only the keyboard
  • Give users control over which features to load or change
  • Design page text with sufficient contrast


Why is accessibility important?

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

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


Screenshot showing the Funkify disability simulator extension for Chrome in action

Screenshot showing the Funkify disability simulator extension for Chrome in action


Significant statistics

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

Stats from 2013 give the number of students in the UK with a declared disability as 72,852 of the total student population (743,380). That’s nearly 1 in 10 students.

10% of students at the University of Dundee have disclosed a disability. This number varies each year but we can safely say we’re talking about at least 1,000 current students. The actual number is likely to be higher when taking into account undisclosed disabilities. An estimated figure of over 2,000 would not be unrealistic.

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


What are we doing about accessibility?

Our new accessibility guidelines are the latest output from our design system. These guidelines measure our designs against the four principles mentioned above (Perceivable, Operable, Understandable, Robust). We will use the Web Content Accessibility Guidelines (WCAG) as our standardised guide for making our website more inclusive.


Screenshot showing the as example of accessibility work performed on colours

Screenshot showing the as example of accessibility work performed on colours


An accessible design system

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

Websites often make the mistake of over-complicating important functionality like navigation – taking control of mouse movements and scrolling, for example – without considering how that affects the experience for all of their users. It’s important to remember that our audience is made up of a huge 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 team provide a range of services for disabled students and staff. They will be a great resource for ensuring our design system is a solid, accessible foundation for future digital design work.


Accessibility is usability


A Venn diagram showing overlap of accessibility and usability

A Venn diagram showing overlap of accessibility and usability


Accessibility has ‘ease of use’ at its core and overlaps the work we do to ensure 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 system series. Read more about our digital design system

Written by:

Steve joined the team as Web Design Manager in May 2016, bringing 13 years of commercial experience to the university after working with clients across a wide range of industries covering science, tech, retail, media & entertainment, healthcare and education. Steve has worked with clients including Gartner, King's College London, Kwikfit, Royal Society of Edinburgh, Girl Guides Scotland, St. Andrews First Aid, Clash Music, Hutton Institute, amongst others.

Steve is responsible for managing the design team and works with web designer Ryan McLauchlan to deliver enjoyable, unique and effective digital experiences for students, prospective students, staff, and anyone else who interacts with our website, landing pages, emails, presentations and other digital marketing assets.

Outside of the workplace, Steve enjoys spending time with his young family and many pets. He climbs walls for fun.

  • Show Comments and Reply Form

    Leave a Reply

    XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>