In a few short minutes this blog will give you a clear idea of how inclusive your web pages really are for millions of people in the UK and across the world.
We all know that web accessibility is vital for many users, is a legal requirement, and also helps every user in this mobile-first world where everyone is ‘computing on the edge’. To that end, a better name for accessibility is ‘inclusive design’.
Here are a few simple checks to see how inclusive your pages are:
1. General appearance
Pages need to have a decent default text size, clear font and not be too cluttered. Within the default text and zoom settings you should check...
- Are columns, text and controls separated by enough white space?
- Is the default text generally easy to read or is it too small?
- Is the font sans serif - ie, the one without twiddly tails and different width strokes that is easier to read?
2. Text resizing
It’s important that text can be easily resized. This is different from zooming into the page (where some of the page falls off the side of the screen).
If you're using Internet Explorer for Windows for example, in the menu bar click View and then Text Size and set it to Largest, alternatively on a Mac using Internet Explorer do Ctrl + the plus or minus sign, and in Safari on the Mac use Option and Command keys together with the plus or minus sign.
Did anything change? Did all text nicely resize? On many sites this doesn’t work as it should.
3. Accessible colours
Many people prefer a less contrasting background (such as beige) or need high-contrast white on black text.
First check if the site has a styleswitcher (typically three differently styled A letters at the top of the screen) to make changing colours easy. If it doesn’t then look at whether the site at least reflects the user’s preferred system colours.
In Windows there is a handy hotkey to check this - press left Shift + left Alt + PrtScn to invoke high contrast mode. If the site reflects user preferences, then it will show any preferred colour combination the user has set for their computer once these keys are pressed. You can deactivate high contrast mode with the same keystroke.
For some systems you’ll need to go into settings to change colours manually.
4. Keyboard accessibility
Many people with a vision or motor difficulty use the keyboard instead of the mouse.
Try tabbing through the entire page and see if you can always follow where the active link or button is. Then try filling out a form or two – especially with unusual controls such as a pop-up date picker. If these things are a struggle, your site is not accessible.
5. Images with text descriptions
It’s really important that blind users get a description of key images on a page. Hover your mouse over a photograph and see if the text that pops up (or sometimes is shown in the status bar at the very bottom of the browser) is a good summary of the image.
What you see - and what is shown in the picture on the left - is actually the ‘title’ given to the image in the site's Content Management System. The title is often the same as the alternative text or alt text.
If you don’t see anything then there might still be an alt text present, so you can try one of these options to find out:
- Bring up the page on your mobile phone on a slow connection – you’ll first see the alternative text (if there is one) and then the image will load
- Turn on speech on your phone (by triple-tapping the home button on an iPhone for example) and tap on the image to hear the alt text
- In Internet Explorer you can go to Tools > Internet Options > Advanced > Multimedia > Show pictures and temporarily turn pictures off to see if the alt text pops up instead of the removed images.
6. Accessibility info
It’s valuable to provide key information about the accessibility features of a site for people that need it. It also needs to be well signposted and clear. Look for an Accessibility link – it is usually located at the bottom of every page.
Can you see one anywhere? Is it a good size (at least the same size as most of the text on the page – definitely not small footer-sized text and ideally as big as some headings)?
Further tools for website accessibility
- Vischeck to check for colour blindness and contrast issues
- Web Accessibility Toolbar to spot more issues
Check out other relevant articles: