Before even one line of code is written, you can get a jump start on website accessibility by thinking about it during the wireframing and design phases. Here are five essential design elements to consider when creating your next accessible website design.
Refine Your UI/UX
Accessible UI/UX Guidelines for Designers
- Plan out heading and page structure — make sure it makes sense to readers using a mouse, keyboard, and touchscreen devices.
- Design obvious focus indicators, so users can tell where they are on a page at all times. Barely there focus indicators are almost worse than none at all.
- Use whitespace to set the body copy apart from other website elements, so it it easier for users to focus on.
- Place important actions at the top or bottom of the design. These will be more reachable with shortcuts on the actual website (ex. navigation links).
- Do not use complex words, when simple ones will do. This is especially true for the essential or interactive pieces of your website design (ex. call to action buttons).
- Heading level hierarchy is meaningful on a live website, so do not to skip heading levels in your designs/wires either.
Typography All the Things
Accessible Typography Guidelines for Designers
- Easy win: pick a font that is considered accessible from the start. This is especially important for your main body copy.
- Limit the total number of fonts families on your website and provide alternative fonts (ex. Lexie Readable) whenever possible.
- Use adequate base font size — 14px at the minimum. Bonus points for specifying the font size in terms of percentage or relative value to allow easy resizing.
- Limit the use of font variations (ex. italic, bold, ALL CAPS) and do not use underlines for items that are not links.
- When in doubt, use the Golden Ratio Typography Calculator tool to help determine the perfect font size, line-height, width, and characters per line (CPL) for your website
Same photo of rainbow stripes, as seen with normal vision, Tritanopia, and Achromatopsia (left to right).
Color & Contrast is Key
Accessible Color & Contrast Guidelines for Designers
- Use colors on the opposite ends of the color spectrum — avoid red/green and blue/yellow combos when you can.
- Be careful with light shades in general — they are hard to see for people with low vision.
- Do not rely on color alone to convey info to your users. Make sure your links have underlines or some other visual indicator besides color.
- Use solid color backgrounds — reading text on busy backgrounds is difficult, especially if it does not have enough contrast.
- Use color/contrast WCAG 2.0 testing tools and simulators to measure contrast ratios for your website design. Small text should have a contrast ratio of at least 4.5:1 against its background. While large text (18pt and larger) should have a contrast ratio of at least 3:1 against its background.
- Icons or other critical elements should also use the above recommended contrast ratios, but decorative visual elements (including logos) are exempt from contrast ratios.
Accessible Form Guidelines for Designers
- Label, label, label all form fields…did I mention, label? No matter how elegant your form design is, a user will not know what information to input if your field labels are blank.
- Make required fields obvious. Please do not use color alone to indicate a required field (see the color and contrast section for reasons why).
- Input errors/messages are a must for all forms, so designers should include them in their designs.
- Group fields into logical sections when you can. For example: first name, last name and DOB fields could all be grouped under a “Personal Information” heading.
- Make your forms as simple and succinct as possible and avoid redundancy in your accessible forms.
- Make the submit button clear and place it in a logical spot. There are all sorts of tricky submit buttons out there — different color/contrast, multiple buttons, hidden submit button, etc. If you want users to give you their information, you need to make it as easy as possible.
Accessible Media Guidelines for Designers
- Limit the use of complicated media components (ex. slideshows, videos) in your design when possible. No fear…there are alternative layout options.
- If you have to include media in your design, show links to alternative ways to access the media — even in the wireframe/design phase. It is a good reminder to developers/clients to include that element.
- Videos or slideshows should at least have a play/pause button. Ideally, you would show all possible media controls.
- Add clear, complete, and concise text descriptions to essential imagery. Think twice about non-essential images.
- Scalable Vector Graphics (SVGs) are awesome — level them up by adding additional accessibility information such as title IDs, desc IDs, and ARIA tags.
- Finally, make sure your design works even if the media is missing. Thinking about graceful design degradation or progressive enhancement from the beginning, will help your website design be more useful to more users.