An Ageing Concern

The European Commission has long committed itself to proposing web designers make websites more accessible and has recently emphasised the importance of accessibility for older people.

It's important to remember that the European Union is home to an aging population. With around three in five over-50s having access to a computer, accessibility solutions (such as enlarging font sizes and text-to-speech software) may be of particular need.

Web providers need to switch on to the buying power and increasing internet usage of the grey pound

- Gordon Lishman, Director General of Age Concern

From a marketing perspective, the 'grey pound' is estimated to account for £245 billion of the UK's annual spend and a study from alljoinon.com (published in March 2008) found that the average monthly online expenditure of a consumer in their 60s is £48.78.

5 Online Tools for Accessible Sites

Automated tools should never replace human testing, but using automated tools throughout development, alongside human testers and some expert accessibility knowledge, can provide a great time saving solution for basic accessibility checks.

Below is a broad selection of 5 useful online tools for assisting in the creation of an accessible website.

1) Validators

W3C Markup Validation Service
W3C CSS Validation Service

One simple way of creating a quality site is validating your markup and CSS. Validating will not check for accessibility issues, instead validating checks for errors in your code will provide a brief (if sometimes confusing) description of how to fix them. If all of your code validates, there is a good chance it will look the way you expect it to in multiple browsers and platforms.

2) Accessiblity Evaluation Tool

WAVE

WAVE is a really handy accessibility checker which displays your page graphically with different coloured icons which represent errors or potential problems. Accessibility features are also represented as icons, which gives the user a quick way of checking those features for accuracy – for example, WAVE will expose alt text and recommends that the user ensures "the alt text conveys equivalent content, is accurate, and is succinct". You can also download the WAVE Toolbar which makes it even easier to check for accessibility as you build.

3) Colour blind Vision Simulator

Vischeck

Vischeck is a way of showing you what your webpage looks like to someone who is colour blind, and considering roughly 1 in 20 people have some sort of colour vision deficiency, it's an extremely useful tool. You can run images and webpages through the colour blind vision simulator to make sure you haven't used separate colours which look the same to somebody with a colour vision deficiency, which is especially useful for making sure your links stand out on your page.

4) Text Browser Simulator

Lynx Viewer

Lynx Viewer allows you to see what your webpages will look like when viewed using Lynx, a text only web browser. Ensuring your site is site usable and understandable in a text only mode is a good check for basic accessibility. It is also a good way of checking that your alt text is useful.

5) Project Managing Tool

Accessibility Wizard

Accessiblity Wizard isn't an automated tool like the others, rather it's a tool to assist in the project management of an accessible website. It allows you to choose the WAI conformance level (either A, AA or AAA) and breaks down the WAI checkpoints into individual tasks for each job role in your development team. It's an excellent way of allowing project managers, or anybody who might not be an expert in accessibility, to clearly see what work needs to be carried out in order to create an accessible site.

High Accessibility is High Visibility

As I've mentioned before, designing for accessibility has benefits far beyond disabilities. One benefit is how an accessible website could actually help your SEO (Search Engine Optimisation). A website designed with semantic markup and accessibility in mind not only increases your potential market but can also place you at a higher position in search engines giving you a higher chance of a higher number of people finding your business – that’s one extremely valuable benefit! So here's one quick tip for creating high accessibility and high visibility on your website.

Quick Tip – Create a Clear Hierarchy Using Headings

Think of your website as a book which is broken down into chapters, and arranged under headings, sub headings and paragraphs. Break your page content into reasonable 'chunks' for readability and use the predefined HTML heading and paragraph tags to arrange your content.

Structure example – always start with an ‹h1› tag and move through the other levels sequentially:

‹h1›Topic of the page‹/h1›
‹p›Paragraph overview of the page‹/p›
‹h2›Major topic 1‹/h2›
‹p›Paragraph about the major topic‹/p›
‹h3›Sub Topic 1‹/h3›
‹p›Paragraph about the sub topic‹/p›
‹h3›Sub Topic 2‹/h3›
‹p›Paragraph about the sub topic‹/p›
‹h2›Major topic 2‹/h2›
‹p›Paragraph about the major topic‹/p›

