Even better than reviewing a design for accessibility is designing with accessibility in mind from the start. It helps us consider the wide range of people who use our site and sets us up to build a more accessible site.
Here are three things we can do to design more accessible things.
Before opening up your favourite design tool (like Sketch or Figma or XD), write out the design in text in a numbered list. Do this with pen and paper, or in a text editor or docs tool.
Write out:
- section headings;
- content and function of images;
- text of links;
- names of form elements;
- text of buttons.
- Writing the content in a numbered list lets us be clear on:
- the source order of elements in the HTML;
- the hierarchy of elements on the page (which can help us make choices about layouts on different screen sizes)
- the focus order of the page.
- Writing headings lets us divide the page up into logical sections, logical groupings of content.
- Writing the text of images means we’ll already have
alttext (or something that’s a good start on it). - Writing the text for links now highlights why “click here” isn’t helpful link text.
- Writing the names of form elements forces us to think of good labels.
- Writing the text for buttons now highlights why “”Submit” usually isn’t helpful button text.
Go through the text-only design and expand it to use only HTML elements. No CSS at this point! That means no presentation (except things baked into defaults like headings styles) and no layout (everything will be on one column).
- Designing with only HTML gives us the same benefits as writing the page out in a number list. The source order, hierarchy of elements, and focus order of the page are clear.
- We can only use one element for one thing, so it forces us to decide what each thing really is. For example: is this a link or a button? (If it’s for navigation, use a link. If it’s for an action, use a button.)
- Designing with HTML forces us to decide on the function of each thing (however we end up styling it). For example: is it a multiple-choice question where we can only pick one? That’s a group of radio buttons.
“The Happy Path” is the “everything went well and nothing went wrong” scenario. While this is a nice idea, it doesn’t represent the real world and how people and computers interact.
Review the design and try and break it. Now annotate the design with how to help the person using the page. If you’re reviewing it’s okay to CSS now!
One nice trick for doing this is to flip it and try the opposite.
- Ask yourself “if I was trying to do this wrong on purpose, what would I do?”” For example: imagine not entering data in any required fields, or entering the wrong format.
- Pick an element and flip. For example: if an error message uses colour, check what it would be like without colour.
Going off the Happy Path forces us to:
- consider error states explicitly. It makes us write error message up front.
- think about the wider range of human experience. It helps is realise where we might be adding barriers by making assumptions about a person’s abilities.