On this page
Introduction
Writers are responsible for writing accessible content, and designers are responsible for designing accessible interfaces, but it doesn’t matter a bit how accessible the designs and content are if the developer doesn’t implement the project to be accessible.
While there are definitely accessibility-specific code elements that developers should learn, the first step to delivering an accessible website is to make sure that the HTML and CSS validate, and that the Javascript isn’t throwing any errors.
Guidelines
- Understand the role that CSS plays in presenting content and its impacts on accessibility.
- Use HTML over WAI-ARIA and native components over custom components.
- Support keyboard navigation.
- Understand and use HTML containers and landmarks.
- Implement focus states and a logical focus order to help users navigate and understand where they are.
- Help users understand inputs and help them avoid and correct mistakes.
- Use ARIA attributes when applicable.
- Give users a way to skip top-level navigation to access main content.
- Avoid images and iconography in pseudo-elements.
- Make SVGs and other icons accessible to assistive technology.
- Hide decorative elements from screen readers.
- Create alternate routes to access information.
- Ensure links are visually identifiable and have clear :focus and :active states.
- Ensure HTML documents have a language attribute.
- Learn about hidden content techniques to learn how and when to add hidden content
- Become familiar with basic accessibility testing.
- Test regularly — don’t wait for the Testers to find your bugs for you.
- More guidelines for developers: