Explore o núcleo - complementos de acessibilidade no Joomla 4.1

Todo mundo tem suas próprias preferências e necessidades - e o Joomla cuida de todas elas.

Além de todas as medidas tomadas no núcleo para fornecer uma ferramenta de autoria acessível, existem complementos no Joomla que podem facilitar sua vida e deixar seus usuários e clientes mais confortáveis. 

Essas adições podem ser úteis - mas esteja ciente de que elas não tornam um site acessível por si mesmas!

Back-end: configurações de acessibilidade individual

No Joomla 4 é possível alterar as configurações do back-end com base no usuário: cada usuário pode adaptar o back-end às suas necessidades. As configurações de acessibilidade podem ser encontradas no perfil do usuário (Usuários -> Gerenciar) e no menu do usuário no canto superior direito do seu back-end.

configurações de acessibilidade

usuário de configurações de acessibilidade

 

Existem quatro configurações diferentes que podem ser usadas individualmente ou em combinação. Monocromático mudará as cores do back-end de azul para preto/branco:

configurações de acessibilidade monocromático

O alto contraste removerá parte do fundo e tornará o contraste mais claro:

configurações de acessibilidade alto contraste

 

Highlight Links adiciona sublinhados e bordas a todos os links no back-end:

links de destaque de configurações de acessibilidade



Aumentar o tamanho da fonte altera o tamanho básico da fonte para 18px (o tamanho da fonte padrão nos navegadores é principalmente 16px).

Para usuários: Plug-in de navegação rápida

Este plug-in é ativado por padrão para o back-end, mas também pode ser ativado para o front-end.

pular para a navegação

 

Ajuda os usuários de teclado a pular diretamente para uma região do site. 

infraestrutura de navegação a11y

back-end aberto de navegação a11y

Para usuários: Plug-in de Acessibilidade

As configurações de acessibilidade são úteis para adaptar o back-end para cada usuário individual do back-end. Mas também é possível oferecer recursos de acessibilidade para os visitantes da sua página. O plug-in "Recursos adicionais de acessibilidade" pode ser ativado para back-end, front-end ou ambos: 

recursos de acessibilidade

opções de recursos de acessibilidade

 

O plug-in adiciona um botão na parte inferior da página. Para abrir/fechar as funções, você pode usar uma tecla de atalho, CTRL+ALT+A no Windows ou CTRL+OPTION+A no MacOS.

botão de recursos de acessibilidade

 

Com o plugin o usuário pode aumentar ou diminuir o tamanho da fonte e aumentar ou diminuir o espaçamento do texto para melhorar a legibilidade do conteúdo.

O usuário também pode inverter as cores da página, adicionar sublinhados a todos os links, aumentar o cursor, ativar um guia de leitura e também converter texto em fala.

recursos de acessibilidade abertos
Captura de tela do Firefox

 

Existe uma função para mudar os tons de cinza da página, que pode ser usada no Edge ou no Chrome, mas está desativada no Firefox.

recursos de acessibilidade borda aberta
Borda da captura de tela

 

Para algumas funções existem teclas de atalho especiais:

Módulo ou função

tecla de atalho

Alternar menu

CTRL + ALT + A

tons de cinza

CTRL + ALT + G

Sublinhar Links

CTRL + ALT + U

Grande Cursor

CTRL + ALT + C

Guia de leitura

CTRL + ALT + R

Texto para fala

CTRL + ALT + T

Fala para texto

CTRL + ALT + S




recursos de acessibilidade guia de leituraCaptura de tela da página de demonstração do Cassiopeia com o guia de leitura ativado

 

O plug-in Recursos adicionais de acessibilidade não resolve nenhum problema de acessibilidade que seu site possa ter. O site precisa ser construído corretamente para acessibilidade desde o início.

Pessoas com deficiência usam ferramentas especializadas (leitores de tela, ampliadores de tela, gravadores de braille, etc.) e provavelmente não usarão o plug-in, mas pode melhorar a usabilidade para idosos, pessoas com deficiência visual, pessoas com problemas cognitivos ms.

A ampliação de texto é muito útil para muitos idosos e pessoas que enxergam menos, muitas vezes desconhecem as possibilidades do navegador e gostam de usar tais ferramentas.

A versão de contraste não substituirá os contrastes corretos no site, mas pode ser útil para pessoas com visão fraca ou para pessoas que navegam no site, por exemplo, em um local ensolarado.

As WCAG não exigem que os links sejam sublinhados (devem ser destacados), mas os links sublinhados podem melhorar a acessibilidade para pessoas com deficiência visual ou com dificuldade de concentração.

Para usuários: linguagem das peças no TinyMCE

O que é?

Uma tag que marca uma parte de um texto como "outro idioma". É útil para mecanismos de pesquisa ou leitores de tela para que eles saibam que devem alterar seu idioma ou pronúncia. Imagine que um leitor de tela use a pronúncia em inglês para uma frase como "honni soit qui mal y pense" - soa estranho!

Como configurar?

No plugin TinyMCE você pode definir os idiomas que está utilizando em seus textos. 

linguagem das partes

 

Se você quiser facilitar para os editores, puxe o ícone de idioma para os ícones permitidos para seus editores. Caso contrário, eles precisam selecionar um idioma com o botão de formato e rolar até lá.

