How to Make Your Website Accessible

With an inclusive website, you can reach a larger audience. Users with disabilities such as visual, auditory, motor or cognitive can still access and use your website if you comply with certain accessibility guidelines. The WCAG 2.1 guidelines state that your website should be: 

 

 

Making your website compliant with these criteria will ensure more website conversions and greater online success of your business, within the disabled community and beyond. Complying with all of these four factors will make your website of the highest quality, for disabled and non-disabled users. 

Furthermore, having an accessible website is a must for avoiding fines and legal escalation. The Equality Act 2010 was implemented to prevent discrimination against persons on the basis of: disability, race, gender, age, religion or belief and sexual orientation, among other things. If your website is not accessible to disabled users you could be in breach of the Equality Act 2010. Public sector websites are also legally required to meet WCAG 2.1 AA standards, under The Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations 2018. Private sector businesses are not currently legally required to meet WCAG standards explicitly, but they can still be sued under the Equality Act if someone is unable to use their website because of a disability. 

So how do you actually make your website accessible? One method for website accessibility is making sure your site works with screen readers. Screen readers convert on-screen content into speech or Braille output for visually impaired users. This is mostly achieved during the coding stage of a website. Making content work with screen readers can be done by using semantic HTML, which means using a chronological order and correctly positioning the content in each section. Another means to make content work with screen readers is using H1, H2 etc., tags for content rather than <div> or <span> for content sections. 

Another method for website accessibility is using alt text for images. This is also implemented during the coding stage of the website creation. Image <img> tags can have an alt= attribute added to them, wherein you describe the image so that screen readers read this text out aloud (or translate it into Braille). If the image is purely decorative or you don’t want it to be read by screen readers, you can use alt="" so that it is skipped by screen readers. 

A third method for website accessibility is ensuring keyboard-only navigation is possible. The first step to achieving this, is making sure that all interactive elements on a website are accessible by using the tab button on your keyboard. Another step to ensuring a website that can be navigated by keyboard only is using focus styling. This is also a coding action, where you use focus CSS styling to show where on the webpage the user is. The result is highlighted areas to show where the user currently is on the website, and visual outlines to show which element on a webpage is currently selected. You can do tests yourself to check whether your website is navigable by keyboard, by using your tab button to move around the site and using the enter or space button to select areas. 

And the final method for website accessibility which we will explore in this blog is using accessible colour contrasts and fonts. Poor colour contrast and difficult fonts are a major barrier to users with low vision, colour blindness or dyslexia. This can be avoided by using 4.5 : 1 contrast ratio for text colour. Contrast ratio is measured on a scale of 0-21, 1 : 1 being low contrast, 21 : 1 being high contrast. According the WCAG 2.1 guidelines, text that is 14-18pt must be at least 4.5 : 1, but larger text can be 3 : 1, because it’s easier to read. You can test your website colour contrast by using this link, where you can enter the colour hex codes and it will show you the contrast ratio and whether you pass the WCAG standards. 

It'seeze websites Gloucestershire are fully equipped to ensure your website is accessible to the necessary requirements. For council or school websites where accessibility is paramount, we can install the userway widget. This is an icon in the corner of the website that provides options to make the website more readable for people with visual impairments, dyslexia or other disabilities. Check out the Churchdown Parish Council website where we have installed the userway widget (try clicking on the blue stickman logo in the top right corner).