What the host must supply

Home-UI can make a component accessible; it cannot make the host’s page accessible. These are the things only the host knows, and getting them wrong is the commonest way an accessible component becomes an inaccessible page.

An accessible name for every control

A component can render a label, but it cannot invent the words.

Wrong

<hui-input name="email"></hui-input>

Right

<hui-field>
  <span data-label>Email</span>
  <hui-input data-control name="email"></hui-input>
</hui-field>

A control with no accessible name is announced as an unlabelled field. `hui-field` wires the label, the description and any error to the control.

aria-current on the current item

The server knows which page it is rendering; the component does not.

Wrong

<nav class="hui-breadcrumb" aria-label="Breadcrumb">
  <ol class="hui-breadcrumb__list">
    <li><span class="hui-breadcrumb__page">Entries</span></li>
  </ol>
</nav>

Right

<li><span class="hui-breadcrumb__page" aria-current="page">Entries</span></li>

Without `aria-current`, a screen reader hears the current page as just another crumb.

aria-sort on the sorted column

Sorting is server-owned; the state has to be rendered with it.

Wrong

<th scope="col">Time <a href="?sort=time">sort</a></th>

Right

<th scope="col" aria-sort="ascending">Time <a href="?sort=time&dir=desc">sort</a></th>

A sort control with no `aria-sort` conveys nothing about the current order. `aria-sort` goes on the `` and takes `ascending`, `descending` or `none`.

The error text and aria-invalid

hui-field wires these, but the host has to render them.

Wrong

<hui-input name="project"></hui-input>

Right

<hui-field>
  <span data-label>Project name</span>
  <hui-input data-control name="project" aria-invalid="true"></hui-input>
  <span data-error>Project name is required.</span>
</hui-field>

An error shown only in colour, and not marked invalid, is invisible to a screen reader and to a colour-blind reader alike. `aria-invalid` is the single signal across every control.

The language and the document title

The library ships neither.

Wrong

<!doctype html>
<html>
  <head><title>Home</title></head>

Right

<!doctype html>
<html lang="en">
  <head><title>Entries · Race Control</title></head>

`lang` is how a screen reader chooses a voice; a title is the first thing it announces on load. Neither is Home-UI's to set.

---

Each component page carries the naming it can and cannot do under its own Accessibility section. This page is the part that only makes sense across the library; Keyboard has the collected key sets, and How this was checked is the method and its limits.