idioma das configurações do editor de peças

Como usá-lo no editor?

Escreva seu artigo e salve-o, marque as partes que estão em outro idioma, clique no ícone do mundo ou no menu suspenso de formatos e selecione o idioma desta parte.

linguagem do editor de peças

 

Agora esta parte do texto está marcada como alemão. O leitor de tela mudará a pronúncia de acordo e os mecanismos de pesquisa também entenderão seu texto.

Para autores e editores: Verificador de acessibilidade - jooa11y 

Lembre-se deste artigo de Brian Teeman anunciando um novo e empolgante aprimoramento do Joomla: https://magazine.joomla.org/all-issues/july-2021/a-web-without-barriers. 

Agora temos a bordo! 

Este plug-in ajuda a fornecer conteúdo acessível em seu site.

Onde você pode achar isso?

É um plugin do sistema, seu nome é jooa11y.Você tem este plugin com o Joomla versão 4.1.0, ele está ativado por padrão. 

plug-in do verificador de acessibilidade

 

No plugin você pode definir qual área do seu site é verificada (o padrão é a área principal) e pode incluir ou excluir algumas regras. Para começar basta manter as configurações pré-definidas.

Quem se beneficia com isso?

Visitantes do seu site, porque eles obtêm conteúdo sem barreiras.

Autores de conteúdo em seu site, porque podem produzir conteúdo sem barreiras.

Agências e desenvolvedores web - eles têm produtos que permitem fornecer conteúdo sem barreiras

Como usá-lo?

Escreva qualquer artigo e salve ou abra qualquer artigo existente. 

Ative o botão “Verificação de Acessibilidade” na barra de ferramentas e imediatamente o verificador de acessibilidade indicará em uma janela de visualização se há violações das regras conhecidas. 

Atenção: assim como um verificador ortográfico ou gramatical, esta é uma ferramenta, realiza verificações automáticas. Não pode encontrar violações de regras que não estejam especificadas no programa e pode marcar violações que são intencionais e corretas no contexto de um artigo. A responsabilidade é sempre sua.

Como funciona?

Você certamente se lembra da famosa regra “O contraste da cor do texto e da cor do fundo deve ter uma taxa de contraste de > 4,5”?

O plug-in verifica esta regra e muitas outras uma a uma e toda violação de uma regra aciona um erro e será marcada com um ícone na visualização.

Você pode definir qual área do seu site é verificada (nos parâmetros do plugin, o padrão é a área principal) e pode incluir ou excluir algumas regras. 

Enquanto algumas regras são bem definidas e são definitivamente erros, outras regras são violações de boas práticas. Elas são avisos e você pode decidir por si mesmo se isso é aceitável e intencional em seu contexto ou se você precisa corrigir isso. 

Atrás de cada ícone você pode encontrar uma descrição - e às vezes conselhos sobre como resolver o problema ou qual é a melhor prática.

verificador de acessibilidade em ação

 

No canto inferior direito, o ícone do verificador fornece as primeiras informações. Ele mostra o número de problemas, se forem encontrados. Clicando no botão alterna as informações detalhadas no texto.

Vamos ao passo a passo: 

O verificador foi encontrado

  • Erros de contraste em dois lugares - são erros.
  • Um link que tem target=_blank. Isso pode ser correto e intencional - mas em geral não é uma boa prática e, portanto, um aviso é exibido. 
  • Uma imagem sem texto alternativo - isso é um erro. 

Observações

Todas as configurações e plug-ins apresentados aqui não resolvem nenhum problema de acessibilidade em seu site. Para tornar um site acessível, você precisa de uma estrutura HTML semântica correta e um bom CSS. O núcleo do Joomla ajuda você com estruturas acessíveis nas diferentes visualizações, como rótulos corretos e campos de entrada em formulários. 

Se estiver usando um modelo de terceiros, você deve estar ciente das substituições que alteram a estrutura original das visualizações. Um bom modelo pode prejudicar a acessibilidade de um site, se o contraste de cores não for bom ou se os elementos não puderem ser acessados ​​pelo teclado. A acessibilidade tem muitas facetas e plug-ins são apenas uma ajuda para visitantes que usam seu site de uma maneira diferente da sua.

Espaço para melhorias

O Joomla está sempre "em andamento" e os plug-ins discutidos aqui ainda estão evoluindo. No próximo Google Summer of Code, incluímos um projeto de acessibilidade que deve melhorar o plug-in de acessibilidade. Fique atento e pense acessível!

Obrigado

Este artigo é uma co-produção com Christiane Maier-Stadtherr . Confira neste link outros artigos de Christiane .

Agradecemos a Stefan Wajda por seus comentários úteis.

Sou Cientista da Computação e SEMPRE TIVE interesse em Guis Amigáveis.Encontrei o Joomla em 2008 e foi perdido.uso de cabelo deixei para propram no Joomla.Então agora gosto de controlar esse ótimo cms. 

https://volunteers.joomla.org/joomlers/1961-christiane-maier-stadtherr

 

Observe que este site usa um sistema de tradução automática para ajudar na tradução para os diferentes idiomas. Pedimos desculpas por qualquer erro ou erro de digitação que possa ser mostrado nos diferentes textos.