접근 가능한 이름 계산, 쉽게 이해하기

The accessible name is the short label a screen reader speaks for an element, like Submit for a button or Search for a field.

If an element has no accessible name, a screen reader announces just its role, like button, leaving users with no idea what it does.

You rarely set the name directly. The browser runs a name computation algorithm over your markup to decide what each element is called.

The algorithm checks sources in a fixed priority order and uses the first one it finds. Knowing that order lets you predict the result.

The highest priority is aria-labelledby. If present, it overrides every other source, gathering text from the elements it points to.

If there is no labelledby, the browser uses aria-label, a string you type directly on the element as its spoken name.

Next come native sources, like a label tied to an input, or the alt text of an image. Use these whenever you can.

For many elements the name falls back to their text content. A button reading Save is named Save without any extra attribute.

The lowest priority source is the title attribute. It only names an element when nothing better exists, and it is easy to miss.

The computed name is flattened into one string with extra whitespace collapsed, so line breaks and indentation never reach the user.

The name is what an element is called; a description is extra detail read after it. Today we focus on getting the name right.

An element has both aria-label and inner text. Which becomes its name?

You learned the name computation order: labelledby, then aria-label, then native labels and content, with title last. 🧩