Botões de ícone que ainda têm um nome
Dê um rótulo acessível e claro a um botão sem texto.
Botões de ícone que ainda têm um nome é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web Accessibility Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web Accessibility Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
The Silent Button Problem
A button with only an icon inside looks clear to the eye, but a screen reader may just say button with no clue what it does. 🔇
Every Control Needs a Name
Every interactive control must have an accessible name. For text buttons the text supplies it; an icon-only button has no text to borrow.
Add aria-label to the Button
The simplest fix: put aria-label on the button itself to name the action, even when the inside is just an icon.
<button aria-label="Close">
<svg aria-hidden="true">...</svg>
</button>Hide the Icon Inside
Mark the inner icon with aria-hidden="true". The button carries the name; the icon is pure decoration once the label exists.
<button aria-label="Search">
<svg aria-hidden="true" focusable="false">...</svg>
</button>Or Use Visually Hidden Text
Prefer real text? Add a span styled with a visually-hidden class. Sighted users see only the icon; screen readers hear the words.
<button>
<svg aria-hidden="true">...</svg>
<span class="sr-only">Add to cart</span>
</button>What sr-only CSS Looks Like
A visually-hidden class clips the text to a single pixel without using display none, which would also hide it from screen readers.
.sr-only {
position: absolute;
width: 1px; height: 1px;
clip-path: inset(50%);
}Name the Action, Not the Icon
Label what happens, not the picture. Use Delete, not trash can. Users want the verb, not a description of the glyph.
Never Use the title Attribute Alone
The HTML title attribute is unreliable as a name: it skips touch and keyboard users entirely. Use aria-label or hidden text instead.
Toggle Buttons Need State
For an icon toggle like mute, also add aria-pressed so the button announces whether it is currently on or off.
<button aria-label="Mute" aria-pressed="false">
<svg aria-hidden="true">...</svg>
</button>Keep the Name in Sync
If an icon button changes meaning, update its name too. A play button that became pause must now announce Pause, not Play.
Verify the Spoken Name
In the accessibility inspector, select the button and read its computed name. It should match the action, never be blank.
Quick Check
You have a button containing only a magnifier SVG and no text. How do you give it an accessible name?
Recap: Name Every Icon Button
Give icon-only buttons a name via aria-label or visually hidden text, hide the icon, and label the action. Now every button speaks. ✅
Perguntas Frequentes
A aula “Botões de ícone que ainda têm um nome” é grátis?
Sim — o texto completo de “Botões de ícone que ainda têm um nome” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web Accessibility Academy, atualize para CoddyKit PRO. O curso de Web Accessibility Academy inclui 4 aulas no total.
O que vou aprender em “Botões de ícone que ainda têm um nome”?
Dê um rótulo acessível e claro a um botão sem texto. Você pratica Web Accessibility Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Web Accessibility Academy?
Nenhuma experiência prévia é necessária. Web Accessibility Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Botões de ícone que ainda têm um nome”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Web Accessibility Academy?
Sim. Cada aula de Web Accessibility Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- SVG em linha: role img e um title
- Ocultando ícones decorativos com aria-hidden
- Botões de ícone que ainda têm um nome
- Fontes de ícones e suas armadilhas de acessibilidade