ARIA 属性とスクリーンリーダー

How Screen Readers Work

Semantic HTML First

<!-- BAD: div-based — requires ARIA to make accessible -->
<div class='flex items-center gap-2 cursor-pointer' onclick='handleClick()'>
  <span class='text-sm'>Submit</span>
</div>

<!-- GOOD: semantic button — accessible by default -->
<button
  type='submit'
  class='flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg'
>
  Submit
</button>

<!-- BAD: no landmark semantics -->
<div class='flex gap-4'>Nav links...</div>

<!-- GOOD: nav landmark -->
<nav class='flex gap-4' aria-label='Main navigation'>Nav links...</nav>

Tailwind's sr-only Utility

/* What .sr-only does */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

<!-- Usage: icon buttons need visible labels for screen readers -->
<button class='p-2 rounded-lg hover:bg-gray-100'>
  <XMarkIcon class='h-5 w-5 text-gray-700' />
  <span class='sr-only'>Close dialog</span>
</button>

ARIA Labels and Descriptions

<!-- aria-label for icon-only button -->
<button aria-label='Open notifications'
  class='p-2 rounded-lg hover:bg-gray-100'>
  <BellIcon class='h-5 w-5' />
</button>

<!-- aria-labelledby references visible heading -->
<section aria-labelledby='pricing-heading'>
  <h2 id='pricing-heading' class='text-2xl font-bold'>Pricing</h2>
  {/* screen reader: 'Pricing, region' */}
</section>

<!-- aria-describedby links to help text -->
<div>
  <label for='email'>Email</label>
  <input id='email' type='email' aria-describedby='email-hint' />
  <p id='email-hint' class='text-sm text-gray-500 mt-1'>
    We will never share your email.
  </p>
</div>

ARIA Live Regions

<!-- Polite: announced after current announcement finishes -->
<div
  aria-live='polite'
  aria-atomic='true'
  class='sr-only'  {/* screen reader only — no visual display */}
>
  {searchStatus} {/* e.g., 'Loading results...' or '12 results found' */}
</div>

<!-- Assertive: interrupts current announcement -->
<div
  aria-live='assertive'
  role='alert'
  class='fixed top-4 right-4 bg-red-50 border border-red-200 p-4 rounded-lg'
>
  {errorMessage}
</div>

ARIA Roles for Custom Components

<!-- Custom toggle switch -->
<div
  role='switch'
  aria-checked={enabled}
  tabIndex={0}
  onKeyDown={(e) => e.key === 'Enter' && toggle()}
  onClick={toggle}
  class={cn(
    'relative inline-flex h-6 w-11 items-center rounded-full cursor-pointer',
    'focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2',
    enabled ? 'bg-blue-600' : 'bg-gray-300'
  )}
>
  <span class='sr-only'>{enabled ? 'Enabled' : 'Disabled'}</span>
  <span class={cn('inline-block h-4 w-4 rounded-full bg-white transition-transform',
    enabled ? 'translate-x-6' : 'translate-x-1'
  )} />
</div>

ARIA States and Properties

function AccordionItem({ title, content }) {
  const [expanded, setExpanded] = useState(false);
  const contentId = 'accordion-content-' + title.replace(/\s/g, '-');

  return (
    <div class='border-b border-gray-200'>
      <button
        onClick={() => setExpanded(!expanded)}
        aria-expanded={expanded}
        aria-controls={contentId}
        class='flex w-full justify-between items-center py-4 text-left'
      >
        {title}
        <ChevronDownIcon class={cn('h-5 w-5 transition-transform', expanded && 'rotate-180')} />
      </button>

      <div
        id={contentId}
        hidden={!expanded}
        class='pb-4 text-gray-600 text-sm leading-relaxed'
      >
        {content}
      </div>
    </div>
  );
}

Hiding Decorative Content From Screen Readers

<!-- Decorative image: hide from screen reader -->
<img
  src='/decorative-pattern.svg'
  alt=''  {/* empty alt = decorative */}
  class='absolute inset-0 opacity-5'
  aria-hidden='true'
/>

<!-- Icon alongside text: icon is decorative -->
<button class='flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg'>
  <SaveIcon class='h-4 w-4' aria-hidden='true' />
  Save Changes  {/* text label is sufficient */}
</button>

<!-- Spinner: decorative, but announce loading state differently -->
<button disabled aria-busy='true'>
  <span aria-hidden='true' class='animate-spin'>...</span>
  <span class='sr-only'>Saving...</span>
</button>

Landmark Regions for Screen Reader Navigation

<body class='min-h-screen flex flex-col'>
  {/* banner landmark */}
  <header class='bg-white border-b border-gray-200'>
    <nav aria-label='Main navigation' class='flex gap-6 px-6 h-16 items-center'>
      {/* nav links */}
    </nav>
  </header>

  <div class='flex flex-1'>
    {/* complementary landmark */}
    <aside class='w-64 border-r border-gray-200' aria-label='Sidebar'>
      <nav aria-label='Section navigation'>{/* sidebar links */}</nav>
    </aside>

    {/* main landmark */}
    <main class='flex-1 p-8'>{/* page content */}</main>
  </div>

  {/* contentinfo landmark */}
  <footer class='bg-gray-50 border-t border-gray-200 py-8'>
    {/* footer content */}
  </footer>
</body>

Visually Hidden Focus Announcements

// After form submit, announce result to screen readers
function SubmitForm() {
  const [submitted, setSubmitted] = useState(false);
  const statusRef = useRef(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    await submitForm();
    setSubmitted(true);
    // Move focus to the sr-only status message
    statusRef.current?.focus();
  };

  return (
    <form onSubmit={handleSubmit}>
      {submitted && (
        <p
          ref={statusRef}
          tabIndex={-1}
          class='sr-only'
        >
          Your form was submitted successfully. We will be in touch.
        </p>
      )}
      {/* form fields */}
      <button type='submit'>Submit</button>
    </form>
  );
}

Automated Screen Reader Testing

// jest-axe: test individual React components
import { render } from '@testing-library/react';
import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

test('Button has no accessibility violations', async () => {
  const { container } = render(
    <button class='px-4 py-2 bg-blue-600 text-white rounded'>
      Submit
    </button>
  );
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

test('Icon button has accessible label', async () => {
  const { container } = render(
    <button aria-label='Close dialog'>
      <XMarkIcon class='h-5 w-5' />
    </button>
  );
  expect(await axe(container)).toHaveNoViolations();
});

Quick Check

Lesson Recap