20% of the population has a disability. How can your website reach this 20%? We look at the problem, creating the right mindset, understanding what gets in the way and then a number of simple practical things you can do to extend the reach of your website.
How to get your website reaching out to the full audience, including the 20% of the population that has some form of disability.
20% of the population has some form of disability, of that 20% over 50% have multiple disabilities.. Some of the features/functions of your website may create barriers for the disabled and they may be creating barriers for the other 80% too.
Creating an accessible website first begins with having the right mindset.
At AccEase we take a Universal Design approach to delivering accessible communications.
Universal Design Provide a Rich Experience Traffic Light Example: Catering for all users Crossing Signal -Picture not wording (for people who are illiterate or non English speaking) -Different pictures for people that are colour blind -led lighting so can be seen clearly during daytime Ramp for wheelchair access Raised bumps on ground for blind people using sensing sticks Large button for people with low vision Large arrow pointing in walking direction White markings on road so walk-way is easy to follow Crossing sound for blind people
These principles, generally applied to the built environment are equally applicable when delivering information.
Multiplicity from the built environment is transferred to rich information – delivery in a wide range of media and formats.
Speed of task completion Site ratings by impairment: From a AccEase study of 120 government web sites – for all of those in the top 30, any site that was in the top 10 fastest sites for one or more impairment groups was also in the bottom 10 slowest for at least one other impairment group.
Start by applying multiplicity to the group creating your website. Make your commitment to being accessible up front – so much easier if yu do it then. There are some techniques and things you can do to make your site accessible that are quite easy (the low hanging fruit) – do them first. If you alt least did those things, that would make a big difference. Use outside expertise if you can – but ensure your experts understand disability. It’s about getting the ends (maximum communication) and far less about the means.
“ Equitable use” not equitable unuse.
Why isn’t every website accessible to all? Despite your commitment to creating an accessible website, there are things that get in the way of delivering to that intention. If we know what those likely barriers are then we can recognise them and be better prepared to handle them.
Slavish adherence “visual branding rules” can create usability and more commonly legibility issues through colour choices not providing sufficient contrast or using colours that people with visual impairments commonly have difficulty perceiving. Use the banner to establish your visual branding – but emphasise legibility and readability in the page body. Visual designers may select colours that cause difficulties and they may design layouts that do not magnify well. It ir s possible to have a stylish website that is accessible. Make sure your graphic designer places accessibility number one in their design priorities.
Centre your website around your customers and what they want to do. Don’t just focus on a single impairment type e.g. make the site accessible just for screen reader users.
Make the site accessible from the outset, do the easy things first. It’s not hard if you do it upfront. Select your content management system carefully – you can’t change that easily.
An example – clear open layout, images, simple left hand navigation. Prominent 0800 number – can’t get the information from the website – call us.
Link to Accessibility page – what to do if you have problems accessing the site. Link to Site Map – site maps help people get a shpae of the whole site and a chance to see lower-level pages. Skip to content – benefits two types of users: screen reader users who don’t want to hear all the navigation items and keyboard-only users who may want to click on a link in the body of the page (means they don’t have to tab through all the menu items first). A block of text at top of the page that is in larger font size providing a very simple summary of the page. Helps people with reading difficulties, vision impaired – and indeed everyone who scan reads web pages.
Now – some practical things you can do to reduce the barriers in your website.
One of the principles of usability is consistency. Yet, when it comes to hyperlinks it seems everyone wants to go their own way. Blue text and then show underline on hover seems to be the favoured convention now. Do you need to hover to find out it’s a link (show underline)? Doesn’t help people with visual impairments as often the colour/contrast between the blue and text colour is small. There are so many blues to choose from – It must be possible to find one that is compatible with the rest of your colour scheme.
Red hyperlinks, not always underlined. Why red? The site’s log is red. Ironically the preceding article on this page advises to include patterns into graphs so that discrimination of data series isn’t by colour alone.
The orange hyperlinks fail the standard for colour contrast. A classic example of branding trumping accessibility, orange is a brand colour. This is on a website that serves the visually impaired.
CCS Disability Action’s brand colours are black, green and white. The text hyperlinks are blue underlined. Visited links are purple.
Longer (within reason) hyperlinks benefit screen reader users (listening to links – more meaningful), benefit agility impaired (bigger area to click into) and better SEO.
Before the advent of modern content management systems and text editors with the “paste from Word” facility it was easier to publish a Word document as a PDF than as HTML. This has changed so that the generation of a PDF isn’t a big time saver anymore.
Incidentally, a good summary of the accessibility of a range of social media platforms.
View whole page at 53%.
Zoom to 100% - but then you get horizontal scrolling.
Take the View | Zoom | Reflow menu option and the PDF “reflows” into a single stream.
Zoom to 400% - text magnified without horizontal scrolling required.
Your website users don’t want nasty surprises when they select a link. If the link is to a document, include the type and size inside the link. Screen reader users who listen to links then get the benefit of this information – not just users in a visual browser.
This change is so simple to make – but really helps keyboard-only users. You don’t need to use border, background colour works well too. If you use “border” set it for unfocused link with neutral background colour (e.g. white) or else page will jiggle when links get tabbed to (get focus).
Ensure you have adequate contrast between text and its background colour. Avoid patterned backgrounds. Grey text may look sexy, but can it be read?
How do we know if our web pages are OK for screen readers? You could download a screen reader and install and learn how to use it (not quick or easy) or get a very useful picture by using Fangs, an add-on for Firefox 3. You can read: The page output, the text The headings list – the shape of the page and the in-page navigation tool for a screen reader user The links list – all the links on the page
The headings. Do they follow a proper hierarchy? Have headings been used for structure not for formatting? Can the user infer what the key sections and sub-sections of the page are?
Links – is each link meaningful? Can the user properly assess where each link will lead to? Are there ambiguous links like; click here, more , read more etc?
Plain English is accessible.
Another analyser – easy to use – paste in the URL of the page to be assessed. The Gunning Fog index, Flesch Reading Ease and Flesch-Kincaid use different algorithms analysing length of sentence, length of words etc to provide ease/complexity scores.