Hands on with a couple of assistive tools to better understand what makes a website accessible

I remember sitting down and reading my first XHMTL and CSS tutorial, which stated the benefit screen readers would get from semantic markup and CSS layouts. This was a long time ago, when the web standards movement was just getting started and nested tables used for layout were the norm.

Over the years I’d read about good techniques and practices that I was under the impression helped assistive tools such as screen readers or screen magnifiers. Untill recently I hadn’t actually used any of these technologies, and I found using a screen reader to be really insightful. I am going to give you a quick run down of two free tools that anyone can try out and get a feel for.

I would highly recommend moving your monitor so that you can’t see it, or if you are using a laptop use an external keyboard. Without being able to see the screen, you immediately notice how useless the mouse has become. So whilst using a screen reader you will need to learn some keyboard shortcuts.

VoiceOver on MacOS X

MacOS X comes with a highly regarded integrated suite of assistive tools. VoiceOver is the screen reader and will work with any piece of Mac software.

Basic usage

To enable VoiceOver type cmd + f5 and at the dialog hit enter or alternatively you can follow the VoiceOver tutorial before you start. I would highly recommend spending the time doing the tutorial, but I will run you through just enough to navigate a website below.

VoiceOver gives us a multitude of keyboard shortcuts to navigate your Mac in a way that would normally require the use of a mouse. Luckily most VoiceOver shortcuts are based on the same set of keypresses - Control (ctrl), Option (alt) and other keys are pressed at once. For example ctrl + alt + d selects the dock, and you can use the arrow keys on the keyboard to navigate to other items in the dock. VoiceOver will read out the application or folder names as you select them. When you have one selected you can use enter to open your selection.

To open Safari hold ctrl + alt whilst tapping m three times and this will open spotlight. Next, type safari and use the up and down arrows to highlight the application and tap enter to open it.

Press cmd + l to get to the address bar and type bbc.co.uk/news followed by enter. VoiceOver will go into an automatic read of the entire page, the first thing you may notice if you are cheating watching the screen is that it’s reading out text that’s not on the screen! This technique has been around for years and by placing visually hidden links like this you can allow screenreader users to quickly jump to the important sections of the page.

You can navigate the page using the VoiceOver keyboard shortcuts. This time ctrl + alt with the left and right arrow keys, enable you to move through page elements in the order they are in your HTML.Ctrl + alt + space allows you to select the item you are on, which is almost like clicking on that item. When you scroll around the page in this manner it will stop VoiceOver from auto-reading the whole page. You can restart it with ctrl + alt + a and VoiceOver will carry on reading from the currently selected item.

Web Rotor

The Web Rotor is a very handy feature of VoiceOver, which makes browsing the web tremendously easy. It groups similar elements together so that you can cycle through them and quickly jump around the content to find what you are browsing for. To open up the Web Rotor press ctrl + alt + u, this will bring up lists of similar elements. Pressing the left and right arrows will cycle through element types. Including links, headings, form controls, etc. Whilst the up and down arrows will select the elements in this group, pressing enter will close the Web Rotor and continue normally browsing from the element you have just selected.

Web Spots

VoiceOver tries to select important elements of the page with a feature called Web Spots. When the page loads, it groups these elements so that you can cycle through the different spots using ctrl + alt + cmd + n to select the next one, or ctrl + alt + cmd + shift + n for the preivous one. Web Spots will purposefully miss out elements and in doing so will speed up your navigation of the page. You can still use the normal VoiceOver keyboard shortcuts to select elements close to the Web Spots (ctrl + alt + arrows).

Keyboard shortcuts:

NVDA on Windows

NonVisual Desktop Access (NVDA) is a free and open source screen reader for Microsoft Windows. It is full featured and will work with most software for Windows, as well as being highly compatible with the operating system GUI. If you want to give it a try you can jump straight to the download page and use the installer.

I used Windows 7 inside a VirtualBox VM on my Mac and had difficulty with the NVDA modifier key. The capslock key presses were unreliably received by the host OS so I used SharpKeys to remap the § key to capslock.

Basic usage

Once NVDA is installed and running it will greet you with the welcome message. At this point you can opt to use the capslock key as an NVDA modifier key - otherwise it will default to the insert key. You can use the tab key to cycle through the options and space to toggle them on or off. When you are finished you can select OK and press enter.

The NVDA modifier key is used in combination with other keys to form NVDA specific commands. For example NVDA + n will open the application’s menu and using the arrow keys we can explore the menu options. As each is selected they will be read aloud and from this menu you can change preferences or access tools and help.

