
Explore ten practical website accessibility practices covering alt text, colour contrast, heading structure, keyboard navigation, accessible forms, multimedia, responsive design and regular testing.
Introduction
In today’s digital environment, a website is often one of the first points of contact between a business and its customers. When a website contains accessibility barriers, some people with disabilities may find it difficult to access content, complete forms or navigate important services.
Digital accessibility supports people with visual, auditory, motor and cognitive disabilities in using websites more effectively. It can also improve usability, content structure and the overall digital experience for a wider audience.
The following ten practices provide a useful starting point for identifying and reducing common website accessibility barriers.
1. Provide Text Alternatives for Non-Text Content
Images, icons and image-based buttons should include appropriate alternative text. Screen readers use this information to communicate the purpose or meaning of visual content to people who are blind or have low vision.
Good example:
“Woman using a laptop in an office setting.”
Poor example:
“IMG_00123.jpg”
Alternative text should be clear and concise. Avoid adding unnecessary keywords or repeating information that is already available nearby.
2. Ensure Sufficient Colour Contrast
Text and important interface elements should be easy to distinguish from their backgrounds.
WCAG includes contrast requirements such as a minimum ratio of 4.5:1 for most normal-sized text and 3:1 for large text.
Tools such as contrast checkers, WAVE and browser accessibility tools can help identify possible contrast issues.
Colour should not be the only method used to communicate meaning. For example, an error message should include text or an icon rather than relying only on red colouring.
3. Use Clear and Descriptive Headings
Headings help organise content and make pages easier to understand and navigate.
Use headings in a logical order:
- H1 for the main page title
- H2 for major sections
- H3 for subsections
A user should be able to review the headings and understand the overall structure of the page.
Headings should be selected according to structure rather than appearance.
4. Make Functionality Available by Keyboard
Some users navigate websites without a mouse and depend on a keyboard or assistive technology.
Users should be able to:
- Move through links, buttons and form controls using the Tab key
- Activate controls using Enter or Space where appropriate
- Open and use menus, dropdowns and forms without a mouse
- See a clear visible focus indicator
A useful test is to navigate the website using only the keyboard. Focus should move logically, and users should not become trapped inside a component.
5. Provide Captions and Transcripts for Multimedia
Video and audio content should include appropriate alternatives.
Videos with spoken content should provide accurate captions. Audio content such as podcasts should provide a transcript where relevant.
Automatically generated captions can be useful as a starting point, but they should be reviewed for accuracy.
Transcripts can also help users who prefer reading content or who are unable to play audio.
6. Create Accessible Forms
Forms are commonly used for contact enquiries, registrations, bookings and payments.
Each form field should include:
- A visible and correctly associated label
- Clear instructions where required
- Specific and understandable error messages
- Keyboard-accessible controls
- Visible focus indicators
Do not rely on placeholder text as the only label.
Instead of displaying a general message such as “Error,” provide a useful explanation such as “Please enter a valid email address.”
7. Avoid Uncontrolled Media and Intrusive Pop-Ups
Automatically playing video, sound, animation or unexpected pop-ups can make a website difficult to use.
Users should be able to pause, stop or mute media where appropriate.
Pop-ups and modal windows should:
- Receive keyboard focus when opened
- Be usable with a keyboard
- Include a clearly labelled close control
- Return focus appropriately when closed
Websites that include significant motion should also respect users’ reduced-motion preferences.
8. Use Native HTML Before ARIA
ARIA can help assistive technologies understand complex or dynamic interface elements.
Examples include:
- aria-label for controls that do not have visible text
- aria-expanded for expandable menus
- aria-live for important dynamic updates
However, native HTML elements should be used whenever possible.
For example, use a real <button> element instead of placing button behaviour on a generic <div>.
ARIA should support correct HTML structure rather than replace it.
9. Support Responsive Layouts and Text Resizing
A website should remain usable across desktop, tablet and mobile screen sizes.
Layouts should adapt without hiding important content or creating unnecessary horizontal scrolling.
Text and interface elements should also remain usable when users zoom or increase text size.
Relevant checks include:
- Testing at 200% zoom
- Using flexible layouts
- Avoiding fixed containers that clip content
- Ensuring buttons and links remain usable
- Checking that text does not overlap
Relative units such as rem can support more flexible text sizing.
10. Test and Review the Website Regularly
Accessibility issues can appear when content, plugins, templates or website features change.
Regular testing can help identify barriers before they affect more users.
Automated tools can assist with identifying some issues, including:
- WAVE
- axe DevTools
- Lighthouse
Automated tools cannot identify every accessibility barrier. Manual testing is also important, including keyboard testing, screen-reader checks and review of content structure.
Testing with people who use assistive technologies may also provide valuable feedback.
Why Website Accessibility Matters
Digital accessibility supports more inclusive online experiences and may provide broader business benefits.
Wider Access
Reducing accessibility barriers can help more people interact with services, information and online content.
Better User Experience
Clear headings, readable content, accessible forms and predictable navigation can improve usability for many users.
Website Quality
Accessibility practices often support stronger content structure, clearer interfaces and more consistent website behaviour.
Search Visibility
Some accessibility practices, such as meaningful headings, descriptive links and well-structured content, may also support search engines in understanding website content.
Ongoing Risk Management
Regular accessibility assessment and documentation can help organisations understand observed barriers and prioritise improvement work.
Final Thoughts
Website accessibility is not a one-time task. It requires ongoing attention as content, technology and user needs change.
A practical approach includes assessing the website, testing relevant pages and interactions, identifying observed barriers, documenting findings and supporting improvements where agreed.
TechDefined provides digital accessibility testing and assessment services. We identify accessibility barriers observed within the agreed testing scope and provide practical recommendations to support accessibility improvements.
Ready to Review Your Website’s Accessibility?
Contact TechDefined to discuss an accessibility assessment scope for your website.