Régua das Telas
Leve a acessibilidade do desenho para o código
A Régua das Telas marca, sobre a imagem da tela, o que o desenho não mostra: a ordem do foco, os títulos, as regiões, os nomes acessíveis e os textos alternativos. Depois confere o que falta e entrega a especificação para quem desenvolve. Funciona inteira no seu navegador.
Anotar uma telaPor que anotar a tela
É na passagem do design para o desenvolvimento que a acessibilidade costuma se perder. Anotar a tela deixa por escrito o que cada pessoa da equipe precisa saber.
Mostrar o invisível
A imagem não mostra por onde o foco passa nem o que o leitor de tela anuncia. As marcações deixam isso à vista, sobre a própria tela.
Conferir antes de programar
A régua aponta o que falta: uma região sem nome, um título que pula de nível, uma imagem sem texto alternativo, com o caminho para corrigir.
Entregar com o requisito
A especificação sai em texto, em planilha e na imagem marcada, com o requisito da NBR 17225 de cada marcação.
Como funciona
4 etapas, todas prontas para usar.
Etapa 1
Contexto
Diga que tela é, o título e o idioma da página, e ponha a imagem dela.
Etapa 2
Marcar
Sobre a imagem, marque a ordem de foco, os títulos, as regiões, os nomes acessíveis e os textos alternativos.
Etapa 3
Conferir
Os problemas que a régua encontra nas marcações, com o requisito e o caminho para corrigir.
Etapa 4
Especificação
A especificação para o desenvolvimento, com os requisitos da NBR 17225, em texto, em planilha e na imagem marcada.
Seus dados ficam com você
A Régua das Telas não tem servidor nem cadastro. A anotação fica guardada no seu próprio navegador.
Isso também quer dizer que a anotação só existe naquele navegador, naquele computador. Para não perdê-la, ou para passá-la a outra pessoa da equipe, baixe o arquivo: ele abre de novo em qualquer navegador, com tudo o que você fez.
De onde vem o método
As anotações de acessibilidade são uma prática de equipes de design: registrar sobre a tela o que o código precisa garantir para quem usa leitor de tela, teclado ou ampliação. A Régua das Telas liga cada anotação aos requisitos da NBR 17225, a norma brasileira de acessibilidade na web, que segue a WCAG.
Para conferir os nomes e os textos alternativos que você anotou, use a Régua dos Textos.