Referência
Acessibilidade
Estado em ARIA, foco visível, teclado e movimento reduzido. O que cada peça garante e o que fica com você.
O que o sistema garante
- Estado em atributo ARIA, lido também pelo CSS:
aria-checked,aria-selected,aria-expanded,aria-current,aria-sort. - Foco visível em todo controle, com contorno de 2px na cor do texto.
- Texto medido em 4,5:1 sobre o miolo, nos dois temas. Veja os números ao vivo em Tokens.
- Movimento reduzido zera as durações e deixa cada peça no estado final.
- Gráfico desenhado em svg leva
role="img"e umaria-labelcom o resumo.
Teclado por componente
| Componente | Teclas |
|---|---|
| Select | Enter, Espaço e setas abrem; setas, Home, End e letra navegam; Enter escolhe; Esc fecha. |
| Slider | Setas andam um passo; Home e End vão às pontas. |
| Segmented | Setas trocam a opção e dão a volta. |
| Período | Tab nas setas, Enter anda. |
| Calendário | Tab pelos dias, Enter escolhe. Sem navegação por setas na grade. |
| Barras | Tab por coluna mostra o valor. |
| Gráficos | O seletor de período tem teclado. O destaque por item é por ponteiro. |
O que fica com você
- Botão só de ícone precisa de
aria-label. - Busca precisa de
aria-labelno input: placeholder não é nome. - Segmented e radiogroup de modelos precisam de
aria-labelno host. data-tipé visual: repita o texto emaria-label.- Em celular, controle solto merece 44px de altura: use
u-btn--lg.