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.

Aqui você pode encontrar o programa da conferência.

Widgets reutilizáveis que funcionam!

Maria Lamardo - 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 W3C 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

Considerações Técnicas Modais

O contêiner de diálogo deve ter:

• Papel da caixa de diálogo
• aria-modal definido como verdadeiro.
• aria-label ou aria-labelled 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 aria-descripto 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 este exemplo e conferir, e aqui está o código.

Botões de alternância

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

Botões

Um botão é 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 aria-pressed .

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

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

• O botão Alternar deve ter a função de botão .

• Certifique-se de que o botão tenha um nome acessível.

• Você pode definir aria-descriptoby para qualquer descrição.

• Você pode adicionar aria-disabled definido como verdadeiro se a ação não estiver disponível.

• O botão de alternância tem um estado de ária pressionado .

  
  

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

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

Acordeões

Aqui 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

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
• aria-controls definidos para o ID do conteúdo do painel sanfona correspondente
• aria-expanded definido como true se o conteúdo do painel correspondente estiver visível
• aria-disabled definido como verdadeiro se o acordeão em colapso não for permitido
• Cada conteúdo do painel tem região de função e ária rotulada 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 exemplo e seu código .

Guias

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

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 tablist

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

Abas Interação de Teclado Opcional

Abas Considerações Técnicas

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

Papel da guia: O elemento que serve como uma guia deve ter controles de ária 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 exemplo e seu código .

Recursos

Guia de Práticas de Autoria ARIA

Diretrizes de Acessibilidade de Conteúdo da Web (WCAG) 2.1

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

https://github.com/mlama007/Widgets

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 aqui .