skip to main content

Jim Byrne Accessible Website Design Glasgow for The Third Sector, Voluntary, Charities and Not for Profits

Accessible design for the Third Sector
Creating inclusive websites since 1996
Jim Byrne Web Designer

Free Guide: How To Keep Your Website Accessible

Non-profits need to ensure their websites are accessible. This jargon free guide will help.

The ‘cast iron’ business case for accessible website design

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.

The business case for accessible website design

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. 

  • CNET: there was a 30% increase in traffic from Google after CNET started providing transcripts (reported AST(.ppt) “We saw a significant increase in SEO referrals when we launched an HTML version of our site, the major component of which was our transcripts.” – Justin Eckhouse, CNET, 2009.
  • Legal & General Group: visitor numbers doubled, maintenance costs were cut by two thirds, natural search traffic increased by 50%. .
  • Tesco:  ‘the site now attracts a much wider audience, spending £13 million a year, which is a fraction of the original cost of £35,000 to develop the accessible site’ (John Browett, Tesco Chief Executive). Read the Tesco case study. (2004, UK).

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.

Web Accessibility Auditing Service :

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.

Organising Website Content: 14 tips

Organisation of items on shelves

  1. Know your audience and what they want from you: i.e. aim to make the things they are likely to look for the easiest to find.
  2. Create a priority list of your target users; and a priority lists of what they will be looking for on your site. That way you can address the main needs of the most important groups first.
  3. It can be helpful to Imagine typical users, how they might navigate through your site and how they might find what they are after.
  4. Review your website statistics. The most popular pages and search terms will be obvious: ensure you make them even easier to find. (Install Google Analytics and you can see the route people take through your site, the page they were viewing when they left – and much more).
  5. Create more than one way to find the same thing: Some users prefer search and some prefer browsing. Just like when a person visits a real store; some people ask staff and some just walk around. Some obvious ways to find things you could offer to visitors would be: search, browse via the main navigation, browse via the site map, ask via email, contact form or telephone.
  6. Explore different organisation schemes, e.g. alphabetic, by subject, by audience, by date. Most websites use a mixture of schemes; e.g. at the top level your scheme could be based on the needs of your audience (e.g for a site about a conference your audience groups could be exhibitors, visitors, press) – down a level the scheme used could be based on subject or alphabetical order. For example on a site selling books, a PHP programmer might click in to the technical books’ area; then click Programming books, then PHP books – then browse those PHP books alphabetically. Or more likely – they will just search for PHP books from the home page.
  7. Use a site-map tool to visualise your site such as the free online tool http://writemaps.com
  8. A content management system can make it easy to offer several different schemes automatically: e.g. it can be easy to organise your content alphabetically, by topic or by date at the click of a link.
  9. Group similar things together. Group navigation visually: e.g. information related links in one place; dynamic things (discussion, social media) on another, play things (weather, games), organisation related things together (about us, press releases, employment opportunities, contact, staff…).
  10. Decide whether your navigation will be shallow or deep. Is everything going to be accessible from the home page, or do you need to burrow down to find things? One approach isn’t necessarily better than the other; it’s all about how easy and quickly things can be found.
  11. Label things clearly and use familiar labels. Clear and consistent labeling is obviously important. Is it clear what the person will get when they click that link? Does the page they go to have the heading they expect? Use conventions; e.g. Information about your organisation is in the ‘About’ area, information about your services in the ‘Services’ area, information about your products in the ‘Products’ area. ‘Information for the press is in the ‘Press’ area – use ‘Contact’ for the contact form link.
  12. Use search engine friendly urls, e.g.. websitedomain.com/category/sub-category/pagename.php. Use all lower case, no spaces, don’t use any ‘funny characters’.
  13. Navigation should be based on your content and visitor research. Your navigation scheme should become clear from the way you have organised your content. I.e. it should be created with your users in mind: it should not reflect your internal organisation chart.
  14. Use conventions to place navigation on the page: horizontal main navigation across the top, left-hand for subsection navigation; right hand for navigation related to page topic. Search – is usually top right, at the very top and bottom is where you usually find contact information and a site-map.

Portable Document Format (PDF)Download Organising website content as a PDF document.

“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

Contact us today to discuss your project’s digital marketing needs

Or phone to talk over your ideas: 0141 576 9446.

Photo by yvestown on Flickr – used under a Creative Commons licence

Get the Web Accessibility Toolbar for Internet Explorer

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’.

Links

How to make client-side image maps accessible

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.

What is the British Standard (BS) 8878 Web Accessibility Code?

BS 8878 Web accessibility guideBritish 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:

  • You should put someone in charge of ensuring accessibility and clearly outline their remit
  • Make website accessibility part of your organisational policy; BS 8878 provides policy templates.
  • Document your thoughts and decisions throughout the process of building your website.
  • Make reference to the guidelines and standards you are aiming to adhere to.
  • Set out how you will ensure the website stays accessible once it is up and running.

What makes it different from WCAG 1 and WCAG 2.0

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:

  • The law and accessibility.
  • Inclusive design.
  • Accessibility on devices that are not computers.
  • Accessibility for older people.
  • How to make accessibility a part of your tendering process.

Do you need to adhere to this standard?

There are positive and negative factors that would influence you in considering whether you should adhere to BS 887.

  • If you don’t make your website accessible you risk falling foul of the law: e.g. the Equality Act 2010.
  • Making your site accessible increases the audience you will have for your goods and serves; research suggests that you will increase your audience by up to 17% if you make your site accessible. (Nomensa report)

The Importance of The BS 8878 Web Accessibility Code of Practice

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.

Contact us today. We are hugely experienced award winning web designers and developers. Please read what our clients are saying about how we helped them meet their aims.

Or phone to talk over your ideas: 0141 576 9446.

Structure your menus by marking them up as lists

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.

Why is this relevant to accessible web design?

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).

Links

Accessible web design is not about creating boring sites

Accessible websites can look fabulous, be interactive, and use up-to-date multimedia capabilities (e.g., images, sound, movies, Javascript, photographs and server-side technologies like PHP or ASP).

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.

For example, provide alt attributes and title tags for your images and photographs, ensure that your site still functions if the user browser doesn’t support Javascript, provide captions or transcripts of your movies and sound.

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.

Links

  • CSS Zen Garden: http://www.csszengarden.com/
  • Accessify.com: Attractive accessible Websites; http://accessify.com/features/articles/good-lookers/

Accessible WordPress Webinar: Download The Slides

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.”

Download a PDF of the Webinar slides (350k)

Contact us today. We are hugely experienced award winning web designers and developers. Please read what our clients are saying about how we helped them meet their aims.

Or phone to talk over your ideas: 0141 576 9446.

Add a full stop to end of alt attributes and list items

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

Give me a phone if you would like me to test the accessibility of your website:

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