6 quick checks for website accessibility
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:
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…
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.
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.
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.
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:
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)?
This article was originally published here.
