How to design and develop accessible websites?

Understanding exactly how and why people are excluded can help us establish concrete steps towards being more inclusive. We can make things better for everyone by addressing accessibility. 

All of us are going to have a disability at some point in our lives. These can be 
temporary like a broken arm, situational such as using a device in a dark room, 
or they can be natural such as progression of aging. 

Looking for points of exclusion

• vision, hearing, motor or speech impairments
• cognitive impairments (for example, ADD, dyslexia or autism)
• situational challenges (context in which users are interacting with the product such as a dark room or a public transport combined with ability-based impairments could result in further, overlapping pain points)
• temporary impairments (for example, a broken arm)

How to design accessible websites?

Colour

Here is a fictional university website called Accessible University. It has been created to demonstrate a variety of common accessibility problems. Try to navigate the page to identify any links. 

There are three links on the page that say, “click here”. They are not descriptive and informative and they do not meet contrast requirements, which makes them extremely difficult to spot. You can read more about contrast requirements on accessibility.digital.gov page. 

Additionally, the links rely on colour to communicate information. Colour blind users would be unable to distinguish them from non-link text. Therefore, links should always have an underline.

People may have difficulty distinguishing red and green and blue and yellow. 

Not relying on colour alone to convey important information was an essential element of the design of a symptom tracking app. Here is a prototype of the app: 

Prototype of a symptom tracking app 

On top of colours such as green representing low severity of symptoms, orange representing moderate severity and red representing severe symptoms, letters L for low severity, M for moderate and H for severe were added resulting in a system that users who can’t distinguish between colours can understand, without compromising the design for users who can see colours well and they usually associate green with low level, orange with moderate and red with severe/high level. 

Text colour on white background

Many dyslexic users are sensitive to the brightness the high contrast colours cause. This is the reason why we don’t use pure black colour for text used on a white background. Our primary colour is: #0B0C0C. Our secondary colour is: #505A5F. Have a look at Hounslow Design systems to learn more about the colours, styles and components we use.

Apply background colour to input elements on all forms

Apply background colour to input elements on all forms, in case users change background colour to black so that users can still see the black text and input background colour does not go black. Learn more about how users change colour on websites.

Responsive design

The page should be readable and functional when the text size is doubled and viewed on any device or desktop. 

When designing for mobile devices make sure that your interactive elements such as buttons or links have touch targets that are large enough and there is enough space/padding around them to make them easy to press without overlapping onto other elements. This is extremely helpful to everyone but especially anyone with a motor impairment. 

Simple design

Here is a banner video used on a university website. What is your first impression of it? Functionality to stop the video is provided, which is great, but the video runs too fast. Users with cognitive impairments, for example autism, dyslexia, ADD, could find such a design particularly overwhelming.  

We should always try to create simple, minimal design to reduce distraction and cognitive load. Simple doesn’t mean boring. Here are several design examples which embrace simplicity and accessibility without compromising the user experience.  

• https://moooi.com/en/ 
• https://www.scope.org.uk/ 
• https://www.apple.com/uk/ 
• https://www.gov.uk/ 

Different ways to engage users

Having different ways to engage with content provides better experience for everyone. Here is a prototype of the same symptom tracking app you saw earlier: 

Prototype of a symptom tracking app  

It shows a calendar page which presents all symptoms a user has experienced in a particular month; a user can view symptoms based on their severity or look at a particular day to check the symptoms experienced then.  

In order to simplify a complex design users can view all symptoms or only one type of symptom, resulting in a system, that’s easier to understand, especially for people with autism spectrum disorder or cognitive impairments, who could get too overwhelmed with too much information presented at once.  

Content

Plain language

To be digitally accessible, start with plain speaking. Don’t use buzz words or technical language. 

Meaningful, descriptive link texts 

The link text should give user enough information to decide whether they want to click it 

Don’t use 
Create flexible layouts that work on any device. Learn more.

Use  
Create flexible layouts that work on any device. Learn more about responsive layouts. 

Meaningful, descriptive headings and page titles 

Use meaningful, descriptive headings and page titles. Headings communicate the organization of the content on the page. Nest headings by their rank or level. The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>). 

Video

Use:

• YouTube videos. YouTube auto-generates closed captions for your videos and is great for compression if your video is too large
• captions – text recording of any speech that appears at the same time as audio
• volume, play/stop, rewind controls 
• transcript

Long blocks of unbroken paragraphs

Long blocks of unbroken paragraph text are not only hard for dyslexic users to read, but for non-dyslexic users too according to 6-surprising-bad-practices-that-hurt-dyslexic-users.

That’s why it’s better to use short paragraphs that express one idea.  This is because dyslexic users need more breaks between ideas than non-dyslexic users. Breaking up your text to one idea per paragraph makes reading a lot easier for both dyslexic and non-dyslexic users.

Progressive disclosure

Show the least amount of information/functions necessary for a given task/purpose.

