Accessible Name and Friendly Name

If a component is significant enough, it must contain a component name in the form of a heading element (e.g., h1).

But sometimes there’s a big tone discrepancy between the name of the component and what you want to say in the heading. Consider this example:

[html]
<div class="registration-component">
<h1>Welcome! Please register.</h1>
<form>…</form>
</div>
[/html]

Although, the context of a registration component is mentioned both in the class name and in the heading element, it still fails in providing an official name for the component which can be crawled by search engines and read by screenreaders.

The Solution

It would be what we call an accessible name. It is a formal name for the component inside a heading tag. In the existing example, the heading with the brand tone or voice would be a friendly name wherein we can get creative about.

Here’s a better example of that registration component:

[html]
<div class="registration-component">
<h1 class="accessible-name">Registration Component</h1>
<p class="friendly-name">Welcome! Please register.</p>
<form>…</form>
</div>
[/html]

In CSS, we could visually hide the accessible name and always use a friendly name even if they both have the same content (mostly for HTML markup consistency).