Editor de blocos: explore os novos recursos de acessibilidade do WordPress

Ao discutir o gerenciamento de conteúdo da web, o WordPress vem em mente. Alimentando 40% de todos os sites em 2021, o WordPress é o rei dos sistemas de gerenciamento de conteúdo (CMS). Apesar de sua popularidade, a plataforma tem seus problemas. Versões mais antigas do WordPress dificultavam a criação de páginas ricas em mídia, não forneciam uma experiência WYSIWYG e não eram amigáveis ​​ao leitor de tela.

Para tornar a experiência de edição mais acessível e fácil de usar, a equipe de desenvolvimento do WordPress introduziu o editor de blocos em dezembro de 2018. Também conhecido como Gutenberg, o editor de blocos do WordPress passou por grandes mudanças desde o seu lançamento para torná-lo uma plataforma que todos podem usar. Neste post, explicarei como o Gutenberg funciona e mostrarei seus novos recursos de acessibilidade.

O que é o Editor Gutenberg?

Gutenberg substituiu o editor TinyMCE como editor padrão do WordPress. Você não precisa usar o Gutenberg se não quiser. O WordPress oferece um plugin de editor clássico para baixar e instalar para usuários que ainda preferem o CMS antigo. Apesar da disponibilidade da opção mais antiga, mais de 46% dos usuários do WordPress mudaram para o novo editor de blocos.

O novo editor Gutenberg é construído com tecnologias modernas, oferecendo uma abordagem completamente diferente para a criação de conteúdo da web. Em vez de usar plugins e código personalizado para desenvolver conteúdo da web, o editor de blocos do WordPress conta com blocos para construir e projetar páginas da web. Esses blocos permitem que você desenvolva páginas pesadas de multimídia sem muito conhecimento técnico.

Como funciona o Editor Gutenberg?

Agora que você sabe que o Gutenberg é um editor baseado em blocos, provavelmente está se perguntando como funcionam os editores de blocos. O novo editor do WordPress é basicamente um editor de conteúdo de arrastar e soltar. Em vez de usar texto livre, mídia inserida e códigos de acesso para criar uma página da Web, você pode usar componentes/blocos intuitivos para criar, reposicionar e estilizar facilmente diferentes tipos de conteúdo.

Gutenberg oferece uma variedade de blocos especializados para diversos tipos de conteúdo. Alguns desses blocos incluem:

• Texto
• Imagem
• Vídeo
• Áudio
• Citar
• Colunas
• Lista
• Arquivo

Depois de selecionar um desses blocos na barra de ferramentas superior, você começa a adicionar conteúdo dentro do componente. Como cada bloco é uma entidade separada, você pode estilizar cada bloco ao seu gosto e arrastá-lo para qualquer lugar no editor para criar um layout de página exclusivo. O editor de blocos do WordPress oferece mais controle, flexibilidade e acessibilidade para criar conteúdo personalizado.

Recursos de acessibilidade do editor de blocos

Além de uma abordagem de bloco modular e funcionalidade de arrastar e soltar, o editor Gutenberg oferece muitos outros recursos de usabilidade e acessibilidade para melhorar a experiência de edição. Esses novos recursos tornam o WordPress mais fácil de usar para todos, incluindo usuários de leitores de tela. Abaixo, discutirei os novos recursos de acessibilidade do Gutenberg e fornecerei instruções sobre como usá-los.

Observação: Se você estiver usando um sistema Windows ou Linux, use CTRL em vez de ⌘ e ALT em vez de ⌥ para obter as instruções abaixo.

Navegação do teclado

Um dos maiores problemas com versões antigas do WordPress era que elas eram inacessíveis para usuários de leitores de tela. Mais de 7,6 milhões de adultos americanos têm deficiências visuais e usam tecnologias assistivas como leitores de tela para acessar conteúdo da web. Para tornar o WordPress acessível a usuários com deficiência visual, o editor de blocos introduziu o modo de navegação em 2019.

O modo de navegação não apenas torna o WordPress acessível aos usuários de leitores de tela, mas também melhora a usabilidade geral da plataforma. Esse novo recurso de acessibilidade permite que os usuários naveguem rapidamente pelo editor usando as teclas Tab e setas. Usar atalhos para chegar ao bloco desejado elimina a necessidade de interagir com grandes blocos de conteúdo, o que ajuda a economizar tempo.

Use as seguintes dicas de navegação de teclado do editor de blocos do WordPress para tornar a criação de conteúdo um processo mais eficiente:

