Updated on 4 August 2020
This document contains guidance for people creating, procuring, or updating University of Dundee websites. It aims to ensure our websites are easy to read and easy to use by everyone
What does this document cover and who should read it?
This document contains guidance for people creating, procuring, or updating the University of Dundee websites. It aims to ensure our websites are easy to read and easy to use by everyone.
You might be writing content for a website. Designing a website. Developing new functionality for a website. Or even working with an external third party to commission a website. In all these cases, you need to produce an accessible website. This document, and the resources it contains, will help you do that.
There are many other kinds of digital content and these need to be accessible too:
- video content
- virtual reality content
- desktop applications
- mobile applications
- interactive quizzes
These are not covered here. In these cases, please contact Web Services using the Help4U service for guidance before starting your project.
What is accessibility?
Accessibility is about making our websites available to everyone. This includes people with disabilities. People with a wide range of needs and experiences. People using assistive technology may not be familiar to us.
Why is accessibility important?
Accessibility requirements are part of UK law. However, we aim to produce fully accessible websites regardless of legal requirements. This ensures that our websites have the largest possible audience.
We have a legal obligation to ensure that we do not discriminate against anyone who has a disability. Please see the Equality Act 2010 for more information on this legal obligation. We must avoid unintentionally or indirectly discriminating against someone with a disability. Lack of knowledge or awareness is not an acceptable excuse in the context of the law.
In 2018, the UK government brought additional regulations into force: The Public Sector Bodies (Websites and Mobile Applications) (No.2) Accessibility Regulations 2018. They stipulate that websites must meet WCAG 2.1 AA accessibility standards. The must also publish an accessibility statement. By 22 September 2019, all new public sector websites must comply with these regulations. All existing websites must comply by 22 September 2020.
The university has a legal obligation to make reasonable adjustments that meet the needs of disabled people. This is an anticipatory duty. We must have solutions in place ahead of time. Fixing accessibility issues as we encounter them is not the right approach.
There are over 10 million people in the UK who live with a disability:
- the 8.1 million people with significant vision impairments, including 2 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
The UK population stands at 65 million at the time of writing. That's around 1 in 6 people in the UK who live with a disability. Among them will be prospective students, parents, staff, potential staff, alumni, and so on. All visiting our website and consuming our online content.
How important is accessibility for the university?
The number of students in the UK with a declared disability in 2013 was 72,852. This was 9.8% of the total student population (743,380) that year. That's around 1 in 10 students in the UK.
Around 10% of students at the University of Dundee declare a disability each year. This number varies each year but an estimate of at least 1,400 current students would be accurate. The actual number will be higher as this estimate doesn't include undeclared disabilities. An estimated total figure of over 2,000 (out of around 14,000 students) would not be unrealistic.
There is also a strong business case for accessibility. The more accessible our content is, the larger our audience becomes. This helps us to:
- recruit new students and staff
- promote our research to a wider audience
- increase our ability to attract new researchers
- communicate with more alumni
- attract more financial supporters, and so on
Accessible content is more likely to be future-proof. If a screen reader can read a page without difficulty, then so can a voice control assistant like Alexa or Siri.
What kinds of disability do we need to consider?
Website accessibility goes beyond ensuring screenreaders can interpret your page. There are actually many categories of accessibility with many associated conditions. These conditions often need special hardware and software.
Colour vision deficiency leads to problems distinguishing shades of red, yellow, and green. In rare cases, some people have trouble with blues, greens and yellows.[Source: NHS]
Websites with poor colour blindness accessibility:
- have poor colour contrast
- have a heavy reliance on colour for communication
- Red-Green colour blindness: Protanomaly, Protanopia, Deuteranomaly, Deuteranopia
- Blue-yellow colour blindness: Tritanomaly, Tritanopia
- Complete colour blindness: Cone monochromacy, Rod monochromacy or achromatopsia
When thinking about visual accessibility, we must consider:
- non-sighted people
- people with low-vision
- people with obstructed vision
- people with issues caused by old age
Worldwide, 36 million people are blind. 217 million have moderate to severe vision impairment.[Source: World Health Organisation]
- Macular Degeneration
- Diabetic Retinopathy
- Refractive errors
This relates to issues of articulation and perception of communication. Hearing-impaired users need captions and fallbacks for media that includes sound.
Websites with poor communication accessibility:
- rely on video without providing captions
- Acoustic trauma
- Auditory processing disorder
Physical accessibility includes people with dexterity and precision issues. People with severe motor impairments rely on assistive technology. This technology includes specialised keyboards, eye trackers, and single buttons. These tools enable people to navigate around websites, replacing the keyboard and mouse.
Websites with poor physical accessibility:
- rely on small hit targets for links and buttons
- Cerebral palsy
- Muscular dystrophy
If a person has problems processing information they have a cognitive disability. This leads to issues with fluid intelligence and crystalised intelligence. Crystalised intelligence is how we use skills, knowledge, and experience. It relies on accessing information from long-term memory.
Also included in this category are issues with literacy and numeracy.
Websites with poor cognitive accessibility:
- have a complex layout
- rely on inconsistent, complicated, or hidden navigation
- Specific Learning Difficulty
- (inc. Dyslexia and Dyscalculia)
- Autism spectrum disorder
- Global developmental delay
Emotional or behavioural accessibility
Emotional or behavioural disabilities cover a wide range of often complex mental health conditions. We must consider how these conditions might manifest when interacting with a website. For example, filling in a long, complicated form can make someone feel anxious or frustrated. Using countdowns or text like, “Only 5 tickets left, hurry!” can induce feelings of fear, apprehension, and panic for people with an anxiety disorder.
Websites with poor emotional or behavioural accessibility:
- have poor loading times
- have inconsistent layouts
- need many complex interactions to achieve a goal
- rely on inconsistent, complicated, or hidden navigation
- have long forms to fill out
- Anxiety disorders
- Obsessive Compulsive Disorder (OCD)
- Panic disorder
This category relates to issues of representation, diversity, and inclusion. Also covered in this category are costs and affordability. Age, gender, social class, education, employment, ethnicity, and location are relevant here.
Websites with poor socio-economic accessibility:
- discriminate against, ignore, or cause offence to a certain socio-economic or geographic group
- provide limited payment options for a critical product or service
- Low income
- Minority group
The disabilities covered so far are usually permanent. Yet, there are often situations in which even fully-abled people are ‘temporarily disabled’. Examples include how a temporary arm injury may prevent you from being able to use a mouse.
There are also 'situational disabilities' that may affect us all. For example, screen glare on a sunny day. Or using a mobile on public transport (slow connection, limited space to move, bumpy ride).
How does a person with a disability access a website?
People with visual impairments may use screen readers. People with motor impairments might use a specialised keyboard or eye-tracking technology. Others may rely on voice activation software.
We have no reliable way of detecting these devices or software. But we must create websites that accommodate people relying on these tools. Using semantic markup, correct tab indexes, and accessible content has never been more important.
By making our website work better for these people, we will make it better for everyone.
We use the Web Content Accessibility Guidelines (WCAG) as our standardised guide for making our website more inclusive.
What does an accessible website mean?
Here are some examples of common steps taken to make a website accessible:
- Provide text alternatives and captions for non-text media (videos and images)
- Allow users to traverse the page in a logical order using only a keyboard (using the tab key to move between options in a menu or within a form, for example)
- Style text on pages so it has suitable colour contrast
- Provide a caption for tables to describe it’s contents
- Provide a way to skip to the website’s primary navigation options
There are four ways in which a website can be accessible:
- Perceivable: Making text and media perceivable for everyone
- Operable: Helping users navigate content
- Understandable: Making and media text understandable
- Robust: Maximising compatibility
These are the accessibility principles that guide how we design and develop websites.
What do I need to do to make a website accessible?
Use the following principles to guide you through the creation of an accessible website. It is significantly easier to create a new website that is accessible from the beginning than it is to adapt an existing website to be accessible.
Accessibility principle 1: Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
Provide text alternatives for any non-text content. People can then change the media into other forms. For example, large print, braille, speech, symbols, or simpler language.
- Images, form image buttons, and image map hot spots have appropriate alternative text
- In the following cases, images should use a null value:
- images that do not convey content
- images that are decorative
- images that contain content that is already conveyed in text
- Avoid presenting text as an image
- Equivalent alternatives to complex images are provided in context or on a separate page
- Form buttons have a descriptive value
- Form inputs have associated text labels
- Identify embedded multimedia using accessible text
Semantic markup and structure
Your content should be viewable in different ways without losing information or structure. For example, a simpler layout.
- Use semantic markup to present elements such as:
- headings (<h1>)
- lists (<ul>, <ol>, and <dl>)
- emphasised or special text (<strong>, <code>, <abbr>, <blockquote>, etc)
- Use tables for tabular data. Where necessary, associate data cells with their headers. Use captions and summaries for data tables where appropriate.
- Associate text labels with form input elements. Group related form elements using a fieldset and optional legend
- The reading and navigation order (determined by code order) is logical and intuitive
All content on the page should be easy to read and consume. Use proper grammar and correct spelling, as well as an appropriate font size.
There are rules specified in the WCAG 2.0 quick reference guide for text accessibility:
- Text is never aligned justified
- Text should resize without scrolling
- Line spacing between lines of text should be at least a space-and-a-half depending on the text size
- Spaces between paragraphs should be at least 1.5x larger than line-height
- Increasing the font size up to 400% does not affect readability or functionality
Make it easier for users to see and hear content.
- Avoid relying colour as the sole method of communicating information. For example, links should use an underline so they don't rely on colour alone.
- Avoid relying on colour to distinguish links from surrounding text. Exception:
- when the contrast between the link and the surrounding text is at least 3:1 and
- you provide an another method of differentiation for hover and focus states. For example, an underline or border
- Text and images of text have a contrast ratio of at least 4.5:1
- Large text (over 18 point or 14 point bold) has a contrast ratio of at least 3:1
Accessibility principle 2: Operable
User interface components and navigation must be operable.
Provide ways to help users navigate, find content, and determine where they are. Consider navigation within a single page, not just between pages.
- Navigation links that are repeated on web pages do not change order when navigating through the site
- Use a proper heading structure (h1 > h2 > h3 in hierarchical order). You may use this as an alternative to a "Skip to main content" link
- The navigation order of links, form elements, etc. is logical and intuitive
- Provide at least two different methods of finding content on your website. Options include:
- a list of related pages
- table of contents
- a site map
- site search
- list of all available web pages
- Page headings and labels for form and interactive controls are informative
- The user can pause, stop or hide content that:
- updates dynamically (for example, a notification, form field, scrolling carousel or gallery)
You can animate content in this way if the duration is under 5 seconds.
- Avoid content or media that flashes more than 3 times per second. Exceptions:
- the flashing content / media is small
- the flashes are low contrast
- the flashes colour is not mostly red
Accessibility principle 3: Understandable
Information and the operation of user interface must be understandable.
- When a user inputs information or interacts with a control, it does not result in any of the following:
- a major change to the page
- the spawning of a pop-up window
- a change of keyboard focus
- any other change that could confuse or disorient the user unless you inform the user of the change in advance
- Identify elements that have the same functionality across web pages. For example, use a consistent label for a search box
- Present form validation errors in an intuitive and accessible way. Identify the issue and provide quick access to the problematic element. Allow the user to fix the error and resubmit the form.
- Provide labels, cues, and instructions for required interactive elements. For example, place form labels next to form fields and provide a legend for each fieldset.
- Provide suggestions for fixing errors with form inputs
- Allow the user to reverse any change or deletion to editable data
- Provide confirmation of any change or deletion to editable data
- Each form element should be associated with its own instructions and errors
- Place form labels next to form fields and provide a legend for each fieldset
- The user can navigate through the entire form using the keyboard, including:
- The options within a select, radio, and checkbox elements
- Error warnings and messages
- Let the user save their progress
- Ideally avoid time limits on forms. If a time limit is required, avoid short time-outs and give the user an option to extend the time limit
- Provide information about required form elements within the element's label
- Present form validation errors in an intuitive and accessible way. Identify the issue and provide quick access to the problematic element. Allow the user to fix the error and resubmit the form
- Test that your form works with speech recognition software
Accessibility principle 4: Robust
Ensure that a variety of user agents can interpret your content. This includes assistive technologies like screenreaders.
- Use markup in a way that facilitates accessibility. For example, follow HTML specifications and standards
- Address HTML/XHTML validation and parsing errors
How do we measure accessibility?
We use the WCAG conformance levels (A, AA and AAA – the highest grade) to measure accessibility. We aim for at least AA compliance. Achieving this level of compliance isn't our only goal. We aim to give our users the best experience possible regardless of how they access our website.
There are a range of tools available to measure how accessible your work is. There are tools specific to writers, designers, and developers. Please see the 'Resources' section of this document for some popular examples.
The best way to measure website accessibility is to test with disabled people. This way, you can understand what difficulties they encounter when performing tasks. These tasks usually involve content readability, navigation, and functionality.
Recommendations for you
If you are designing a page or a component:
- Design with the accessibility principles in mind
- Design with real content, text, and images. It will be much easier to spot content accessibility issues early on
- Avoid reliance on images for communication
- Use the recommended font sizes and line-heights
- Use the official brand colour codes
- Check colour contrasts throughout your design (some software can do this for you)
If you are developing a page or component:
- Start by assessing if the page or feature will have any accessibility issues. You can base this assessment on the principles here, and the WCAG guidelines
- Include keyboard navigation
- Insert a working "skip to main content" link for every page
- If possible, make use of 'tried and tested' code created by others. For example, the A11Y Project contains accessible components
- Use the testing and evaluation tools within this document
If you are creating content for a page or component:
- Help people with cognitive disabilities by keeping writing concise and simple. This also helps people who aren't native English speakers, as well as a people on mobile devices. It will make your core ideas clearer for everyone.
- Provide a unique, descriptive, and clear page title
- Use markup with appropriate and meaningful elements. For example, use headings that summarise the structure of the page's content.
- Avoid reliance on images for communication
- Use alternative text that describes an image in meaningful, accurate 'plain English'
- Provide alternative captions for videos and other media
- Inform the reader where a link will lead them. Add descriptions to every link within your content. For example, for links that download a file, mention the file format and size.
- Test that screenreaders can read your content aloud
If you want to report an issue or are looking for training:
- Please contact Web Services using the Help4U service.
Guidelines and technical resources
- Full Web Content Accessibility Guidelines (WCAG)
- Accessibility cheatsheet
- Interactive sheet of guidelines with dynamic elements for A, AA, and AAA ratings
Content writers, designers, and developers may find the follow tutorials useful:
- Page structure: https://www.w3.org/WAI/tutorials/page-structure/
- Menus: https://www.w3.org/WAI/tutorials/menus/
- Images: https://www.w3.org/WAI/tutorials/images/
- Tables: https://www.w3.org/WAI/tutorials/tables/
- Forms: https://www.w3.org/WAI/tutorials/forms/
- Funkify simulator for Google Chrome
- Color Contrast Analyzer for Google Chrome
- Colour-blind simulator and contrast checker for Sketch
- Designing for global accessibility (Google Design)
- Microsoft Inclusive Design Toolkit
- The A11Y Project
- Accessibility Developer Tools for Google Chrome
- Color Contrast Analyzer for Google Chrome
Testing and evaluation
- Accessibility Insights for Web
- Google Lighthouse
- WAVE accessibility tool
- Web accessibility checker ('Achecker')
- SiteImprove Accessibility Checker
- Accessibility evaluation tools (96 tools)
- 24 Tools to Test Higher Education Website Accessibility