Bem-vindo! Fico feliz em vê-lo na quinta parte da minha série de resumos da Vuejs Amsterdam Conference 2022, na qual compartilho um resumo de todas as palestras com você.

Você pode ler minha série de Resumos da JSWorld Conference 2022 (em quatro partes) aqui , onde resumi todas as palestras do primeiro dia. Você também pode encontrar as palestras anteriores da conferência Vue Amsterdam 2022 em meu blog.

(Recorrente) Introdução

Depois de dois anos e meio, a JSWorld e a Vue Amsterdam Conference estiveram de volta ao Theatre Amsterdam entre 1 e 3 de junho, e tive a oportunidade de participar desta conferência pela primeira vez. Aprendi muitas coisas, conheci muitas pessoas maravilhosas, conversei com grandes desenvolvedores e me diverti muito. No primeiro dia foi realizado o JSWorld Conference, e no segundo e terceiro dias, o Vue Amsterdam.

A conferência estava cheia de informações com grandes oradores, cada um dos quais me ensinou algo valioso. Todos queriam compartilhar seus conhecimentos e informações com outros desenvolvedores. Então pensei que seria ótimo se eu pudesse continuar a compartilhá-lo e ajudar outras pessoas a usá-lo.

A princípio, tentei compartilhar algumas anotações ou slides, mas senti que não era bom o suficiente, pelo menos não tão bom quanto o que o palestrante compartilhou comigo. Então decidi rever cada palestra, me aprofundar nelas, pesquisar, fazer anotações e combiná-las com seus slides e até com suas palavras exatas em sua fala e depois compartilhar com vocês para que o que eu compartilho com vocês seja pelo menos no mesmo nível do que aprendi com eles.

Um ponto muito importante

Tudo o que você lê nesses poucos artigos é resultado do esforço e do tempo do próprio palestrante, e eu apenas tentei aprendê-los para poder transformá-los nesses artigos. Mesmo muitas das frases escritas nesses artigos são exatamente o que eles disseram ou o que escreveram no Slides. Isso significa que se você aprender algo novo, é por causa de seus esforços. (Então, se você vir alguma desinformação culpe eles, não eu, certo? xD)

Por último, mas não menos importante, posso não me aprofundar em todos os detalhes técnicos ou codificações ao vivo em alguns dos discursos. Mas se você estiver interessado e precisar de mais informações, me avise e tentarei escrever um artigo mais detalhado separadamente. Além disso, não se esqueça de verificar o Twitter/Linkedin deles.

você pode encontrar o programa da conferência.

---

Widgets reutilizáveis que funcionam!

- Head of Accessibility Training e Senior Manager of Accessibility Engineering na CVS Health

Vue.js é uma estrutura incrível que permite criar rapidamente componentes reutilizáveis. Podemos aproveitar isso para criar widgets reutilizáveis acessíveis com a ajuda do ARIA (Aplicativo de Internet Avançado Acessível). Usando funções e atributos ARIA, podemos melhorar a acessibilidade de certos elementos fornecendo semântica adicional. Nesta palestra, veremos como seguir as especificações e criar guias, acordeões, botões de alternância e caixas de diálogo modais acessíveis e reutilizáveis que funcionem para todos!

Modal

Todas as coisas que você precisa saber sobre o ARIA estão bem documentadas no e é recomendável ler, mas aqui está uma versão resumida dele.

Considerações de design de modais

• Deve ter um botão que feche a caixa de diálogo.
• O conteúdo fora da caixa de diálogo deve ser obscurecido com um estilo visual como um plano de fundo cinza.
• Certifique-se de impedir que os usuários interajam com o conteúdo fora da caixa de diálogo.

Interação de foco de abertura de modais

Quando uma caixa de diálogo é aberta, o foco pode ser definido no primeiro elemento focalizável ou em um elemento estático na parte superior da caixa de diálogo para facilitar a leitura do conteúdo e garantir que todo o conteúdo permaneça visível, ou o elemento usado com mais frequência se houver interações limitam-se a fornecer informações ou continuar o processamento.

Você não quer colocar o foco em algo que vai ser destrutivo para o usuário, por exemplo, vamos imaginar que você tem uma interação onde você abre um modal para deletar sua conta. Você não deseja definir o primeiro foco em “Sim, excluir minha conta”.

Modais Fechando o Foco Interação

