HTML Acessibilidade: CSS afetando a leitura do formulário

pauloslash · 13 de outubro de 2023

E aí pessoal beleza, estou aprendendo a implementar sites com mais acessibilidade e me deparei com um problema ao qual não entendi direito o comportamento do leitor de tela, alguns css especificos está alterando a maneira q e feita a leitura e também dificultando acessar os inputs pelas setas

Exemplo

<html>
	<body>
		<style>
			body > div > div { margin-bottom: 5px; }
			body > div > div { border: 2px solid red; }
			body > div > div:not(:first-child):not(:last-child) { border-color: green; }
		</style>
		<div style="width: 300px;">
			<div>
				<label for="input1">Teste</label>
				<input type="text" id="input1">
			</div>
			<div>
				<label for="input2" style="display: block;">Segundo Teste</label>
				<input type="text" id="input2">
			</div>
			<div style="display: flex;align-items: center;">
				<label for="input3" style="width: 50px;margin-right: 5px;">Terceiro Teste</label>
				<input type="text" id="input3">
			</div>
			<div>
				<label for="input4">Quarto Teste</label>
				<input type="text" id="input4">
			</div>
		</div>
	</body>
</html>

Nesse exemplo apenas o 2 e 3 estão funcionando corretamente, e feita a leitura do label depois se pode acessa-lo bom pelo menos eu acho q deva ser assim os outros 2 o label e o input são lidos na mesma hora e quando se acessa um deles usando espaço ou tab não consigo voltar ao fluxo da leitura

Pensava que o css não afetaria a leitura com exceção do display: none e visibility: hidden

alguém sabe se existe alguma propriedade que eu possa manipular como vai ser feita a leitura ou alguma maneira de contornar isso?

Notei que os campos q funcionam corretamente são os q o labels ficam a cima e o input a baixo ou o q o label tem 2 linha mesmo q para isso seja utilizado outras propriedades css sem ser essas q utilizei

DiF · 14 de outubro de 2023

@pauloslash Não sei se entendi.... mas pode ser que o fator que está lhe atrapalhando seja o CSS inline. Evite de usar o css inline, pois o grau de precedência é maior sempre... você até pode contornar com !important quando você quer que uma regra sobrecreva outra... porém não abuse disso.. ou terá problemas de compatiblidade.

Além disso, na questão de acessibilidade pela tecla "tab" existe uma tag no html justamente para definir ordens de acesso via tecla TAB... use : tabindex="numero da ordem"

exemplo:

HTML:

		<div id="box">
			<div>
				<label for="input1">Teste</label>
				<input type="text" tabindex="1" id="input1">
			</div>
			<div>
				<label for="input2" class="block">Segundo Teste</label>
				<input type="text" tabindex="3" id="input2">
			</div>
			<div class="flex">
				<label for="input3">Terceiro Teste</label>
				<input type="text" tabindex="2" id="input3">
			</div>
			<div>
				<label for="input4">Quarto Teste</label>
				<input type="text" tabindex="4" id="input4">
			</div>
		</div>

CSS:

body > div > div { margin-bottom: 5px; }
body > div > div { border: 2px solid red; }
body > div > div:not(:first-child):not(:last-child) { border-color: green; }
      
 #box{ width: 300px;}     
      
 .block{ display: block;}
 .flex{display: flex; align-items: center; }
 
 .flex label{ width: 50px; margin-right: 5px;}

Exemplo online: https://jsfiddle.net/dife/9a5xfu14/

Repare que eu defini as ordens de acesso da tecla tab... no caso eu fiz: teste, terceiro teste, segundo teste, quarto teste .. . respectivamente nesta ordem.. abra o link clique no primeiro campo.. e vá apertando tab... caso queira "voltar"... aperte SHIFT + TAB........

Mas... se você procura, algo como um LOOP... onde você aperta o tab, e vai indo pro proximo... e então quando chegar no último, volta pro primeiro... aí só com intervenção de javascript.... algo como isto aqui:

