Entrar Ainda não tem acesso?
1
resposta

Como permitir a leitura de tela de uma lista suspensa <select>

Referente ao curso Angular: design de componentes com acessibilidade

por João Paulo Pereira De Moura
| 73.2k xp | 13 posts
Associate Developer

Oi pessoal, vocês saberiam como eu posso permitir que o leitor de tela consiga ler o conteúdo de uma lista suspensa ? ex: eu quero que quando a lista do select for exibida, o leitor de tela possa ler um texto explicando sobre o que tem nessa lista

<label for="paises" tabIndex="1" aria-label="Qual seu país de nascimento?">Paises:</label>
<select id="paises" tabIndex="2" aria-label="Escolha uma das opções." name="paises">
    <option value="0">Brasil</option>
    <option value="1">Japão</option>
    <option value="2">Colombia</option>
</select>

gostaria que quando a lista fosse aberta eu pudesse descrever mais informações sobre os item ex: "lista não ordenado com o nome dos países" já adicionei a narrativa com arial-label nas tags select, options e nada rsrs

1 resposta
por Lorena Garcia
| 8258.5k xp | 12081 posts
Alura Scuba Team Suporte Educacional

Oi João, tudo bem?

Desculpe a demora em retornar.

Fico feliz que esteja buscando maneiras de tornar o seu site mais acessível para todos os usuários, incluindo aqueles que utilizam leitores de tela. Permitir que o conteúdo de uma lista suspensa seja acessível para esses usuários é fundamental para garantir a inclusão digital e a igualdade de acesso à informação.

Para permitir que o leitor de tela consiga ler o conteúdo de uma lista suspensa, você pode utilizar a propriedade "aria-describedby" na tag <select>. Essa propriedade permite que você especifique o ID de um elemento que descreve o conteúdo da lista suspensa.

Por exemplo, você pode adicionar um elemento <p> logo abaixo da tag <select> e descrever o conteúdo da lista suspensa nesse elemento. Em seguida, adicione o ID desse elemento na propriedade "aria-describedby" da tag <select>.

Veja um exemplo abaixo:

<label for="paises" tabIndex="1" aria-label="Qual seu país de nascimento?">Paises:</label>
<select id="paises" tabIndex="2" aria-label="Escolha uma das opções." name="paises" aria-describedby="descricao-paises">
    <option value="0">Brasil</option>
    <option value="1">Japão</option>
    <option value="2">Colombia</option>
</select>
<p id="descricao-paises">Lista não ordenada com o nome dos países.</p>

Dessa forma, quando a lista suspensa for aberta, o leitor de tela irá ler o conteúdo da tag <p> que descreve o conteúdo da lista.

Espero ter ajudado.

Um abraço e bons estudos.