Richard Warren and Grahame Page are specialists in web usability and accessibility and work for a company called Userite. The Userite team has a wide range of experience covering website design, e-government, internet services, training and marketing and are passionate about making the web inclusive to everybody. Userite are currently involved in testing our new website, as part of the web redesign project, to ensure our new Imperial website meets AA compliance for accessibility.
Richard and Grahame presented ‘Disabled Browsing’ at the Web Forum event on Wednesday 4 June to help us understand how disabled people browse the web and what we can do as editors to design pages to make it easier to navigate.
Not everyone can use a mouse for various reasons, they may have repetitive strain injury, motor neuron disease or the mouse might just not work, therefore they have to use the keyboard (the internet was originally designed for keyboard).
These are the common functions that work across most browsers:
- Keyboard users use the Tab key to move through the links on a page (Shift + Tab to go back).
- Arrow keys to scroll the page up and down.
- Back Delete goes back to the previous page
- Ctrl + or -Zoom in or out
- Alt + Home goes to the default Home page
When arriving on a site for the first time a keyboard user will press the Tab key to get into the page. Once on the page the user will require an indication of where they are. As internet standard a website will highlight this as a dotted line around a link.
A site like www.Amazon.co.uk is an example of a site that highlights tabbing with a dotted line. This site may be frustrating for keyboard users as much tabbing is required to find required items and to shop online.
To make it easier for people to find where they are when they arrive to a page the Tab highlight box should be clear using a bold colour, a good example is the RNIB website
2. Skip to content
To reduce the need for tabbing you can add a skip to content area at the top of you page that appears when a user Tabs into the site. The users clicks Enter on the skip to content and the page moves down to the area that contains the first heading in the content. A good example is the RNIB website
3. Top tip – Don’t forget to reset the tabbing sequence in your skip to content area, otherwise the user uses the Tab again they will be taken straight back to the first tab in on your website.
Try it yourself – unplug you mouse and see if you can navigate the web!
Users with poor vision can include those with Dyslexia, colour blindness, tunnel vision and other visual impairments.
1. Enlarging the screen
To enlarge the screen use Ctrl + and Ctrl – which stretches the screen.
Some problems faced by enlarging the screen include; sub menus overlapping, falling off the end of menus, menu collapsing if cursor moves to far to the right or borders on menu options not clear.
2. Top tip – To ensure users do not have complications with menus editors should create large clear borders round menus.
Use high contrast (Windows Desktop)
People with Dyslexia sometimes use a high contrast, for example, a pink and black colouring on their screens as this helps stop the letters from jumping around. You can configure most computers to display in this way.
Try it yourself – For Windows Desktops you can personalise your screens by going to your desktop, then personalise, under appearance you can choose from a selection of high contrast themes!
3. Further tips to help those with visual impairments
- Keep sentences short
- Use good spacing (140%-150%)
- Use zoom browser technology
Text only browsing
Braille and screen reader technology uses the text on websites to read the content. They do not read the divs and the span, they are only interested in the message. Text only browsers remove the ‘fancy bits’ and graphics on sites and just leaves the basics like; links, headings and text content.
2. Remember Google is blind too!
Google only knows which is the most important elements on the page if the page has been coded correctly in HTML. i.e H1 for the page heading and H2 for the sub-headings.
Try it yourself – Visit WebbIE software programs that make it easier for blind and visually-impaired people, especially using screen readers, to browse the web, get the latest news, listen to podcasts and radio stations and other common tasks.
Screen readers move through pages by headings, each search result in Google is a heading.
To help screen readers with graphics, image tags are very important. As-much description of the picture is required to help users visualise the image or help them to pick a product. For example, on Moonpig it is difficult for someone who is blind to choose a card because they have not tagged them with descriptive text, merely graphic 123.
Videos can be hard for screen readers to read if the buttons are not labelled correctly. It is more useful for the button tags to read Stop or Play, than unlabelled.
- Download the PowerPoint slides from Userite on accessibility (PDF)
- Watch the recording of the session