Accessibility is not just for those with a disability, it can help make a website easier for all people to use.
Did you know that 98.1% of home pages have at least one accessibility failure? In celebration of Global Accessibility Awareness Day, we reached out to Aruma’s Web Developer, for their tips and tricks on all things web content accessibility.
Use clear and concise language Avoid complex words, jargon and too many acronyms. If they are essential, consider adding a glossary.
Descriptive text Sometimes, such as when you’re describing a process or outlining several options, using illustrations, symbols or images can help you clarify your message or simplify the text. If you are using images in this way, make sure you use descriptive text and avoid using text in the images.
Captions When including a video include captions that are correctly timed to the audio and ideally also available as a text-based transcription. Include a written summary of the video content close to the player.
Links When adding a link, use meaningful text that describes what someone will see if they click on it. Avoid redundant words like ‘click here’ and make sure all your links look the same and are immediately recognisable.
Titles Your website content management system, such as WordPress, will let you specify the title for each page. This will appear at the top of the browser window or tab and helps people understand the purpose of your content. It’s best not to simply repeat the main heading here, instead consider using words that convey simply what your page is about.
Copy and paste with care Before copying content from an original document such as an email or file, it can be easier to clean up headings and other elements like bulleted lists in the document itself – this might be Word or Notepad. Remove any inline formatting for heading styles and erase any font weights, colours or sizes you find. A website content editor has a better chance of recognising your headings and other built-in styles, so this can save you time re-applying styles to your content in the editor. Finally, use Ctrl+C to copy and then Ctrl+V to paste from a clean source, such as the cleaned up original document.
Tools such as screen readers help those with vision loss or other disabilities meaningfully interpret the content. Making sure you have an organised and predictable outline for your page is essential for these tools including the below.
Headings The golden rule with headings is don’t skip levels. Make sure you don’t jump straight from top-level H1 to third level H3; you need to use a H2 between them. There should only be a single H1 on the page and using subheadings in the correct order after that will help both screen readers and your audience to quickly scan the page for the information they need.
Quotes Use the inline quote style in your website content editor to mark them as quotes, this might be a button with an ” icon, or it might be a style that you need to choose from a drop-down list.
Bullets and numbers For any bulleted or numbered lists, apply the right format and avoid typing hyphens or other characters that just look like bullets. If you copy and paste a list, also make sure the editor has generated a bullet for each point and hasn’t simply created something that looks like bullets.
Tables Tables can be hard for screen readers to follow unless they’re structured property. Therefore, keep tables for information that can’t be presented meaningfully in another way.
Forms are a key part of any site that deserve special attention because they can be difficult to use for people with a disability if they’re implemented poorly. If your forms are hard use, there’s a strong chance, you’re losing out on opportunities such as enquiries.
Unless your website is completely custom built, it’s likely your forms have been set up in a form builder of some kind that’s plugged into your content management system. Such as Contact Form 7, WPForms, Wix Forms and many more. To help make your forms a good experience, there’s some easy things you can do:
Simplify Anything you don’t need to type into a form makes it easier to complete. Provide predefined choices, such as radio buttons or checkboxes instead of freeform text fields, a dropdown list can be used when you have more choices.
Autocomplete Essential for making forms easy to fill out. There is a set of standardised fields that most web browsers recognise like first name, last name, street, suburb, state and others that can be automatically populated if your form uses them.
Date picker Using only your keyboard, check that you can open the picker, select any date and close the picker. Some date pickers are poorly implemented and impossible to use for people who don’t use a mouse with their computer.
Visibility Make sure field labels, extra instructions, and any other input guidance is always visible and remains after the user has started filling out each field. Some form builders allow you to hide labels or add placeholder text that appears inside a field until the user starts typing, but these are less accessible than simple, static text above a field.
Validation and error messages ‘Phone number is not valid’ is less useful than ‘phone number must be a 10-digit number that includes the area code’, and a good form builder will provide you with a way to write your own error messages like this.
Testing your pages is an essential final step to ensuring your content is accessible. This doesn’t need to be an exhaustive process and can effectively be a quick check to confirm you’ve covered the basics for an accessible page.
There are tools that can help you quickly and easily identify things you need to fix, and you can run these over your page when it’s published or in some cases before you publish.
Incognito and private browsing Most modern browsers (Chrome, Edge, Safari) have an incognito or private browsing mode you can use to open a duplicate of the page you’re working so you can test it without including the admin menus and editing controls, while you stay logged in for editing in your original window.
Use a screen reader A handy tool to check it makes sense for people with vision loss. If you work on a Windows PC, NVDA screen reader is free or available for a small donation, and on Mac, the VoiceOver reader is built into the operating system. These are both widely used tools, but there are also similar apps available like Jaws.
Browser-based tools Use a tool that helps check your document structure easily, like the WAVE Evaluation Tool from WebAIM, available as an online tool or as an extension for major Windows browsers. Running this tool over your page will quickly identify structural errors like skipped headings, plus others you may need to take up with your web developer.
Check linked files Ideally, you should also check for potential accessibility issues in any documents you link to like PDFs. Apps like Word in the MS Office suite include an automated check on the original document before you convert it to a PDF. Acrobat can also help identify accessibility issues.
Let’s all work together in making the digital world a much more accessible and inclusive space. We hope you can implement a thing or two from this blog on your website!
This dialog plays embedded videos in a popup window.
This dialog displays a site search in a popup window.
This dialog displays a contact form a popup window.
This dialog displays an email form a popup window.
This dialog displays a list of languages available for translation in a popup window.