• Accessibleweb

    Designing websites that are easy to use, easy to update and are search engine friendly.

    If you are looking for web design in Sutton Coldfield then contact me for a quote.

Guerilla Web Accessibility

By Richard | Published: January 8, 2010

There is a vast amount of information and advice available about web accessibility, and it can be overwhelming so this is my take on the essentials that you need to know. This is only an introduction and not meant to be comprehensive.

What is Web Accessibility

In a nutshell it is a means of making websites available and usable by people across a range of disabilities including:

  • Visual impairment and blindness
  • Hearing impairment and deafness
  • Learning difficulties
  • Cognitive (process of thought) difficulties
  • Physical difficulties e.g. inability to use a mouse
  • Photosensitive epilepsy

At first sight some of these may appear insurmountable e.g. how does a blind person read a website? Some of them do conflict, for example the right colour combinations for someone with a form of colour blindness could make a website inaccessible to someone with a form of dyslexia. There are no perfect answers but the fact is that the web as a whole is woefully inaccessible and with not too much work could be vastly improved.

How Can a Website be Made Accessible

The first thing I would say is that as with most things in life, the earlier accessibility is considered in the design of a website, the easier it is to include. Accessibility can be successfully bolted on afterwards but this usually involves more work (and thus cost) and doesn’t necessarily lead to an ongoing culture of accessibility (e.g. for content managed sites, much of the accessibility is down to how individual authors and editors use the content management system).
The simplest and most effective things you can do to ensure that a website is as accessible as possible are:

  • Ensure that anything which isn’t text has a text equivalent (e.g. an image of a Company brochure page should be accompanied by text reflecting the contents of that image).
  • Any video or audio needs to have alternatives e.g. transcriptions, captions
  • Anything that you can do on the site with a mouse should also be achievable just using a keyboard
  • Don’t use small text or badly contrasting text/background combinations
  • Avoid anything that blinks or flashes rapidly
  • Keep the number of links on a page to a sensible amount (including navigation links)
  • Structure pages properly with headings, lists etc. (this also helps with Search Engine Optimisation)

Further Reading

As mentioned in the introduction there is a great deal of information available. I would recommend the official Web Content Accessibility Guidelines (WCAG 2.0) as a good starting point.

Please Comment

Please add your comments to this post, tell me things I have missed, ask me for more detail, give me your views.

Posted in Uncategorized | 3 Comments

Can You Drive if You are Blind? What about Reading a Website?

By Richard | Published: December 17, 2009

You can drive if you are blind, although your ability to drive safely will vary depending on a number of factors including whether you have any assistance (and bearing in mind that dogs no longer need a licence in the UK). You can even do so legally if not on a public road (in the UK at least). Living in Birmingham, I recall an incident a few years back when a completely blind guy was caught speeding on a public road with a passenger shouting driving instructions to him. The funny part was that he was then banned from driving for some years and had to take an extended driving test.

The second question is more sensible, although it never ceases to amaze me that the majority of people assume that a blind person would have no means of reading a web page.

What if You Can’t See the Page?

Braille displays are available and used but the vast majority of blind web users read web pages by listening to them. Modern operating systems include voice synthesis software to allow text on a screen to be read out but this software is usually somewhat limited and isn’t particularly suitable for the content and structure of web pages. Screenreader software such as JAWS, Window-Eyes or NVDA are more commonly used as they provide a means of skimming through content and links and support more of the user interface components of the web (for example forms).

Web pages need to be well structured to allow effective reading by screenreader software. The most important things to consider are:

  1. Any text contained within an image is not accessible to the screenreader
  2. Too many links on a page can make navigation and orientation very difficult
  3. The visual appearance of text e.g. colour, font-size, bold, italic, position, is not accessible through screenreader software

Some Simple Tips

All is not lost though, some simple techniques can fix these issues:

  1. Text within an image can be described using the alt attribute (or longdesc if the description is more detailed than a short phrase or sentence). If the text is repeated elsewhere on the page then it doesn’t even need to be directly associated with the image. In the case of a more complex image (for example a graph), it may be more appropriate to use table markup to give the right semantic structure to the information.
  2. Too many links is too many links, but providing they are grouped logically, and have meaningful text, and have skip links at the beginning of groups to allow quick navigation, they can be much more accessible.
  3. Visual appearance should be separate from semantic structure. If a piece of text is meant to be a heading then it should be marked up with the appropriate level of HTML heading. If a particular word needs emphasising then the HTML emphasis or strong tags should be used. If the colour of some text is important (for example in the key to a graph), then the link between the colour and its meaning has to be conveyed in another way too (in this case perhaps through the graph data being within an HTML data table).

Trivia

Did you know that the Driver Vehicle Licensing Agency can supply a braille version of the driving licence application form. Good to know that public money is being spent wisely.

Posted in Accessibility | Leave a comment

