Accessibility in Web Development: Building Inclusive Interfaces

<!-- Bad -->
<div onclick="submit()">Submit</div>

<!-- Good -->
<button type="submit">Submit</button>

<h1>Main Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>

<!-- Skip levels: h1 -> h3 is bad -->

<!-- Link: Navigate somewhere -->
<a href="/about">About Us</a>

<!-- Button: Perform action -->
<button>Save</button>
<button>Open menu</button>

/* Always visible focus */
:focus {
  outline: 3px solid #2563EB;
  outline-offset: 2px;
}

/* Only show when using keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

<!-- Logical tab order -->
<form>
  <label for="name">Name</label>
  <input id="name" type="text" tabindex="1">
  
  <label for="email">Email</label>
  <input id="email" type="email" tabindex="2">
</form>

<a href="#main" class="skip-link">Skip to main content</a>

<style>
.skip-link {
  position: absolute;
  left: -999px;
}
.skip-link:focus {
  left: 0;
}
</style>

<!-- Landmark roles -->
<header role="banner">
<main role="main">
<nav role="navigation">
<footer role="contentinfo">

<!-- Interactive widget -->
<button aria-label="Close menu" aria-expanded="false">
<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">

<!-- Announce updates -->
<div aria-live="polite">Changes saved</div>
<div aria-live="assertive">Error: Invalid input</div>

<!-- Descriptive -->
<img src="cat.jpg" alt="Orange tabby cat sitting on windowsill">

<!-- Empty for decorative -->
<img src="decoration.png" alt="">

<!-- Complex image -->
<img src="chart.png" alt="Bar chart showing sales growth">

<!-- Explicit label -->
<label for="email">Email</label>
<input id="email" type="email">

<!-- Implicit label -->
<label>
  Email
  <input type="email">
</label>

<input 
  id="phone" 
  type="tel"
  aria-invalid="true"
  aria-describedby="phone-error"
>
<span id="phone-error" role="alert">
  Please enter a valid phone number
</span>

<label for="name">
  Name (required)
  <input id="name" required aria-required="true">
</label>

<!-- Bad: Color only -->
<span class="error">Invalid</span>

<!-- Good: Icon + color + text -->
<span class="error">
  <svg aria-hidden="true">...</svg>
  Invalid input
</span>

/* Use relative units */
body {
  font-size: 100%;  /* or 1rem */
  line-height: 1.5;
}

/* Minimum 44x44 pixels */
button, a {
  min-height: 44px;
  min-width: 44px;
}