Dicas de acessibilidade do teclado usando HTML e CSS

1. Teste seu site quanto à acessibilidade do teclado

O objetivo mais importante da acessibilidade do teclado é disponibilizar todos os elementos interativos, como links e controles de formulário, com o Aba chave. É assim que os usuários apenas com teclado navegam por uma página da web. Testar a acessibilidade do teclado em seu site é realmente muito fácil: basta pressionar o botão Aba e navegue do topo para a parte inferior da página, destacando os elementos ativos conforme você avança.

Observe como é fácil ou difícil chegar ao conteúdo principal com o método de tabulação do teclado. Clique em um item de menu, preencha um formulário, opere um controle deslizante ou siga sua posição atual na página. Você também pode testar a direção reversa usando o Shift + Tabulação atalho de teclado.

2. Criar perceptível :focus Estilos

CSS tem um :focus pseudoclasse que é acionada quando um usuário clica ou toca em um item, ou o seleciona com o Aba chave. O :focus estado só se aplica a elementos focáveis, ou seja, , , , </code>, <code class="inline"><select></code>e <code class="inline"></p> <area></code>.</p> <p>Cada navegador vem com seu próprio padrão <code class="inline">:focus</code> estilos – geralmente um contorno preto pontilhado ao redor do elemento ou um brilho borrado, porém muitos designers acham que não é do seu gosto e o removem completamente. Na verdade, este é o erro número um que arruína a acessibilidade do teclado nas páginas da web. Se você não gosta dos estilos padrão, use algo que combine com o design do seu site. </p> <figure class="post_image"><img decoding="async" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/31966/image/chrome.jpg" alt="estilos de foco no navegador Google Chrome" loading="lazy" width="870px" height="520px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/31966/image/chrome.jpg 2x"/><img decoding="async" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/31966/image/chrome.jpg" alt="estilos de foco no navegador Google Chrome" loading="lazy" width="650px" height="391px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/31966/image/chrome.jpg 2x"/><img decoding="async" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/31966/image/chrome.jpg" alt="estilos de foco no navegador Google Chrome" loading="lazy" width="380px" height="232px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/31966/image/chrome.jpg 2x"/><figcaption>Padrão: estilos de foco no navegador Google Chrome</figcaption></figure> <p>Escolha um estilo que seja facilmente perceptível, mas que não dependa apenas de cores. Aqui está um exemplo possível que pode funcionar bem para usuários apenas de teclado:</p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table css"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #d0d0d0;background-color: #151515">:focus</span> <span style="color: #d0d0d0">{</span> </pre> </td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>2</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d0d0d0;background-color: #151515">outline</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">3px</span> <span style="color: #d0d0d0;background-color: #151515">solid</span> <span style="color: #f4bf75">red</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>3</pre> </td> <td class="rouge-code"> <pre><span style="color: #d0d0d0">}</span> </pre> </td> </tr> </tbody> </table> </div> <h2 id="toc-jvzx-3-create-keyboard-accessible-modals"> <span class="sectionnum">3.</span> Crie modais acessíveis por teclado</h2> <p><span>Certifique-se de que quando uma caixa de diálogo modal for aberta, o foco do teclado mude para um elemento dentro da caixa de diálogo, normalmente o primeiro elemento focável ou </span><span>elemento estático com <code>tabindex="-1"</code> se o conteúdo incluir estruturas semânticas.</span></p> <p><span>Usar </span><code>Tab</code><span> e </span><code>Shift + Tab</code><span> para navegar pelos elementos da caixa de diálogo, garantindo que a ordem do foco seja lógica. Certifique-se de que </span><code>Escape</code><span> fecha a caixa de diálogo.</span></p> <p><span>Para configurar isso, você pode usar um <code></p> <div></code> com <code>role="dialog"</code> para modais. Rotule o modal com <code>aria-labelledby</code> se tiver um título, ou <code>aria-label</code> para modais sem título visível. Isso ajuda os usuários de leitores de tela a compreender o conteúdo e a finalidade do modal.</span></p> <p><span>Após fechar a caixa de diálogo, retorne o foco para o elemento que invocou a caixa de diálogo. Se o elemento de chamada não existir mais ou se o fluxo de trabalho incluir etapas relacionadas à tarefa da caixa de diálogo, o foco deverá ser movido para um elemento que forneça um fluxo de trabalho lógico.</span></p> <p><span>Atalhos de acessibilidade de teclado como esses ajudam quem usa dispositivos assistivos a navegar em seu site de maneira mais lógica e sem comprometer a experiência do usuário. </span></p> <h2 id="toc-np1h-3 use-non-color-designators-for-links"> <span class="sectionnum">4.</span> Use designadores sem cores para links</h2> <p>Os hiperlinks não devem ser diferenciados apenas pela cor. Este princípio é normalmente mencionado em relação à acessibilidade visual, pois as pessoas com baixa visão têm dificuldade em discernir as diferenças entre determinadas cores. No entanto, links claramente visíveis também são importantes para a acessibilidade do teclado. Os usuários que utilizam apenas o teclado devem ser capazes de localizar links o mais rápido possível. Isso os ajuda a digitalizar a página e descobrir como navegar até a parte em que estão interessados.</p> <p>similarmente a <code class="inline">:focus</code> estilos, os hiperlinks também vêm com estilo de navegador padrão – sublinhados azuis na maioria dos casos. No entanto, os designers frequentemente removem o sublinhado e usam cores apenas para indicar a presença de um link. Se você remover o sublinhado padrão, sempre use outro designador sem cor que corresponda ao design do seu site, como bordas, ícones ou contornos.</p> <figure class="post_image"><img decoding="async" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/31966/image/links.png" alt="Limpar links no govuk 1 hiperlink 2 focado 3 visitado" loading="lazy" width="870px" height="620px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/31966/image/links.png 2x"/><img decoding="async" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/31966/image/links.png" alt="Limpar links no govuk 1 hiperlink 2 focado 3 visitado" loading="lazy" width="650px" height="465px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/31966/image/links.png 2x"/><img decoding="async" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/31966/image/links.png" alt="Limpar links no govuk 1 hiperlink 2 focado 3 visitado" loading="lazy" width="380px" height="274px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/31966/image/links.png 2x"/><figcaption>Links claros em gov.uk: (1) hiperlink (2) focado (3) visitado</figcaption></figure> <p>Você pode usar o <code class="inline">title</code> atributo para descrever o conteúdo de um link, mas ele só se torna visível quando alguém passa o mouse sobre o link. Usuários somente de teclado não têm acesso a eventos de foco, portanto, nunca coloque informações cruciais no <code class="inline">title</code> atributo. Também não conta como um designador sem cor. Por exemplo, nunca faça isso:</p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table html"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #f4bf75"><a</span> <span style="color: #6a9fb5">href=</span><span style="color: #90a959">"#"</span> <span style="color: #6a9fb5">title=</span><span style="color: #90a959">"Important information"</span><span style="color: #f4bf75">></span> </pre> </td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>2</pre> </td> <td class="rouge-code"> <pre> Click here </pre> </td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>3</pre> </td> <td class="rouge-code"> <pre><span style="color: #f4bf75"></span> </pre> </td> </tr> </tbody> </table> </div> <p><span class="sectionnum">Em vez disso, faça o seguinte:</span></p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table html"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #f4bf75"><a</span> <span style="color: #6a9fb5">href=</span><span style="color: #90a959">"#"</span> <span style="color: #6a9fb5">title=</span><span style="color: #90a959">"Repetition of Important Information or addition of some secondary details"</span><span style="color: #f4bf75">></span> </pre> </td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>2</pre> </td> <td class="rouge-code"> <pre> Important information </pre> </td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>3</pre> </td> <td class="rouge-code"> <pre><span style="color: #f4bf75"></span> </pre> </td> </tr> </tbody> </table> </div> <p><span class="sectionnum">WCAG 2.0 também alerta sobre os problemas de acessibilidade do atributo title. Use-o com cuidado ou simplesmente não use.</span></p> <h2 id="toc-oq2i-4-use-native-control-elements"> <span class="sectionnum">5.</span> Use elementos de controle nativos</h2> <p>Os formulários são elementos interativos, portanto precisam ser acessíveis por meio do teclado. Os usuários que utilizam apenas o teclado devem ser capazes de preencher formulários, pressionar botões, usar controles deslizantes de intervalo, selecionar opções e operar controles com facilidade. Se você possui algum formulário em seu site você deve testá-lo um por um, usando o <strong>Aba</strong> chave. Pense em formulários de inscrição, formulários de boletins informativos, formulários de login, formulários de comentários, carrinhos de compras e assim por diante.</p> <p>A melhor maneira de criar formulários acessíveis é usar elementos de controle nativos sempre que possível. Os elementos de controle nativos vêm com acessibilidade de teclado integrada, o que significa que eles podem ser focados e respondem a eventos de pressionamento de tecla por padrão. Eles são os seguintes:</p> <ul> <li><code class="inline"><button></code></li> <li><code class="inline"><input></code></li> <li><code class="inline"><textarea></code></li> <li><code class="inline"><select></code></li> <li><code class="inline"><option></code></li> </ul> <p>Por exemplo, você pode criar um controle deslizante de intervalo acessível pelo teclado com o seguinte HTML:</p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table html"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #f4bf75"><input</span> <span style="color: #6a9fb5">type=</span><span style="color: #90a959">"range"</span> <span style="color: #6a9fb5">min=</span><span style="color: #90a959">"0"</span> <span style="color: #6a9fb5">max=</span><span style="color: #90a959">"10"</span><span style="color: #f4bf75">></span> </pre> </td> </tr> </tbody> </table> </div> <p>Os usuários de teclado podem primeiro focar com o <strong>Aba</strong> e mova o controle deslizante para cima e para baixo com <strong>Espaço</strong>. </p> <p>Se você precisar usar uma tag HTML não focável para um elemento interativo por algum motivo, poderá torná-la focável com o <code class="inline">tabindex="0"</code> atributo. Por exemplo, aqui está um <code class="inline"></p> <div></code> transformado em um botão focável:</p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table html"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"button"</span> <span style="color: #6a9fb5">tabindex=</span><span style="color: #90a959">"0"</span><span style="color: #f4bf75">></span> </pre> </td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>2</pre> </td> <td class="rouge-code"> <pre> Click me </pre> </td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>3</pre> </td> <td class="rouge-code"> <pre><span style="color: #f4bf75"></div></span> </pre> </td> </tr> </tbody> </table> </div> <p>O <code class="inline">role="button"</code> O atributo no trecho acima é uma função de referência da ARIA. Embora usuários apenas de teclado não precisem dele, é indispensável para usuários de leitores de tela e acessibilidade visual.</p> <p>Mesmo que o botão não nativo tenha sido focalizado, ele ainda é inferior ao seu equivalente nativo em termos de acessibilidade do teclado. Você entenderá isso imediatamente ao tentar adicionar um manipulador de eventos ao botão. Esta é a aparência de um ouvinte de evento de clique com o nativo <code class="inline"><button></code> elemento:</p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table html"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #f4bf75"><button</span> <span style="color: #6a9fb5">onclick=</span><span style="color: #90a959">"alert('Hi, I am a native button!')"</span><span style="color: #f4bf75">></span> </pre> </td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>2</pre> </td> <td class="rouge-code"> <pre> Click me </pre> </td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>3</pre> </td> <td class="rouge-code"> <pre><span style="color: #f4bf75"></button></span> </pre> </td> </tr> </tbody> </table> </div> <p>E aqui está o equivalente usando o botão div:</p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table html"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"button"</span> <span style="color: #6a9fb5">tabindex=</span><span style="color: #90a959">"0"</span> <span style="color: #6a9fb5">onclick=</span><span style="color: #90a959">"alert('Hi, I am a non-native button!')"</span><span style="color: #f4bf75">></span> </pre> </td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>2</pre> </td> <td class="rouge-code"> <pre> Click me </pre> </td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>3</pre> </td> <td class="rouge-code"> <pre><span style="color: #f4bf75"></div></span> </pre> </td> </tr> </tbody> </table> </div> <p><iframe src="https://codepen.io/tutsplus/embed/jeYmpE/?height=300&theme-id=12451&default-tab=result&embed-version=2" width="850" height="300" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy"></iframe></p> <p>Se você clicar nos botões usando o mouse ou touchpad, poderá ver ambas as mensagens de alerta. No entanto, se você navegar para cada botão usando o <strong>Aba</strong> tecla e bateu <strong>Digitar</strong> para processá-los, você verá apenas a primeira mensagem, pertencente ao botão nativo. Para fazer com que o botão não nativo processe a entrada do teclado, você também precisa definir um manipulador de eventos keypress separadamente:</p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table html"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"button"</span> <span style="color: #6a9fb5">tabindex=</span><span style="color: #90a959">"0"</span> <span style="color: #6a9fb5">onclick=</span><span style="color: #90a959">"alert('Hi, I am a non-native button!')"</span> </pre> </td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>2</pre> </td> <td class="rouge-code"> <pre><span style="color: #6a9fb5">onkeydown=</span><span style="color: #90a959">"alert('Hi, I am a non-native button!')"</span><span style="color: #f4bf75">></span> </pre> </td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>3</pre> </td> <td class="rouge-code"> <pre> Click me </pre> </td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>4</pre> </td> <td class="rouge-code"> <pre><span style="color: #f4bf75"></div></span> </pre> </td> </tr> </tbody> </table> </div> <p>Agora, quando os usuários do teclado clicam <code class="inline">Enter</code>, eles também verão a mensagem pertencente ao botão não nativo. Como você pode ver, é muito mais fácil e rápido usar a versão nativa. Portanto, a menos que você tenha um bom motivo para não usá-los, sempre use elementos de controle nativos ao trabalhar na acessibilidade do teclado.</p> <h2 id="toc-8zvl-5 add-a-skip-to-main-content-link"> <span class="sectionnum">6.</span> Adicione um link “Pular para o conteúdo principal”</h2> <p>Adicionando um <strong>Ir para o conteúdo</strong> ou <strong>Pular navegação</strong> vincular às suas páginas da web ajuda muito os usuários que usam apenas o teclado. Na maioria dos casos, esses usuários não vão querer passar por todos os links de navegação antes de começarem a ler o conteúdo. Isso é especialmente verdadeiro quando eles acessam mais de uma página do seu site. Imagine só, sem um link para pular navegação, eles terão que passar pelos mesmos links de navegação na página inicial <em>toda vez</em>. Não parece uma atividade particularmente divertida.</p> <p>Para criar um link para pular navegação funcional, você precisa vinculá-lo ao conteúdo principal usando o <code class="inline">id</code> e <code class="inline">href</code> atributos HTML da seguinte maneira:</p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table html"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #f4bf75"><a</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"skip-main"</span> <span style="color: #6a9fb5">href=</span><span style="color: #90a959">"#main"</span><span style="color: #f4bf75">></span>Skip to main content<span style="color: #f4bf75"></span> </pre> </td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>2</pre> </td> <td class="rouge-code"> <pre><span style="color: #f4bf75"><nav></span>Navigation<span style="color: #f4bf75"></nav></span> </pre> </td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>3</pre> </td> <td class="rouge-code"> <pre><span style="color: #f4bf75"><main</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"main"</span> <span style="color: #6a9fb5">tabindex=</span><span style="color: #90a959">"-1"</span><span style="color: #f4bf75">></span>Main content<span style="color: #f4bf75"></main></span> </pre> </td> </tr> </tbody> </table> </div> <p>Você também precisa adicionar o <code class="inline">tabindex="-1"</code> atributo ao contêiner do conteúdo principal. Este é o mesmo índice de tabulação que usamos acima para tornar o botão não nativo focável. O <code class="inline">tabindex</code> atributo é usado para modificar a ordem de navegação padrão. Com um valor de <code class="inline">0</code>, torna os elementos não focáveis ​​focáveis. Com um valor de <code class="inline">-1</code>, também torna os elementos focáveis, mas eles se tornam inacessíveis com a navegação padrão do teclado. Certos navegadores, como Chrome e IE, exigem a presença de <code class="inline">tabindex="-1"</code> no alvo do link para pular navegação, portanto nunca o omita.</p> <h3 id="toc-flxz-reveal-the-skip-link-only-to-keyboard-users">Revele o link Pular para conteúdo apenas para usuários de teclado</h3> <p>Você pode usar CSS para tornar o link para pular navegação visível apenas para usuários de teclado. Em seu estado padrão, oculte o link de usuários regulares posicionando-o fora da janela de visualização. Em seguida, revele-o para usuários de teclado criando estilos separados para o estado de foco que é acionado quando o usuário pressiona o botão <strong>Aba</strong> chave. </p> <p>Você pode ver esse efeito em ação em sites como webaim.org, www.w3.org e (como sempre) www.gov.uk:</p> <figure class="post_image"><img decoding="async" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/31966/image/skip.jpg" alt="Revele o link para pular apenas para usuários de teclado" loading="lazy" width="870px" height="320px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/31966/image/skip.jpg 2x"/><img decoding="async" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/31966/image/skip.jpg" alt="Revele o link para pular apenas para usuários de teclado" loading="lazy" width="650px" height="242px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/31966/image/skip.jpg 2x"/><img decoding="async" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/31966/image/skip.jpg" alt="Revele o link para pular apenas para usuários de teclado" loading="lazy" width="380px" height="147px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/31966/image/skip.jpg 2x"/><figcaption>Você já viu esse link de skin para conteúdo antes?</figcaption></figure> <p>O CSS a seguir é uma versão simplificada do código de navegação do Manual de Acessibilidade de TI da NC State University:</p> <div class="rouge-syntax-highlight"> <table class="rouge-line-table css"> <tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>1</pre> </td> <td class="rouge-code"> <pre><span style="color: #f4bf75">a</span><span style="color: #f4bf75">.skip-main</span> <span style="color: #d0d0d0">{</span> </pre> </td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>2</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d0d0d0;background-color: #151515">left</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">-999px</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>3</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d0d0d0;background-color: #151515">position</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">absolute</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>4</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d0d0d0;background-color: #151515">top</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">auto</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-5" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>5</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d0d0d0;background-color: #151515">width</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">1px</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-6" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>6</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d0d0d0;background-color: #151515">height</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">1px</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-7" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>7</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d0d0d0;background-color: #151515">overflow</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">hidden</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-8" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>8</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d0d0d0;background-color: #151515">z-index</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">-999</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-9" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>9</pre> </td> <td class="rouge-code"> <pre><span style="color: #d0d0d0">}</span> </pre> </td> </tr> <tr id="line-10" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>10</pre> </td> <td class="rouge-code"> <pre><span style="color: #f4bf75">a</span><span style="color: #f4bf75">.skip-main</span><span style="color: #d0d0d0;background-color: #151515">:focus</span> <span style="color: #d0d0d0">{</span> </pre> </td> </tr> <tr id="line-11" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>11</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d0d0d0;background-color: #151515">left</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">auto</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-12" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>12</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d0d0d0;background-color: #151515">top</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">auto</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-13" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>13</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d0d0d0;background-color: #151515">width</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">30%</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-14" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>14</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d0d0d0;background-color: #151515">height</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">auto</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-15" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>15</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d0d0d0;background-color: #151515">overflow</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">auto</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-16" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>16</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d0d0d0;background-color: #151515">margin</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">0</span> <span style="color: #90a959">35%</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-17" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>17</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d0d0d0;background-color: #151515">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">5px</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-18" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>18</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d0d0d0;background-color: #151515">font-size</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">20px</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-19" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>19</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d0d0d0;background-color: #151515">outline</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">3px</span> <span style="color: #d0d0d0;background-color: #151515">solid</span> <span style="color: #f4bf75">red</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-20" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>20</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d0d0d0;background-color: #151515">text-align</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-21" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>21</pre> </td> <td class="rouge-code"> <pre> <span style="color: #d0d0d0;background-color: #151515">z-index</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">999</span><span style="color: #d0d0d0">;</span> </pre> </td> </tr> <tr id="line-22" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"> <pre>22</pre> </td> <td class="rouge-code"> <pre><span style="color: #d0d0d0">}</span> </pre> </td> </tr> </tbody> </table> </div> <p>Quando o usuário acerta o <strong>Aba</strong> chave, o <code class="inline">.skip-main</code> O elemento recebe seu estado de foco e o link para pular navegação aparece na tela. </p> <p>Você pode testar rapidamente como funciona se clicar no topo da demonstração abaixo e clicar no botão <strong>Aba</strong> chave. Talvez seja mais fácil abrir a demonstração abaixo na visualização de página inteira.</p> <p><iframe src="https://codepen.io/tutsplus/embed/VEyboG/?height=400&theme-id=12451&default-tab=result&embed-version=2" width="850" height="400" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy"></iframe></p> <h2 id="toc-b8kk-next-steps">Próximos passos</h2> <p>Neste artigo, compartilhei algumas dicas básicas de acessibilidade do teclado que você pode implementar usando HTML e CSS. Existem outras coisas mais avançadas que você também pode fazer para acessibilidade do teclado. Por exemplo, você poderia:</p> <p>Além dessas dicas, evite usar CAPTCHAs sempre que possível, pois eles apresentam sérios problemas de acessibilidade, tanto para leitores de tela quanto para usuários somente de teclado. Se você ainda precisar utilizá-los, forneça mais de duas maneiras de resolvê-los, caso contrário, os usuários com necessidades de acessibilidade terão dificuldade para processar seus formulários. Deixe-nos saber se você tem alguma dica de acessibilidade do teclado!</p> </div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 728 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2665391954140437" data-ad-slot="2109868500" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="sharedaddy sd-sharing-enabled"><div class="robots-nocontent sd-block sd-social sd-social-icon-text sd-sharing"><h3 class="sd-title">Compartilhe isso:</h3><div class="sd-content"><ul><li class="share-facebook"><a rel="nofollow noopener noreferrer" data-shared="sharing-facebook-23787" class="share-facebook sd-button share-icon" href="https://www.reviltec.com.br/dicas-de-acessibilidade-do-teclado-usando-html-e-css.html?share=facebook" target="_blank" title="Clique para compartilhar no Facebook" ><span>Facebook</span></a></li><li class="share-x"><a rel="nofollow noopener noreferrer" data-shared="sharing-x-23787" class="share-x sd-button share-icon" href="https://www.reviltec.com.br/dicas-de-acessibilidade-do-teclado-usando-html-e-css.html?share=x" target="_blank" title="Clique para compartilhar no X" ><span>18+</span></a></li><li class="share-end"></li></ul></div></div></div> <div id='jp-relatedposts' class='jp-relatedposts' > <h3 class="jp-relatedposts-headline"><em>Relacionado</em></h3> </div> <div class="clear"></div> <div class="post-author"> <div class="author-image"> <a href="https://www.reviltec.com.br/author/admin" title="Posted byadmin " rel="author"><img alt='author-avatar' src='https://secure.gravatar.com/avatar/64d2149131c6fc5bf2511eb7a331bdfb?s=120&d=http%3A%2F%2Fassets.tumblr.com%2Fimages%2Fdefault_avatar_128.png&r=g' srcset='https://secure.gravatar.com/avatar/64d2149131c6fc5bf2511eb7a331bdfb?s=240&d=http%3A%2F%2Fassets.tumblr.com%2Fimages%2Fdefault_avatar_128.png&r=g 2x' class='avatar avatar-120 photo' height='120' width='120' decoding='async'/></a> </div> <div class="author-info"> <h4>Posted by <a href="https://www.reviltec.com.br/author/admin" title="Posted byadmin " rel="author">admin</a></h4> <p></p> <div class="author-connect"> <a href="https://www.reviltec.com.br" class="author-social website"></a> </div> </div> <div class="clear"></div> </div> <div class="tags"><span class="label">Tagged with</span><ul><li><a href="https://www.reviltec.com.br/tag/acessibilidade" rel="nofollow tag">acessibilidade</a></li><li><a href="https://www.reviltec.com.br/tag/css" rel="nofollow tag">CSS</a></li><li><a href="https://www.reviltec.com.br/tag/dicas" rel="nofollow tag">dicas</a></li><li><a href="https://www.reviltec.com.br/tag/html" rel="nofollow tag">HTML</a></li><li><a href="https://www.reviltec.com.br/tag/teclado" rel="nofollow tag">teclado</a></li><li><a href="https://www.reviltec.com.br/tag/usando" rel="nofollow tag">usando</a></li></ul></div><div class="clear"></div> </div><!-- .post-body --> <div class='share-post'> <h3 class='title'>Like to share?</h3> <!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style"> <a class="addthis_button_tweet"></a> <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> <a class="addthis_button_google_plusone" g:plusone:size="medium"></a> <a class="addthis_button_pinterest_pinit"></a> <a class="addthis_counter addthis_pill_style"></a> </div> <div class="clear"></div> </div> <div class="paginations item_pagination"> <div class="item"><span>Newer Post</span><a href="https://www.reviltec.com.br/o-impacto-da-ia-no-desenvolvimento-de-sites-noticias-sobre-robotica-e-automacao.html" rel="next">O impacto da IA ​​no desenvolvimento de sites – Notícias sobre robótica e automação</a></div> <div class="item"><span>Older Post</span><a href="https://www.reviltec.com.br/melhores-praticas-para-desenvolvimento-personalizado-noticias-sobre-robotica-e-automacao.html" rel="prev">Melhores práticas para desenvolvimento personalizado – Notícias sobre robótica e automação</a></div> <div class="clear"></div> </div> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Deixe uma resposta<small><a rel="nofollow" id="cancel-comment-reply-link" href="/dicas-de-acessibilidade-do-teclado-usando-html-e-css.html#respond" style="display:none;">Cancelar resposta</a></small></h3> <form id="commentform" class="comment-form"> <iframe title="Formulário de comentário" src="https://jetpack.wordpress.com/jetpack-comment/?blogid=96977179&postid=23787&comment_registration=0&require_name_email=1&stc_enabled=0&stb_enabled=0&show_avatars=1&avatar_default=mystery&greeting=Deixe+uma+resposta&jetpack_comments_nonce=e69f1a904f&greeting_reply=Deixe+uma+resposta+para+%25s&color_scheme=light&lang=pt_BR&jetpack_version=14.0&iframe_unique_id=1&show_cookie_consent=10&has_cookie_consent=0&is_current_user_subscribed=0&token_key=%3Bnormal%3B&sig=d4261c9cd91ad921cd766349da4b214cb286d462#parent=https%3A%2F%2Fwww.reviltec.com.br%2Fdicas-de-acessibilidade-do-teclado-usando-html-e-css.html" name="jetpack_remote_comment" style="width:100%; height: 430px; border:0;" class="jetpack_remote_comment" id="jetpack_remote_comment" sandbox="allow-same-origin allow-top-navigation allow-scripts allow-forms allow-popups" > </iframe> <!--[if !IE]><!--> <script> document.addEventListener('DOMContentLoaded', function () { var commentForms = document.getElementsByClassName('jetpack_remote_comment'); for (var i = 0; i < commentForms.length; i++) { commentForms[i].allowTransparency = false; commentForms[i].scrolling = 'no'; } }); </script> <!--<![endif]--> </form> </div> <input type="hidden" name="comment_parent" id="comment_parent" value="" /> </article><!-- #post --> </div> <div id="side"> <section id="right-side-top" class="section"> <aside id="text-2" class="widget widget_text"> <div class="textwidget"><p><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br /> <!-- 300La --><br /> <ins class="adsbygoogle" style="display: inline-block; width: 300px; height: 250px;" data-ad-client="ca-pub-2665391954140437" data-ad-slot="9652114502"></ins><br /> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></p> </div> <div class="clear"></div></aside> <aside id="recent-posts-2" class="widget widget_recent_entries"> <h2 class="widget-title"><span class="active">Posts recentes</span></h2> <ul> <li> <a href="https://www.reviltec.com.br/revisao-do-stray-melhorando-os-jogos-de-aventura-transformando-voce-em-um-gato.html">Revisão do Stray: melhorando os jogos de aventura transformando você em um gato</a> </li> <li> <a href="https://www.reviltec.com.br/resumo-aqui-esta-o-que-os-criticos-pensam-quando-o-crepusculo-cai-no-xbox-game-pass.html">Resumo: Aqui está o que os críticos pensam quando o crepúsculo cai no Xbox Game Pass</a> </li> <li> <a href="https://www.reviltec.com.br/4-maneiras-de-adicionar-o-poder-das-palavras-chave-as-imagens-no-lightroom.html">4 maneiras de adicionar o poder das palavras-chave às imagens no Lightroom</a> </li> <li> <a href="https://www.reviltec.com.br/a-compra-da-activision-blizzard-do-xbox-pode-ser-aprovada-pela-ftc-no-proximo-mes.html">A compra da Activision Blizzard do Xbox pode ser aprovada pela FTC no próximo mês</a> </li> <li> <a href="https://www.reviltec.com.br/estes-seis-jogos-estao-chegando-ao-xbox-game-pass-19-a-29-de-julho.html">Estes seis jogos estão chegando ao Xbox Game Pass (19 a 29 de julho)</a> </li> </ul> <div class="clear"></div></aside><aside id="tag_cloud-2" class="widget widget_tag_cloud"><h2 class="widget-title"><span class="active">Marcadores!</span></h2><div class="tagcloud"><a href="https://www.reviltec.com.br/tag/agora" class="tag-cloud-link tag-link-213 tag-link-position-1" style="font-size: 9.3391304347826pt;" aria-label="agora (251 itens)">agora</a> <a href="https://www.reviltec.com.br/tag/android" class="tag-cloud-link tag-link-1192 tag-link-position-2" style="font-size: 10.8pt;" aria-label="Android (331 itens)">Android</a> <a href="https://www.reviltec.com.br/tag/automa" class="tag-cloud-link tag-link-7604 tag-link-position-3" style="font-size: 8.2434782608696pt;" aria-label="automa (204 itens)">automa</a> <a href="https://www.reviltec.com.br/tag/automation" class="tag-cloud-link tag-link-7662 tag-link-position-4" style="font-size: 10.434782608696pt;" aria-label="automation (308 itens)">automation</a> <a href="https://www.reviltec.com.br/tag/automacao" class="tag-cloud-link tag-link-7609 tag-link-position-5" style="font-size: 12.747826086957pt;" aria-label="automação (481 itens)">automação</a> <a href="https://www.reviltec.com.br/tag/como" class="tag-cloud-link tag-link-47 tag-link-position-6" style="font-size: 19.078260869565pt;" aria-label="Como (1.585 itens)">Como</a> <a href="https://www.reviltec.com.br/tag/dos" class="tag-cloud-link tag-link-268 tag-link-position-7" style="font-size: 8.1217391304348pt;" aria-label="dos (198 itens)">dos</a> <a href="https://www.reviltec.com.br/tag/esta" class="tag-cloud-link tag-link-99 tag-link-position-8" style="font-size: 16.4pt;" aria-label="está (949 itens)">está</a> <a href="https://www.reviltec.com.br/tag/estao" class="tag-cloud-link tag-link-92 tag-link-position-9" style="font-size: 10.678260869565pt;" aria-label="estão (324 itens)">estão</a> <a href="https://www.reviltec.com.br/tag/galaxy" class="tag-cloud-link tag-link-973 tag-link-position-10" style="font-size: 8.1217391304348pt;" aria-label="Galaxy (198 itens)">Galaxy</a> <a href="https://www.reviltec.com.br/tag/game" class="tag-cloud-link tag-link-94 tag-link-position-11" style="font-size: 12.991304347826pt;" aria-label="Game (495 itens)">Game</a> <a href="https://www.reviltec.com.br/tag/google" class="tag-cloud-link tag-link-1010 tag-link-position-12" style="font-size: 13.35652173913pt;" aria-label="Google (530 itens)">Google</a> <a href="https://www.reviltec.com.br/tag/jogo" class="tag-cloud-link tag-link-495 tag-link-position-13" style="font-size: 8.7304347826087pt;" aria-label="jogo (225 itens)">jogo</a> <a href="https://www.reviltec.com.br/tag/jogos" class="tag-cloud-link tag-link-32 tag-link-position-14" style="font-size: 14.939130434783pt;" aria-label="jogos (720 itens)">jogos</a> <a href="https://www.reviltec.com.br/tag/mais" class="tag-cloud-link tag-link-102 tag-link-position-15" style="font-size: 15.060869565217pt;" aria-label="mais (744 itens)">mais</a> <a href="https://www.reviltec.com.br/tag/melhores" class="tag-cloud-link tag-link-204 tag-link-position-16" style="font-size: 14.086956521739pt;" aria-label="Melhores (609 itens)">Melhores</a> <a href="https://www.reviltec.com.br/tag/microsoft" class="tag-cloud-link tag-link-336 tag-link-position-17" style="font-size: 8pt;" aria-label="Microsoft (196 itens)">Microsoft</a> <a href="https://www.reviltec.com.br/tag/modelos" class="tag-cloud-link tag-link-121 tag-link-position-18" style="font-size: 10.313043478261pt;" aria-label="modelos (303 itens)">modelos</a> <a href="https://www.reviltec.com.br/tag/news" class="tag-cloud-link tag-link-8 tag-link-position-19" style="font-size: 10.313043478261pt;" aria-label="News (300 itens)">News</a> <a href="https://www.reviltec.com.br/tag/noticias" class="tag-cloud-link tag-link-500 tag-link-position-20" style="font-size: 12.260869565217pt;" aria-label="notícias (435 itens)">notícias</a> <a href="https://www.reviltec.com.br/tag/nova" class="tag-cloud-link tag-link-591 tag-link-position-21" style="font-size: 8.4869565217391pt;" aria-label="nova (214 itens)">nova</a> <a href="https://www.reviltec.com.br/tag/novo" class="tag-cloud-link tag-link-192 tag-link-position-22" style="font-size: 12.382608695652pt;" aria-label="novo (448 itens)">novo</a> <a href="https://www.reviltec.com.br/tag/nao" class="tag-cloud-link tag-link-554 tag-link-position-23" style="font-size: 9.095652173913pt;" aria-label="não (237 itens)">não</a> <a href="https://www.reviltec.com.br/tag/para" class="tag-cloud-link tag-link-31 tag-link-position-24" style="font-size: 22pt;" aria-label="para (2.784 itens)">para</a> <a href="https://www.reviltec.com.br/tag/pass" class="tag-cloud-link tag-link-95 tag-link-position-25" style="font-size: 12.260869565217pt;" aria-label="Pass (439 itens)">Pass</a> <a href="https://www.reviltec.com.br/tag/pode" class="tag-cloud-link tag-link-66 tag-link-position-26" style="font-size: 11.286956521739pt;" aria-label="pode (365 itens)">pode</a> <a href="https://www.reviltec.com.br/tag/por" class="tag-cloud-link tag-link-1102 tag-link-position-27" style="font-size: 11.408695652174pt;" aria-label="Por (371 itens)">Por</a> <a href="https://www.reviltec.com.br/tag/principais" class="tag-cloud-link tag-link-120 tag-link-position-28" style="font-size: 8.3652173913043pt;" aria-label="principais (209 itens)">principais</a> <a href="https://www.reviltec.com.br/tag/pro" class="tag-cloud-link tag-link-125 tag-link-position-29" style="font-size: 8.4869565217391pt;" aria-label="Pro (214 itens)">Pro</a> <a href="https://www.reviltec.com.br/tag/robos" class="tag-cloud-link tag-link-7540 tag-link-position-30" style="font-size: 12.139130434783pt;" aria-label="robos (426 itens)">robos</a> <a href="https://www.reviltec.com.br/tag/robotica" class="tag-cloud-link tag-link-7559 tag-link-position-31" style="font-size: 13.84347826087pt;" aria-label="robotica (589 itens)">robotica</a> <a href="https://www.reviltec.com.br/tag/robotics" class="tag-cloud-link tag-link-7558 tag-link-position-32" style="font-size: 11.773913043478pt;" aria-label="Robotics (394 itens)">Robotics</a> <a href="https://www.reviltec.com.br/tag/robo" class="tag-cloud-link tag-link-1461 tag-link-position-33" style="font-size: 9.095652173913pt;" aria-label="robô (240 itens)">robô</a> <a href="https://www.reviltec.com.br/tag/samsung" class="tag-cloud-link tag-link-1199 tag-link-position-34" style="font-size: 9.2173913043478pt;" aria-label="Samsung (246 itens)">Samsung</a> <a href="https://www.reviltec.com.br/tag/semana" class="tag-cloud-link tag-link-208 tag-link-position-35" style="font-size: 8.6086956521739pt;" aria-label="semana (217 itens)">semana</a> <a href="https://www.reviltec.com.br/tag/series" class="tag-cloud-link tag-link-432 tag-link-position-36" style="font-size: 8.9739130434783pt;" aria-label="Series (236 itens)">Series</a> <a href="https://www.reviltec.com.br/tag/seu" class="tag-cloud-link tag-link-156 tag-link-position-37" style="font-size: 13.234782608696pt;" aria-label="seu (518 itens)">seu</a> <a href="https://www.reviltec.com.br/tag/sobre" class="tag-cloud-link tag-link-827 tag-link-position-38" style="font-size: 13.478260869565pt;" aria-label="sobre (550 itens)">sobre</a> <a href="https://www.reviltec.com.br/tag/sua" class="tag-cloud-link tag-link-506 tag-link-position-39" style="font-size: 9.704347826087pt;" aria-label="sua (267 itens)">sua</a> <a href="https://www.reviltec.com.br/tag/tavern" class="tag-cloud-link tag-link-45 tag-link-position-40" style="font-size: 8.8521739130435pt;" aria-label="Tavern (228 itens)">Tavern</a> <a href="https://www.reviltec.com.br/tag/uma" class="tag-cloud-link tag-link-38 tag-link-position-41" style="font-size: 14.939130434783pt;" aria-label="uma (722 itens)">uma</a> <a href="https://www.reviltec.com.br/tag/voce" class="tag-cloud-link tag-link-228 tag-link-position-42" style="font-size: 12.017391304348pt;" aria-label="você (416 itens)">você</a> <a href="https://www.reviltec.com.br/tag/video" class="tag-cloud-link tag-link-50 tag-link-position-43" style="font-size: 8.8521739130435pt;" aria-label="vídeo (230 itens)">vídeo</a> <a href="https://www.reviltec.com.br/tag/wordpress" class="tag-cloud-link tag-link-6 tag-link-position-44" style="font-size: 9.3391304347826pt;" aria-label="Wordpress (253 itens)">Wordpress</a> <a href="https://www.reviltec.com.br/tag/xbox" class="tag-cloud-link tag-link-18 tag-link-position-45" style="font-size: 18.95652173913pt;" aria-label="Xbox (1.535 itens)">Xbox</a></div> <div class="clear"></div></aside><aside id="text-3" class="widget widget_text"> <div class="textwidget"><p><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br /> <!-- 300La --><br /> <ins class="adsbygoogle" style="display: inline-block; width: 300px; height: 250px;" data-ad-client="ca-pub-2665391954140437" data-ad-slot="9652114502"></ins><br /> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></p> </div> <div class="clear"></div></aside><aside id="tag_cloud-3" class="widget widget_tag_cloud"><h2 class="widget-title"><span class="active">Categorias!</span></h2><div class="tagcloud"><a href="https://www.reviltec.com.br/category/android" class="tag-cloud-link tag-link-7 tag-link-position-1" style="font-size: 21.194888178914pt;" aria-label="Android (1.773 itens)">Android</a> <a href="https://www.reviltec.com.br/category/blog" class="tag-cloud-link tag-link-14 tag-link-position-2" style="font-size: 13.501597444089pt;" aria-label="Blog (33 itens)">Blog</a> <a href="https://www.reviltec.com.br/category/games" class="tag-cloud-link tag-link-2 tag-link-position-3" style="font-size: 21.194888178914pt;" aria-label="Games (1.766 itens)">Games</a> <a href="https://www.reviltec.com.br/category/musica" class="tag-cloud-link tag-link-8577 tag-link-position-4" style="font-size: 17.437699680511pt;" aria-label="Musica (254 itens)">Musica</a> <a href="https://www.reviltec.com.br/category/portfolio" class="tag-cloud-link tag-link-1 tag-link-position-5" style="font-size: 11.623003194888pt;" aria-label="Portfolio (12 itens)">Portfolio</a> <a href="https://www.reviltec.com.br/category/servicos" class="tag-cloud-link tag-link-4 tag-link-position-6" style="font-size: 8pt;" aria-label="Serviços (1 item)">Serviços</a> <a href="https://www.reviltec.com.br/category/tecnologia" class="tag-cloud-link tag-link-7511 tag-link-position-7" style="font-size: 22pt;" aria-label="Tecnologia (2.693 itens)">Tecnologia</a> <a href="https://www.reviltec.com.br/category/tutoriais" class="tag-cloud-link tag-link-46 tag-link-position-8" style="font-size: 21.507987220447pt;" aria-label="Tutoriais (2.102 itens)">Tutoriais</a> <a href="https://www.reviltec.com.br/category/wordpress" class="tag-cloud-link tag-link-3 tag-link-position-9" style="font-size: 17.79552715655pt;" aria-label="Wordpress (306 itens)">Wordpress</a> <a href="https://www.reviltec.com.br/category/xbox" class="tag-cloud-link tag-link-16 tag-link-position-10" style="font-size: 21.418530351438pt;" aria-label="Xbox (1.991 itens)">Xbox</a></div> <div class="clear"></div></aside> </section> </div> <div class="clear"></div> </div> <div class="clear"></div> <footer id="footer"> <div id="copyright"> Copyright 2009 a 2020 <a href="https://www.reviltec.com.br">Reviltec </a>. By <a href="http://www.vfilmes.net" target="_blank">Filmes</a> - <a href="http://www.silviapoit.com.br/" target="_blank">Sindico Profissional</a> - <a href="http://www.refugo.net" target="_blank">Notícias</a> and <a href="http://www.bee49.com" target="_blank">Games online</a>. </div> </footer> </div> <a class='scrollup' href='#'>Scroll</a> <div style="display:none"> <div class="grofile-hash-map-64d2149131c6fc5bf2511eb7a331bdfb"> </div> </div> <script type="text/javascript"> window.WPCOM_sharing_counts = {"https:\/\/www.reviltec.com.br\/dicas-de-acessibilidade-do-teclado-usando-html-e-css.html":23787}; </script> <script type="text/javascript" src="https://c0.wp.com/c/6.7.1/wp-includes/js/comment-reply.min.js" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script type="text/javascript" src="https://secure.gravatar.com/js/gprofiles.js?ver=202447" id="grofiles-cards-js"></script> <script type="text/javascript" id="wpgroho-js-extra"> /* <![CDATA[ */ var WPGroHo = {"my_hash":""}; /* ]]> */ </script> <script type="text/javascript" src="https://c0.wp.com/p/jetpack/14.0/modules/wpgroho.js" id="wpgroho-js"></script> <script type="text/javascript" src="https://c0.wp.com/p/jetpack/14.0/modules/likes/queuehandler.js" id="jetpack_likes_queuehandler-js"></script> <script type="text/javascript" src="https://stats.wp.com/e-202447.js" id="jetpack-stats-js" data-wp-strategy="defer"></script> <script type="text/javascript" id="jetpack-stats-js-after"> /* <![CDATA[ */ _stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"96977179\",\"post\":\"23787\",\"tz\":\"-3\",\"srv\":\"www.reviltec.com.br\",\"j\":\"1:14.0\"}") ]); _stq.push([ "clickTrackerInit", "96977179", "23787" ]); /* ]]> */ </script> <script type="text/javascript" id="sharing-js-js-extra"> /* <![CDATA[ */ var sharing_js_options = {"lang":"en","counts":"1","is_stats_active":"1"}; /* ]]> */ </script> <script type="text/javascript" src="https://c0.wp.com/p/jetpack/14.0/_inc/build/sharedaddy/sharing.min.js" id="sharing-js-js"></script> <script type="text/javascript" id="sharing-js-js-after"> /* <![CDATA[ */ var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-facebook' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-facebook' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomfacebook', 'menubar=1,resizable=1,width=600,height=400' ); return false; } } ); } )(); var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-x' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-x' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomx', 'menubar=1,resizable=1,width=600,height=350' ); return false; } } ); } )(); /* ]]> */ </script> <script type="text/javascript"> (function () { const iframe = document.getElementById( 'jetpack_remote_comment' ); const watchReply = function() { // Check addComment._Jetpack_moveForm to make sure we don't monkey-patch twice. if ( 'undefined' !== typeof addComment && ! addComment._Jetpack_moveForm ) { // Cache the Core function. addComment._Jetpack_moveForm = addComment.moveForm; const commentParent = document.getElementById( 'comment_parent' ); const cancel = document.getElementById( 'cancel-comment-reply-link' ); function tellFrameNewParent ( commentParentValue ) { const url = new URL( iframe.src ); if ( commentParentValue ) { url.searchParams.set( 'replytocom', commentParentValue ) } else { url.searchParams.delete( 'replytocom' ); } if( iframe.src !== url.href ) { iframe.src = url.href; } }; cancel.addEventListener( 'click', function () { tellFrameNewParent( false ); } ); addComment.moveForm = function ( _, parentId ) { tellFrameNewParent( parentId ); return addComment._Jetpack_moveForm.apply( null, arguments ); }; } } document.addEventListener( 'DOMContentLoaded', watchReply ); // In WP 6.4+, the script is loaded asynchronously, so we need to wait for it to load before we monkey-patch the functions it introduces. document.querySelector('#comment-reply-js')?.addEventListener( 'load', watchReply ); const commentIframes = document.getElementsByClassName('jetpack_remote_comment'); window.addEventListener('message', function(event) { if (event.origin !== 'https://jetpack.wordpress.com') { return; } if (!event?.data?.iframeUniqueId && !event?.data?.height) { return; } const eventDataUniqueId = event.data.iframeUniqueId; // Change height for the matching comment iframe for (let i = 0; i < commentIframes.length; i++) { const iframe = commentIframes[i]; const url = new URL(iframe.src); const iframeUniqueIdParam = url.searchParams.get('iframe_unique_id'); if (iframeUniqueIdParam == event.data.iframeUniqueId) { iframe.style.height = event.data.height + 'px'; return; } } }); })(); </script> </body> </html> <!-- Page cached by LiteSpeed Cache 6.5.2 on 2024-11-24 20:38:55 -->