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) , 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. aqui (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 e eu apenas tentei aprendê-los para poder transformá-los nesses artigos. Mesmo 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) Tudo o que você lê nesses poucos artigos é resultado do esforço e do tempo do próprio palestrante, muitas das frases escritas nesses artigos são exatamente o que eles disseram ou o que escreveram no Slides. 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. Aqui Widgets reutilizáveis que funcionam! - Head of Accessibility Training e Senior Manager of Accessibility Engineering na CVS Health Maria Lamardo 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. W3C 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 diálogo definido como verdadeiro. aria-modal ou referindo-se ao título da caixa de diálogo, isso ajudará as tecnologias assistivas a descobrir qual será o nome desse elemento. aria-label aria-labelled Opcionalmente, você pode definir para qualquer descrição. aria-descripto 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. este exemplo aqui Botões de alternância Se você quiser as informações completas, poderá encontrá-las no site do . W3C 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. botã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 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 . botão Certifique-se de que o botão tenha um nome acessível. Você pode definir para qualquer descrição. aria-descriptoby Você pode adicionar definido como verdadeiro se a ação não estiver disponível. aria-disabled O botão de alternância tem um estado . de ária pressionado <button aria-pressed="false"> Mute </button> Aqui está um bom que você pode conferir e está o código. exemplo aqui Acordeões está a documentação completa. Vejamos seus principais pontos. Aqui 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 aria-controls definido como true se o conteúdo do painel correspondente estiver visível aria-expanded definido como verdadeiro se o acordeão em colapso não for permitido aria-disabled Cada conteúdo do painel tem e por para o botão de cabeçalho correspondente (opcional) região de função ária rotulada 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 . exemplo 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. Um conjunto de elementos tab contidos em um elemento Tab List: tablist 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 Guia: o elemento que contém o conteúdo associado a uma guia Painel de guias: É 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 elemento que contém um conjunto de guias deve ter ou . Papel do Tablist: O aria-labelledby aria-label 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. Papel da guia: controles de ária E deve ter a propriedade aria-haspopup definida como menu ou true se um elemento tab tiver um menu pop-up. 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). Função do Tabpanel: 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 . exemplo 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 palestra quinta 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
