Below a checklist how developers can contribute to a product’s accessibility
Use semantic HTML
As a developer, prioritize using native HTML elements whenever possible. These elements inherently support assistive technologies by clearly communicating their roles and functionalities to screen readers and come with built-in keyboard interactions for interactive components. Utilizing native HTML not only enhances accessibility but also simplifies development and maintenance, improves mobile performance, and boosts SEO.
Ensure a correct Heading structure
See Foundation section for details.
Use ARIA attributes when applicable
Accessible Rich Internet Applications or ARIA is a W3C specification for enhancing accessibility in ways that plain HTML cannot. ARIA should not be used when HTML provides sufficient semantics. See Webaim Page.
Support keyboard navigation
All interactive content and elements should include keyboard functionality. Do not rely solely on a mouse or on gestures. Also consider the order in which the focus should move to enable logical and convenient use. A common flow might begin with the header, followed by the main navigation, then the content navigation (from left to right, top to bottom), and end with the footer.
Test your app by only using your keyboard without any pointer devices.
Better orientation
At the start of a page, add skip links and use different elements (e.g. <nav>, <main>, <footer>) to better structure the page. The header component already has skip links out of the box.
Landmark roles identify regions in a page, and act much like native HTML tags would when it comes to semantics.
Mark links that open in a new tab or window
See Links on how to mark and add a announcement for screen readers.