Using heading tags help structure your documents and make them easier to read and if you use these tags properly, web browsers, search engines and assistive technology will use these tags to gain a quick breakdown of your web page. Many assistive technologies use heading tags as anchors to quickly jump to different parts of a page.

Make sure your headings contain relevant, useful information – search engines will give more weight to the text inside the headings so they should also include some of your keywords or key phrases for your site.

Finally, don’t use headings purely to style your text. If you want something to be bold for example, you should use ‹strong› which will add emphasis using the correct method.

Headings should reflect the logical structure of the document; they should not be used simply to add emphasis, or to change the font size

- W3C

Validation - Just an Exercise in Checking Boxes?

The simple answer is no.

Every good product should be checked for quality against a set of formal standards – I wouldn’t buy a car which hadn’t passed quality checks, I wouldn’t give my boss a report which I hadn’t spell checked and I wouldn’t put a site online without validating it first.

HTML has rules of how it’s elements can be used and browsers are created to understand these rules and render your page accordingly. If you don’t adhere to these rules you run a risk of your site looking drastically different in different browsers and platforms.

Using an automated tool called a validator can highlight small but fundamental errors which are difficult to pinpoint by hand, such as forgetting to close tags.

The only real downside to validating, is it can be a lengthy process if you’re not used to producing semantic markup by hand, or use a WYSIWYG (What You See Is What You Get) editor to create your pages – the errors the validator displays can sometimes be difficult to understand and, if your page has hundreds of errors, finding the main problem can be like trying to find a needle in a haystack.

However, the benefits to validating hugely outweigh the downside; outlined below in brief, they really speak for themselves:

Validation and SEO
If you want search engines to list your site, your HTML should be correct. Search engine spiders have difficulties indexing pages with HTML errors. Using a validator to ensure your pages contain valid, standards compliant code will make sure the search engine spiders can actually access your pages and include your site in their listings.

Validation and Forward-Compatibility
Valid, standards compliant HTML will render better, on more browsers and faster than HTML with errors. As browsers become more standards compliant, validating your markup will also ensure your site is more likely to work on future browser releases.

Validation and Accessibility
An incorrect assumption is that if you make your pages valid, they will also be accessible – it’s entirely possible to have a fully valid page which is totally inaccessible. Whilst validation doesn’t guarantee accessibility, it is an extremely useful aid; and if the code validates, it makes it much easier to ensure accessibility and usability. CSS validation can also be extremely important to accessibility: using a CSS validator is essential for tracking down errors such as the same background and foreground colours which would cause serious problems for users with custom style sheets.

Some validators:
http://validator.w3.org/
http://valet.webthing.com/page/

The Importance of Web Accessibility

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect

- Tim Berners-Lee, W3C Director and inventor of the World Wide Web

There are around 10 million people with disabilities in the UK alone. Making your website accessible allows your content to be more easily perceived, understood and navigated by all your visitors (and potential customers!) let alone opening up your business to the disabled market with an annual £50billion disposable income.

Providing an accessible website is also the law. It has been a legal requirement for UK websites to be accessible since 1999. There are no strict guidelines or black and white rules for this, but the law states websites are expected to make "reasonable adjustments" to ensure their content is accessible to everybody, regardless of ability.

Web accessibility is not only important on ethical and legal grounds, but has proven itself to be a financially beneficial business decision.

Accessibility is very much thought of as something implemented into a site for people with severe physical disabilities, many people overlook cognitive disabilities, people with colour blindness, 'silver surfers', dyslexics... The list goes on, but the message is simple - an accessible website benefits all.

I became interested in accessibility five years ago when I first started studying Multimedia. Although several fellow students had many different physical disabilities and used a diverse range of assistive technology, I recognised the importance of an easy to use website from my early home life with two middle aged parents - one who is colour blind and one who was a 'technophobe'. Since, I have gained a first class honours degree in Multimedia Computing with an award from the British Computer Society for my final year project of an Accessible E-Commerce website. I now work for BarnesGraham as an Accessible Front-End Developer with my main interests in accessibly, usability, web semantics and SEO.

This blog will be used to discuss and muse over information and news about accessibility, current trends, how we're implementing it at BarnesGraham and how it can benefit you. Please feel free to comment if any information proves interesting or raises any questions.