Accessibility Basics

Accessibility means building websites and apps that people with different abilities can use. That includes people who use screen readers, keyboards instead of a mouse, zoom, voice control, or other assistive technologies.

This is not specific to React. It is a general web development practice. React can help you build interfaces, but the underlying HTML still needs to be accessible.

Start with Semantic HTML

One of the easiest ways to improve accessibility is to use the right HTML element for the job.

• Use a <button> for actions
• Use a link (<a>) for navigation
• Use headings (<h1>, <h2>, etc.) to structure content

These elements come with useful built-in behavior. For example, a real <button> can be focused with the keyboard and activated in standard ways.

The Dice Example

Our Die component is already using a <button>. But once the button displays only dots, it no longer has any visible text. A screen reader user may just hear “button” with no explanation of what it does.

To fix that, we give the button an accessible name with aria-label:

function Die({ value, onRoll }: DieProps) {
  const dots = dotPositions[value] ?? [];

  return (
    <button
      onClick={onRoll}
      aria-label={`Roll die showing ${value}`}  // 👀 Add this
      className="grid grid-cols-3 grid-rows-3 gap-2 rounded-xl bg-white p-4 shadow-lg transition-transform hover:scale-105 active:scale-95"
      style={{ width: "120px", height: "120px" }}
    >
      {Array.from({ length: 9 }).map((_, i) => (
        <div key={i} className="flex items-center justify-center">
          {dots.includes(i) && (
            <div className="h-5 w-5 rounded-full bg-gray-800" />
          )}
        </div>
      ))}
    </button>
  );
}

The button looks the same as before, but now a screen reader has something to read out instead of just “button”.

Who This Helps

Accessibility is not an extra feature added at the end. It is part of making the interface understandable and usable.

In this case:

• Sighted users can see the die face
• Screen reader users can hear what the button is and what value it currently shows
• Keyboard users can still focus and activate the button because it is a real <button>

Checkpoint: Commit your progress.

git add .
git commit -m "dice-07: Add accessibility basics note"
git push