À medida que avançamos para 2024, o FSE do WordPress continua a ter um impacto real no web design, especialmente em termos de acessibilidade e experiência do usuário. Com o FSE, personalizar cada canto de um site é mais intuitivo, oferecendo uma experiência de design integrada.
Estas inovações não estão apenas a melhorar o apelo estético dos websites, mas também a sua funcionalidade, tornando o conteúdo da web mais acessível e envolvente para um público diversificado.
Como a edição completa do site WordPress melhora a acessibilidade
No contexto do WordPress Full Site Editing (FSE), acessibilidade refere-se ao design de sites de forma que todos os usuários, incluindo aqueles com deficiência, possam navegar facilmente e interagir com o conteúdo.
WordPress FSE melhora a acessibilidade de várias maneiras. Aqui estão os 6 aspectos que discutiremos hoje:
- Navegação pelo teclado: Um aspecto vital da acessibilidade na web é a navegação pelo teclado. Os temas WordPress FSE garantem que todos os controles, como menus de navegação e campos de formulário, sejam acessíveis via teclado. Isso é essencial para usuários que dependem de teclados em vez de mouse ou touchpad.
- Funções de referência ARIA: essas funções definem áreas de uma página (como banners, navegação, conteúdo principal) de uma forma que os leitores de tela possam entender. Os temas FSE permitem que os desenvolvedores atribuam essas funções a vários blocos, melhorando a navegação do site para usuários de leitores de tela.
- Contraste e Visibilidade: os temas FSE são obrigados a atender a determinados padrões de contraste de cores entre o texto e o plano de fundo, tornando o conteúdo legível para usuários com deficiência visual. Esta adesão às taxas de contraste está alinhada com as Diretrizes de Acessibilidade para Conteúdo da Web (WCAG) 2.0.
- Texto do link compreensível: os links dentro do conteúdo devem ser claramente distinguíveis e compreensíveis. No FSE, os links normalmente são sublinhados e o uso de sequências de texto repetitivas e não contextuais para links é desencorajado para garantir a clareza.
- Formulários acessíveis: Os formulários nos temas FSE, incluindo pesquisas e comentários, devem ter contornos de foco visíveis e rótulos apropriados, garantindo que sejam acessíveis a todos os usuários, inclusive aqueles que usam leitores de tela.
- Títulos e Estrutura: o uso adequado de títulos HTML é essencial para que os leitores de tela funcionem corretamente. Os temas FSE incentivam uma estrutura lógica de títulos, ajudando os usuários a navegar pelo conteúdo de maneira mais eficaz.
Agora, vamos nos aprofundar em cada um desses aspectos.
Navegação pelo teclado
A navegação pelo teclado é uma parte fundamental de qualquer interface acessível e obrigatória para quem depende de tecnologias assistivas.
O FSE incorpora a navegação pelo teclado de forma inata.
Veja como:
Modo de navegação
Introduzido no Editor de Blocos, o modo Navegação é um recurso importante para usuários de leitores de tela e aqueles que dependem da navegação pelo teclado. Ele permite que as pessoas naveguem com eficiência pelo editor usando Aba e teclas de seta. Este modo permite acesso rápido aos blocos desejados sem a necessidade de percorrer grandes partes do conteúdo, economizando tempo e melhorando a acessibilidade.
Navegando em blocos aninhados
A versão mais recente do modo de navegação no Block Editor permite que você se mova entre blocos pai e filho (aninhados) e entre blocos no mesmo nível. Entrar no modo de navegação é tão simples quanto selecionar um bloco e pressionar o botão ESC chave. Dentro deste modo, você pode usar o ACIMA ou ABAIXO teclas de seta para navegar dentro do mesmo nível, o ESQUERDA tecla de seta para entrar em um nível aninhado, e a tecla CERTO tecla de seta para sair de um nível aninhado.
Atalhos do teclado
Para aumentar ainda mais a eficiência e a acessibilidade, o editor de blocos inclui vários atalhos de teclado. Esses atalhos facilitam tarefas como inserir novos blocos acima ou abaixo dos blocos selecionados e mover blocos para cima e para baixo na página. Esse recurso é particularmente benéfico para usuários de leitores de tela que dependem de comandos do teclado.
Melhorias de usabilidade
O editor de blocos no WordPress FSE também inclui melhorias de usabilidade, como o Exibição de lista e pão ralado. Esses recursos fornecem múltiplas maneiras de acessar blocos, melhorando a usabilidade da plataforma para pessoas com diversas habilidades.
A visualização de lista, por exemplo, mostra uma lista resumida de todos os blocos usados na página, para que você possa pular para qualquer bloco no editor com um simples clique.
Pular Links
Um recurso vital para acessibilidade, links para pular são adicionados automaticamente em temas de bloco se a página contiver um elemento. Esses links, que são o primeiro item focalizável em uma página, permitem que os usuários pulem para o conteúdo principal, evitando a navegação repetitiva.
Funções de referência ARIA
As funções de referência do ARIA (Accessible Rich Internet Applications) ajudam a melhorar a acessibilidade dos temas do WordPress Full Site Editing, especialmente para usuários de leitores de tela. Eles servem como auxílio à navegação e facilitam a localização e a movimentação por áreas significativas de uma página da web.
Veja como o WordPress FSE incorpora funções de referência ARIA:
-
Funções padrão em elementos HTML5: No WordPress, muitos elementos HTML5 definem inerentemente funções de referência ARIA. Por exemplo, o
- Atribuindo funções a áreas de conteúdo: para que um site seja acessível, todo o conteúdo deve estar contido em elementos que tenham funções de referência ARIA. Isso garante que nenhum conteúdo seja perdido pelos usuários de leitores de tela. As funções principais incluem banner para cabeçalhos, principal para áreas de conteúdo primário, complementar para barras laterais e navegação para menus.
-
Atribuição manual de funções: embora o HTML5 forneça funções de referência padrão, navegadores mais antigos ou determinadas tecnologias assistivas podem nem sempre reconhecê-las. Nesses casos, os desenvolvedores podem atribuir funções manualmente, como
-
Rotulagem exclusiva para funções repetidas: se a mesma função aparecer mais de uma vez em uma página, como em diversas seções de navegação, é importante usar o
aria-labelatributo para diferenciá-los. Isso ajuda os usuários de leitores de tela a distinguir entre diferentes seções, como “Navegação superior” e “Navegação inferior”. - Limitações e diretrizes de função: embora não exista uma regra estrita sobre o número de pontos de referência que uma página deve ter, muitos pontos de referência podem confundir o usuário. Os temas WordPress são incentivados a usar um número razoável de pontos de referência e são obrigados a oferecer suporte a widgets de navegação HTML5 para semântica de pontos de referência.
Contraste e Visibilidade
Garantir contraste e visibilidade adequados é outra maneira de criar um site acessível e fácil de usar. A edição completa do site incorpora bem essas prioridades por meio do uso de:
Predefinições de estilo global
O FSE inclui um recurso que permite aos usuários acessar e modificar predefinições de estilo global, que incluem tipografia, cores e layout. Isso significa que você pode garantir que o texto e outros elementos do site sejam facilmente legíveis e acessíveis.
Contraste de cores
Garantir o contraste adequado entre as cores do texto e do fundo é vital para a legibilidade, especialmente para pessoas com deficiência visual. O FSE e seus temas são projetados para estar em conformidade com as WCAG para luminosidade de cores. Isso inclui manter uma taxa mínima de contraste de cores de 4,5:1 para texto normal. Um contraste de cores alto o suficiente pode ser verificado usando as ferramentas de seleção de cores integradas no editor de blocos. Essas ferramentas fornecem avisos caso o contraste esteja muito baixo, ajudando a manter os padrões de acessibilidade.
Tipografia e legibilidade
Opções de personalização para tipografia, como família de fontes, tamanho e altura da linha, estão disponíveis nas visualizações do editor de bloco e do editor de site. Essas configurações desempenham um papel significativo na garantia da legibilidade do texto em diferentes dispositivos e para usuários com capacidades visuais variadas. Temas como Twenty Twenty-Four oferecem essas opções de personalização, para que você possa ajustar o tamanho das fontes com facilidade.
Gerenciando planos de fundo e layout
Atualizações recentes no WordPress, como na versão 6.4, introduziram recursos para gerenciar imagens de fundo em blocos, como o Grupo bloquear. Esses recursos incluem tamanho de fundo e opções de repetição, o que pode ser uma maneira conveniente de manter a visibilidade e a legibilidade do texto sobre imagens de fundo.
Texto do link compreensível
Links em grandes seções de texto, como conteúdo de postagem ou comentários, devem ser sublinhados para serem claramente distinguíveis do conteúdo ao redor. Esse requisito faz com que os links sejam facilmente identificáveis, o que é importante tanto para usuários com visão quanto para usuários de leitores de tela.
O sublinhado é o único método aceito para indicar links dentro do conteúdo dos temas FSE.
Formulários acessíveis
A responsabilidade de fornecer blocos acessíveis, inclusive aqueles utilizados em formulários, é do próprio WordPress. Essa mudança significa que os desenvolvedores de temas precisam usar esses blocos corretamente, sem comprometer seus recursos de acessibilidade. Os formulários criados usando blocos como Pesquisa e Comentários são projetados para serem acessíveis, por padrão.
Da mesma forma, os formulários de comentários devem ter rótulos de campo apropriados, com todo o conteúdo das tags do formulário explicitamente associado a um controle de formulário. Essa clareza é essencial para que os usuários de leitores de tela entendam e interajam com os formulários de maneira adequada.
E para formulários como formulários de envio de comentários, é vital que as respostas pós-envio, como erros ou confirmações, sejam perceptíveis por todos os usuários. A navegação pelo teclado é incorporada aqui para garantir que aqueles que usaram um dispositivo auxiliar para preencher um formulário sejam direcionados de volta ao site principal após o envio sem problemas.
Saber mais
Interessado em aprender mais sobre como priorizar a acessibilidade em seus designs web? Já cobrimos esse assunto extensivamente:
Olhando para o futuro: acessibilidade em futuros temas WordPress
À medida que olhamos para o futuro dos temas WordPress, fica claro que a acessibilidade continuará a ser um foco principal – como deveria ser. Os avanços na edição completa de sites já estabeleceram uma base sólida para a criação de sites mais inclusivos e fáceis de usar.
E à medida que o Editor de Blocos, a Edição Completa do Site e o próprio WordPress evoluem, eles têm a chance de capacitar os criadores da web com mais ferramentas e opções que levam a web a um espaço mais acessível para todos.
