Natan Souza - curso "Acessibilidade web parte 1: tornando seu front-end inclusivo"
-
NVDA (mais utilizado);
-
JAWS (é pago);
-
VoiceOver (Mac).
-
Windows (a partir do 10) já vem com o Narrator instalado nativamente. Pode ser utilizado em combinação com o NVDA para utilizar a voz do Narrator (que é melhor) no NVDA.
-
https://webaim.org/projects/screenreadersurvey9/ : Survey sobre acessibilidade, em que usuários com algum tipo de disability informam quais navegadores mais usam, tipo de SO, tipo de leitor de tela, etc.
-
https://www.estudoinclusivo.com.br: pesquisa brasileira sobre leitores de tela (já tem até de 2022);
-
https://www.tpgi.com/basic-screen-reader-commands-for-accessibility-testing/ : atalhos de teclado para diferentes tipos de leitores de tela.
Pessoas com deficiência visual utilizam a tecla H para ler os headings da página (h1
, h2
, ...) para ter uma "visão geral" do que se trata a página. Por isso, é importante utilizar os headings da maneira correta, para informar os textos mais importantes da página.
- segundo a pesquisa do site estudoinclusivo, outras opções utilizadas, além do heading, é navegar item por item (seta para baixo) e pelos links (
Tab
ou teclaK
).
Adicionar lang="pt-br"
à tag <html>
, para que o leitor de tela fale em português.
- O atributo
lang
também pode ser colocado em outras tags. Caso em alguma parte da página tenha alguma citação ou texto em outro idioma, é possível utilizar o atributolang
e setar para que o leitor de tela leia no idioma correto.
O tributo alt
é um texto alternativo para quando a imagem não carrega, mas que também é utilizado pelo leitor de tela para "ler" a imagem. Como será lido, utilize o português corretamente neste atributo, incluindo acentuação e pontuação.
-
O NVDA fala "gráfico" toda vez que lê uma imagem, então fica redundante escrever no alt "foto" ou "imagem". Você pode descrever somente o que a imagem significa;
-
Não utilize o atributo
title
na imagem em conjunto com oalt
, pois o leitor de tela irá ler os dois; -
Iconografia (ícones sem valor semântico) normalmente tem caráter visual, e o que for visual temos que fazer no CSS. Seja usando um
background-image
ou um::after
/::before
. Ou seja, quando a imagem não for relevante, não use a tag<img>
; use talvez uma div e adicione a imagem via CSS.- Caso não seja possível, devido a alguma questão de design ou qualquer outra coisa, você pode deixar o
alt
vazio para que o leitor de tela ignore a imagem. Necessário verificar em cada leitor como ele faz isso (um pode ser somente o atributoalt
, outro pode seralt=""
, etc)
- Caso não seja possível, devido a alguma questão de design ou qualquer outra coisa, você pode deixar o
Para elementos <sgv>
, você pode utilizar a tag <title>
dentro do SVG para substituir o atributo alt
.
- Caso o SVG esteja dentro de uma tag
<a>
, você pode utilizar o atributotitle
da tag<a>
para descrever o SVG, pois o leitor irá ler otitle
do link neste caso.
No HTML5 existem também as tags <figure>
e <figcaption>
que funcionam parecido com o alt
;
- em uma aula, o instrutor menciona as WAI-ARIA, que seriam como uma "expansão" do HTML5, adicionando novos atributos aos elementos. Nelas, existe o atributo
aria-labelledby
, que você pode usar para indicar oid
de umfigcaption
, que será então utilizado pelo leitor de tela para descrever a imagem. Oalt
será ignorado pelo leitor (e será usado para o caso de, por exemplo, a imagem não carregar).
Tags de <input>
e <label>
precisam seguir aquela combinação de atributos (for
e id
) para que o leitor de tela consiga associar qual label pertence a qual input.
Propriedades display: none
e visibility: hidden
no CSS escondem um elemento visualmente e também do leitor de tela. Necessário tomar cuidado com questões de acessibilidade, caso os elementos precisem ser lidos.
-
Uma solução é utilizar
position
eleft
/right
e marcar para uma posição infinita (-9999px
). Não irá aparecer visualmente, mas o leitor conseguirá ler. Indicado pela WebAim. -
Parece que a melhor solução é
aria-hidden="true"
(ver tópico no fórum)
Crie um link "Pular para conteúdo principal" logo no começo da página, para que seja o primeiro elemento a ser lido quando o usuário der Tab
. Você pode esconder esse link para que seja lido somente pelos leitores de tela, ou pode fazer alguma animação em que esse link apareça somente quando o Tab é pressionado (o Facebook e LinkedIn fazem isso).
-
Na tag
<a>
, você pode usar um id para pular para uma seção da própria página. Cuidado ao escolher qual elemento receberá oid
para ser o conteúdo principal, pois o leitor de tela irá ler todo o conteúdo dentro desse elemento. -
Alguns leitores de tela já possuem atalhos que vão para o conteúdo que é marcado como principal. Neste caso, você deve incluir o atributo
role
na tag que será a principal
<alguma_tag role="main">
Cuidado com o atributo disabled
(utilizado, por exemplo, para desabilitar um campo de input). Ele não será lido pelo leitor de tela.
- Uma opção é utilizar o atributo
readonly
. Tem um funcionamento semelhante aodisabled
e é lido pelo leitor de tela (inclusive informando ao usuário que é somente leitura).
Zoom no celular: cuidado para não colocar o atributo user-scalable=no
ou maximum-scale=1.0
na tag <meta>
, pois isso desabilita/limita o zoom no celular do usuário, o que pode prejudicar a acessibilidade.
O HTML5 também possui tags para vídeos, inclusive tag para incluir legendas e outras opções para melhorar a acessibilidade.