Web accessibility is not just about compliance — it is about ensuring everyone can use your website, regardless of ability. Approximately 15% of the global population lives with some form of disability. With the European Accessibility Act coming into effect in June 2025, accessibility is also becoming a legal requirement for many businesses. Here is a practical guide to building accessible websites.
Understanding WCAG 2.2
The Web Content Accessibility Guidelines (WCAG) 2.2 is the current standard, organised around four principles known as POUR: Perceivable (information must be presentable in ways all users can perceive), Operable (interface components must be operable by all users), Understandable (information and interface operation must be understandable), and Robust (content must be interpretable by assistive technologies).
WCAG defines three conformance levels: A (minimum), AA (recommended for most sites), and AAA (highest). Level AA is the standard most regulations reference and is what we recommend as a baseline. Each level builds on the previous one, adding more stringent criteria.
Essential Accessibility Practices
- Semantic HTML: Use proper HTML elements — headings (
h1-h6), navigation (nav), lists (ul,ol), and landmarks (main,aside,footer). Screen readers use these to help users navigate content structure. - Keyboard navigation: Every interactive element must be operable with a keyboard alone. This means proper focus management, visible focus indicators, and logical tab order. Never remove the default focus outline without providing an alternative.
- Colour contrast: Text must have a contrast ratio of at least 4.5:1 against its background for normal text, and 3:1 for large text (18px bold or 24px regular). Use tools like the WebAIM Contrast Checker to verify.
- Alt text for images: Every informational image needs descriptive alt text. Decorative images should have empty alt attributes (
alt="") so screen readers skip them. - Form labels: Every form input must have an associated label. Use the
forattribute to connect labels to inputs. Placeholder text is not a substitute for labels.
ARIA: When HTML Is Not Enough
ARIA (Accessible Rich Internet Applications) attributes provide additional context to assistive technologies when semantic HTML alone is insufficient. Common use cases include marking current page in navigation (aria-current="page"), labelling icon-only buttons (aria-label), announcing dynamic content changes (aria-live), and describing expanded/collapsed states (aria-expanded).
However, the first rule of ARIA is: do not use ARIA if you can use native HTML. A <button> element is always better than a <div role="button"> because it comes with built-in keyboard support, focus management, and screen reader announcement.
Testing Accessibility
Automated testing catches approximately 30-40% of accessibility issues. Tools like axe DevTools, Lighthouse, and WAVE scan for common problems — missing alt text, insufficient contrast, empty links. Run these tools regularly, but do not rely on them exclusively.
Manual testing is essential. Navigate your entire site using only a keyboard. Test with a screen reader — VoiceOver on macOS, NVDA on Windows, or TalkBack on Android. Try increasing your browser's text size to 200% and verify the layout remains usable. These manual checks reveal issues that automated tools miss, such as confusing reading order, poorly described images, and broken keyboard focus traps.
Legal Requirements
The European Accessibility Act (EAA) requires digital products and services to meet accessibility standards. For Malta businesses, this means websites and mobile applications used for eCommerce, banking, transport, and other services must comply with EN 301 549 (which references WCAG 2.1 AA). Non-compliance can result in enforcement actions and penalties.
At Born Digital, we build accessibility into every project from the start. Retrofitting accessibility is always more expensive than building it in from the beginning. Whether you need an accessibility audit of your existing site or want to build an inclusive website from scratch, our team ensures your digital presence works for everyone.