Dicas de acessibilidade essenciais para HTML e CSS

1. Apresentação: Oi. Meu nome é Aga e sou um designer de programação experiente, mas também adoro ensinar. É por isso que sou um dos melhores professores do Skillshare. Ao longo de toda a minha carreira, tenho compartilhado meu conhecimento em várias conferências em todo o mundo, de Lisboa a Cingapura e é hora de compartilhar minha paixão e meu conhecimento com você. Nesta aula intitulada dicas essenciais para acessibilidade em HTML e CSS, você descobrirá como verificar se seu HTML é semântico. O que evitar ao escrever CSS acessível. Como executar o leitor de tela no seu computador. Por que as animações são perigosas e você deve ter cuidado com elas. A última delas, como implementar rapidamente dicas de acessibilidade, mesmo que você não trabalhe como programador em sua rotina diária. Tudo em aulas muito concisas e curtas, você imediatamente se beneficiará em seu trabalho diário como designer ou programador. Todos nós sabemos que a acessibilidade é um tópico crucial nos dias de hoje e podemos negligenciá-lo tanto como designers quanto como programadores. A acessibilidade é um tópico muito importante. Cerca de 15% da população vive com algumas deficiências. É por isso que nós, como designers e desenvolvedores, devemos estar cientes como tornar nossos produtos mais acessíveis e você pode começar a fazer isso agora participando de minhas aulas. É hora de você adquirir o conhecimento básico e descobrir mais sobre HTML e CSS acessíveis. Você provavelmente sabe que a documentação das diretrizes de acessibilidade de conteúdo da web é muito complexa e não é fácil de ler. Mas nas minhas aulas, vamos nos concentrar nesse tópico de uma forma muito prática. É claro que, como de costume em minhas aulas, você receberá a lição de casa e eu recomendo fortemente que você compartilhe seus resultados na seção de aula do projeto. Mas e se você não tiver experiência em codificação? Não se preocupe. Eu já preparei classes intituladas codifique seu próprio portfólio e, graças a elas, você poderá obter os fundamentos de HTML e CSS. Depois de terminá-las, você pode ir diretamente para essas aulas e começar a aprender a acessibilidade. No entanto, se você já está familiarizado com a escrita de HTML e CSS, você está fortemente convidado a entrar na primeira lição deste curso. O que é muito importante sobre essas aulas é que você implementará o conhecimento adquirido para colocar a teoria em prática, obtendo uma tarefa minha. O bônus especial para todas as pessoas que cumprirão esse projeto de classe, enviarei a lista de verificação de acessibilidade que você pode usar em seu trabalho diário. Nos vemos na primeira aula. 2. Por que devemos aprender a acessibilidade?: Lição número 1, por que devemos aprender sobre acessibilidade. A primeira coisa com a qual eu realmente deveria começar é a definição de acessibilidade. A acessibilidade é tornar o produto acessível a todos. É claro que, nessas aulas, vou me concentrar nos produtos digitais , como sites ou aplicativos. Obviamente, a acessibilidade não cobre apenas a esfera digital, porque também diz respeito à vida real, por exemplo, arquitetura e mundo 3D. Para lhe dar algumas dicas de por que aprender acessibilidade e por que cuidar dela é tão crucial, vou me aprofundar nas estatísticas. Como afirma o Pew Center, mais de 15% de toda a população tem alguma deficiência. Mais de 2,2 milhões de pessoas têm problemas de visão. Onze pessoas entre todas as pessoas com deficiência têm problemas cognitivos. Por exemplo, lembrar informações ou digeri-las, processá-las ou concentrá-las. Mais de 98 por cento das páginas iniciais não estão totalmente acessíveis. Há muito trabalho a ser feito, e nós, como designers de programação, programadores e desenvolvedores, podemos ajudar. Existem certas categorias de deficiências que podemos encontrar e devemos ter em mente ao projetar ou codificar os produtos. Em primeiro lugar, é auditivo, depois cognitivo, neurológico, físico, fala e visão. Você pode pensar que a acessibilidade pode não me preocupar porque não sofro de nenhuma doença ou não tenho problemas ou desafios. Mas, na verdade, prova ao vivo que, a partir da acessibilidade e dos produtos acessíveis, todos podem se beneficiar. Por exemplo, imagine uma situação em que a mãe gostaria de usar as mídias sociais, gostaria de assistir a alguns vídeos, alguns Instagram Reels, mas ela está na mesma sala com seu filho pequeno que tem acabei de adormecer. Graças às legendas, às legendas que foram entregues, não apenas para pessoas que não conseguem ouvir. Também abordamos todos esses casos em que as pessoas simplesmente podem aumentar o volume. É totalmente benéfico. Muitas vezes isso também acontece na minha vida real. Sempre que, por exemplo, estou no próprio ônibus e gostaria de assistir a algo mas não estou com meus fones de ouvido, estou apenas assistindo com o volume reduzido. O mesmo se aplica à situação com cores agressivas. Sempre que estiver cansado à noite, você pode usar o modo escuro. É por isso que nós designers devemos pensar cuidadosamente sobre as cores que usamos em um site e sobre suas consequências. Você também pode imaginar uma situação em que está segurando muitas costas e suas mãos ocupadas e é difícil usar o celular, mas você precisa responder rapidamente para sua mãe, e é difícil para você porque a área clicável é muito pequena, então você precisa se concentrar nela. Mas, na verdade, a situação não permite. Há muitos outros casos reais de uso recursos de acessibilidade. Devemos pensar neles de forma ampla, não apenas em idosos ou pessoas que sofrem oficialmente de algumas deficiências. Mas todos podem realmente se beneficiar de nosso cuidado com produtos acessíveis. A acessibilidade ajuda tanto pessoas com deficiências permanentes quanto temporárias. Lembre-se de que a acessibilidade não tem a ver apenas com as pessoas que envelhecem, com o envelhecimento da sociedade. Tudo gira em torno de nós, de nossos vizinhos, nossos pais, de nossa irmã mais nova e das pessoas do trabalho. Basicamente, todo mundo. 3. Como a acessibilidade é medida e definida?: Lição número 2, como a acessibilidade é medida e verificada. No começo, eu realmente devo a você uma definição que WCAG realmente representa. Essa abreviatura significa diretrizes de acessibilidade de conteúdo da web. Essas são as diretrizes que nosso site, nosso produto digital, deve cumprir para passar com sucesso na auditoria de acessibilidade. A informação muito importante é que a acessibilidade às vezes pode ser considerada difícil ou entediante devido à documentação muito complexa. Francamente falando, não é uma leitura fácil, então eu entendo perfeitamente que se você não teve a chance de se aprofundar nela, é por isso que criei essas classes para que você possa ver que a acessibilidade é na verdade, algo que podemos implementar em nossa prática diária, em nosso fluxo de trabalho diário. Como devemos pensar sobre HTML semântico e como devemos pensar em CSS acessível. Em termos de princípios que estão dentro do WCAG, na verdade, existem quatro categorias que devemos lembrar e que são perceptíveis, operáveis, compreensíveis e robustas. que significa que, se quisermos que nossos produtos atendam a todos os critérios mencionados no WCAG, devemos permitir que o usuário perceba nosso produto compreenda, então a cópia também é muito importante, a escrita de UX. Além da navegação, seus usuários devem poder navegar no produto e, claro, interagir com ele. Todas essas quatro categorias principais afetam todas as ações desses usuários. Obviamente, não podemos esquecer termo muito importante quando falamos sobre o uso sites por pessoas que não conseguem ver ou dificuldades de visão , que são leitores de tela. Os leitores de tela são uma peça de tecnologia assistiva e usam a conversão de texto em fala. Eles leem o conteúdo do site e falam em voz alta. Isso é o que eles leram recentemente. Eles transformam texto em fala para que pessoas que não conseguem ver, que não conseguem consumir o que está no site, possam pelo menos aqui seu conteúdo. As pessoas que usam leitores de tela navegam no site usando o teclado ou o atalho do teclado. É claro que você pode relaxar os leitores de tela e testá-los por conta própria. Se você for um usuário do Windows, poderá acessar o logotipo do Windows e abrir as configurações do Narrador, Ativar para alternar em usar narradores. Este é o pequeno tutorial que você pode usar. Infelizmente, não terminei de usar o Windows então não posso mostrar como fazer isso passo a passo , mas com certeza você encontrará alguns tutoriais no site. Em termos de um Mac, você deve acessar Preferências do Sistema, guia Acessibilidade, voice over e, em seguida, ativar essa função. Como fazer isso? Eu vou te mostrar em um segundo. Vamos lançar o leitor de tela em nosso Mac. Em primeiro lugar, estou abrindo as Preferências do Sistema. Então, estou procurando acessibilidade e estou abrindo a guia de voice over e clico em “Ativar voice over”. Adam não responde, janela sem título, qualquer texto em branco, como foco do teclado. Seu campo de texto dentro de um grupo. Desculpe. Se você fechar a janela, a narração será desligada que você possa decidir rapidamente se deseja usá-la ou não e em quais momentos e , claro, você pode ir diretamente para o navegador da web, é ou não e em quais momentos e, claro, você pode acessar diretamente o navegador da web. Existem também alguns plug-ins do Chrome, então eu vou te mostrar isso também e esse plugin se chama Chrome Fox, se não me engano, ou leitor de tela. Vamos verificar como o plugin funciona. Estou abrindo um site wired.com aleatório. Toda a inicialização do sistema em Londres. Ilustração de link da Torre Eiffel em Paris contra um fundo amarelo. Item de listas vinculadas, as startups mais badaladas de Paris, ilustração de Berlim em um fundo fino. Itens de listas vinculadas. Recomendo que você jogue com este plugin do Chrome e verifique como ele funciona do seu lado. 4. Código HTML semântico: Sabemos por que a acessibilidade é tão importante. Também entendemos como os leitores de tela usaram um código do nosso site. Mas o mais importante é que a semântica do HTML, na verdade, significaria escrever HTML semântico. Vamos começar com um exemplo. HTML semântico. Podemos compará-lo a contar uma história com emojis. Se você vê esse conjunto de cinco emojis diferentes, provavelmente não conseguiu adivinhar qual é a história por trás dele. Claro, você pode ter algumas ideias, mas na verdade não terá 100% de certeza. O mesmo acontece com o computador e os navegadores. Temos que dar uma instrução muito adequada o que está acontecendo em nosso site, que tipos de informações vamos apresentar? Na verdade, qual é a estrutura da informação? Qual é a estrutura do documento? A situação muda quando eu dou mais contexto, por exemplo, que eu tenho uma amiga Jane e recentemente ela estava com muita fome no trabalho. Ela gosta de pedir comida chinesa, mas tem que ter muito cuidado com comida apimentada porque seu estômago não gosta. Se eu lhe desse essas pequenas informações, você interpretaria essa cabeça de emoji de uma maneira totalmente diferente. Exatamente o mesmo acontece com o navegador. Se quisermos contar a história completa e envolver nosso conteúdo com tags HTML significativas, o navegador entenderá imediatamente o que estamos tentando transmitir ao usuário, o mesmo acontece com o leitor de tela. É por isso que é tão importante usar as tags HTML com cuidado. Como nosso HTML é semântico, ele fornece algum tipo de informação, por exemplo, que temos um link, um parágrafo, um título, o nível do título e também podemos fornecer vários sobre a estrutura do site, por exemplo, que temos o cabeçalho, a parte principal e também o rodapé, é muito importante usá-las. É por isso que nosso objetivo é fornecer contexto ao navegador. Por favor, não se esqueça que o HTML semântico é a essência da escrita de código acessível. Há dois aspectos do código HTML semântico. O primeiro é o conteúdo. Estamos adicionando o significado ou agrupando nosso conteúdo com tags semânticas, como títulos, parágrafos, links, listas, não ordenados e ordenados e assim por diante. Mas há também o segundo aspecto, que é o layout. Tudo o que está conectado, como as informações são realmente organizadas, se elas são importantes, então elas estão no topo, ou se são menos importantes ou mais detalhadas , então no meio ou se é uma informação que normalmente mantemos em rodapés, como informações de contato, e-mails, links para regras de privacidade e assim por diante. Se você verificar o código, verá imediatamente que temos uma estrutura lógica. Começamos com a navegação, então nav-tag, depois adicionamos um cabeçalho, na parte superior do site. Estamos tendo algumas seções. Cada seção também tem um artigo. Cada artigo tem um título e um parágrafo adequados. Se você olhar para o topo, verá que, no cabeçalho, temos uma tag h1, com a qual geralmente começamos nosso site. Vamos ver como nosso site é renderizado. Para isso, estou usando o pacote atom-live-servers starts server. Deve abrir meu site. Vou ver a cópia do portfólio. Você verá que eu estou com o cabeçalho com H1 e se eu for para o final, vou ver uma seção e depois outra. Essas três seções são muito parecidas entre si. A única diferença é o lado de colocar os elementos no layout. Mas, em geral, cada um deles é um artigo, tem o título do segundo nível, alguns textos, que são um parágrafo, e depois um link. Então, na parte inferior, temos o rodapé. Manter uma sequência lógica em nosso site e em nosso código é muito importante , pois assim teremos uma experiência mais perfeita para a pessoa que não consegue ver, mas gostaria de seguir a estrutura que definimos. Lembre-se de ter cuidado com a forma como seu conteúdo é estruturado, porque é muito importante. Graças a ter um pedido em nossa hierarquia e mantê-lo bem codificado. Transmitimos uma mensagem muito clara para as pessoas que usam leitores de tela. Essa é a maior importância de prestar atenção a isso. Como já sabemos o que significa HTML semântico, podemos nos aprofundar em tags detalhadas e descobrir quais tags e atributos são importantes para tornar nosso código mais acessível. 5. Atributos em HTML e melhorias de acessibilidade - Parte 1: É hora de usar o código HTML e descobrir mais sobre atributos e impostos que ajudarão você a melhorar sua acessibilidade. A primeira tag HTML que eu gostaria de mencionar é a declaração DOCTYPE. Está sempre na parte superior do documento HTML. Por que isso é tão importante? Ele informa aos navegadores qual versão do HTML usamos. Graças a isso, o navegador sabe como interpretar todas as tags. Em HTML5, podemos usar tags semânticas como nav, como cabeçalho, como rodapé, então artigo e principal e assim por diante. Graças a essa declaração DOCTYPE o navegador saberá exatamente quais informações passam para o leitor de tela. O que é muito importante sobre o site é seu idioma. Graças ao atributo lang, o leitor de tela saberá ler as informações apresentadas no documento. Se nosso site usa inglês, devemos aplicar o atributo lang com en, que significa inglês. Isso significa que todo o documento está escrito em inglês. O leitor de tela lerá cada texto em inglês. Mas às vezes acontece que podemos citar algo em outra língua estrangeira, por exemplo, espanhol. Temos uma parte da citação em espanhol, rapidamente, vou encapsular as linhas dos códigos para que você a veja com mais facilidade. Eu tenho um texto em espanhol, mas os outros parágrafos, a lista, a navegação está em inglês. Vamos ver como os leitores de tela lidarão com esse problema. ferramentas da janela Acessibilidade Você está atualmente na barra de ferramentas de áudio. Visão geral. Voice-over. Visitado, link, contato. Link, Obras, Link, Experiência, Behance, Link, Twitter, LinkedIn. Itens de nível um a dois. Olá, sou Jane Doe. Olá, sou Jane Doe. Como você pode ouvir, não é a melhor experiência. É por isso que é tão importante aplicar o idioma apropriado os atributos de linguagem apropriados aos elementos do nosso site. No nosso caso, devemos ter inglês para todo o site. Mas para essa informação , devemos adicionar outro atributo lang e adicionar ES, que significa Espanol. Vamos verificar como isso funciona. Você está atualmente em um elemento de texto. Chrome. Como você pode ver, a experiência é muito melhor graças a esse atributo lang aplicado a todo o site, mas também forneceu um elemento diferente de todo o site. O leitor de tela saberá que precisa mudar o idioma. Resumindo, o atributo lang ajuda o leitor de tela a ler o conteúdo do site corretamente, para pronunciá-lo de maneira adequada. Mas também há outro recurso de usar o atributo lang, que é o serviço de tradução do Google. Graças à definição do site, graças à adição de um idioma adequado, Google mostrará ao usuário um pequeno pop-up perguntando se o conteúdo do site deve ser traduzido ou não de acordo com as configurações do usuário no navegador. 6. HTML: vs <a>vs</a> (vs: Vamos falar sobre a estrutura do nosso site. Se você visitar este site de portfólio, compreenderá imediatamente uma ideia geral sobre a arquitetura da informação, então você sabe que esse é provavelmente o título principal, que é h1. Então, quando rolamos para baixo, temos uma legenda bem grande, cabeçalhos menores e também uma soma de todo o site no rodapé. Vamos ver como fica no código. Estou abrindo agora as ferramentas div, que me informarão sobre as tags corretas usadas no código. Aqui, conforme mencionado, é h1, então esse é o primeiro título que informa ao mecanismo de pesquisa o que está acontecendo aqui. Graças a esse h1, podemos supor que este será o site que descreverá Jane Doe. Temos um conjunto de itens da lista em uma lista ordenada, que é a antiga. Mas, graças às listas ordenadas, temos esse número na frente de cada linha. Essa é a lista. Se nos aprofundarmos, você verá as seções, e cada seção tem h2 em seu interior. Se escolhermos esse elemento, veremos que estamos tendo h2, e aqui está outro. Estamos tendo h1, h2 e, se o site for complexo, também aplicaremos h3. É sempre muito importante se lembrar de toda essa estrutura no mapa do site. Vamos ver rapidamente o que a documentação do WCAG afirma. Em termos de títulos, aqui temos a informação de que devemos aninhar os cabeçalhos por sua classificação ou nível, e o título mais importante é h1. É muito importante não pular os níveis dos cabeçalhos , pois isso pode ser confuso e deve ser evitado sempre que possível. Vamos dar uma olhada no exemplo real no site, e este é o blog de Tobias Van Schneider e ele tem em seu blog, diferentes postagens no blog. Esse é um exemplo de um deles. Se formos às ferramentas div e ao elemento check, veremos que é h1. O primeiro título da lista na estrutura do site. Depois, podemos ver que há informações breves sobre o externo. Aqui, ele é criado na tag div. Poderíamos pesquisar outro, que seja mais significativo, por exemplo, à parte ou seção. Mas vamos verificar o próximo, que é o título h2, então temos h1, h2, que faz todo o sentido. Vamos mais longe, e aqui está o parágrafo, o primeiro dos posts do blog. Neste lugar, temos uma citação, e é ótimo porque temos a tag blockquote, que é semanticamente associada à função desse elemento do site. Temos parágrafos e, na parte inferior, há Leia mais. Há h2 como um. Vamos verificar os títulos menores, eles também são h2. Eu escolheria provavelmente h3, o terceiro nível do título. Mas eles também podem ser usados aqui. Não. Na verdade, aqui temos apenas links e a div. Talvez eu te mostre mais códigos. Existe div. Na próxima, há spam. Esses são números, então eu escolheria a ordem de listar, em vez de adicionar spam para ser mais semanticamente correto, assim como é apresentado nos portfólios de Jane Doe. Lembre-se de h1, e h1 também é muito importante em termos de SEO, otimização de mecanismos de pesquisa porque o mecanismo de pesquisa procura as meta descrições, o meta título, mas também h1. Ele aparece no mapa do site, que é criado graças a essa estrutura que adicionamos ao definir os níveis de cabeçalhos. Já abordamos por que a estrutura do site e a manutenção dos níveis adequados de cabeçalhos são tão importantes. 7. CSS e acessibilidade - parte 1: Bem-vindo à lição número 5. Nesta lição, abordaremos como tornar nosso código CSS acessível. Se você pensar em acessibilidade e CSS, que obviamente é responsável por fornecer uma camada visual do nosso site, a primeira coisa que geralmente vem à nossa mente é o contraste de cores. Mostrarei como podemos verificá-lo rapidamente sem plug-ins adicionais ou sem um software adicional. Agora, vamos entrar no nosso site de portfólio. Eu gostaria de mostrar a você como usar um verificador de contraste simples no DevTools. Estou usando o Chrome, mas também está no Firefox. Você pode pegar esse explorador de elementos e navegar, por exemplo, no elemento da navegação. Nesta pequena janela, você verá que há uma seção de acessibilidade e estamos tendo contraste, que é 17.2, que significa que atendemos ao requisito de contraste. Mas se mudássemos a cor, eu mudaria rapidamente em uma propriedade, por exemplo, eu sei que EEE, é cinza. Se navegarmos até esse elemento novamente, veremos esse contraste como 1,05, o que é muito pequeno. Na verdade, é muito difícil diferenciar a cor do texto com a cor do fundo. Quando estivermos visando valores maiores, em termos de cor, você verá que a taxa de contraste também é maior e estamos passando por ela. Por exemplo, aqui há esse limite, esse intervalo no qual não atenderemos aos requisitos de acessibilidade em termos de contraste de cores. Eu recomendo fortemente que você o use porque é simples, fácil e prático e não se esqueça que o contraste de cores é muito importante. Existe outra ferramenta muito importante sobre o estilo dos elementos do site, que é o estilo dos hiperlinks, então de todos os links. Normalmente, os links são apresentados em azul ou com o subjacente. É muito importante não usar cores apenas porque, para pessoas que sofrem de algumas deficiências visuais como daltonismo ou monocromático, devemos ter isso em mente. Em vez de aplicar apenas cores aos links, também podemos diferenciá-los adicionando pouco de fundo ou sublinhado. Vamos imaginar que estamos tendo um link em algum lugar do nosso texto, por exemplo, aqui. Onde está o link. Temos o estilo padrão, que é o subjacente e, para o site visitado, é violeta. Acho que também poderíamos transformar esse link em preto. Vai ficar tudo bem. Mas é importante manter pelo menos uma fonte de indicação visual para as pessoas de que esse é o elemento clicável. Obviamente, podemos aplicar mais. Também podemos aplicar uma solução mais distinta. Então eu adicionei a classe link e pudemos estilizá-la rapidamente aqui. Estou adicionando fundo, por exemplo, brancos para o link e cor preta. Dessa forma, seria facilmente visto, esse é o hiperlink. Obviamente, você pode aplicar soluções visuais mais atraentes. Tudo depende de você. Mas o mais importante é que confiar apenas no código de cores pode não ser o melhor em termos de acessibilidade. Há outra propriedade CSS com a qual devemos ter cuidado. Os leitores de tela não verão ocultos o elemento ao qual aplicamos visibilidade. Vou clicar, você desapareceu por um tempo. Se adicionarmos a essa tag img, propriedade, visibilidade e valor ocultos, você verá que a imagem desapareceu. Na verdade, está oculto, mas o código permanece em nossa estrutura HTML. No entanto, existem tecnologias assistivas como leitores de tela, que querem ver esse elemento, assim como podemos vê-lo em um site. Lembre-se disso ao adicionar algumas animações ou alterar o estado do elemento pois os leitores de tela não poderão lê-las. O mesmo se aplica à exibição, nenhuma. Também não devemos ter cuidado. Também existe um artigo muito bom , que eu recomendo fortemente que você o leia em pedaços de código. Isso é sobre a propriedade de visibilidade e que não é apenas uma visibilidade ruim, há também uma seção sobre acessibilidade, sobre tecnologia assistiva. Se você está ansioso para saber mais e ler mais sobre possíveis técnicas em CSS, para ocultar elementos, eu recomendo fortemente que você dê uma olhada. 8. CSS e acessibilidade - parte 2: Há uma pseudoclasse que está estritamente ligada à acessibilidade e é o foco. Vamos ver como o foco funciona e o que devemos evitar ao implementar esse recurso CSS. Vamos dar uma olhada no site do portfólio para que eu possa mostrar a pseudoclasse na prática. Se eu começar a usar o teclado de toque, você verá imediatamente que algo está acontecendo com o elemento que está focado em um determinado momento. Agora estou lendo mais, e você pode ver isso por esse contorno azul. É isso que o foco faz. Se você quiser mudar isso, por exemplo, a cor desse contorno, talvez eu me esconda por um minuto. Eu posso escrever uma nova aula. Então, estou adicionando o foco da classe CSS e posso adicionar a cor do contorno. Para fins de demonstração, vamos escolher o vermelho. Se eu começar a testar, funciona. Por favor, preste atenção ao fato de que o elemento da lista e a navegação estão com um contorno azul. Isso ocorre por padrão. Mas se eu pular para os botões, eles são vermelhos porque eu criei uma pseudoclasse de foco separada. Obviamente, também posso mudar a cor desses itens. Eu precisaria criar um seletor como esse. No foco, contorne a cor, e eu posso aplicar rosa, por exemplo. Se eu começar a navegar, você verá que o contorno é rosa. Essa fila, essa fila visual, é muito importante porque fornece às pessoas as informações onde elas estão atualmente no site. Em muitos sites, me deparo com a situação em que o esboço foi definido como zero. Por exemplo, eu posso escrever seletores. Para cada elemento com pseudoclasse de foco, o contorno seria definido como nenhum. Talvez eu amplie um pouco para que você possa ver melhor. Se eu começar a usar a tecla de toque, você verá que está mudando a posição no site, mas na verdade não tem ideia visual onde está o cursor. Isso não deveria acontecer, e devemos sempre ter em mente que o contorno , pelo menos, deve permanecer azul por padrão. Obviamente, você pode alterar a cor dependendo do seu design, dependendo do seu conceito e ideia. No entanto, lembre-se de que definir o esboço como nenhum é extremamente incompatível em termos de acessibilidade. Nós abordamos o tópico da pseudoclasse, mas também há pseudoelementos, pseudo-conteúdo, como antes e depois. A informação que você deve ter em mente é que, antes e depois os elementos do pseudo-conteúdo são realmente vermelhos e reconhecíveis pelos leitores de tela. Vamos rapidamente acessar o código e ver como é o pseudo-conteúdo em um site. Vamos imaginar que gostaríamos de ter uma pequena etiqueta, por exemplo, exibida perto do título, informando que esse é o novo conteúdo. Talvez fosse mais fácil se eu te mostrasse em vez de descrever. Gostaríamos de criar um pseudo-conteúdo, por exemplo, h2: depois ou antes, talvez com o conteúdo. Aqui eu estou adicionando o conteúdo e o valor. Como você pode ver, a palavra agora foi adicionada. leitor de tela veria isso. Mas eu gostaria de estilizá-lo de forma um pouco diferente. No fundo preto com cor branca, eu mudaria a altura da linha para zero. Eu mudaria o tamanho da fonte para 15. Digamos que a família de fontes seria a, não me lembro qual delas é usada para Space mono, mono space, digamos. Talvez fosse mais fácil sans-serif. Espaçamento entre letras, um, e adicionarei preenchimento. Estamos tendo lá como uma parte do conteúdo que é gerado em CSS. Precisamos lembrar que, se você olhar os diferentes cabeçalhos, verá que ele é adicionado a cada h2. Mas é claro que podemos criar uma classe e depois associá-la, antes do pseudo-conteúdo, a essa classe. Vamos verificar como o leitor de tela vê esses pseudoelementos. Estou abrindo as preferências do sistema e ativarei nosso VoiceOver. Fora do grupo com dois itens e grupo com dois itens, três itens e artigo com três itens, título de três itens nível 2, quatro itens. Novo, eu tenho um grupo para o artista. Como você pode ouvir, o VoiceOver lê o novo aplicativo para iPad. Então ele vê isso. É bom ter em mente porque tendemos a usar essas técnicas para exibir ou posicionar alguns layouts ou conceitos mais complexos. Na verdade, é uma boa notícia. 9. Animações e acessibilidade: Bem-vindo à lição número 6. Nesta lição, abordaremos um tópico muito importante, que tem animações e seu fator de acessibilidade. Em primeiro lugar, tenho que mostrar um fato muito importante, talvez você ainda não tenha ouvido falar que de 35% dos adultos com 40 anos ou mais nos EUA, então são aproximadamente 70 milhões de pessoas. Eles experimentaram alguma disfunção vestibular. O que isso significa? Vamos analisar isso rapidamente. Pessoas com distúrbios vestibulares geralmente sentem enjôo, dores de cabeça, problemas de equilíbrio, doenças crônicas e ruídos ao ver animações em grande escala na tela. Deixe-me contar um pouco mais sobre distúrbios vestibulares, sobre o próprio sistema vestibular. O sistema vestibular na verdade faz parte do ouvido interno, é por isso que ele transmite as informações sobre o espaço, então a informação espacial, mas também é responsável pela informação sensorial, então é por isso pessoas com distúrbios vestibulares realmente apresentam sintomas como ruído ou tontura. Você também deve se lembrar que toda essa cintilação, todos esses elementos piscantes com uma frequência muito alta podem ser muito perigosos para pessoas que sofrem de epilepsia. Há outra coisa que devemos ter em mente ao projetar, ao implementar a animação em nossos sites. Devemos ter em mente que nem todo mundo ficará impressionado com nossas animações e mudanças rápidas no estado dos componentes. Mas há uma boa notícia há um papel muito importante no CSS que ajuda as pessoas a pular as animações e realmente se livrar delas em um site. Vamos ver como isso pode ser feito. Vou adicionar e, se você ver o site agora, vou atualizá-lo. Você verá que a imagem de Jane está sendo girada constantemente, então há uma animação constante. Se nos aprofundarmos no código, veremos que há uma animação de quadro-chave definida em CSS e ela transforma elemento girando-o em menos três graus. Se a vemos no código, existe a classe intro-img, então a animação é adicionada a essa imagem e é infinita e cada animação leva dois segundos. Eu diria que para pessoas que sofrem de distúrbio vestibular, que na verdade é remover esse tipo de animação , mas ao mesmo tempo queremos oferecer uma experiência legal, então ter algo mover-se, piscar no site às vezes pode ser considerado atraente para outras pessoas, certo? Para ter essa abordagem equilibrada, podemos aplicar algo que é chamado de preferir movimento reduzido. Essa é a regra da mídia, talvez nossas linhas, para que você possa vê-la no meio, prefiram o movimento reduzido. Isso significa que, se o usuário tiver a opção de movimento reduzido ativada, podemos adicionar algumas condições aqui. Por exemplo, nossa rotação de animação foi adicionada a essa classe e, por exemplo, aqui podemos adicionar o nome de animação none. Substituímos a propriedade do nome da animação e, para o usuário com preferência de movimento reduzido, esse trecho de código seria aplicado, esse CSS seria aplicado. Vamos atualizar nosso site agora para ver se há alguma mudança, onde? Na verdade, não é. Por que isso? Porque eu não tenho essa preferência de movimento reduzido ativada. Como posso fazer isso, em um Mac, estou nas Preferências do Sistema e posso digitar aqui, movimento, por exemplo, e isso me destaca a acessibilidade. Agora devemos ir ao display e verificar o movimento reduzido. Você verá imediatamente que, com o movimento reduzido verificado, a animação não funciona. Graças a essa regra CSS. Se o removermos, então eu vou desviar para o fundo, estou elogiando esse trecho de código e atualizá-lo. Sem essa regra, mesmo que eu tenha esses movimentos reduzidos ativados, a animação ainda funciona. É por isso que é tão importante adicionar apenas algumas linhas de código. Sério, não leva muito tempo, então lembre-se desse recurso de mídia CSS , pois ele ajudará muitas pessoas. Na verdade, há um elemento muito importante amplamente usado em um site, super popular, que tem algum problema de acessibilidade. Você consegue adivinhar, o que é isso? Só que aparece no topo, é frequentemente usado em sites de comércio eletrônico e a resposta é carrosséis. Eu lhe mostrarei rapidamente o exemplo. Você provavelmente conhece todos os banners que mudam automaticamente após alguns segundos. Do ponto de vista da acessibilidade, é muito importante ter o controle sobre ela porque se o leitor de tela lê o que está acontecendo atualmente, ele não consegue acompanhar a velocidade que geralmente é muito alto. Há um artigo super interessante sobre como construir um carrossel mais acessível ou um controle deslizante postado por Jason Webb e ele está adicionando algumas dicas e compartilhando sua experiência na construção de 360 km acessíveis. Ele também está compartilhando sua experiência com base no fornecimento auditorias de acessibilidade em muitos sites e destaca as coisas mais importantes que devemos lembrar. A regra muito importante que eu recomendaria ter em mente é desativar reprodução automática, porque sem ela não podemos realmente cumprir a regra WCAG 2.2.2 que diz sobre pausa, parada e altura. Lembre-se de que, sempre que você estiver implementando a excitação ou projetando-a, precisamos implementar a pausa ou outros controles. Há um exemplo muito bom preparado por Jason, então aqui temos o carrossel que pode ser controlado pelo cursor ou mouse e ele desliza e também pelo ponto preto do bloco, vemos a corrente um. Mas o mais legal é que podemos navegar neste carrossel pelo teclado, então, se eu usar a tecla tab, posso ir para a seção de links de cada um dos blocos, mas também posso usar as setas. Eu também posso usar esses elementos na parte inferior, então esses pequenos pontos para navegar até o bloco fornecido. Há uma coisa importante sem a qual não podemos imaginar nossas vidas, são os gifs. O mais importante sobre os gifs é que não são totalmente acessíveis porque são reproduzidos automaticamente isso não é muito aconselhável para pessoas com problemas cognitivos ou problemas com o movimento. O que podemos fazer como desenvolvedores programadores para tornar os gifs mais fáceis de usar. Há uma coisa muito boa e este é um gif para biblioteca, que ajuda você a implementar o gif com a acessibilidade em mente. Como você pode ver aqui, estamos brincando para controlar os presentes, o que é muito legal porque, especialmente hoje em dia, temos muitos presentes em vários artigos, como no meio , então, por favor lembre-se de que temos algumas bibliotecas que são muito úteis na minha opinião e como o gif funciona. Bem, vou pausar esse gif porque ele também me cansa. Estamos usando o atributo data-gifffer, estamos adicionando o gif por img-tag. Também podemos adicionar o atributo data-gifffer-alt e, claro, precisamos implementar a biblioteca , mas tudo é fácil fazer porque temos o script. Precisamos adicionar ao nosso site e, graças a ele, o reprodutor de presentes, funciona assim que sai da caixa. Eu recomendo fortemente que você confira este site e esta biblioteca gifffer com triplo F e espero que você torne os gifs mais fáceis de usar e acessíveis. 10. O que é ARIA: Lição número 7. O que é ARIA? ARIA é sinônimo de aplicativos de Internet acessíveis e avançados. Esses são conjuntos de atributos que aplicamos ao nosso código em situações em que o HTML nativo não consegue cobrir os problemas de acessibilidade. ARIA preencheu a lacuna entre acessibilidade e elementos que não podemos simplesmente descrever com HTML semântico. Vamos nos aprofundar nos exemplos. Imagine a situação em que temos guias e o usuário pode alternar entre as guias. As guias são criadas com a etiqueta do botão, mas o leitor de tela precisa saber o que está acontecendo na tela. Por exemplo, se tivermos o botão em si, o leitor de tela indicaria o botão. Mas em termos de guias e sua funcionalidade específica, não obteremos nenhuma informação da tecnologia assistiva. É por isso que precisamos passar mais informações, transmitir a mensagem de que estamos usando guias e que a pessoa pode alternar entre elas usando o teclado. É por isso que estamos adicionando o atributo role, que é um dos atributos ARIA então role e atribua um valor a ele, tab. Você também pode imaginar situações como a aparição de modelos, algumas dicas de ferramentas ou alertas para o usuário. Nessa situação, também precisaremos cuidar da acessibilidade e o ARIA nos ajudará muito. Eu posso te mostrar um trecho de código. Estamos tendo div, um contêiner no qual mostramos, por exemplo, as informações que seu nome de usuário é endereço de e-mail. Estamos fornecendo informações adicionais e elas aparecem como uma dica de ferramenta. Estamos tendo id, não importa se é ID ou uma classe CSS. Mas o importante é que temos outra função no ARIA e adicionamos a dica de ferramenta de valor. Como podemos associar essa dica de ferramenta a um determinado elemento em HTML. Você pode ver que estamos fazendo parte do fórum, então rotule e insira. Se você ver que a entrada tem, é claro, o tipo que é ID de texto mas também outro atributo ARIA, que é aria-describedby. Aqui, estamos adicionando o nome do ID dessa dica de ferramenta. Esses dois objetos estão conectados entre si. Essa é uma informação muito importante para o leitor de tela. Graças a essa função ARIA e aria-describedby, todas as informações seriam entregues ao usuário. Há mais exemplos de uso do ARIA, e posso mostrar este site que é um exemplo do ARIA no GitHub. Se você quiser se aprofundar, você pode ver aqui, por exemplo, a entrada do botão, você pode acessar o código HTML e procurar alguns exemplos. Por exemplo, aqui temos aria-controls, aria-live. Bem, eu gostaria de parar aqui por um minuto. Esse é muito interessante porque às vezes temos algum elemento que muda dinamicamente. Por exemplo, números em estoque. Se você imaginar uma situação em que alguém está entrando no site e gostaria de conferir essa palestra que muda a cada segundo. É importante discriminar a informação de que realmente está no elemento vida. Resumindo, ARIA nos dá muitas possibilidades e é um tópico mais complexo. Gostaria que você lembrasse que o ARIA lida com casos como navegação. Além disso, dicas de formulários, erros, alguns widgets, mensagens, outras para o usuário, algum conteúdo interativo. Lembre-se sempre que estiver tentando implementar algo mais complexo e também mais interativo com o usuário. 11. Projeto do curso: Vamos falar agora sobre o projeto da turma. Eu preparei uma tarefa para você e esta é fazer a auditoria de acessibilidade. No pacote de classe que você pode baixar na seção apropriada do Skillshare, você encontrará o site chamado 20 truques de CSS. A propósito, este é o site que é chamado por meio de minhas aulas, datilografado assim. Então fique à vontade para conferir. Estou adicionando o link abaixo. Sinta-se à vontade também para passar por essas aulas se quiser descobrir mais técnicas criativas em CSS. Mas o que quero dizer é que eu preparei este site de 20 truques de CSS. Podemos abrir este site no navegador. Veja o que está acontecendo aqui. Há alguns problemas de acessibilidade que seria bom corrigir adicionando alguns códigos HTML e CSS. Posteriormente, você pode fazer as capturas de das coisas mais importantes e enviá-las na seção de projetos de classe. Eu agradeceria totalmente sua contribuição lá. Para as três primeiras pessoas que aplicariam algumas melhorias de acessibilidade, preparei algo especial. Estou aguardando suas respostas e, claro, seria ótimo se você pudesse usar o conhecimento que adquiriu neste exercício específico. Vamos enviar mais uma vez. Primeiro, baixe e abra o pacote zip que você encontrou na seção do projeto. Em seguida, verifique os problemas nos arquivos HTML e CSS. Clique em “Criar projeto” no site do Skillshare em minhas aulas e, em seguida, faça upload de capturas de tela, pacote ou listas de problemas que você encontrou e corrigiu. Boa sorte 12. Resumo: Está na hora do resumo das aulas. Eu preparei um mapa mental para este curso e podemos analisá-lo rapidamente para revisar todo o material que aprendemos. Em primeiro lugar, você sabe que a acessibilidade está tornando os sites acessíveis a todos. É um tópico muito importante porque afeta um grande número de pessoas. Não se trata apenas de deficiências, trata-se apenas de uma situação temporária de toque na qual temos algumas dificuldades em, por exemplo, ler uma mensagem ou ouvir um vídeo. Você sabe tudo isso. Podemos diferenciar um certo número de categorias de deficiências, como fala, versão auditiva, neurológica, cognitiva ou física de movimento. É bom lembrar também que a acessibilidade pode ser medida e, na verdade, é muito estritamente definida. Precisamos conhecer todas as regras para atender aos critérios com sucesso. O principal padrão, a organização oficial, é a W3C, responsável pela WCAG, que é a diretriz de acessibilidade de conteúdo da web. Essa é a documentação da qual devemos nos lembrar. Também sabemos o que é leitor de triagem, que é uma peça de tecnologia assistiva. Além disso, sabemos como aprender leitores de tela. Sabemos que eles também estão disponíveis em telefones celulares, e eu recomendo fortemente que você os teste. Também sabemos o que é HTML semântico e o que é tão importante. Sabemos que a declaração DOCTYPE deve estar no topo do nosso documento HTML. Também sabemos que existem algumas tags HTML responsáveis por adicionar semântica à estrutura do nosso site, como cabeçalho, principal, artigo, rodapé e assim por diante. Também sabemos que a hierarquia de cabeçalhos é muito importante porque facilita a navegação do usuário no site. Os leitores de tela também podem se mover dentro do documento de uma forma mais lógica, e também sabemos que a acessibilidade e a otimização de mecanismos de pesquisa estão conectadas e não devemos nos preocupar apenas com acessibilidade, mas também sobre SEO. Também abordamos os atributos HTML e sabemos que eles melhoram a acessibilidade. Em primeiro lugar, esse é o atributo Lang, mas também um atributo alternativo muito importante para imagens, que também podemos adicionar em serviços de portais como Facebook, LinkedIn, portanto, devemos ter isso em mente sempre que a imagem for declarativa, devemos manter alt vazio. Eu também falei sobre div versus bottom versus hyperlink, então, uma tag, é importante ter em mente que div é um texto muito genérico. Devemos ter cuidado ao usar botões ou hiperlinks. Obviamente, um CSS é outro grande tópico que devemos lembrar em termos de acessibilidade. Obviamente, o contraste é o primeiro que vem à nossa mente. Mas também existem algumas propriedades CSS como exibição, visibilidade, mas também pseudoclasses, foco ou contorno, mas também um pseudo-conteúdo, como antes e depois, pseudoelementos. Quando falamos sobre visão visual, é claro, temos que mencionar animações, então movimento, tópico em geral, há um recurso de mídia CSS muito útil que prefere movimento reduzido. Graças a isso, podemos oferecer uma experiência equilibrada a pessoas que sofrem de distúrbios vestibulares. Talvez eu deva acrescentar aqui também que abordamos distúrbios vestibulares. É claro que, no final, teremos projetos de classe. Eu recomendo fortemente que você baixe o pacote que eu preparei para você e faça as auditorias de acessibilidade. Por favor, compartilhe seus resultados. Você pode adicioná-lo como uma captura de tela dos locais onde você corrigiu o código, pode criar capturas de tela, por exemplo, do seu documento de noção ou vinculadas à noção. Eu realmente agradecerei. A vantagem é que se cinco pessoas enviarem seus resultados, seus deveres de casa, compartilharei com todos vocês as listas de verificação de acessibilidade que você pode usar em seu trabalho diário. Vale a pena fazer a lição de casa. Muito obrigado por participar dessas aulas. Espero que você não tenha mais medo da acessibilidade e que se aprofunde nesse tópico com mais frequência. Claro, nos vemos nas redes sociais. Você pode me visitar no Twitter. Eu posso fazer o upload, ou você pode assinar meu boletim informativo, ou você pode me visitar no Instagram. vejo mais tarde. Tchau.