If you are using a laptop you will need to change the keyboard settings. Choose the first item in the menu by pressing the down arrow then hitting enter. From this submenu select the fifth item Keyboard settings again using the arrow keys and enter. As you move from one menu item to another you will notice that it will read the item’s name and then a single letter, this is a shortcut to that menu item. The first item you can tab to is select box where laptop can be selected. You can also change the NVDA modifier key here. Again we need to use the tab key to cycle through items and space to toggle them. Enter will select OK and esc will close the window without saving anything.

To open firefox we will need to open the start menu. Use the win key (if you’re on a mac ctrl + esc works just the same) and type out firefox hitting enter to open Firefox. We can use ctrl + l to focus the url bar and type bbc.co.uk/news opening the page with enter. To start a full page read from the top you can use NVDA + down and to stop it at any time, just tap ctrl. You can scroll through elements on the page with tab or scroll backwards with ctrl + tab. To interact with the current element you can use space.

Single letter navigation

To speed up navigation of the page you can cycle through certain types of element. Pressing h will find the next available heading, whilst pressing k will find the next available link or f will find the next form element. Here is a complete of list keys. If the single letter navigation is not working you may have disabled browse mode, you can turn it back on again with NVDA + space.

The elements list

Another navigational aid is the elements. You can open it by pressing NVDA + f7. This lists links, headings and ARIA landmarks. When first opened the links will be selected and you can scroll through these elements using the up and down arrows to listen to the link text. When you find the one you want you can press enter and it will open that link. To select the headings elements you can press alt + h, to select landmarks use alt + d or to return to links use alt + k. When you select an individual header or landmark and press enter it will jump the page to that section and start reading.

Keyboard shorcuts

The majority of navigation relies on native Windows keyboard shortcuts:

NVDA specific shortcuts

Things to keep in mind

Using a screen reader means relying on keyboard shortcuts. Techniques like hidden jump to links and access keys will really aid navigation of large pages.

One thing that I hadn’t picked up until writing this post is how language can have quite an impact on accessibility. I always dread using ‘click here’ and ‘view more’ for links because the text doesn’t explain what it is. But when a screen reader user hops around the page scrolling from link to link this text is useless. Without the visual context of elements surrounding them the user has no idea where these links are going and they may need to waste time scrolling through the sorrounding content.

HTML5 semantics and WAI-ARIA both will play a large part in future assistive technologies. Thankfully a lot of work has already been done and many incorporate them now - I plan on doing a follow up post on this very topic.

Finally there is more to accessibility than screen readers. People with disabilities are enabled by a wide range of assistive technologies such as screen magnifiers, braile displays or hearing aids. We need to also keep in mind things like:

If you would like to know more, or don’t have time to try out the software yourself there’s some really good videos from Yahoo that you may find useful:

A design simplification and a writing challenge

I have been working on the redesign of this website for quite a while now. As many before have done, I have chosen to put the content first and foremost.

Historically I have had little success in terms of posting here. Lack of regularity, quality and substance can be blamed on any number of excuses, but my main issue was never really spending enough time on it.

So with the aim of changing this situation and my sketch pad full of ideas, I hear by challenge myself to write 12 articles in 12 weeks.

A fresh start

Over the last year or so, I feel my writing has improved quite a bit. Looking back at the last iteration of this site, I felt quite embarrased looking at the old content. For better or worse I have taken a gamble and scrapped the posts as well as the portfolio. Some day I may put the examples of work back, but in their current state they feel quite dated.

The design

Almost every day I use hsl and the chrome devtools to pick nice and appropriate colours. This intuitive way of representing colours lets you find colours that mathematically go together, and also easily work out what colour a definition is (compared to RGB anyhow). I have included 120 different colour schemes for the site that are generated with Less, and the site will cycle through to the next one every 2.5 minutes.

The buttons and the logo in the header are the most important design component of the site, encompassing a simple and clean style, with a slightly unusual vertical header. I initally used Raphaël to draw them as SVGs with JavaScript. But including an extra library purely to display 4 images was really overkill, not to mention that it wouldn’t work without JavaScript! So I replaced them with SVGs as background images and provided png fallbacks using Modernizr.

Keeping the JavaScript on this site as small as possible was an important goal of this site. I split the code out into a base set of functionality that is needed on every page, and then loaded a seperate file for the desktop homepage functionality conditionally with yepnope.

I have kept the layout pretty simple, and have only introduced small enhancements to the larger screen sizes, building on top of the mobile first styles. The header starts small and horizontal, saving screen space and drawing attention to the content. But then changes to the more distinctive and sticky vertical style on tablet and desktop screens. The comments follow the article on mobile, but on larger screens sit on the left hand side.