Accessibility isn’t just a “nice-to-have” feature; it is the baseline of a competent website. However, many site owners find the Web Content Accessibility Guidelines (WCAG) overwhelming.
To help you get started, here is a practical guide to the fundamentals of accessible design.
The DO List
DO maintain strict contrast ratios. Text must be readable against its background. We aim for a ratio of at least 4.5:1 for standard text. Tools like WAVE can help you spot failures where your grey text is too light against a white background.
DO use semantic HTML. Screen readers rely on structure. Use <button> for actions and <a> for links. Never use a clickable <div> when a native element exists.
DO provide text alternatives. Images need alt text that describes their function, not just their appearance. If an icon is purely decorative, ensure it is hidden from assistive technology so it doesn’t clutter the audio stream.
The DON’T List
DON’T rely on colour alone. Never use colour as the only way to convey information (e.g., “Click the red button to delete”). Colour-blind users may miss this cue entirely. Always add a label or icon.
DON’T banish the focus ring. That outline that appears around a link when you press Tab? That is vital navigation for keyboard users. Don’t hide it with CSS just because you think it looks “messy.” Style it to match your brand instead.
DON’T use “Click Here” links. Links should describe their destination. A screen reader user skipping through links will hear “Click Here, Click Here, Click Here” and have no idea where they go. Use descriptive text like “Download our guide” instead.
technicalTakeaway
When coding, always check your “Accessibility Tree” in the browser developer tools. If your beautiful custom button shows up as just text rather than button, you have broken the contract with your user.