A Guide to Accessibility
What is Accessibility?
A good website is one that is accessible to everyone, no matter how they use them. When websites are properly designed and coded, it is universally accessible to people with different sight, hearing, movement, and cognitive abilities. With the rise in use of technology for work, school, health, and more, the web can either remove barriers to communication and interaction, or create them.
Accessibility is not just beneficial for individuals with a range of different abilities, but it also extends to businesses and can help enhance your brand, improve user experience, and serve a larger customer base. When implemented correctly, web accessibility can boost your search engine optimization (SEO) efforts and improve your website’s organic search rankings - driving traffic and sales.
The Web Content Accessibility Guidelines (WCAG) 2 provide a single shared international standard on how to make websites accessible. After reading the WCAG guidelines and a few knowledgeable articles on accessibility, I wanted to build a set of guidelines that I could follow and refer to as a UX/UI designer. The following are web accessibility standards to be considered at the design or development stage:
Images
Ensure images have an alternative (alt) text unless they are purely for decoration such as bullet points or borders. For long or descriptive alt text, use the “longdesc” attribute.
Audio and Video
Ensure audio or video content have subtitles or at least a written transcript that’s available. If audio or video content is automatically played upon visiting the website, ensure that there is an option to pause or stop it.
Text
Ensure that the text size is large enough for the proper screen size and can be made larger without affecting the layout of the page.
Colour Contrast
Ensure that there is high contrast between the colour of the text and the colour of the background. You can check colour contrast and it’s adherence to the WCAG by visiting WebAIM Contrast Checker or Siteimprove Color Contrast Checker.
Explanatory Text Link
Ensure that the links describe its purpose and where it’s going. If linking to a document, state what type of document it is and the file size in order to give people with slow connection a chance to know how long it may take to load. Buttons should have a call to action (CTA) instead of just a “click here” for example.
Touch
Ensure touch targets are at least 9-millimetre-high by 9 millimetre wide. Touch targets close together should have enough inactive space in between them. For more information, download Touch Template Tips (PDF 487KB).
Enable Keyboard Navigation
Ensure that all parts of the website are able to be accessed without a mouse. The content on the site should be in logical order and intuitive for users that rely on assistive technologies that read content aloud.
Forms
Use a label instead of a placeholder to give important information about the field such as appropriate instructions or help text, if necessary.
Common or related elements should be grouped together.
Error messages should not only indicate the error but also include informative text that help users rectify the error.
Users should be able to review and confirm information before finalizing submission.
Typography
Line height should be at least 1.5 times the font size and spacing between paragraphs should be at least 2 times the font size.
Font sizes should not be smaller than 10 points.