Users like to search and navigate

Users tend to use search boxes a lot on pages which have a lot of content. Some users will prefer to navigate the page while others will use a search box. Search boxes and navigation should go hand in hand in order to help users reach their goal.

Navigation repeated on multiple pages should appear in the same place in each time. Users can easily navigate, find content, determine where they are.  

Accessible design leads to a better user experience 

Accessible design does not only lead to better experience among users with disabilities but also among those who do not have disabilities or limitations. Many accessibility requirements improve user experience, particularly in limiting situations.  

I also love the four principles established by the team at BBC:  

1. Give users a choice.
2. Put users in control.
3. Design with familiarity in mind.
4. Prioritize features that add value. 

These principles can be applied to any project to improve user experience for everyone. 

How to develop accessible websites? 

Keyboard navigation 

Focus

Some users drive the computer entirely with the keyboard or other type of input device. For those users, focus is absolutely critical. It’s their primary mean of reaching interactive elements on the screen.  

You can use tab button to navigate websites: 

Try to navigate www.gov.uk using only your keyboard. 

As you can see it is very easy to navigate the page as the bright yellow coloured focus indicator is present on all interactive elements on the page such as links, buttons and a search box. 

Here is a fictional university website called Accessible University. It has been created to demonstrate a variety of common accessibility problems. Try to navigate the website using only your keyboard. 

As you can see the website is extremely difficult to navigate with tab buttons. There is no focus indication for keyboard users.  

To add focus use tabindex. Remember to only add it to interactive elements on your page such as buttons, links, search input, form elements etc.

A tabindex = 0 will add the element in the natural tab order.

If you don’t want an element to appear in the natural tab order set tabindex to -1. You can programmatically focus it using javascript focus() method.

Here is an html code for a button without tabindex which doesn’t have a focus. 

Here is an html code for a button with tabindex which has a focus. 

Tabindex greater than 1, for example tabindex = 5, will jump the element to the front of the tab order regardless of where it is in the DOM.

Focus indicator can seem lost when navigating websites using offscreen content such as off-canvas menus. In order to fix it you can set its visibility to hidden or display none and make it visible again when users click on the menu. 

The ARIA Authoring Practices doc (or “ARIA Design Patterns doc”) is a great resource for figuring out what kind of keyboard support your components should implement.

WAI-ARIA Authoring Practices

Skip link

We can create a hidden link called skip link which gives keyboard/switch devices and screen reader users the option to bypass the top-level navigation links and jump to the main content on a page.  

It is usually included in the header. 

<a href=”#content” class=”govuk-skip-link“>Skip to main content</a> 

HTML mark-up

Screen readers rely on a good HTML structure. The browser takes the DOM tree and modifies it to make it useful to assistive technology, therefore, correct HTML mark-up is essential for accessibility. 

Have a look at Accessible University website again, and try to complete the “Apply now” form using only your keyboard. 

As you can see, it is extremely difficult to complete the form. It lacks accessible form mark-up. 

Provide text alternatives for any non-text content 

Form labels

There are two ways to add labels to your HTML code:

1. We can use label as a wrapping element:  

<label> 

<input type=”checkbox” checked name=”jLetter”> 

Receive promotional offers? 

</label> 

2. We can also use for and id attributes:

The label element has a for attribute whose value matches the id attribute of the associated form field. 

<input type=”checkbox” checked name=”jLetter” id=”letter”> 

<label for=”letter”>Receive promotional offers?</label> 

Form validation

Validation should be designed in a way that considers the needs of all users, including those who can’t see the error message visually, and those who are unable to use a mouse. A good design would be one in which: 

• the capabilities of HTML5 are fully utilized, including the required and pattern attributes, as well as <input> types such as type=”email” and type=”url”. Using these features enables browsers to provide their own validation, which is likely to be supported by assistive technologies
• the error message includes enough detail so that all users know which fields have errors
• the error message is written to a container that is marked up with role=”alert”. This is ARIA markup that results in screen readers announcing the message to users as soon as it appears, regardless of their current location on the page
• the user’s focus can be sent automatically to the first field on which a correction is needed

Aria

Aria is a W3C specification that is designed to communicate roles, states, and properties of user interface elements to assistive technologies. ARIA is essential for accessibility of today’s modern web interfaces. 

WAI-ARIA Authoring Practices has a set of recommended design patterns for common widgets, including a menu design pattern. 

Text alternative

Use text alternatives for images. It’s a short written description of an image, which makes sense of that image when it can’t be viewed   

<img src=”house” alt=”picture of a house”> 

Make use of the tools and information available 

• AA of the Web Content Accessibility Guidelines (WCAG 2.1)
• Google material design understanding usability
• Google colour tool
• WebAIM Color Contrast Checker    
• Inclusive Components 
• Color Oracle   
• Gov.uk Understanding WCAG 2.1 
• SEE Chrome extension