Accessibility for UX Designers II

Dec 13, 2012

Second part of notes from an Accessibility workshop with Derek Featherstone.

Following on from the earlier post, and to quickly recap. This post relates to some of the things that I picked up from the Accessibility for UX Designers workshop, that was part of the Inspire Conference here in Leiden.

Notes from the workshop

Here are some notes and examples, I will try to put some context in when possible:

  • Example: look in the real world to see how solutions are provided, and see how to bring those into the digital world. Here is a access controller for one-handed use of video games consoles. All of the various keypads are interchangeable, and modular. This means that if you want to switch the D-pad to be closer to the thumb, then you could, or alternatively you could place it elsewhere. In the digital world we have to be flexible and modular, and not set and rigid.

  • Tip: cognitive impairment is very tricky it seems. This could cover people with a range of disabilities and requirements, a person could suffer from ADHD, dyslexia, dyscalculia, that could relate to mental illness, brain injuries, or neurological disorders. Good practice would be to use clear language, do not over complicate when you can give a clearer message.

A confusing error message from Microsoft
An over complicated message
  • Something that we may find whimsical or fun, could break the routine for somebody with cognitive impairments. People suffering with autism may have a routine behaviour that they are used to, and unexpected change can create anxiety and distress.

Accessibility is not binary, it is not all-or-nothing or black and white. If you are tired, what happens to your memory?
Derek Featherson, Simply Accessible (paraphrase)

  • Turn off CSS and see what story the page tells you. This is perhaps obvious, and something that we do already, however you should also try to see what the page tells you - are the lists nested correctly, is it clear from the start where you are and if the expectation of the page is met.

  • Note: In high contrast mode, on Windows machines, the background-image property will not be shown.

  • Example: Forms, such as this form, which uses the Likert scale can be problematic for a number of reasons. If a user is using a magnified display, then they may have issues navigating from left to right, this can be counterbalanced by using zebra striping so that the user will be able to follow along the stripe. If a user has a cognitive impairment however, then they need to read the title of the question, in this example, How helpful were the new forms and guidelines, then they would need to read the secondary question, eg. The guidelines for completing this IRB form were thorough and informative., then they need to read the rating scale, then they will need to find the box to check, and repeat. As the proximity of the questions, the legend, and the boxes are very different, then the process could be confusing, and frustrating to use.

  • Tip: A simpler solution to above? Why not simply have a drop-down where you can fill in the rating from Strongly disagree to Strongly agree, not only is this better for accessibility, but it is easier to fill in for users without visual, motor or cognitive impairments.

  • Example: Don’t split fields, the below example is asking the user to fill in their telephone details. Instead of just asking for the phone number, the form expects an area code, a local number, and an extension. It also expects you to manually select whether it is a mobile or a landline. An example could be a person with a cognitive disability, they would need to understand what the second box was for, what the third box was for, etc. This could be much better, not only for accessibility, but also from a simple UX standpoint. It is much easier to paste a number into one field for example!

A form to enter a telephone number, split into 5 separate areas.
Form with seperate areas for area code, number, extension
  • Voice activated software is something that you may not think about, an example of how a user may navigate a page could be like below:

mouse move left, faster, faster, stop, mouse move right 20, mouse move down, stop.

  • Another way of navigating using voice, could be to use mouse grid. This creates a 3 x 3 box, and the person would say “1” to concentrate on the top left area of the screen. It would then redraw a 3 x 3 grid, until you can narrow down to the area.

  • Important: The visual contrast needs to be much greater when using the keyboard to navigate through a website. Go to your site, hit TAB a few times and then try and find out where you are. If you add a visual identifier then it makes it much easier for users who are using the keyboard to visually know where they are on a page, an example could be the Guardian newspaper website, if you hit TAB then you will see there is a visual identifier to show where you are on the page (although in some areas it could probably be better). What the Guardian do really well is the top level navigation, there are other sites that would TAB through every single item in the submenu. If it is a navigation item, then the arrows should be used to open/close them, so that you do not have to TAB through every item.

  • Tip: Have a logical tab order, check out Youtube, a site that you would expect to be great to use, however if you keep hitting the tab then you will see the visual identifier eventually jump from the far left column, over to the far right column, and then finally to the content in the middle. Build your sites with the important information coming first, and use CSS for placement. Code with this in mind, rather than looking at a page from top left to bottom right.

  • Make developers test the site with a keyboard, put it in their design sprints.

The above line seems to be as good a point as any to finish this post. I will write one more on the workshop, and then split out some topics to look at further.