Tips for Designing Your Website with Accessibility in Mind

by | Aug, 2019

Designing your website with accessibility in mind can be a daunting task, especially since there are so many options for making a website accessible. To get started, consider these basic design features, which meet Web Content Accessibility Guidelines (WCAG).

Associate a label with every form control: Labels help readers understand the required input for the form field. Create labels by using a for attribute on the <label> element linked to the ID attribute of the form element or by using WAI-ARIA attributes. 

Include Alternative Text for Images: Alternative text describes images to viewers (and search engines). Include alternative text for informational and functional images. Decorative images should have empty text alternatives.

Identify Page Language and Language Changes: Identify page language and language changes of every page by using the lang attribute in the html tag.

Use Markup to Convey Meaning and Structure: Using the right mark-up for headings, lists, tables, and more will improve the structure of your content.

Help Users Avoid and Correct Mistakes: If your website will include forms, plan on including clear instructions, messages, and notifications to assist with completing forms. It also helps to give specific explanations, corrections, and to provide a very forgiving format.

Other helpful tips for designing your website with accessibility in mind include: 

  • having the reading order match the logical order of the information presented
  • helping the user understand nonstandard interactive elements
  • making sure interactive elements are keyboard accessible 
  • using code that fits the user’s technology
  • avoiding CAPTCHA, if possible

We found these tips to help you meet Web Content Accessibility Guidelines (WCAG) requirements in the article Tips for Getting Started – Developing for Web Accessibility. Read the article for more documents, tutorials, and user stories.