Should Good Design be Unobtrusive?

By Richard | Published: December 2, 2009

The short answer is probably yes, good design should be unobtrusive. The longer answer is that it depends on a number of things. New ideas or significant variations on existing ideas tend to be fairly obtrusive as they are unfamiliar and make us stop and think.

Examples

My favourite example of this in the world of web design is the tag cloud. The first time I saw a tag cloud it was a bit of an alien experience. I saw these different sized words and thought, well that’s interesting, is it art? Does it have a purpose? With a little bit of exploration I soon realised what it represented and how to use it, and it  became an obvious extension to more traditional forms of navigation including search. In some instances a tag cloud provides enough useful information just by itself, in terms of trending topics for example. It is very useful for a large site.

Breadcrumb navigation is another innovation that seems to have stuck. I heard about breadcrumb navigation before I saw it and I couldn’t quite get my head around it as described, but seeing it and using it makes it seem like common sense (although there are different ways of implementing breadcrumb navigation that can make a big difference to the user experience).

Unobtrusive then?

So when should design be unobtrusive? When it is an established convention or ‘norm’. As mentioned in the previous post there are a number of examples of this  and if things don’t quite work the way we expect them to then it jars us and makes have to think about what we are doing. As an analogy consider driving, we mostly do it without having to think concsiously about everything, but an unfamilair road sign would make us have to quickly process the information around us and decide a) whether we need to take action as a result and b) what that action is.

It can be a bit of a dilemma; as designers we want to push the boundaries, and innovate, and yet with a usability or accessibility hat on, we also want to make the experience as intuitive and automatic as possible. After all, a website that looks and works in exactly the same way as most other websites isn’t going to win any design awards. On the other hand, a website with lots of innovations or a completely different navigation system may be the bees knees but will it give the return on investment it needs to?

Please Comment

What do you think? Share some of your examples of good innovative design by commenting here.

Posted in Web Design | Leave a comment

Design by Community

By Richard | Published: November 20, 2009

Design by Committee

One of the often quoted rules of web design is that design by committee is a really bad idea. There are always a number of people involved in decisions around web design but problems arise when that number is more than a few. Projects stagnate through indecision, or web sites turn out to be bland and uninteresting because of the need to please everyone. For example a large committee given a choice between white or black will often end up going for a compromise grey.

From a web designers perspective, the ideal situation is where they are given free reign to make all the decisions themselves, but meanwhile, back in the real world, the best that can be achieved is that there is one or two people apart from the designer who can make all the decisions.

With a larger group, decisions inevitably take longer (either the group has to meet all together which depends on shared available time, or members have to communicate in other ways e.g. email). Group members all have their own perspectives and agenda for what they want from a web design project. Often this manifests itself as a requirement for every department to have their fair share of the home page real estate and a jockeying for position within that page.

From Committee to Community

Design by community is a different approach, where the decisions are based on the needs and opinions of hundreds or thousands of individuals. Although that sounds like a recipe for disaster, in practice it means that the normal means of reaching decisions has to be replaced by other ways, for example polling or focus groups. The process has to be more democratic to work, although inevitably there will be some individuals or groups who dominate to some degree.

For many projects design by community isn’t a practical option but it’s certainly used for many web applications and systems e.g.

  • content management systems
  • blogging platforms
  • social media applications

What is also true is that aspects of design by community pop up in most web projects. Why do I say this? Because designers use established good practice all the time. There is innovation happening, but good design is generally based on existing principles that in some cases have been around for years. For example, it is very common for websites to display a logo in the top left corner of the page and for this to link back to the home page. There is no rule that says this is how things must happen, but it has developed over time and become an unwritten standard. It has developed by designers innovating and then the community feeding back. In this example the feedback has been generally positive which is why it has become the norm, however there is still debate over certain aspects e.g. whether on the home page the logo should not be a link as it would be self-referencing.

Some innovations disappear almost as quickly as they arrive, because they get the thumbs down from the community. They are either to difficult to use or implement, or inaccessible, or perhaps just ahead of their time.

Although the pace of change on the Web seems very fast, in many ways it is slowed down by this community action, which is probably a good thing. Development of the web needs both innovation and sanity checks. Corporate culture is generally quite conservative and a web design brief from a large organisation may have a long list of requirements which are effectively design decisions e.g. logo in the top left, search box top right, horizontal navigation bar. Things do change over time though and even the largest organisations are now happy to consider using things like breadcrumb navigation or tag clouds which were both radical innovations when they first appeared.

In Conclusion

So the message is, don’t ignore the community; use it to your advantage in establishing what are good practices for web design, in particular regarding usability and accessibility. And don’t be afraid to suggest this sort of approach for establishing requirements for large web projects, especially if the alternative is a twenty person committee who meet once a quarter to make the decisions.

Posted in Web Design | 2 Comments