The definitive guide to accessibility for developers
Introduction
If you’re a front-end developer building web pages, I’ve got a question for you: Your web pages look fine, but are they ‘accessible’ for everyone?
Your visitors could be visually challenged, can have a physical disability, could be hearing impaired or simply an aged person who needs to see bigger fonts.
‘Accessibility’ is taking center stage, especially in the US where 28% of the adult population* can have some form of disability.
In some organizations, accessibility is a mandate while a nice-to-have in others. Either ways, you can embrace this requirement early in your development cycle and build an inclusive website.
(*) Source: CDC
Reality Check: Testing your pages for accessibility
Getting your webpage to replicate the Figma design is a great start but you don’t need to stop there. Let’s go one step further and run some tests for accessibility. Luckily there are quite a few tools readily available and for free.
Automated Tools to Start With
- Accessibe: Quick automated scans and fixes
- BrowserStack: A browser compatibility checker that also tests accessibility
- WAVE Extension: Real-time accessibility checks right in Chrome
And then — Manual Checks That You Need
- Screen Reader Testing: Fire up NVDA (Windows), JAWS, or VoiceOver (Mac)
- Keyboard Navigation: Can you use your webpage with just a keyboard? Try it
- Form Testing: Clear labels, error messages that make sense
- Structure Check: Use ‘Meta 1 Click’ Extension for alt text and heading structure
Your full blown test checklist
Code Better: Best Practices for your next web page
1. Skip to Content
Add Skip to the content link at the top of your webpage for keyboard users to bypass repetitive navigation.
Pro tip: Add Skip to Menu and Skip to footer links also keyboard and screen reader users will thank you.
2. Semantic HTML that makes sense
Use proper semantic HTML tags while creating sections to provide proper meaning and clear structure (e.g., <header>, <main>, <footer>, <section>) . This will improve both SEO and Accessibility.
❌ Bad Practice
<div>Title</div>
<div>Content...</div>
<div>Footer</div>✔️ Good Practice
<section>
<h1>Title</h1>
<p>Content...</p>
</section>By using semantic elements, the web page structure and usability for screen readers and search engines can be improved.
3. Forms
Forms are important in web pages, they let users sign up, share information, and connect with what they need. At the same time, forms provide essential data to clients. Making these forms accessible to everyone is one of the best practices.
- Keyboard Accessibility: Ensure each element is focusable in form in a logical order. Also, make sure the form can be submitted using the Enter key.
- Labels: Using clear and descriptive <label> tags for every input field in a form helps all users understand the purpose of each field, especially those who rely on assistive technologies.
Learn more about accessible form labels from W3C forms labels tutorial. - Form Feedback: Provide clear form error messages and make sure they are read by screen readers, so users are alerted to issues as they interact with the form.
4. Contrast
Ensure there’s enough contrast between text and background colors across your website. It will help users with visual impairments easily read and interact with content on the website. The contrast ratio should meet WCAG (Web Content Accessibility Guidelines) standards to improve accessibility for all users.
Curious to check if your website color meets WCAG requirements or not, Check here and change them accordingly your users (and their eyes) will thank you!
5. Heading Structure
Keep your heading hierarchy clean - it's not just for SEO, it helps screen reader users navigate your content. Refer to MDN for more details.
6. Carousels
If your webpage has carousels, consider the following three tips/steps to ensure they are accessible to everyone.
- Adding play or pause buttons:
Let us consider a situation where a visually impaired user visits a webpage that has a carousel in it, and it has autoplay. Then the user accesses the carousel since it has autoplay. It changes quickly and the user may not be able to read all the content as the speed may be difficult for them.
Adding a play/pause button for carousels will be helpful for users who rely on assistive technologies, enabling them to read at their own pace and understand information properly
Also, ensure you pause the carousel animation when any element in the carousel has been focused ( through tab/mouse hover)
If you are wondering what a play/pause button on the carousel is, check here
2. Keyboard Navigation:
The carousel needs to be tested manually using the keyboard to check if all carousel elements are focusable and working as expected. Also, every element in the carousel needs to be focussed Ex: CTA on the image, Next slide, Prev Slide, play/pause, and carousel items. And focus order needs to follow logical flow.
3. Semantic Structure and Aria labels:
Use more semantic HTML such as <section> tag as wrapper along with Arialabels as products carousel, <button> tag for slider dot buttons, prev slide, next slide, and also add aria labels for them. (such as aria-label=” slider 1 of 8” to provide clear information about to users to know current position ) This will also ensure screen readers read the current position.
7. Tabs
- Keyboard Navigation:
Ensure users can interact with the Tab section using the keyboard.
Tab key to move focus, Arrow keys to navigate between tabs, and also Space or Enter key to activate tabs.
2. Semantic usage:
Structure the tabs with semantic HTML and proper aria attributes.
Use semantic tags such as <ul>,<li> and <button> tags.
Use proper ARIA attributes for tags, such as role=”tablist” for tabs and role=” tab” for each tab, role=”tabpanel” for tab content, and aria-selected=” true/false” for tabs to help screen readers be aware of which tab is selected.
3. Focus indicators :
Make sure focus indicators are visible for users who navigate the site using the keyboard.
8. Keyboard Navigation
Ensure the block/page is accessible via keyboard to verify accessibility for users relying on assistive technologies.
Tools like screen reader extensions and JAWS can help us verify how users with visual impairments will experience your webpage.
9. Writing Alt Text That Makes Sense
Provide clear descriptions for images and icons. avoid generic terms like “icon” or “image” and stay away from using symbols like “-” or “_”. Ensure alt text is concise and screen-reader friendly. Refer to MDN for details.
❌ Bad Practice
Alt = “ OnlineFax_MostImplementable_Total-_PNG ”
✔️ Good Practice
Alt = “ G2 Best Results summer 2024 badge “
❌ Bad Practice
Alt = “Client_icon”
✔️ Good Practice
Alt = “Company Logo“
10. ARIA Headings When You Need Them
When you can’t use semantic headings (it happens), use ARIA. Add ARIA attributes for headings aria-level and role=”heading” attributes for non-semantic elements that need to act as headings. When creating blocks from Wordpress backend.This improves accessibility for screen readers. Refer to MDN for more details.
<p class="pb-3 h3" role="heading" aria-level="3">About us</p>11. Video Titles
Always include a descriptive title for embedded YouTube videos. Descriptive titles help users, especially those relying on screen readers, understand the content of the video without needing to watch it, making this crucial for users with visual impairments.
12. Better CTA Text
Skip the generic “Click Here” — tell users what they’re actually going to get.Ensure that all links are descriptive enough for users to understand their purpose, avoid using “Click Here” or “Learn More” more. Instead, use meaningful text to CTA.
13. Handling Strikethrough Text
Help screen readers understand price changes Strikethrough Text: Add an aria-label for strikethrough text to ensure screen readers convey the correct information.
<span class="text-decoration-line-through" aria-label="Previous price $18.99">$18.99</span>This allows screen readers to announce the intended information. Refer to MDN for more details.
Tips and Tricks
- Highly restrictive firewall settings may block cloud based testing tools. For e.g Cisco website did not let us run ‘Accessibe’. We just ran the ‘Wave’ tool instead
- If you’re a WordPress developer using third-party plugins, make sure they meet accessibility standards before installing them.
- [Strategic tip] : If your website is built on reusable blocks and you are on a mission to improve website accessibility, don’t resolve each page. Instead, take a component approach, fix each component and the pages assembled would be accessible.
Stakeholders you need to engage with:
Apart from you doing all of the above, there are other stakeholders who have a role to play
UI Designer
While developing pages/components, ask your designer to
- Choose color combinations that meet the WCAG contrast ratio guidelines, for users with visual impairments, including those with low vision or color blindness.
- Choose fonts that are easy to read with clear characters and sufficient spacing so that this will be readable for all including dyslexia or other reading disabilities.
Content publisher (marketing)
Things your content/marketing team needs to know
- Videos uploaded should have captions.
- Images added should have a good descriptive Alt text.
- Structure content with proper headings.
- Ensure descriptive and meaningful Links & CTA Text.
Product manager
Things your product owner would want: After implementing all the accessibility features, complete an Accessibility Compliance Report (ACR) and send it to your Product Manager. They will review the report and share it with the Legal team.
Conclusion
Remember: Accessible websites are more inclusive websites. These practices don’t just help users with disabilities — they make it better for everyone.
Got questions? I would love to help. This is Sreenath and I am “accessible” 😊 at Sreenath@codewalnut.com.
