Auditing and improving accessibility on Crisis.org — a case study

Aiming to improve the User Experience of Crisis.org.uk

Crisis is the national charity that provides support for the homeless. I carried out a UX review on their website in order to suggest some accessibility related improvements. I worked on this case study in my spare time during December 2019.

I decided to focus on keyboard accessibility and screen reader compatibility for this audit, as these are the main ways that users with disabilities navigate through a site.

Note — this is not a full accessibility audit of the entire site, I just focused on the main areas I can recommend for improvement.

Keyboard accessibility

Keyboard accessibility is one of the most crucial aspects of web accessibility. It is important for mobility impaired users who aren’t able to use a mouse, as well as visually impaired users who use a keyboard for navigation alongside a screen reader.

Navigation controls

A keyboard user would use the Tab key to navigate through the interactive elements of a website, such as links, buttons, or form fields.

When an element such as a button has keyboard ‘focus’ it means that it can be interacted with (the equivalent of a mouse hover). A basic focus indicator is automatically provided by the web browser and is usually shown as a border (an outline) around the focused element.

Users can then hit the Enter key to select the focused element.

Element without keyboard focus (left), and same element with keyboard focus (right)

There are other common interactions, such as the space bar to select, arrow keys to navigate, and escape to close a dialog/popup.

Navigation order

The navigation order is also important, this being the order in which interactive items receive keyboard focus (or simply put, the order in which you can tab through elements on the page).

The order should make sense to the user, for example it should start in the top left, and move…