$(document).ready(function(){ 
  $('#box').each(function(){
    var list  = $(this).find('*[tabindex]').sort(function(a,b){ return a.tabIndex < b.tabIndex ? -1 : 1; }),
        first = list.first();
    list.last().on('keydown', function(e){
        if( e.keyCode === 9 ) {
            first.focus();
            return false;
        }
    });
});

});

Foi feito emjQuery...

você pode testar online aqui: https://jsfiddle.net/dife/9a5xfu14/1/

pauloslash · 16 de outubro de 2023

Opa @DiF, testei o seu código e o comportamento navegando apenas pelas setas foi o mesmo, não sei dizer se e correto fazer a navegação nesses campos pela setas ou não mais em um outro contexto no qual exista algum texto entre eles se a navegação for feita pelo tab acabaria ignorando esse texto ja usando as setas acabaria passando por ele, sou novo nisso, não sei muito bem como e a real forma de navear pelo teclado ainda não decorei os atalhos do teclado para isso, aproveitando você saberia me informar algum site que mostre quais propriedades css afetam os leitores de tela? eu tinha visto um media query que me pareceu bem util @media speech mais foi descontinuado

DiF · 16 de outubro de 2023

@pauloslash Ah, Eu não tinha me dado conta que você queria a navegação de inputs pelas setas do teclado.. Afinal era 5 horas da madrugada rsrs não me dei conta... Geralmente a navegação é feita pela tecla TAB. onde o TAB avança, e o ***** + TAB volta.

Mas se tiver que ser pelas setas...

Terá que fazer um código em javascript mais complexo... aqui vai um exemplo:

$(document).ready(function(){ 
  
    //atribui as teclas seta pra cima e para baixo em variáveis.
    var keyUp = 38;
    var keyDown = 40;
    
    $(document).keydown(
        function(e){
            var keys = $(".setas");
            //Função da de keyUp e keyDown
            if (e.keyCode == keyDown) {
                for(i = 0; i <= keys.length; i++) {
                    if (keys[i] == $(".setas:focus").get(0)) {
                       $(keys[i + 1]).focus();
                        break;
                    }
                }
            }
            if (e.keyCode == keyUp) {
                for(i = 0; i <= keys.length; i++) {
                    if (keys[i] == $(".setas:focus").get(0)) {
                       $(keys[i - 1]).focus();
                        break;
                    }
                }
            }
        }
    );
});

NO HTML:

<div id="box">
			<div>
				<label for="input1">Teste</label>
				<input type="text" tabindex="1" id="input1" class="setas">
			</div>
			<div>
				<label for="input2" class="block">Segundo Teste</label>
				<input type="text" tabindex="3" id="input2" class="setas">
			</div>
			<div class="flex">
				<label for="input3">Terceiro Teste</label>
				<input type="text" tabindex="2" id="input3" class="setas">
			</div>
			<div>
				<label for="input4">Quarto Teste</label>
				<input type="text" tabindex="4" id="input4" class="setas">
			</div>
		</div>

Foi adicionado a class "setas" em cada input, para que funcione a navegação pelas setas do teclado

Rode este exemplo e quando colocar foco no input... use as setas para cima e para baixo do teclado.

https://jsfiddle.net/dife/croh35tg/1/

pauloslash · 18 de outubro de 2023

Obrigado pela ajuda @DiF acho q o caminho deva ser esse, no NVDA o comportamento foi até bom dependendo apenas de um dos inputs está em foco mais no orca não ficou muito bom ele não falava o label do input, vou tentar seguir aqui para ver se consigo fazer uma boa leitura do formulário com o label ao lado do input, quando eu puder me reunir com o pessoal que testa a aplicação vou até tirar a dúvida se é um padrão os labels ficar acima do input porque todo site q está assim vi que a leitura e de boa já os que usam css para fazer o label ficar a esquerda lado a lado do input o leitor acabava lendo os 2 ao invés de ler individualmente

valeu aí