Accessibility
Making websites accessible

I’ve been learning how to make websites accessible through working on my own site, aiming to meet the principles of the Web Content Accessibility Guidelines (WCAG). These are internationally recognised standards that make digital content more accessible for everyone, including people with disabilities.

The four core principles – Perceivable, Operable, Understandable, and Robust – provide the structure for accessibility. Here’s how my site addresses each.

Content is presented in ways that can be perceived by a wide range of users and devices.

• All text has high contrast, ensuring clear legibility.
• Images include descriptive alt text, allowing screen readers to describe visual content.
• The site uses relative font sizes that respect users’ browser accessibility settings.
• The text and layout can be zoomed in, making the site easier to read for those who need larger content.
• No motion, transitions, or visual effects are used, ensuring the site remains accessible to users who prefer reduced motion.

All functionality can be operated through multiple input methods.

• The website can be accessed and navigated using a keyboard for those unable to use a mouse.
• Clear visible focus indicators show which element is currently active when navigating via keyboard.
• The site uses consistent and familiar navigation patterns.
• Buttons are used for on-page actions rather than links, supporting proper keyboard and assistive technology behaviour.

Information and navigation are presented in clear, predictable ways.

• Page structure, headings, and navigation are consistent throughout the site.
• Links and buttons are clearly labelled to describe their purpose.
• The layout responds to different screen sizes, ensuring the site can be used on any device.

The site is built to work reliably with modern browsers, devices, and assistive technologies.

• Semantic HTML elements are used throughout, giving structure and meaning to content.
• ARIA attributes are applied where needed, to describe filter controls and clarify button states.
• The code and accessibility have both been tested.

I’ve tested the different pages using the WAVE web accessibility evaluation tool and Google Lighthouse:

While my website scores very highly, I still want to learn more about ARIA labels and how to use screen-reading software. This will help me better assess the site for people with visual impairments who use screen readers to browse the web.

If you experience any accessibility barriers or have suggestions for improvement, please get in touch.