Intro to Web Accessibility and the Tunnel Vision Accessibility Tool

Why you should embrace making your website accessible for everyone.

With an estimated one billion people who experience some form of disability, including some 285 million around the world who are visually impaired (those with some sight) according to the World Health Organisation, it is no surprise that accessibility has become a prevalent topic in web design in recent years. So, what exactly is web accessibility? Web accessibility put simply, means that a website is accessible for everyone, including disabled, young and elderly people. Disabilities that affect web access include: visual, auditory, speech, physical, learning, cognitive and neurological. According to Web Content Accessibility Guidelines 2.0, web content must be perceivable, operable, understandable and robust (known as POUR).

Until recently, accessibility on the web has been often overlooked and there has been a general lack of awareness of the many benefits of an accessible site for anyone who enjoys a quality user experience. Both the design and development of an accessible site will not only help people with disabilities that are at a disadvantage when using the web, but potentially improve site performance in terms of usability and device independence. It is critical to assist a wider audience demographic, including those who are colour blind or have low vision, to understand, navigate and interact with the web.

Think of it this way: every user that lands on your website has a specific purpose or intent. No two user journeys are the same and what some might find easily accessible, may be completely inaccessible to other groups of people. Some elements that affect accessibility include:

  • Colours, as well as the contrast between colours
  • Font selection and size
  • Sentence and paragraph length
  • Ease of navigation to certain areas of a page
  • The opportunity to have text read out loud
  • Complexity of vocabulary

Each of these elements fall into different categories of disabilities and require certain types of adaptations in the design of web content. Unfortunately, web accessibility is not black or white; We cannot make everything accessible to everyone, however there are ways to improve accessibility to reach a larger population. The aim is that a user navigating a site is able to finish a task they are aiming to achieve without issues or barriers that are preventing them from completion. Factoring in accessibility to improve experience and design for everyone, begins with content and mobile first. For example, when it comes to content layout for people who have low vision, it is critical to consider proximity of CTAs by grouping closely related items together (e.g. filling out forms: making questions and CTAs or icons efficiently grouped together).

‘When you move from what you’re doing to why you’re doing it, you open yourself to creating multiple ways to solve the same problem.’ — Derek Featherstone

Ultimately, accessibility is a crucial tool to enrich and change the lives of people with disabilities, offering an opportunity for the 4 I’s: independence, interaction, information and increased web usage. If you are thinking, well, how can I benefit from web accessibility?, the incentives are endless. For starters, you are complying with anti-discrimination laws and WCAG standards to avoid lawsuits, whilst promoting social responsibility. In terms of financial gain, an accessible website often translates into a larger customer base, with pages that often work better on a wider variety of devices and have quicker page load speed. The result: streamlined pages have better search engine results and a better design. For a web designer, the added skill set is a way to differentiate yourself from the competition. The bottom line is people with without disabilities encounter similar usability issues to those with disabilities, so maximising the potential of an effective, accessible site is a win-win for a diverse population.

Not long ago, our anything team had the pleasure of seeing web accessibility expert Derek Featherstone (founder of Simply Accessible) at the UpFront Conference. His session on web accessibility and usability covered a number of topics, but one particularly interesting demonstration was testing a website for someone with tunnel vision. Derek demonstrated how a user with low vision (seeing only the middle of the visual field) would struggle to use a form which passed all the normal accessibility tests and to the eye looked well designed. He asked the audience to take their hand to make a fist and look through, as if holding a straw to view how users with tunnel vision would go about filling out a form. Using the ‘straw test’ to create a tunnel to look through (zoomed in), it was evident the design clearly did not work for users who have low vision that may be using a magnifier.

Inspired by this, our front end web developer, Robert Hayes, created a tunnel vision accessibility tool as an aid for web designers and developers. Taking tunnel vision (or low vision) and visual impairment into account, the Tunnel Vision Bookmarklet is intended to help with the design and development of accessible web resources. The bookmarklet is essentially a link containing Javascript that can run on any web page. Utilising the Tunnel Vision Bookmarklet helps assist in the creation of intuitive sites and can enhance the user experience by alleviating the element of uncertainty, difficulty and confusion. The tunnel vision accessibility tool not only helps designers view a site from the perspective of someone who is visually impaired, but takes into consideration the varying ways in which users perceive information on a page. To use, just simply drag and drop onto your browser’s bookmarks/favourites bar.

In conclusion, web accessibility is not only a vital aspect to web standards, but fundamental to make web pages that are understandable for all. All too often, you may think that you’ve ticked every box, when in reality the site may not be as intuitive as anticipated. Much of the responsibilities of web accessibility are placed web developers or designers, yet there is still a general lack of awareness that unintentionally excludes those with disabilities. We hope that in using the tunnel vision accessibility tool, we are taking a step forward in helping web developers and designers implement a site with accessibility features.

Have any feedback or tips? Drop us a comment below or contact us!

Like what you read? Give anything agency a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.