10 Chapter 10: Accessibility & Usability

Modern web design isn’t only about aesthetics – it’s about inclusion and clarity. An accessible and usable site ensures that all visitors, regardless of ability or device, can find and interact with your content easily. Accessibility is both an ethical responsibility and a legal standard, while usability determines whether people stay and engage. In this chapter, we’ll explore how to evaluate and improve both.

Design for Everyone: Why Accessibility Matters

When websites exclude users, the consequences can extend far beyond inconvenience. In 2008, Target faced a lawsuit for having an online store that screen readers could not navigate. Domino’s Pizza faced a similar case in 2019, when a blind customer couldn’t order through their site. These high-profile examples remind designers that accessibility isn’t optional – it’s a professional standard. Accessible sites reach broader audiences, rank higher in search engines, and reflect well on your brand.

Think of accessibility as digital hospitality – your job as a designer is to make sure every guest feels welcome.

Understanding Accessibility

Accessibility ensures that everyone – including people with disabilities – can use and enjoy your website. This includes users who rely on screen readers, use keyboards instead of mice, or need higher text contrast to see clearly.

The Web Content Accessibility Guidelines (WCAG) define four main principles, known as POUR:

Following POUR means writing clean, semantic HTML and designing with empathy for different user experiences.

Practical Accessibility in HTML & CSS

Small coding habits make a huge difference in accessibility. These techniques should become part of your everyday workflow:

• Use semantic HTML tags such as <header>, <nav>, <main>, and <footer> to define structure.

• Include descriptive alt text for every image: <img src=”logo.png” alt=”Company logo”>.

• Follow heading hierarchy logically (only one <h1> per page, followed by <h2> and <h3>).

• Maintain strong color contrast (minimum 4.5:1 for text). Use online tools to test ratios.

• Check keyboard navigation – can users reach links and buttons using the Tab key?

• Add :focus styles in CSS to show users where they are on the page.

• Provide captions or transcripts for videos and avoid autoplay sound.

Usability: Making Sites Intuitive

While accessibility removes barriers, usability ensures your site is enjoyable and efficient. A usable site allows users to complete their goals quickly without confusion or frustration.

Jakob Nielsen, a pioneer in user experience design, summarized usability into ten key heuristics. Here are simplified versions for web designers:

1. Visibility of system status – users should always know where they are.
2. Match between system and real world – use familiar language and conventions.
3. User control and freedom – make navigation and undo options clear.
4. Consistency – keep colors, fonts, and layouts uniform.
5. Error prevention – design forms and buttons that minimize mistakes.
6. Recognition rather than recall – use icons and cues users recognize.
7. Flexibility – allow multiple ways to complete actions.
8. Minimalist design – avoid clutter and unnecessary elements.
9. Help users recover from errors – provide clear feedback or instructions.
10. Support – include help pages or FAQs where appropriate.

Together, these principles make navigation intuitive and interactions satisfying. Usability often overlaps with accessibility – a clear layout benefits everyone.

Testing Accessibility and Usability

You don’t need to guess if your site is accessible or usable – testing tools can show you exactly what to fix.

Automated Tools

• WAVE (wave.webaim.org): identifies missing alt text, low contrast, or structural issues.
• Chrome DevTools Lighthouse: audits accessibility, performance, and SEO directly in your browser.
• Contrast Checker (contrastchecker.com): tests color combinations for readability.

Manual Testing

• Navigate using only the Tab key – can you reach every link and form field?
• Use a screen reader (VoiceOver or NVDA) to ensure content is logical.
• Perform a 5-second test: show your site to a friend for five seconds, then ask what stood out.
• Run a hallway test: ask someone unfamiliar with your site to complete a simple task and observe their process.