Navegar entre blocos aninhados

Se você deseja acessar um bloco pai ou filho/aninhado sem percorrer toneladas de conteúdo, deve aproveitar o modo de navegação. A versão mais recente do modo de navegação permite que os usuários movam de blocos pai para filho e vice-versa, e entre blocos filho. Para entrar no modo de navegação, selecione um bloco e pressione a tecla ESC.

Depois que seu editor de blocos entrar no modo de navegação, use:

• Tecla de seta PARA CIMA ou PARA BAIXO para navegar dentro do mesmo nível
• Tecla de seta ESQUERDA para entrar em um nível aninhado
• Tecla de seta DIREITA para sair de um nível aninhado

Se você deseja mover o bloco selecionado para outro local, use as teclas ENTER ou SPACE para confirmar a nova posição.

Mover blocos entre diferentes níveis

Como cada vez mais blocos suportarão aninhamento no futuro, aprender a mover blocos entre diferentes níveis pode ajudá-lo a projetar layouts mais rapidamente. Uma das maneiras mais fáceis de reposicionar um bloco no Gutenberg é usar o método cortar ⌘X e colar ⌘V. Além disso, o editor de blocos oferece outro recurso que permite mover blocos usando o teclado.

Se você deseja mover blocos para dentro e para fora de um bloco pai, clique no item Opções no final da barra de ferramentas do bloco e selecione Mover para no menu. Use as seguintes teclas para mover seu bloco para qualquer lugar no editor:

• Tecla de seta PARA CIMA ou PARA BAIXO para mover o bloco dentro do mesmo nível
• Tecla de seta ESQUERDA para mover o bloco um nível acima
• Tecla de seta para a direita para mover o bloco um nível para baixo

Uma vez que você tenha alcançado o local desejado, use a tecla ENTER ou SPACE para fixar o bloco em sua nova posição.

Atalhos do teclado

O editor de blocos do WordPress oferece vários novos atalhos de teclado para aumentar a velocidade de trabalho e aumentar sua produtividade. Esses atalhos também são uma ferramenta indispensável para usuários de leitores de tela, pois dependem de comandos de teclado em vez de mouse para realizar o trabalho no computador. Aqui estão alguns atalhos de teclado úteis que tornam o novo WordPress mais acessível e eficiente:

Mover blocos para cima e para baixo na página

Um dos melhores novos recursos do editor de blocos, esse atalho de teclado é ótimo para mover rapidamente os blocos para cima e para baixo na página. Esse recurso pode parecer familiar para você, pois é semelhante a um atalho existente que insere um novo bloco antes ou depois dos blocos selecionados. Você pode usar os seguintes comandos de teclado para mover blocos novos e existentes.

Para posicionar um novo bloco, selecione um bloco existente no editor e use:

• ⌥⌘T: Para inserir um novo bloco acima do bloco selecionado
• ⌥⌘Y: Para inserir um novo bloco abaixo do bloco selecionado

Os atalhos de teclado para mover os blocos existentes são semelhantes aos acima. Eles apenas adicionam

a tecla de seta PARA CIMA para a sequência de comandos. Para reposicionar um bloco existente, selecione o bloco e use:

• ↑⌥⌘T: Para mover o(s) bloco(s) selecionado(s) para cima
• ↑⌥⌘Y: Para mover o(s) bloco(s) selecionado(s) para baixo

Entrar no modo de tela cheia

Você vai adorar esses novos atalhos de teclado no editor de blocos. Novas funcionalidades para alternar para o modo de tela cheia e ocultar a barra lateral de configurações expandem o espaço da tela para ajudá-lo a se concentrar melhor em seu trabalho. Ao eliminar as barras laterais e outras áreas discretas do editor, esses novos atalhos também reduzem a complexidade de navegação e edição de conteúdo para usuários de leitores de tela.

• ↑⌥⌘F: Leva você para o modo de tela cheia
• ↑⌘,: Oculta a barra lateral Configurações

Melhorias de usabilidade

Aumentar a usabilidade de uma plataforma a torna mais acessível a pessoas de diversas habilidades. Uma estratégia eficaz que pode tornar uma plataforma mais fácil de usar é permitir várias maneiras de fazer a mesma coisa. O editor de blocos do WordPress oferece muitas novas melhorias de usabilidade para reduzir as barreiras à realização do trabalho, ajudando assim a simplificar a experiência de edição para todos os usuários.

Aqui estão algumas atualizações de usabilidade que tornam o Gutenberg mais agradável para todos:

