Non-profits need to ensure their websites are accessible. This jargon free guide will help.
Just a quick follow up from my New Year Newsletter in which I gently encouraged you to think about your website and online marketing strategy. One area I mentioned in my newsletter was website accessibility. As I am sure you already know, it is considered a form of discrimination if disabled people are not able to access website content (the Equalities Act 2010). So with that in mind I thought I’d take the opportunity to look at the benefits of accessible website design from a slightly different perspective, i.e. the business case.
In September last year I spoke at the Accessibility Scotland conference and an audience member asked whether there was a ‘cast iron’ business case for making a website accessible? They were having trouble trying to get their managers to prioritise accessibility or put any resources into ensuring the website was accessible to disabled people.
‘Off the top of my head’ I could not remember any statistics to quote, though I did mention the usual stuff about a more accessible site generating more traffic, being easier to use and having reduced maintenance costs.
However, it seems that these logical arguments do not ‘cut any ice’ when it comes to making the case; what people want are facts, figures and case studies showing increased traffic and increased sales.
So with that in mind here are three major case studies showing the benefits of accessible website design in real terms.
These case studies clearly show that an accessible website design reduces maintenance costs, increases usability and increases traffic. In short, accessible website design is good for your business.
Even if you are not planning a brand new website from scratch I can help you realise some of the benefits outlined above by making your existing website more accessible. The first step in that process is to have your website audited to see if there are any aspects that are inaccessible to disabled peoples. You will then be in a position to have those issues addressed; thus increasing the accessibility and usability of your website.
As an website accessibility auditor since 1996 I am one of the most experienced and skilled practitioners in the UK. I will check your site against the WCAG 2.0 guidelines to ensure that your site is compliant with the BS8878 Web Accessibility Code of Practice.
An audit by myself goes way beyond tick box checks; I will check that your site is accessible and usable to the real people who visit your site.
Contact me today to take advantage of this unique expertise to utilise my expertise to attract more visitors to your website and make it easier to use by everyone. No matter what your budget or how big or small your website is I will be able to provide an audit that fits with your needs.
“Jim’s patience and close work with his designer meant we got a vibrant new image that we could use across all media.” Clare MacGillivray, Development Coordinator Edinburgh Tenants Federation
Or phone to talk over your ideas: 0141 576 9446.
Photo by yvestown on Flickr – used under a Creative Commons licence
In this tip I recommend you check out a new Toolbar for Internet Explorer developed by Steven Faulkner, of the National Information and Library Service (NILS). Support for the toolbar is confined to Internet Explorer on Windows, so I haven’t been able to try it out myself (I use a Mac) – however, Gez Lemon of the website Juicy Studio is giving it glowing reviews – and I trust his judgement.
According to the blurb, ‘It is designed to help the user to interrogate aspects (structure/code/content) of a html document that can have an affect on the accessibility of that html document. ‘
It does all sorts of things I would find useful as a developer of accessible websites (validation, screen resolution changes, CSS on/off, links to online checking tools and so on), so I think you will find it very useful. You can find installation instructions, and a full feature list for the accessibility toolbar on the website.
The Web developer tool for Firefox is also worth checking out: http://www.chrispederick.com/work/firefox/webdeveloper/ – and it is according to Mike Pepper, ‘bloody good’.
Although client-side images are preferred over server-side image maps – as equivalent text can be provided for each image map ‘hot-spot’ – server-side image maps are sometimes necessary. For example, a server side image can be used when the active regions of a client-side image map cannot be easily defined using an available geographic shape. In such cases the answer is to provide redundant text links relating to each link provided by the server side image map.
The following markup example is typical of the code used to reference a server side image map.
<a href="/cgi-bin/mymap.map"> <img ismap src="imagemap.gif" > </a>
The web pages accessed by the clicking the mage map in the above example would be completely hidden to someone using a screen reader or a text-only web browser, as there is no alternative way of accessing the links provided.
An example of the server side image with alt attribute added and an alternative set of links to the same content:
<a href="/cgi-bin/mymap.map"> <img ismap src="imagemap.gif" alt="Alternative text links are provided at the foot of the page."> </a>
You then make the following links available at the foot of the page,
<p><a href="about.html">About Us</a> | <a href="research.html">Research</a> </p>
As you can see in the example above the alt attribute provided information about where to find the text based links. The alternative text based links provided at the bottom of the page imply that the image map has two hot-spots, one to find information about the organisation and another for information related to research.
British Standard 8878 (BS 8878) is the Web Accessibility Code of Practice developed by the British Standards Institution, launched on December 2010.
The standard outlines procedures to help ensure that websites (and other web based services) are accessible to disabled people. In short, it provides guidance on good practice; how to develop your strategy and what practical steps to take to implement that strategy.
One assumption it makes is that accessible website design is a good thing and that it is something every organisation should be working on.
When building your new website:
BS 8878 aims to be more ‘holistic’ than other guidelines such as the Web Content Accessibility Guidelines (WCAG) which focus much more on technical issues.
Given this wider approach, it covers:
There are positive and negative factors that would influence you in considering whether you should adhere to BS 887.
In my opinion The BS 8878 is an extremely useful and important document as it recognises that website accessibility is a more complex subject than just applying the right techniques to a web page (i.e adding text labels to images).
It is also about how organisations operate in relation to equality (e.g. policy development), how organisations tender for website developers, how accessibility is tested and who tests it (e.g. disabled people) among other things.
A navigation menu is – if we are speaking structurally – a list.
I still see websites that don’t markup their navigations links as lists; I guess the reason for this is that designers don’t want to have ugly big bullet points littering their menu’s, or seemingly uncontrollable margins throwing out their carefully crafted layouts.
Is it possible to use the correct structural markup, and still make your menus look the way you want them to?
The simple answer is yes; you can use CSS to style lists to look more-or-less any way you want.
First, undermine your previous assumptions by visiting the Listamatic website to see examples of different list styles (with the CSS used for each).
Then visit Mark Newhouse’s Taming Lists tutorial to learn how to make your own.
And finally – if you can’t be bothered learning how to do it yourself – have a look at Accessify’s List-o-matic – where you fill in a few forms, and the List-o-matic tool does all the hard work for you.
Using the appropriate markup for all the structures in your web documents is the first step towards making them accessible; web pages need to be accessible to the ‘user agents’ people use first, before they can be accessible to the people themselves. Using valid standards based markup means you have the best chance of your pages being understood by those intermediate ‘user agents’ (usually that means computers and web browsers).
Yes, you can use all the ‘stuff’ that as a designer you deem appropriate to your audience and message, and still have a site that is accessible, and passes ‘Bobby’ (and other accessibility tools) accessibility checks.
However, what is required when using these technologies is a bit of clear thinking about what their purpose is on your site, and how, if the content is important, their functionality or message can be provided in alternative ways.
Admittedly it is not all easy, captioning of multimedia for instance is a specialist and difficult skill to master, but most accessibility techniques are not ‘rocket science’ and will actually add to the ‘richness’ of the experience for your visitors, rather than detract from it.
I recently did a Webinar about how to keep your WordPress website accessible – for Jisc RSC Scotland. Jisc RSC Scotland provide guidance and advice on technology to support learning, teaching and research in FE and HE in Scotland.
This was the blurb for the Webinar:
“WordPress is now the world’s most popular content management system. What’s not to like? It’s open source, free and has an infinite number plugins that will do just about anything imaginable. I’m using it myself and I suspect your institution is to.
So, we are all on the WordPress bandwagon. Having jumped on board there is one subject we are now going to have to face up to; accessibility. Does WordPress help us create websites that don’t discriminate against a section of our audience? What tools, if any, are available to help us? What are the potential problems?
In this Webinar we will explore just that very topic; how to develop and manage an accessible website using WordPress.”
When creating text for your alt attributes always add a full stop at the end of the text. This will help people who are using screen reading software to differentiate the image label from any surrounding text.
It is also a good idea to add a full stop to the end of each item in a list – helping to make the distinction between each item clearer for those who do not have any visual clues.
Other posts in this category
I provided feedback on the WCAG 2 (as representative of Guild of Accessible Website Designers) have two decades of experience and worked with hundreds of organisations.
07810 098 119