HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Accessibility

Web Accessibility (a11y)

Web accessibility ensures that websites can be used by people of all abilities and disabilities (including visual, auditory, and motor impairments).

Key Best Practices:

Semantic HTML: Use buttons for actions, links for navigation, and proper heading hierarchies (H1 to H6). Screen readers rely on this structure.
Alt Text: Always provide descriptive alt attributes for images.
Color Contrast: Ensure text has sufficient contrast against its background.
Keyboard Navigation: Users must be able to navigate the entire site using only the Tab key. Ensure elements have clear :focus styles.
ARIA Attributes: (Accessible Rich Internet Applications) provide extra context to screen readers for complex custom UI components.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial; padding: 40px; background: #fff; }
    
    /* Good Contrast */
    .good-contrast { background: #1a1a1a; color: #ffffff; padding: 15px; border-radius: 5px; margin-bottom: 20px; }
    
    /* Bad Contrast (Avoid this!) */
    .bad-contrast { background: #e0e0e0; color: #aaaaaa; padding: 15px; border-radius: 5px; margin-bottom: 30px; }
    
    /* Accessible Focus Styles for Keyboard Navigation */
    .accessible-btn {
      background: #0984e3; color: white; border: none; padding: 10px 20px; font-size: 16px; border-radius: 5px; cursor: pointer;
    }
    
    /* IMPORTANT: Never set outline: none without providing an alternative focus style! */
    .accessible-btn:focus {
      outline: 3px solid #fdcb6e;
      outline-offset: 2px;
    }
  </style>
</head>
<body>

<h2>Accessibility Demo</h2>
  
  <div class="good-contrast">This box has excellent color contrast, making it easy to read.</div>
  
  <div class="bad-contrast">This box has terrible color contrast. Visually impaired users will struggle to read this!</div>
  
  <p>Try clicking inside this window, then press the <strong>Tab</strong> key to navigate to the button. Notice the bright yellow focus ring indicating where you are!</p>
  
  <button class="accessible-btn" aria-label="Submit the form">Accessible Button</button>

</body>
</html>

Result

Topics