Accessibility・First steps

What is accessibility?

Accessibility is the mindset of building "pages anyone can use." It isn't a special add-on—it's the quality of the page itself. Let's start with the big picture.

Accessibility means “anyone can use it.” People who have trouble seeing, people who can’t use a mouse, people who need to read slowly—all kinds of people, in all kinds of situations, open your page. No matter who shows up, they can read it properly and operate it properly. That is a highly accessible page.

”All kinds of situations” is closer to home than you think

This isn’t only about people with disabilities. Everyone has moments like these:

  • Outside in bright sunlight, looking at a phone → faint-colored text can’t be read
  • One hand is full → a tiny button can’t be pressed
  • The mouse broke → you want to operate with just the keyboard
  • On a quiet train where you can’t play sound → you can’t tell what the video is about

Accessibility improvements also solve these everyday inconveniences everyone has. That’s why a well-built page ends up being easier to use for everyone.

Some people “listen” to a page being read aloud

People who can’t see well use a tool called a screen reader, which reads the page aloud, to listen to it. Instead of looking at the screen, they hear the HTML structure read out from top to bottom—and what they rely on here is the meaning of tags, exactly what you learned in the HTML course.

  • Because there are <h1><h3>, they can “grab just the headings and skim”
  • Because <img> has alt, they can tell “what the photo shows”
  • Because it’s a <button>, they know “this can be pressed”

In other words, writing HTML that matches meaning is itself the biggest accessibility measure. You’ve already taken the first step.

HTMLBuild the framework of a pageThe prime example of “writing to match meaning”: the lesson on the tags that form a page’s skeleton

Two self-checks you can do starting today

Even without any tools, you can check your own page’s accessibility starting today.

  • Try using it with the keyboard only—take your hand off the mouse and move from one end of the page to the other using only the Tab key and the Enter key. If there’s a button you can’t press or a link you can’t reach, that’s a spot to improve.
  • Read it as if all the images were hidden—imagine not a single image showed up. Does the story still make sense from the text alone? Any part that doesn’t is a sign that the alt or the body text is missing something.

You don’t need to aim for perfect. Being able to notice is the very first step of accessibility.

What you’ll learn in this course

In this course, we’ll look at six improvements you can put into practice starting today, one at a time, in a hands-on way.

LessonWhat it solves
Image altConveys the content to people who can’t see the image
Heading orderGives the page a “correct table of contents”
Color contrastRemoves faint, unreadable text
The focus ringMakes it operable with the keyboard alone
Forms and labelsReliably conveys what each input field means
Link wordingFixes the problem where just “here” doesn’t tell you anything

None of them need special tools—you just change how you write your HTML and CSS a little. Rather than difficult theory, we’ll learn by doing, so it sticks.

Summary of this lesson

  1. Accessibility = the page quality of being usable by anyone, in any situation
  2. It solves not only the needs of people with disabilities but everyone’s inconveniences like bright sunlight or one-handed use
  3. Writing HTML that matches meaning is the biggest accessibility measure

FAQ

What is the difference between accessibility and usability?
Usability is about "is it easy to use," while accessibility is about "can it be used at all." Accessibility removes the "can't read it, can't press it, can't reach it" problems, and usability builds on top of that foundation.
How do you read "a11y"?
It's read as "accessibility" or "A-eleven-Y." It comes from the fact that there are 11 letters between the first "a" and the last "y" of "accessibility."
Where should I start?
Start by writing HTML that matches meaning. Use h tags for headings, button or a tags for things you can press, and alt for images. That alone gets most of accessibility in shape.