Suzy Naschanski do Calendário do Advento HTMHell:
All About Dragons
I like dragons. Blah blah blah blah blah.
Veja isso aria-labelledby atributo? Ele encadeia dois IDs da marcação, um para o cabeçalho (#article1-heading) e outro para o link (#article1-read-more). O que acontece é que um leitor de tela substituirá o rótulo semântico existente entre as tags de link e usará o conteúdo de ambos os elementos e os anunciará juntos como uma única string de texto:
Read more All About DragonsSempre fico envergonhado ao perceber que há algo que acho que deveria saber, mas não sei. Este é definitivamente um desses casos e estou muito grato por Suzy ter compartilhado isso.
Eu estava realmente em uma situação recentemente onde eu poderia ter deveria ter feito isso. Eu sempre tento evitar um monte de links “Leia mais” na mesma página, mas criar diferentes sabores da mesma coisa é difícil quando você está trabalhando com algo como um loop de 15 postagens (mesmo que haja recursos para ajudar). E se precisarmos manter os rótulos curtos por razões estéticas - requisitos de design e outros enfeites - é ainda mais desafiador. o aria-labelledby atributo me dá exatamente o que eu quero: rótulos visuais consistentes e anúncios mais contextuais para tecnologia assistiva.
E isso só acontece quando o texto que você deseja usar para o rótulo acessível já existe na página. Caso contrário, você gostaria de ir com aria-label e com a ressalva de que é puramente para elementos interativos que não conseguem rotular coisas de forma acessível com HTML semântico.
Se você estiver trabalhando em um CMS como o WordPress (que eu sou), talvez precise fazer um pouco de trabalho extra. Como quando solto um bloco Button na página, essas são as opções com as quais tenho que trabalhar:
Algumas boas opções lá, mas nada a ver com rotulagem acessível. Se você está se perguntando o que está escondido naquele painel Avançado:
Em vez disso, você precisará editar o botão no modo HTML:
Mas antes de fazer isso, você precisa adicionar um ID ao cabeçalho que deseja usar. O bloco Heading tem a mesma configuração do painel Advanced para adicionar uma âncora, que injetará um ID no elemento:
Então você pode editar o bloco Button no modo HTML e adicionar o accessible-labels ID, bem como um ID para o próprio botão. Este é um exemplo da marcação editada:
Excelente! Mas o WordPress simplesmente não é legal com isso:
Você pode tentar resolver o problema:
Eu suspiro. O bloco Button deve ser convertido em um bloco HTML personalizado. Meio que derrota toda a coisa de edição visual em que o WordPress é tão bom. Fiz uma pesquisa super rápida por um plug-in que pudesse adicionar opções de rotulagem ARIA a determinados blocos, mas não consegui. Parece uma boa oportunidade para fazer um ou enviar PRs para os blocos que poderiam usar essas opções.
