código

Abas (tabs) acessíveis

Abas são componentes que mostram diferentes conteúdos a partir da interação do usuário com a lista de navegação, que é apresentada similarmente a abas de fichário. Conforme o usuário seleciona uma aba, seu conteúdo é exibido e os demais ficam escondidos. O problema é que normalmente essa interação é feita apenas com o mouse, excluindo […]

Modais com acessibilidade

Modal, dialog, caixa ou janela de diálogo e até mesmo pop-up, são os termos mais utilizados para descrever aquelas janelas que aparecem sobrepostas a um conteúdo principal. Enquanto essas janelas permitem interações mais dinâmicas, para usuários de leitores de tela e que fazem navegação por teclado, elas se tornam pontos inacessíveis se não forem implementadas […]

Pular links

Navegação rápida e fácil A opção para pular links é muito útil para os usuários que navegam com o teclado, com ou sem a ajuda de leitores de tela, inclusive para usuários com pouca destreza manual que não conseguem usar o mouse ou usuários de laptops, notebooks ou celulares. Pular links é fundamental para quem […]

Accesskey

Atalhos de teclado Há outras técnicas para pular links, mas que não são universais como, por exemplo, as chaves de acesso – ACCESSKEY. Elas funcionam para a maioria dos navegadores, mas não para os “somente texto”, como Lynx e Webvox. Utilizadas principalmente para se chegar diretamente à links importantes, como pular a navegação e ir […]

Background-image + Background-color

Falha de carregamento Lembre-se sempre de especificar uma cor sólida como background-color quando forem utilizadas imagens como background, principalmente se existirem textos ou títulos sobre essa imagem. Dessa maneira, caso haja uma falha no carregamento, o usuário conseguirá ler o título que estiver sobrescrevendo a imagem. OBS: atente-se em especificar uma cor contrastante com a […]

Indicando o idioma

Atributo LANG Indique sempre o idioma preponderante da página adicionando o atributo ‘lang’ na tag ‘html’, como mostrado abaixo: <html lang=”pt-br”> (exemplo de idioma Português do Brasil). Quando houver mudança de idioma no conteúdo, o ideal é sempre identificar a mudança também através do atributo lang. PS: Não há necessidade de informar a mudança de […]

Título da página

Usando a tag title O título é a primeira informação lida pelo usuário que utiliza leitor de tela, por isso, deve-se descrever um título informativo utilizando a tag title. Evite preencher apenas com “home” ou “about”, mas sim com algo que contemple o assunto da página e o nome do site, como no exemplo: <title>Publicações […]

ARIA – Atributo role=”alert”

O atributo de alerta deve ser usado moderadamente e, apenas, nas situações que exigirem atenção imediata. Quando este atributo (role) estiver ligado a um elemento, o navegador envia um evento acessível de alerta para as tecnologias assistivas que, então, poderão notificar seus usuários sobre o que estiver acontecendo. O atributo alert é mais útil para […]