Quando uma caixa de diálogo fecha, o foco é definido no elemento que chamou a caixa de diálogo ou, quando não faz sentido, você pode definir o foco em um elemento diferente, como um elemento que fornece fluxo de trabalho lógico se o elemento de chamada não existir mais ou no próximo elemento se houver uma etapa subsequente no fluxo de trabalho após a conclusão da tarefa do diálogo, especialmente se a reabertura imediata do diálogo for muito improvável.

Interação Modal do Teclado

Aba	Move o foco para o próximo elemento que pode ser tabulado no modalLooping ao redor do primeiro elemento
Shift + Tab	Move o foco para o elemento tabável anterior no modalLooping ao redor do último elemento
Escapar	Fecha a caixa de diálogo

Considerações Técnicas Modais

O contêiner de diálogo deve ter:

• Papel da caixa de
• definido como verdadeiro.
• ou referindo-se ao título da caixa de diálogo, isso ajudará as tecnologias assistivas a descobrir qual será o nome desse elemento.
• Opcionalmente, você pode definir para qualquer descrição.

Todos os elementos necessários para operar o diálogo devem ser descendentes do elemento que tem uma função de diálogo.

 <div role="dialog" aria-modal="true" aria-labelledby="title" aria-describedby="description" > <h2 id="title">Title of the dialog</h2> <p id="description">Information provided by the dialog.</p> <button aria-label="close">×</button> </div>

No mac, você pode ativar o Voice Over, que é o leitor de tela padrão do mac, clicando em Command + F5 e, em seguida, pode acessar sua página e testá-la.

Também no Chrome Dev-Tools, há uma guia de acessibilidade que contém algumas informações interessantes sobre acessibilidade. Com isso, você pode abrir e conferir, e está o código.

Botões de alternância

Se você quiser as informações completas, poderá encontrá-las no site do .

Botões

Um é um widget que permite aos usuários acionar uma ação ou evento, como enviar um formulário, abrir uma caixa de diálogo, cancelar uma ação ou executar uma operação de exclusão.

Além do widget de botão comum, WAI-ARIA suporta 2 outros tipos de botões:

• Botões de alternância
• Botões de menu

Considerações de design dos botões de alternância

Um botão de dois estados que pode estar desativado (não pressionado) ou ativado (pressionado).

Para informar às tecnologias assistivas que um botão é um botão de alternância, especifique um valor para o atributo .

O rótulo em uma alternância não deve mudar quando seu estado muda; se o rótulo mudar no design, não há necessidade do atributo ária-pressed.

Botões de alternância Controle de foco

• Se a ativação do botão não descartar o contexto atual, o foco permanecerá no botão após a ativação.
• Se a ativação do botão abrir ou fechar uma caixa de diálogo, siga o padrão da caixa de diálogo.
• Se a ação do botão indicar uma mudança de contexto, você pode mover o foco para o ponto inicial dessa ação
• Se o botão for ativado com uma tecla de atalho, o foco geralmente permanece no contexto a partir do qual a tecla de atalho foi ativada

Botões de Alternar Interação do Teclado

Digitar	Ativa o botão
Espaço	Ativa o botão

Botões de alternância Considerações técnicas

• O botão Alternar deve ter a função de .
• Certifique-se de que o botão tenha um nome acessível.
• Você pode definir para qualquer descrição.
• Você pode adicionar definido como verdadeiro se a ação não estiver disponível.
• O botão de alternância tem um estado .

  
  

 <button aria-pressed="false"> Mute </button>

Aqui está um bom que você pode conferir e está o código.

Acordeões

está a documentação completa. Vejamos seus principais pontos.

Considerações de design de acordeões

Conjunto empilhado verticalmente de cabeçalhos interativos, cada um contendo um título, trecho de conteúdo ou miniatura representando uma seção de conteúdo

Cabeçalho do Acordeão:

Rótulo ou miniatura representando uma seção de conteúdo que também serve como um controle para mostrar e, em algumas implementações, ocultar a seção de conteúdo.

Painel Acordeão:

Seção de conteúdo associada a um cabeçalho acordeão.

Interação do teclado de acordeões

Digite ou espaço	Expande o painel recolhido associado, opcionalmente recolhe outro painel abertoRecolhe o painel expandido associado; se a implementação permitir.
Aba	Move o foco para o próximo elemento focalizável
Shift + Tab	Move o foco para o elemento focalizável anterior
Seta para baixo (opcional)	Move o foco do cabeçalho sanfona para o próximo cabeçalho sanfona Opcionalmente, retorna ao primeiro cabeçalho sanfona.
Seta para cima (opcional)	Move o foco do cabeçalho sanfona para o cabeçalho sanfona anterior Opcionalmente retorna ao último cabeçalho sanfona
Casa (opcional)	Move o foco de um cabeçalho acordeão para o primeiro cabeçalho acordeão
Fim (opcional)	Move o foco de um cabeçalho sanfonado para o último cabeçalho sanfonado

