Accessible design needs good foundations

Developing accessible architectures

Start with the guidelines

In the web development arena, accessibility is very strongly associated with meeting checkpoints and in particular, with meeting the single-A to triple-A targets set out in the Web Accessibility Initiative (WAI) guidelines. Guidelines and checkpoints enable companies to benchmark websites in terms of their accessibility for a wide range of people with different disabilities, who may use very different technologies to interact with the Web.

Guidelines and checkpoints also help by simplifying the breadth and depth of knowledge that people need to design accessible websites. They enable developers to write accessible code and help editors to check that their copy is accessible.

The WAI guidelines advocate a design for all approach. Following the guidelines will improve websites, allowing users to navigate or view them in their preferred style or with their chosen technology such as a screen reader1 or a screen magnifier2.

Next, understand who guidelines are for

However, understanding the rationale behind guidelines and the impact that passing each checkpoint can have on individual users enables designers to take accessibility to the next level. There is more to accessible design than compliant code. Accessibility considerations can also shape website architecture and structural decisions.

Behavioural insights can guide blueprints

Accessibility in the virtual world shares many similarities to accessibility in the real world or built environment. It is much easier to achieve when a structure has been built with accessibility in mind. A seven storey building with innovative door handles, difficult to locate lifts, little signposting and small sets of steps up and down into each room will be more difficult to improve for access than a building drafted by an architect who is trained in inclusive design principles. Structural design needs to take into account the behaviours and habits of the people who are going to inhabit the building. A classic design failure was a fire station designed with sharp angles and corners that inhibited fire fighters’ ability to move quickly to the engines in case of an emergency. Needless to say, this building was shut down soon after opening.

Support users with alternatives

Accessible design in the virtual world is about providing alternative routes to information, whether that route is a different sense (seeing or hearing), a different mode (using a tab key or using a mouse) or a different journey (using an A to Z site index rather than browsing the website). It is about adding choice and flexibility without adding complication.

An intuitive hierarchy minimises effort

On the web, understanding users’ behaviours can help to drive better design solutions. Someone who is blind and uses a screen reader or someone who has had a stroke and has difficulties using a mouse can use a tab key to move from link to link on a page.

A web page with over 150 links will take a very long time to tab through, whether a user is listening to link names or reading them visually. This makes intuitive hierarchy all the more important. A good hierarchical structure will mean that fewer links are presented on each page of the site and that only relevant links are presented on the page at the next level down. As long as the links are meaningful and relevant, the hierarchy or structure will mean that overall, a user has fewer tab key presses to make, because fewer and more relevant links are made available.

Clear signposting is essential

Content on a website doesn’t just benefit from logical grouping but also from logical naming. People who have mild cognitive impairments and people who are interpreting a website in a second language will have difficulty when faced with unusual and unfamiliar section names. Too often, corporate jargon can creep in to section labelling. This language can baffle newcomers to a website and force them to adopt a ‘click it and see’ approach. Navigation labels need to be understood out of context because different users will interpret labels in different contexts. Often, users’ understanding of the navigation may be supported by visual design but navigation has to work without the design elements because users with visual impairments such as short sightedness, blindness and colour blindness will experience the navigation in a different context.

Getting to Level 4: Navigational aids are very important

Accessible information architecture also needs users’ travels through the structure. It’s about opening doors and offering lifts down to deeper levels. One of the difficulties encountered by people with disabilities in the real world is a journey to the top of a building with stairs and no lift. In the virtual world, users with disabilities and users of mobile technologies can have trouble getting to very specific content that is buried at a deep level within the website.

A large quantity of links on the higher level pages or blocks of irrelevant space filler on section home pages can hinder users from finding what they need. This is where effective supplementary navigation design becomes vital. Users with visual impairments are often helped enormously by an A to Z index or a site map. These navigational aids present content in a long list that can be viewed easily with screen magnification or a large text size.

Use meaningful embedded links

The content on higher level pages within a website structure can also support users’ journeys to deeper levels where more specific and detailed information is available. Section home pages can provide copy which overviews the key areas within that section.

By embedding links in the overview copy, content planners can support users’ journeys towards key information. Embedded links are great because they enable readers to understand more about a page than an isolated navigation link in a menu. Embedded links can give users direct access to buried content, at a deeper level in the logical hierarchy.

Scanning using the Tab key:  Don’t use More, More and More!

A common editorial style on the web is to use the link ‘more’ as a call to action to access more content on a topic described in overview text.

The choice of embedded links in section summaries needs to consider the variety of ways in which users scan a page. Imagine hearing each link on a page one by one as it is read out by a screen reader. Next, imagine a section home page with the links ‘more’, ‘more’, ‘more’ and ‘more’. For someone using a tab key to move from link to link through the page, this collection of links would give very little away.

It is also important that embedded links do not conflict with the links in the navigation menu.

Design accessible user journeys

Information architects need to design solutions that support user journeys for people who navigate and find their way around websites using different technologies and strategies.

By thinking carefully about accessibility early on in a project lifecycle, and by considering accessibility from all angles; not just web development, teams can deliver fluent and enjoyable user experiences to a much wider audience.

Creating accessible wireframes and blueprints will increase findability for everyone and get more people with diverse requirements up to the next level.


The architecture or underlying structure of a building in the real world has a profound impact on whether or not it is accessible to people with disabilities. It also has an impact on how easy or difficult it will be to make improvements. In the same way, the structure and form of a website can influence whether or not it provides a fluent and efficient service to all, irrespective of the way they navigate the web and the modality in which they choose to use it.

If site structure diagrams and page layout wireframes are built with accessibility in mind then auditing and adjusting websites will take less time. Similarly, if user journeys are built and supported with due consideration of the Web Content Accessibility Guidelines then a greater proportion of your audience will be able to get to whatever they need on your site.

  1. A screen reader is a software application that attempts to identify and interpret what is being displayed on the screen. This is then presented to a blind user as speech (by text-to-speech) or by driving a Braille display.
  2. A screen magnifier is software that interfaces with a computer's graphical output to present enlarged screen content. It is a type of assistive technology suitable for visually-impaired people with some functional vision.

Add a comment

Fields marked with an asterisk (*) are mandatory.