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.