Accessibility in Web Development

<!-- Custom button with ARIA -->
<div role="button" 
     tabindex="0" 
     aria-pressed="false"
     onclick="toggleButton(this)"
     onkeydown="handleKeyPress(event, this)">
  Toggle Feature
</div>

<!-- Accordion with ARIA -->
<button aria-expanded="false" 
        aria-controls="panel1"
        id="accordion1">
  Section Title
</button>
<div id="panel1" 
     role="region" 
     aria-labelledby="accordion1"
     hidden>
  Panel content goes here...
</div>

<!-- Live region for dynamic updates -->
<div aria-live="polite" aria-atomic="true" class="sr-only">
  <!-- Screen readers announce changes here -->
</div>

<!-- Modal dialog -->
<div role="dialog" 
     aria-modal="true"
     aria-labelledby="dialog-title"
     aria-describedby="dialog-desc">
  <h2 id="dialog-title">Confirm Action</h2>
  <p id="dialog-desc">Are you sure you want to proceed?</p>
  <button>Confirm</button>
  <button>Cancel</button>
</div>

// Skip link for keyboard users
const skipLink = document.querySelector('.skip-link');
skipLink.addEventListener('click', (e) => {
  e.preventDefault();
  const main = document.querySelector('main');
  main.tabIndex = -1;
  main.focus();
});

// Focus trap for modals
function trapFocus(element) {
  const focusableElements = element.querySelectorAll(
    'a[href], button, textarea, input, select, [tabindex]:not([tabindex="-1"])'
  );
  const firstElement = focusableElements[0];
  const lastElement = focusableElements[focusableElements.length - 1];

  element.addEventListener('keydown', (e) => {
    if (e.key === 'Tab') {
      if (e.shiftKey && document.activeElement === firstElement) {
        e.preventDefault();
        lastElement.focus();
      } else if (!e.shiftKey && document.activeElement === lastElement) {
        e.preventDefault();
        firstElement.focus();
      }
    }
    
    if (e.key === 'Escape') {
      closeModal();
    }
  });
  
  firstElement.focus();
}

// Custom keyboard handler for interactive elements
function handleKeyboard(event, callback) {
  if (event.key === 'Enter' || event.key === ' ') {
    event.preventDefault();
    callback();
  }
}

<form novalidate>
  <!-- Properly labeled input -->
  <div class="form-group">
    <label for="email">
      Email Address
      <span aria-hidden="true">*</span>
    </label>
    <input 
      type="email" 
      id="email" 
      name="email"
      aria-required="true"
      aria-describedby="email-hint email-error"
      autocomplete="email"
    >
    <span id="email-hint" class="hint">
      We'll never share your email
    </span>
    <span id="email-error" class="error" role="alert" hidden>
      Please enter a valid email address
    </span>
  </div>

  <!-- Radio group with fieldset -->
  <fieldset>
    <legend>Preferred Contact Method</legend>
    <div>
      <input type="radio" id="contact-email" name="contact" value="email">
      <label for="contact-email">Email</label>
    </div>
    <div>
      <input type="radio" id="contact-phone" name="contact" value="phone">
      <label for="contact-phone">Phone</label>
    </div>
  </fieldset>

  <!-- Accessible error summary -->
  <div role="alert" aria-live="assertive" id="error-summary" hidden>
    <h2>There were errors with your submission</h2>
    <ul>
      <!-- Errors listed here with links to fields -->
    </ul>
  </div>

  <button type="submit">Submit Form</button>
</form>

// Automated testing with Jest and axe-core
import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

describe('Accessibility Tests', () => {
  it('should have no accessibility violations', async () => {
    const { container } = render(<MyComponent />);
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });
});

// Cypress with axe-core
describe('Page Accessibility', () => {
  beforeEach(() => {
    cy.visit('/');
    cy.injectAxe();
  });

  it('Has no detectable a11y violations', () => {
    cy.checkA11y();
  });

  it('Checks specific element', () => {
    cy.checkA11y('.main-content', {
      rules: {
        'color-contrast': { enabled: true }
      }
    });
  });
});

// Pa11y in CI/CD
// package.json script
{
  "scripts": {
    "test:a11y": "pa11y-ci --config .pa11yci.json"
  }
}

// .pa11yci.json
{
  "defaults": {
    "standard": "WCAG2AA",
    "timeout": 5000
  },
  "urls": [
    "http://localhost:3000/",
    "http://localhost:3000/about",
    "http://localhost:3000/contact"
  ]
}