James Aylett: Accessibility Advent: don't jiggle the layout

Published at
Thursday 13th December, 2012

(Throughout Advent I’m sharing some hints as to how web developers can make my life as a speech recognition user easier.)

Another problem caused principally by the relative difficulties of driving the pointer by voice compared to with a mouse or tablet: please don’t let elements of the layout move.

It’s surprising how many reasons people think they have for moving elements around the page. Advertising banner stripes that push down the entire page, but are not of the same height from page to page; emphasizing buttons on rollover in a way that changes the size and so forces the entire navigation bar to layout differently. Things that slide out on rollover, and then require you to move away before they disappear, to get to something alongside the original trigger area.

These are really two different problems. The first is when, once a page is loaded and rendered, moving the pointer around on that page will move things around. This may be due to poor implementation (if you apply a bold style to text buttons on rollover, for instance, you need to do something to stop them from changing size), but increasingly people are deliberately opening menus and utility panels on rollover. If you have a series of them, you need to be very careful that panels you open don’t conceal the hit zones to open other panels – or, maybe, open them only on click. Even worse, there are sites that slide down a notification bar – “you have received the using this site for 10 minutes badge!” – right over the top of the navigation bar.

In both cases, a mouse user can backtrack the pointer quite easily to let the pop-up close; if a Dragon user is in the middle of using MouseGrid, at best they can use relative mouse movement to duck the pointer out of the way and back again, without closing the MouseGrid. However you also disrupted the process of using MouseGrid, which is to iteratively move the pointer closer to the thing you want to click on – if the visible context you are using to guide this process changes underneath you, it’s easy to lose track of what’s going on.

The other problem is when moving through a series of pages on a single site, having set the mouse pointer at the right place to advance by one page (such as with a piece of longform journalism split across several pages). Everything is fine here unless the vertical position of whatever we have to click on changes page by page. This can either happen if story navigation is only beneath the text (since the text is unlikely to fill exactly the same vertical height on each page), or – as I’ve seen a lot recently – if there is unrelated content above the story navigation somewhere, such as a large image banner for other content on the site, and that is not a standard height. (Say what you like about Internet advertising, it does at least have standard sizes.) There is also the possibility of elements moving horizontally, although this is rarer – the only example I can think of is where I want to hit “next” in the pagination controls, but they are centered or left aligned and do not contain every page (so they may show 1-2-3-4-5-Next on the first page, but 2-3-4-5-6-Next on the second page; with proportional fonts, the “next” link will move around).

It is, however, generally okay to move things around when I do something deliberate, either by clicking or by a keystroke. There’s a clever trick I’ve seen once or twice recently which does just this specifically for users of some assistive technologies (and possibly also keyboard), which I’ll write about tomorrow.