Considerações Técnicas sobre Acordeões

Certifique-se de que cada botão de cabeçalho do acordeão tenha:

• embrulhado em um cabeçalho
• definidos para o ID do conteúdo do painel sanfona correspondente
• definido como true se o conteúdo do painel correspondente estiver visível
• definido como verdadeiro se o acordeão em colapso não for permitido
• Cada conteúdo do painel tem e por para o botão de cabeçalho correspondente (opcional)
• Evite usar a função de região em circunstâncias que criam muitas regiões de referência

Exemplo de código de acordeões

 <h3> <button aria-expanded="true" class="Accordion-trigger" aria-controls="sect1" id="accordion1id" > Accordion 1 </button> </h3>

 <div id="sect1" role="region" aria-labelledby="accordion1id" class="Accordion-panel" > Content Placeholder </div>

Aqui está um bom e seu .

Guias

Você pode ver a documentação completa do Tabs no .

Considerações de design de guias

As guias são um conjunto de seções de conteúdo em camadas, conhecidas como painéis de guias, que exibem um painel de conteúdo por vez.

Tab List: Um conjunto de elementos tab contidos em um elemento

Guia: Um elemento na lista de guias que serve como um rótulo para um dos painéis de guias e pode ser ativado para exibir esse painel

Painel de guias: o elemento que contém o conteúdo associado a uma guia

É recomendável que as guias sejam ativadas automaticamente quando receberem o foco, desde que seus painéis de guias associados sejam exibidos sem latência perceptível.

Abas Teclado Interação

Aba	Coloca o foco no elemento da guia ativa quando o usuário se move para a lista de guias
Seta para a esquerda (abas horizontais)
Seta para cima (guias verticais)	Move o foco para a aba anterior; voltando para a última guia Opcionalmente, ativa a guia recém-focada
Seta para a direita (guias horizontais)
Seta para baixo (guias verticais)	Move o foco para a próxima guia; voltando para a primeira guia Opcionalmente, ativa a guia recém-focada
Espaço ou Enter	Ativa a aba caso não tenha sido ativada automaticamente em foco
Shift + F10	Quando o foco está em uma guia que possui um menu pop-up associado, abre o menu

Abas Interação de Teclado Opcional

Casa (opcional)	Move o foco para a primeira guia Opcionalmente, ativa a guia recém-focada
Fim(opcional)	Move o foco para a última guia Opcionalmente, ativa a guia recém-focada
Excluir (opcional)	Se a exclusão for permitida, exclui (fecha) o elemento da guia atual e seu painel de guia associado, define o foco na guia após a guia que foi fechada e, opcionalmente, ativa a guia recém-focada

Abas Considerações Técnicas

Papel do Tablist: O elemento que contém um conjunto de guias deve ter ou .

Papel da guia: O elemento que serve como uma guia deve ter emparelhados com o tabpanel associado, a guia ativa deve ter o estado selecionado de ária definido como verdadeiro; todas as outras guias são definidas como falsas.

E deve ter a propriedade aria-haspopup definida como menu ou true se um elemento tab tiver um menu pop-up.

Função do Tabpanel: O elemento que contém o painel de conteúdo para uma guia deve ter aria-labelledby emparelhado com a guia associada e definir a orientação da ária como vertical ou horizontal (padrão).

Exemplo de código de guias

 <div role="tablist" aria-label="Tabs Example"> <button role="tab" aria-selected="true" aria-controls="tab1-content" id="tab1" >Tab 1 </button> <button role="tab" aria-selected="false" aria-controls="tab2-content" id="tab2" tabindex="-1" >Tab 2</button> </div>

 <div tabindex="0" role="tabpanel" aria-labelledby="tab1" id="tab1-content"> <p>Content 1</p> </div> <div tabindex="0" role="tabpanel" aria-labelledby="tab2" id="tab2-content"> <p>Content 2</p> </div>

Aqui está um bom e seu .

Recursos

Você pode encontrar um exemplo de código Vue completo com diferentes componentes aqui:

---

Fim da quinta palestra

Espero que tenham gostado desta parte e que possa ser tão valiosa para vocês quanto foi para mim. Nos próximos dias, compartilharei o restante das palestras com você. Fique ligado…

Publicado também .