{"id":3142,"date":"2022-11-15T10:09:22","date_gmt":"2022-11-15T10:09:22","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/4-common-web-accessibility-issues-to-know\/"},"modified":"2026-03-09T13:10:53","modified_gmt":"2026-03-09T13:10:53","slug":"problema-de-relacao-de-contraste","status":"publish","type":"post","link":"https:\/\/thecodest.co\/pt\/blog\/contrast-ratio-issue\/","title":{"rendered":"4 problemas comuns de acessibilidade da Web a conhecer"},"content":{"rendered":"

Problema de rela\u00e7\u00e3o de contraste<\/h2>\n\n\n\n

O problema de acessibilidade mais comum que tenho visto ao longo dos anos \u00e9 a problema de contraste e acessibilidade de cores<\/b>Uma m\u00e1 rela\u00e7\u00e3o de contraste dificultar\u00e1 a visualiza\u00e7\u00e3o do conte\u00fado da sua p\u00e1gina, o que ser\u00e1 muito prejudicial para os seus utilizadores, incluindo os que t\u00eam defici\u00eancias visuais. <\/p>\n\n\n\n

O contraste \u00e9 uma medida da diferen\u00e7a na perce\u00e7\u00e3o da \"lumin\u00e2ncia\" ou brilho entre duas cores, por exemplo, \u00e9 a diferen\u00e7a entre a cor de fundo e a cor de primeiro plano do conte\u00fado da sua p\u00e1gina. Vejamos esta barra de navega\u00e7\u00e3o.<\/p>\n\n\n\n

\"barra<\/figure>\n\n\n\n

Digamos que o seu cliente gosta mesmo daquela cor esverdeada e a acha espetacular, mas h\u00e1 aqui um problema de contraste. Temos um #FFFFFF<\/code> fundo com um #83A94C<\/code> cor do texto, resultando numa rela\u00e7\u00e3o de contraste de 2,71:1, que \u00e9 muito inferior ao m\u00ednimo 4.5:1<\/strong> necess\u00e1rio. Para detetar este problema, temos v\u00e1rias solu\u00e7\u00f5es: <\/p>\n\n\n\n

    \n
  1. Utilize um verificador de contraste em linha como o Verificador de contraste Webaim<\/a>, que calcular\u00e1 a rela\u00e7\u00e3o de contraste e fornecer\u00e1 uma Passar<\/strong> ou Falhar<\/strong> grau.<\/li>\n\n\n\n
  2. Utilize uma das muitas extens\u00f5es de verifica\u00e7\u00e3o de contraste do navegador, por exemplo: WCAG Verificador de contraste de cor<\/a>.<\/li>\n\n\n\n
  3. Experimente o verificador de contraste integrado do navegador. Para o utilizar no Google Chrome, abra as ferramentas de desenvolvimento, inspeccione o elemento visado (ex: liga\u00e7\u00e3o Home da nossa barra de navega\u00e7\u00e3o), v\u00e1 \u00e0 propriedade de cor CSS e clique no ret\u00e2ngulo de cor para abrir o seletor de cores. O processo \u00e9 exatamente o mesmo para o Firefox, apenas uma pequena diferen\u00e7a no r\u00e1cio \u00e9 mostrada no canto inferior esquerdo do seletor de cores.<\/li>\n<\/ol>\n\n\n\n
    \"preto<em>fundo<\/em>com<em>c\u00f3digo<\/figure>\n\n\n\n

    Para obter mais informa\u00e7\u00f5es sobre o contraste, consulte Artigo sobre acessibilidade ao contraste e \u00e0 cor<\/a>.<\/p>\n\n\n\n

    Problema do texto da liga\u00e7\u00e3o<\/h2>\n\n\n\n

    As hiperliga\u00e7\u00f5es s\u00e3o uma parte importante do web<\/a> Hoje em dia, \u00e9 muito importante torn\u00e1-las acess\u00edveis. Uma hiperliga\u00e7\u00e3o deve fazer sentido e informar o utilizador do seu contexto, por isso, uma hiperliga\u00e7\u00e3o pouco informativa com texto como \"leia mais\", \"clique aqui\", \"verifique os detalhes\" n\u00e3o \u00e9 muito \u00fatil. produto<\/a> Por exemplo, \u00e9 melhor e mais informativo utilizar o nome do produto, como \"O capacete Mandaloriano\". Palavras como clique aqui<\/code> ou mais sobre<\/code> pode ser omitido porque uma liga\u00e7\u00e3o \u00e9 clic\u00e1vel por defeito e algo como \"mais sobre as not\u00edcias de hoje\" pode ser encurtado para \"not\u00edcias de hoje\". N\u00e3o h\u00e1 nenhuma regra especial ou limite sobre o comprimento da liga\u00e7\u00e3o, o a liga\u00e7\u00e3o tem de ser leg\u00edvel<\/b> e suficientemente longo para descrever bem o seu objetivo.<\/p>\n\n\n\n

    As imagens como hiperliga\u00e7\u00f5es s\u00e3o um padr\u00e3o muito utilizado, pelo que t\u00eam de seguir as mesmas regras de que fal\u00e1mos acima. O atributo alt da imagem desempenhar\u00e1 o papel de texto da liga\u00e7\u00e3o e ser\u00e1 anunciado pelos leitores de ecr\u00e3. Existem v\u00e1rios cen\u00e1rios para o tratamento de imagens como hiperliga\u00e7\u00f5es: se a imagem for o \u00fanico conte\u00fado da hiperliga\u00e7\u00e3o, tem de ter um atributo alt; se a hiperliga\u00e7\u00e3o tiver algum texto e imagem, podemos omitir o atributo alt:<\/p>\n\n\n\n

    \r<a href="\/notifications">\r\n  <img src="\/img\/notification.png" alt="Notificações">\r\n<\/a><\/code><\/pre>\n\n\n\n
    Veja algumas liga\u00e7\u00f5es aqui para ler sobre a acessibilidade das liga\u00e7\u00f5es:Texto e aspeto da liga\u00e7\u00e3o<\/a>, Imagens funcionais<\/a>.<\/p>\n\n\n\n
    Entrada de formul\u00e1rio sem r\u00f3tulo<\/h2>\n\n\n\n
    \"input<em>labels<\/em>with<em>blue<\/em>button\"<\/figure>\n\n\n\n
    Todos n\u00f3s j\u00e1 vimos estas entradas de formul\u00e1rio sem etiqueta e apenas com um marcador de posi\u00e7\u00e3o para descrever o objetivo da entrada. Uma primeira nota \u00e9 que, assim que o utilizador preencher todas as entradas e os marcadores de posi\u00e7\u00e3o deixarem de estar \u00e0 vista, n\u00e3o teremos qualquer contexto visual sobre o objetivo das entradas, mas vamos n\u00f3s<\/a> centrar-se na acessibilidade. <\/p>\n\n\n\n
    Associar um etiqueta<\/code> a uma entrada d\u00e1-nos duas grandes vantagens: um leitor de ecr\u00e3 ler\u00e1 a etiqueta quando o utilizador estiver concentrado na entrada do formul\u00e1rio e, quando uma etiqueta \u00e9 clicada ou tocada\/tocada, o browser passa o foco para a entrada associada. Uma solu\u00e7\u00e3o f\u00e1cil para este tipo de situa\u00e7\u00e3o \u00e9 simplesmente adicionar etiquetas da seguinte forma:<\/p>\n\n\n\n
        Nome pr\u00f3prio\n\n    \n  \n\n    Apelido\n\n    \n  \n\n    Correio eletr\u00f3nico\n\n    \n  \n\n    Enviar\n  \n\n```<\/code><\/pre>\n\n\n\n
    \u00c9 isso, todos os inputs t\u00eam as suas etiquetas associadas, tornando-os acess\u00edveis a toda a gente. Podemos at\u00e9 remover os marcadores de posi\u00e7\u00e3o para evitar duplicar o objetivo da entrada, mas todos sabemos que os cen\u00e1rios do mundo real n\u00e3o s\u00e3o assim t\u00e3o f\u00e1ceis de resolver, acab\u00e1mos de receber um desenho que tem estas entradas de formul\u00e1rio sem etiquetas e o cliente n\u00e3o quer alterar essa parte. A primeira solu\u00e7\u00e3o que vem \u00e0 mente \u00e9 aplicar um apresenta\u00e7\u00e3o: nenhum;<\/code> ou visibilidade: oculta;<\/code> \u00e0s nossas etiquetas, isto ir\u00e1 escond\u00ea-las, mas elas continuam l\u00e1, certo? Estas propriedades ocultam elementos n\u00e3o s\u00f3 no ecr\u00e3, mas tamb\u00e9m para os utilizadores de leitores de ecr\u00e3, pelo que n\u00e3o resolvem o nosso problema.<\/p>\n\n\n\n
    Podemos utilizar o padr\u00e3o de clipe<\/strong> para resolver este problema. Desta forma, ocultamos o conte\u00fado visualmente, mas fornecemos o conte\u00fado aos leitores de ecr\u00e3. Vamos criar o seguinte CSS apenas sr<\/code> e aplic\u00e1-la em todas as nossas etiquetas:<\/p>\n\n\n\n
     .sr-only:not(:focus):not(:active) {\n   clip: rect(0 0 0 0);\n   clip-path: inset(50%);\n   height: 1px;\n   overflow: hidden;\n   posi\u00e7\u00e3o: absoluta;\n   white-space: nowrap;\n   largura: 1px;\n }\n<\/code><\/code><\/pre>\n\n\n\n
    Isto ir\u00e1 ocultar as nossas etiquetas, torn\u00e1-las dispon\u00edveis para os leitores de ecr\u00e3 e corresponder ao nosso design. O :not(:focus):not(:active)<\/code> pseudo-classe impede que elementos focaliz\u00e1veis, tais como a<\/code>, bot\u00e3o<\/code>, entrada<\/code> de ficarem ocultos quando est\u00e3o a ser focados.<\/p>\n\n\n\n
    Sem indicador de focagem<\/h2>\n\n\n\n
    Em tempos, fiz isto na minha folha de estilos CSS global:<\/p>\n\n\n\n
    * {\noutline: none; \/* erro horr\u00edvel *\/\n}<\/code><\/pre>\n\n\n\n
    Por volta de 2020, reparei que apareciam contornos pretos nos formul\u00e1rios do Google Chrome quando estavam focados ou nos bot\u00f5es quando se entrava no separador - foi muito estranho, porque n\u00e3o percebi na altura. Depois de alguma pesquisa, descobri que isso se devia \u00e0 propriedade CSS de contorno, pelo que a remo\u00e7\u00e3o resolveu esse \"problema\".<\/p>\n\n\n\n
    Nessa altura, n\u00e3o fazia ideia de qual era a forma correta de o fazer.  Depois de fazer alguma investiga\u00e7\u00e3o sobre os porqu\u00eas e os comos dessa nova predefini\u00e7\u00e3o, descobri que o contorno \u00e9 um indicador de foco do elemento e que, se for removido, deve ser fornecido um estilo de foco \u00f3bvio. Pode personalizar os indicadores de foco como achar melhor, mas remov\u00ea-los completamente do s\u00edtio Web \u00e9 um grande problema de acessibilidade. Personalizar o estilo de foco de um elemento \u00e9 bastante f\u00e1cil, por exemplo:<\/p>\n\n\n\n
     a:focus {\n   outline: 4px solid #ee7834;\n   outline-offset: 4px;\n }<\/code><\/code><\/pre>\n\n\n\n
    Ferramentas de acessibilidade<\/h2>\n\n\n\n
    Verificar todas as quest\u00f5es de que fal\u00e1mos pode dar muito trabalho, especialmente sabendo que h\u00e1 muito mais coisas a tratar sobre acessibilidade, por isso, para nos ajudar a lidar com a acessibilidade, temos duas excelentes extens\u00f5es para o browser.<\/p>\n\n\n\n
    Ferramenta de avalia\u00e7\u00e3o WAVE<\/a> \u00e9 um conjunto de ferramentas de avalia\u00e7\u00e3o que nos ajuda a tornar o nosso conte\u00fado Web mais acess\u00edvel. Est\u00e1 dispon\u00edvel no Google Chrome e no Firefox. <\/p>\n\n\n\n
    Vamos experiment\u00e1-la numa pequena p\u00e1gina Web que cont\u00e9m uma barra de navega\u00e7\u00e3o e um input sem etiqueta e ver o que nos d\u00e1. Depois de instalar a extens\u00e3o, basta clicar no \u00edcone da extens\u00e3o para a utilizar.<\/p>\n\n\n\n
    \"janela<em><\/figure>\n\n\n\n
    O separador Resumo mostra 1 erro (elemento de formul\u00e1rio sem etiqueta), 2 erros de contraste e 1 alerta (estrutura de cabe\u00e7alho em falta). O separador Detalhes apresenta uma lista de todos os erros, alertas e carater\u00edsticas. Tamb\u00e9m podemos interagir diretamente na p\u00e1gina, clicando nos rect\u00e2ngulos vermelhos para verificar a descri\u00e7\u00e3o e o tipo de erro.<\/p>\n\n\n\n
    Axe DevTools<\/a> \u00e9 um conjunto de ferramentas de acessibilidade poderoso e preciso. Est\u00e1 dispon\u00edvel no Google Chrome e no Firefox. Depois de instalar a extens\u00e3o, temos de abrir as ferramentas de desenvolvimento do browser e ir para o separador axe DevTools e clicar em Verificar todas as minhas p\u00e1ginas.<\/p>\n\n\n\n
    \"DevTools<em>window<\/em>with<em>black<\/em>grey_sections\"<\/figure>\n\n\n\n
    Pode ver que a Axe DevTools comunicou os mesmos problemas com a ferramenta de avalia\u00e7\u00e3o WAVE, nomeadamente problemas de contraste, elementos de formul\u00e1rio sem etiqueta e elementos de cabe\u00e7alho em falta.<\/p>\n\n\n\n
    Uma forma adicional de testar a acessibilidade \u00e9 utilizar um leitor de ecr\u00e3 e testar o seu s\u00edtio Web com ele. Existem muitos leitores de ecr\u00e3 dispon\u00edveis, para citar apenas alguns:<\/p>\n\n\n\n