This resource is for anyone responsible for a website or other digital media at your non-profit.<\/p>\n
It covers how to identify barriers that prevent, limit or block<\/a> people from achieving their goals on your website. This isn\u2019t a technical guide<\/em>. Once you know what to look for you can identify the most common barriers visually or using free tools. Identifying them means you can avoid them. This will make your website more inclusive.<\/p>\n My name is Jamie. I focus my work on inclusion and accessibility. I recently left the BBC after spending the last 11 years in senior accessibility and engineering roles. I\u2019ve been working in the digital space for over 20 years.<\/p>\n In that time I’ve worked alongside technical, design, product and organisational leaders to build inclusive products that are used by millions of people everyday.<\/p>\n Accessibility and inclusive design are deep subjects. But a handful of simple and common barriers are responsible for most of the issues which exclude users. <\/p>\n Roughly 80% of barriers fall into one of three groups:<\/p>\n Group 1: <\/strong>Barriers relating to how we use colour <\/p>\n Group 2:<\/strong> Barriers relating to how a user navigates and moves around a website or app.<\/p>\n Group 3:<\/strong> Barriers relating to how we name (or label) the elements within a website or app.<\/p>\n Once identified, we can usually remove these barriers with small tweaks and changes. <\/p>\n For most users, apps and websites are a visual experience. <\/p>\n Our vision allows us to make meaning out of the shapes, colours and text we see. But we all have a unique experience of vision. Due to differences in eyesight and the devices we use, no two people ever see things in quite the same way. <\/p>\n Within our vision, perception of colour varies the most from person to person and device to device. This makes barriers relating to colour are likely to impact most of us at some point in our online life.<\/p>\n To identify potential colour barriers look out for:<\/p>\n Identify and remove these barriers so a wider range of users can interact with your website or digital service.<\/p>\n Contrast is the measure of how easily a user can tell two colours apart. For example being able to read text against a background, or perceive the edges of a dropdown menu or button. . <\/p>\n At some point all users will be unable to tell the difference between two colours. This point may occur sooner for older users, users with a vision impairment or users with low end devices. Lighting also plays a role. When using a phone in direct sunlight, more contrast is needed for the content to remain visible.<\/p>\n There are many ways to measure contrast. The most common comes from the Web Content Accessibility Guidelines (WCAG<\/a>). WCAG is used as the legal requirement within UK and European laws.<\/p>\n The WCAG method provides a \u201ccontrast ratio\u201d score for pairs of colours at different type sizes. For text smaller than 18px the required contrast is \u201c7:1\u201d and text over 18px its \u201c4.5:1\u201d.<\/p>\n It\u2019s possible to hand calculate and test all the colours we use, but most of the time we use automated tools.<\/p>\n For web pages, I’d recommend using an automated scanner called WAVE<\/a>. WAVE identifies areas where contrast dips below the recommended levels.<\/p>\n Testing apps is a little more complex. Methods depend on the type of phone and what information you have. This is my go to guide for checking contrast in apps<\/a>. <\/a><\/p>\n Another method for quickly evaluating contrast is to turn the brightness of my monitor way down and see what content becomes hard to read. It\u2019s not precise, but it’s quick and gives a good approximation of where contrast barriers may exist.<\/p>\n Even with great contrast, colour is still an unreliable way of conveying meaning.<\/p>\n It’s best to use colour as an enhancement rather than relying on it being visible to users. If we design our graphs, charts and other graphics to make sense without colour they will be readable to a wider range of users in a broader range of situations. We can achieve this by using different styles of line, different symbols (squares, triangle etc) or shading things in different patterns and colours.<\/p>\n The same barrier also occurs with elements such as buttons and links. We can sidestep this barrier by adding an underline to our links and buttons which disappears when the user interacts with them. This technique is common. We made extensive use of it on BBC websites and apps.<\/p>\n Most digital products have at least one interactive element. It could be the main navigation, a form or a button.<\/p>\n Most users will access interactive things by tapping a screen or using a mouse, trackpad or some other way to drive a cursor on the screen. We refer to all these as pointers.<\/p>\n Some users will move through the page using the tab key. This helps them navigate from item to item in a linear way. You may have done this while filling out an online form.<\/p>\n The tab key is connected to a system known as \u2018focus order\u2019. When the tab key is pressed it moves the \u2018focus\u2019 to the next interactive item on the page. <\/p>\n You may have seen the focus system in action. It\u2019s often rendered as a little blue or black outline around an interactive element. <\/p>\n The focus system is very flexible. As well as the tab key, the focus system can be controlled and used by assistive devices such as bite switches, blow switches, big round buttons, eye gaze tools and more.<\/p>\n I have a spinal cord injury. As I was in hospital for my injury I had very little movement. Focus order and the mobile app equivalent enabled me to use my phone and the web. When I made an \u201cuh\u201d noise my phone moved focus to the next item. Going \u201cMmmm\u201d made it click the focused item. It was slow, but it worked. I was not excluded from my digital life.<\/p>\n To test the focus order on a website, press the tab key. If it\u2019s working you should be able to clearly see where the \u2018focus\u2019 is and you should be able to tab your way to every link, button and form on the page.<\/p>\n When you press the enter key it will act like clicking the item. If clicking an item opens a menu, pressing escape should close it. If this system works, your website or app is likely to be accessible to a wide range of users.<\/p>\n Labels are the names we give to all the interactive elements in our web pages and apps. Barriers arise when labels are missing or unclear.<\/p>\n As we move through the focus order with the tab key, each item we land on will have a label of some type. Most often the label is text or an icon.<\/p>\n Depending on the user’s device and their abilities, they may not be able to see or understand the labels we give things.<\/p>\n Not everyone uses an app or website visually. Labels are a critical part of making a website accessible and inclusive.<\/p>\n Assistive technology tools such as screen readers (which read aloud the text in digital products) and speech controllers (which perform commands spoken by the user) rely on the labels we use to work.<\/p>\n A good label should convey the meaning and purpose in a unique and clear way. For example, a link to send an email displayed as an envelope icon should have the label \u2018email us\u2019 rather than \u2018envelope\u2019. Links to \u2018read more\u2019 should include the context, such as \u201c\u2018read more about our services\u201d<\/p>\n By identifying the labels and confirming they are meaningful we can ensure users of assistive technology are able to access our digital products.<\/p>\n When I was in hospital after my injury I couldn\u2019t read my phone screen either. I navigated my phone by making noises and I heard the content as my phone read it aloud.<\/p>\n Labels are something we can test manually, or by using a tool. The WAVE scanner we used for checking colour contrast will also identify elements with missing labels.<\/p>\n The scanner is unable to tell if a label is meaningful. So it provides us with a way to view all the labels on the page so we can decide for ourselves.<\/p>\n Most labelling barriers happen with links, buttons, forms and images. But they also arise when media content lacks captions, audio descriptions (for video) and text transcriptions for audio. These \u2018labels\u2019 are known as \u2018text equivalents\u2019. <\/p>\n It\u2019s not only users who benefit. Search engines use labels to analyse and rank the content of your website. Good labels make your content easier to find.<\/p>\n Accessibility is a deep topic with many detailed corners. But it all comes back to barriers.<\/p>\n If you take care with colour, are mindful of how users interact and provide meaningful labels you\u2019ll be off to a good start to removing them.<\/p>\nAbout me<\/strong><\/h3>\n
80% of barriers relate to colour, navigation or labelling<\/strong><\/h2>\n
1. Colour<\/strong><\/h2>\n
\n
About contrasting colours<\/strong><\/h3>\n
How to measure contrast<\/strong><\/h3>\n
Colour as a way to convey meaning<\/strong><\/h3>\n
2. Accessing and navigating interactive content<\/strong><\/h2>\n
The focus order system<\/strong><\/h3>\n
How to test the focus order<\/strong><\/h3>\n
3. Labelling elements<\/strong><\/h2>\n
About good labels<\/strong><\/h3>\n
How to test labels<\/strong><\/h3>\n
Final thoughts<\/strong><\/h2>\n