While there are many techniques that go into creating an accessible website, several important elements are highlighted and explained on this page.
Semantic Structure
It’s important to use HTML tags to structure your website so that users with disabilities can navigate the site successfully. Website pages with proper HTML semantic structure will allow keyboard only users the ability to move from section to section of a page to find out what information is present. Those semantic tags include headings, lists, regions, and ARIA landmarks.
Keyboard Navigation
Your website should be navigable via keyboard. A keyboard only user should be able to use the Tab key to move among the interactive elements on a web page, including links, form fields and buttons.
- Nielsen/Norman Group information on keyboard-only navigation
- WebAIM keyboard accessibility techniques
- WebAIM semantic structure: regions, headings and lists
- Skip Navigation links to bypass repeated menu items
Image Descriptions (ALT text)
Alternative (or alt) text provides a description of an image to convey necessary information to a user who cannot see it. If an image is decorative only (ornamental rather than informational), you can include null (or blank) alt text. Alt text should be brief and descriptive. You don’t need to include “image of” or “picture of” in the text.
- WebAIM guide to writing ALT text
- Diagram Center image description guidelines for various image types
- Guidelines for describing STEM images
- Alt text decision tree (W3C)
Fonts and Color Contrast
Readable, distinguishable fonts and sufficient color contrast between text and background make your website more usable and accessible.
- Use clear, readable fonts that have adequate space between letters
- Make sure the font sizes are 12 pts (16 px) or higher
- Use a color contrast analysis tool to check that there is enough contrast between font color and background color
Forms
Forms should be created using native HTML form controls. This will result in greater keyboard accessibility and compatibility with assistive technologies. Form labels and fields need to be associated with each other so a user can determine what data they need to fill in.