Exibição de lista

A Visualização de Lista é uma funcionalidade existente no editor de blocos que está sendo constantemente aprimorada para facilitar a navegação e a seleção de blocos. Esse recurso de usabilidade reside na barra de ferramentas superior do Gutenberg e exibe uma lista de tópicos de todos os blocos usados ​​na página. Com um simples clique nos itens da lista, você pode pular para qualquer bloco no editor.

Versões mais antigas do modo de exibição de lista recolhiam blocos aninhados por padrão, o que tornava mais complicado acessar os blocos filhos. Atualizações recentes de usabilidade estão melhorando a forma como os blocos aparecem na lista. A nova e aprimorada exibição de lista agora exibe todos os blocos aninhados dentro de seu bloco pai e mostra blocos reutilizáveis ​​por seu nome personalizado em vez de genéricos.

Para abrir o modo de exibição de lista no editor de blocos, selecione o botão com três linhas horizontais na barra de ferramentas superior ou use o atalho de teclado ^⌥ O.

Migalhas de pão

Como o Gutenberg é um editor baseado em blocos, o WordPress oferece várias maneiras de acessar blocos para melhorar a usabilidade da plataforma. Assim como o modo de exibição de lista, o breadcrumbs é outro recurso de usabilidade projetado para facilitar o acesso a blocos aninhados em diferentes níveis. Esse novo recurso pode ser útil ao trabalhar com blocos profundamente aninhados, como blocos de colunas ou grupos.

Então, como você pode usar o recurso breadcrumbs no editor de blocos do WordPress? Use este atalho de teclado ^⌥ N, que permite navegar rapidamente pelas próximas seções do editor. Continue usando este atalho para percorrer os blocos até chegar ao final do editor, onde você deverá ver a barra de navegação do bloco no canto inferior esquerdo da página.

Rótulos de texto para botões da barra de ferramentas

Muitos usuários acham os ícones ambíguos e difíceis de memorizar. Se você está entre aqueles que preferem rótulos de texto em vez de ícones, o editor de blocos tem isso para você. O WordPress introduziu um novo recurso de usabilidade que permite aos usuários alterar todos os botões de ícone na barra de ferramentas para rótulos de texto. Essa nova funcionalidade pode ajudar muitos usuários a encontrar as ferramentas necessárias com mais eficiência.

Se você quiser substituir os ícones da barra de ferramentas por rótulos de texto, veja o que você precisa fazer.

1. Clique no menu Opções (localizado na extremidade direita da barra de ferramentas superior)
2. Selecionar preferências
3. Na seção Aparência , clique em Exibir rótulos de botão

Modificar o comportamento do insersor de bloco

O insersor de blocos ⏤ um painel para navegar e inserir vários blocos ao mesmo tempo ⏤ é uma nova adição ao editor de blocos do WordPress. Projetado para aumentar a eficiência, a versão inicial desse recurso estava realmente atrapalhando o fluxo de trabalho dos usuários. O painel fechava após a inserção de um bloco, o que forçava os usuários a continuar reabrindo o painel para adicionar mais blocos.

Felizmente, a comunidade WordPress se uniu e corrigiu esse problema. A versão mais recente do insersor de bloco agora permanece aberta após a inserção de um bloco, permitindo que os usuários insiram vários blocos ao mesmo tempo. E quando você terminar de inserir o bloco, há um comando de teclado para fechar o painel.

Use estes atalhos de teclado para aproveitar esta nova ferramenta de produtividade:

• ENTER ou SPACE: Insere um bloco, mas deixa o insersor aberto
• ⌘+Enter: Insere um bloco, fecha o dispositivo de inserção e retorna o foco ao ponto de inserção
• ESC: Fecha o insersor sem adicionar um bloco

Melhore seu site WordPress com tecnologias de coalizão

O editor de blocos começou em uma fase difícil com muitos problemas de acessibilidade e usabilidade. Mas Gutenberg percorreu um longo caminho desde seu lançamento inicial. A comunidade de código aberto trabalhou duro para atualizar o CMS e continuará fazendo melhorias para que o WordPress possa se tornar uma plataforma para todos.

Se você precisar de mais assistência com o desenvolvimento de sites WordPress, a Coalition Technologies pode ajudar. Com quase uma década de experiência em design no WordPress e mais de 200 sites desenvolvidos, temos a experiência necessária para criar sites WordPress altamente envolventes. Contacte-nos agora para saber como podemos melhorar a sua presença online.