Acessibilidade na Web: Aprenda as melhores práticas para criar sites com tudo incluído

1. Introdução: Nesta aula, vou ensinar-lhe os fundamentos da acessibilidade web. O que é, por que é importante e como implementar as várias práticas recomendadas em seus projetos web. site deve ser sempre desenvolvido para que possam ser acessados e interagidos por todos, independentemente da capacidade do usuário. Onde a acessibilidade é um aspecto fundamental do desenvolvimento web que todo desenvolvedor precisa estar ciente. E eu vou estar mostrando a vocês como fazer praias de sites com tudo incluído. Em seguida, você usará este recém-reconhecido Cray, seu próprio site de página única, utilizando várias técnicas de acessibilidade que irão melhorar a experiência do usuário para todos. Olá, sou o David e sou um programador web front-end de Northridge, na Inglaterra. Tenho muitos anos de experiência na criação de aplicações digitais para uma variedade de clientes internacionais. Eu gosto de ajudar a falha bem desenvolvedores como você para melhorar suas habilidades, que irá ajudá-los mais bactérias e finalmente, ajudá-los a se tornar o melhor desenvolvedor de lã correu que eles podem ser. Esta aula é destinada a alunos que têm algum conhecimento básico de HTML e CSS, mas gostariam de aprender sobre a importância da acessibilidade web e como implementar esses recursos através elementos HTML comuns em cada um criará sua classe é o seu IDE favorito. Vs code será meu editor de código de escolha, e eu vou estar usando isso durante toda a classe. Mas quaisquer outros com os quais você esteja familiarizado e confortável usando estão absolutamente bem. Você estará hospedando seu projeto de site no GitHub Pages. E não se preocupe se isso é completamente novo para você. Vou te mostrar como é fácil fazer. E é tudo totalmente grátis. Com as habilidades que você vai ganhar com esta classe, você será capaz de oferecer muito mais como um desenvolvedor web, seja você um freelancer ou se você trabalha para uma empresa. Você será capaz de não apenas explicar a importância da acessibilidade da web, mas também tivemos que demonstrar como implementar recursos acessíveis para qualquer compilação de site. Outra maneira de aplicar nosso novo conhecimento de acessibilidade fina é muito antes do início do desenvolvimento do projeto. Assim, você poderá transmitir seus conhecimentos na fase de planejamento ou em um projeto e aconselhar os criativos do projeto ou designers de UX sobre a melhor abordagem e criar um site com tudo incluído. Assim, no final desta aula, você estará confiante de que todos os recursos web. Então eu projetos que você estará construindo serão acessíveis a todos. Então, sem mais delongas, vamos começar. 2. Projeto do curso: O projeto que você vai montar será um site de página única, que contará com pelo menos uma navegação na imagem, algum texto, um formulário e um rodapé. Agora, o importante aqui é que esses elementos serão criados com recursos de acessibilidade no lugar. Então eu gostaria que você fizesse um site de uma página com algumas informações divertidas sobre um herói pessoal, seja um herói musical e ator ou uma atriz que você admira, ou alguém importante para você. Então, quero dizer, você poderia até fazer uma página sobre o seu animal de estimação favorito. Novamente, os componentes acessíveis que você construirá serão a coisa mais importante. Portanto, não gaste muito tempo a pensar demais no seu conteúdo. Portanto, este projeto é uma maneira perfeita para você aplicar suas novas habilidades de acessibilidade encontradas a um site do mundo real com comparadores reais que poderiam se beneficiar de alguns recursos inclusivos para um projeto bem-sucedido e receber cinco estrelas de ouro no final desta aula, você deve incluir conceitos que são abordados nas lições. Quando terminar, você precisará testá-lo para garantir que ele seja aprovado em qualquer teste de auditoria em contratações leves, garantindo que ele esteja totalmente acessível. Claro, vou mostrar-lhe como usar o Lighthouse e a melhor forma testar o seu trabalho e como fazer as correções necessárias. Os alunos devem usar seu IDE favorito para construir seu projeto de classe. Vou usar o código VS, mas qualquer ID ou editores de código funcionará tão bem. E eu vou encorajá-lo a compartilhar seu trabalho no Skillshare. E para fazer isso, recomendo implantar seu projeto final para obter páginas de hub. Portanto, a conta do GitHub é necessária para fazer isso. Mas não se preocupe, vou mostrar-lhe como é fácil configurar e empurrar o seu trabalho para uma página web ao vivo para todos verem. Mas primeiro, vamos aprender sobre o que realmente é acessibilidade, por que ela é importante e os fundamentos básicos de como implementá-la em seu site. 3. O que é a acessibilidade da web?: O poder da web está em sua universalidade. O acesso de todos, independentemente da deficiência, é um aspecto essencial. Essa é uma citação de TBL, o inventor e padrinho da World Wide Web e nosso Senhor e Salvador, é claro. Nem mais de 1 bilhão de pessoas com deficiência variável. E isto é da Organização Mundial de Saúde. Então isso é de 15 a 20 por cento da população. Portanto, com isso em mente, é nossa responsabilidade como desenvolvedores produzir sites que podem ser acessados por todos. É um direito humano básico que todos são tratados da mesma maneira e pico com qualquer deficiência pode acessar a web igualmente. E isso é basicamente o que a prática da acessibilidade web é tudo sobre. Garantir que seus sites sejam utilizáveis pelo maior número possível de pessoas. Para ajudar a tornar isso possível, existem certas regras e regulamentos em vigor que você pode seguir. O mais notável é o WCAG, que é as Diretrizes de Acessibilidade de Conteúdo da Web. Agora, isso não é exatamente uma leitura curta, e infelizmente não estou pedindo que você leia palavra por palavra, mas é útil entender os principais conceitos descritos neste documento. Existem também níveis diferentes, que medem os critérios de sucesso. Então isso é um duplo A e o mais rigoroso é aaah. Agora você deve estar sempre visando a conformidade com pelo menos o único nível também é útil saber sobre o seu país pode ter seu próprio conjunto de leis que regem a acessibilidade da web. Você deve a sua empresa poderia ter problemas legais se alguém fosse reclamar sobre o seu site não ser acessível. As empresas foram processadas num passado por ignorarem estas medidas. Agora isso não é algo para você se preocupar com isso. Porque se você acompanhar comigo neste curso e tornar a acessibilidade uma parte do seu futuro processo de desenvolvimento web. Você vai ficar bem. Talvez se considerar que a adição de recursos de acessibilidade em seu projeto web será exaustivo tempo. Isso pode ser um pouco verdadeiro se você estiver tentando adicionar recursos de acessibilidade em um projeto já construído. Mas eu estou querendo ensinar-lhe várias técnicas que você pode implementar enquanto você está planejando e construindo um site. E assim, quando se tornar a norma para você fazer isso, ele será apenas parte de seu processo de desenvolvimento sem ocupar muito tempo extra. E para ser honesto, porque é uma parte essencial do desenvolvimento web, ele não deve ser considerado tempo extra de qualquer maneira. E porque eu sei que você é um ser humano incrível, você quer fazer o que é certo e você se importa com todos os humanos igualmente. Então não há discriminação aqui, certo? 4. Considera o que a considerar: Então, que tipo de deficiência você precisa considerar ao construir seu próximo projeto web? Vamos primeiro falar sobre deficiências visuais. Então isso pode ser alguém com visão baixa com cegueira completa ou daltonismo. Assim, os usuários com cegueira baixa ou completa usariam algo chamado de leitor de tela para navegar através um site para leitura de tela é basicamente um software que lê texto digital em voz alta. E há algumas opções pagas. E as jóias mais famosas e golfinhos, também há opções gratuitas. Assim, o Apple Mac tem narração integrada. E você também pode baixar o ChromeVox na loja de extensões do Google Chrome. Então essas pessoas com palavra de cegueira baixa ou completa dependem de um teclado para navegar pelo site para que eles não seriam capazes de ver o ponteiro do mouse, por exemplo, pressione o espaço de controle. Aqui está um exemplo de como usar o VoiceOver no Mac. Então você pode ver uma pequena caixa de diálogo aqui. E você também está, hey, enquanto eu passo junto para a navegação, o que acontece e como ele lê para fora. Link sobre a lista de três itens. Você é a galeria de acoplamento. Você está atualmente em um link para clicar neste link, pressione Control, leilão, espaço. Link, blog. Você está atualmente em um link. Link. Leia mais nomes2 necessário menu de dados inválidos pop-up, editar texto com menu de preenchimento automático inserido um cromo tem nova janela. Token ser menu de preenchimento automático, pressione a seta para cima, seta para baixo D, em seguida, pressione o retorno devido para inseri-lo no formulário. No momento, você está em um campo de texto para inserir texto neste campo time. Então pode ser auto. Eles vão fazer você pressionar a seta para cima para baixo a seta D e, em seguida, pressione a tecla de retorno para inseri-lo no formulário. Então tenha em mente, você não faria, na verdade, se você é cego, você será visto nada disso. É literalmente apenas a descrição de áudio que está sendo lida pela voz. Então, é por isso que é tão importante ter certeza de que todo o seu HTML e marcação é corretamente semântico, escrito corretamente para que ele possa ser descrito e lido como pretendido. Agora, tipografia é realmente importante, bem como estar com baixa visibilidade seria afetada por certas famílias de fontes que são usadas e também o tamanho da fonte também. E isso também pode afetar os usuários mais antigos. Quando envelhece, sua visão pode se deteriorar. Assim, topografia também é uma coisa importante a considerar para os usuários mais antigos do site. Agora, quando se trata de daltonismo, contraste é realmente importante. Então este é o uso da cor, do texto. E fundos. Então, se a cor do texto for semelhante à de um fundo, algumas pessoas não poderão ler o texto. Além disso, outra coisa a considerar é como você usa a cor para diferentes mudanças de estado. Por exemplo, em um estado de foco, se você apenas alterar a cor. Isso também pode não ser visto por determinados usuários. O contraste também é importante para o brilho da tela. Portanto, vale a pena considerar que alguém pode estar olhando para o seu site em um telefone celular ou um tablet fora ou na caixa, ou em algum lugar onde haveria algumas capturas de tela. Então você pode não ser a pessoa que realmente desenha o site, mas você ainda pode ter alguma influência sobre como o site é projetado. Então estas são algumas coisas que valem a pena saber. Assim, você pode se envolver nessas conversas no início do processo de desenvolvimento. Algumas pessoas ou alguns usuários podem ter deficiência auditiva. Então isso tem a ver com surdez. E coisas a considerar. Aqui seria qualquer vídeo ou música que estão em seu site onde legendas seria realmente útil nessas situações. E também, se houver quaisquer ações que acontecem em seu site são indicadas pelo som apenas de ver essas pessoas não seriam capazes de reconhecer essas ações. Alguns usuários podem ter deficiências cognitivas ou neurológicas. E isso é como dificuldades de aprendizagem ou TDAH ou EM, ou distúrbios convulsivos, como epilepsia. Então, as coisas que você precisa, considere o uso de animações. Portanto, você não quer ser muito exagerado com suas animações que podem distrair e causar problemas para determinados usuários. Também vale a pena notar que esses usuários podem reduzir o movimento em sites. Então eu posso ir para as configurações e, em seguida, clicar em reduzir movimento. E enquanto o desenvolvedor nos levar em consideração , isso deve reduzir ou remover completamente qualquer animação de sites. E eu vou te mostrar como fazer isso em uma lição futura. Então, deficiência física, isso pode ser algo como distrofia muscular ou alguém com destreza reduzida. E novamente, essas pessoas que podem não ser capazes de usar o mouse, então eles dependem do teclado para navegar. É possível que os usuários podem estar segurando algo em sua boca para empurrar as teclas, e isso é contratado, eu iria navegar em torno de um site. Uma acessibilidade de 100% é algo que é realmente difícil de alcançar, especialmente em grandes projetos. Então, não se culpe por não ser capaz de alcançar isso todas as vezes. Muitas vezes, isso será casos de borda. Então faça o melhor que puder. Eu aconselharia lá se alguém não o notificar de que seu site tem um problema de acessibilidade, iniciar um diálogo com ele, ser empático, é claro, e apenas tomar medidas razoáveis para tentar corrigir o problema. 5. Como testar o teste no que é: Então, como você pode testar um site para uma boa acessibilidade? Bem, eu vou te mostrar o processo que eu passo quando estou fazendo uma coisa dessas. Então, primeiro quando chegamos ao site, eu tentei navegar por todo o site apenas usando meu teclado sozinho. Então, principalmente usando a tecla Tab para tabular junto para ver se eu posso acessar todas as âncoras e botões e entradas. Agora, é bom saber que qualquer conteúdo fora da tela não deve ser tocado. Então imagine um menu que é aberto clicando em uma âncora de menu ou um ícone de hambúrguer. E você não veria os itens de navegação até clicar neste botão abrir e fechar. Então, com isso em mente, quando você guia através, você não deve ser tabbing ou você não deve ser capaz de tocar no menu oculto. Você só pode tocar nesses itens ou nesses itens quando o menu estiver ativo e aberto. Então vale a pena verificar. E você deve ser capaz de guia todo o caminho até a parte inferior da página, incluindo o rodapé. Agora, um exemplo de má acessibilidade está em um, digamos que um blog listando páginas Listas, monte de postagens de blog diferentes. E ele tem um pergaminho infinito, o que significa que você, quando você usaria o mouse, você vai rolar para baixo e mais posts seriam carregados, e você rolar mais para baixo e mais algumas postagens seriam carregadas. Agora, isso pode ser um recurso legal olhando para mim, um novo livro para alguém que é cego e precisa guia para baixo que nunca ser capaz de chegar ao rodapé até que todos os posts são carregados. E isso é muito confuso para eles. Portanto, certifique-se de que você pode guia todo o caminho até o rodapé e não usar rolagem infinita. E os anéis de foco devem estar presentes em âncoras, entradas de botões, qualquer coisa que seja selecionada. Agora eu trabalhei com criativos no passado que disseram que não gostaram da aparência do contorno azul e que deve ser removido. Mas nunca deve ser removido e não deve ser feito mais sutil também. Assim, o anel de foco pode ser reajustado. Mas certifique-se de que ele não seja removido porque é importante as pessoas vejam o que está atualmente em Foco na página. Então eu diria que é sua responsabilidade como desenvolvedor talvez educar o criativo ou o desejo de UX sobre por que é importante manter esses anéis de foco. Quando se trata de pairar estados em uma âncora ou um botão ou qualquer coisa que é clicável. Isso deve, o estado de foco em si não deve ser indicado apenas pela cor. Porque alguém que tem cegueira ou cegueira parcial, não somos capazes de ver a diferença. Assim, você pode mudar a cor ao passar o mouse, mas também inclui algo físico, talvez como um sublinhado ou uma borda. Agora eu fui notar uma animação em uma página vale a pena verificar para ver se ele pode ser removido quando você selecionar reduzir movimento. Assim, em suas configurações para seu MacBook, seu PC ou qualquer computador que você esteja usando. Essa deve ser uma opção dentro de suas configurações de acessibilidade para ativar o movimento reduzido. E, em seguida, quando você voltar para o site, você pode ver se o desenvolvedor incluiu isso para qualquer lição ou remover completamente quaisquer animações que estão no site. Como mencionado anteriormente, animações de distração podem ser um problema para qualquer um, tem quaisquer problemas cognitivos. Agora, essas são algumas dicas úteis para testar a acessibilidade no front-end. Vamos dar uma olhada em algumas ferramentas úteis que vamos cavar mais fundo no próprio código. 6. Ferramentas de teste úteis: Vejamos algumas ferramentas úteis que o ajudarão ao testar uma boa acessibilidade. Então o primeiro que quero mostrar está no Google Chrome. Então, se nós apenas inspecionamos a página que abre nossas DevTools, à direita aqui. Deve haver uma lista suspensa com um pouco de pneus leves incluídos aqui. Agora, se você não vir isso, apenas verifique novamente primeiro. E, se não estiver lá, vá para a loja de extensões do Google Chrome, faça o download porque você não pode adicioná-lo a vários outros navegadores se baixá-lo como uma extensão. Então, basta clicar no farol. Ok, e temos algumas opções aqui, incluindo as melhores práticas de desempenho, SEO, e o que nos interessa é a acessibilidade. Você também pode testar para dispositivos móveis e desktop para ver como isso funciona em dispositivos menores. Então eu vou deixar alguns destes selecionados e eu vou apenas clicar em Gerar relatório. Agora, depois de alguns segundos, dependendo da rapidez com que seu computador e conexão são, isso deve nos dar um relatório útil e algumas escolas estão no topo. Ok, e nós vamos chegar aqui na verdade três desses verdes e a escola está fora de um 100, que é o que estamos procurando. Acessibilidade aqui é um âmbar, então 87. Então, idealmente, você estaria querendo que isso fosse verde. Então, eu diria apontar para 90 a 100. Às vezes é muito difícil obter acessibilidade para 100, mas tente obtê-lo 90 ou acima se você puder. Então, vamos ignorar as melhores práticas de desempenho, e SEO, todas elas estão com bom aspecto. Mas acessibilidade, parece que pode haver algumas coisas que podemos melhorar o cabelo. Então, se rolarmos para baixo, podemos ver acessibilidade aqui. E então isso nos dá alguns problemas que devemos olhar agora. Então o primeiro é o contraste. Agora diz aqui, a descrição aqui para o farol são muito úteis, então vale a pena ler. É o que diz “contraste”. Estas são oportunidades para melhorar a legibilidade do seu conteúdo. Então, como visto aqui, essas cores de fundo e de primeiro plano não têm uma taxa de contraste suficiente. Então, se abrirmos isso, vocês podem ver que há três elementos falhando. E se eu passar o mouse sobre eles, você verá que a barra de navegação na parte superior está sendo destacada. Assim diz aqui, textos de baixo contraste, difíceis ou impossíveis para muitos usuários de ler. Agora, sabemos que são os itens de navegação no topo aqui que precisam ser alterados. Então deixe-me mover o meu código aqui. Podemos ver isso. Agora vamos olhar para a nossa navegação, que está aqui. Então eu vou fazer estes e meio cinza. Vamos torná-los todos um preto sólido, assim, e eles são atualizados. Está bem. Em seguida, na lista diz, ok, elementos de cabeçalho de navegação não estão em uma ordem decrescente sequencial. Então elemento falhando é h4. Então só podemos usar H4, a página se H1, H2 e H3 precede isso na página, mas há apenas um cabeçalho aqui. Então vamos ver o que é isso. Então você pode ver aqui é um H1, o que significa que este deve ser um H2 porque é o próximo cabeçalho na linha. Lembre-se que a cabeça e o número não indicam o tamanho, mas indica a importância e eles devem estar em ordem sequencial. Então, onde diz mais cinco, não deveria haver um H4, eles deveriam, de fato, ser. E H2. Tão, tão gorda. Certo, vamos voltar para a casa de luz. Foi próximo, elementos de formulário não têm rótulos associados. Então é abrir isso. Ele está me dizendo que o nome de entrada e e-mail não tem etiquetas. Então bateu, eles têm espaços reservados, mas isso não é suficiente. Essas entradas devem ter rótulos. Então vamos adicioná-los. Ok, este é o nosso nome. Vamos adicionar um rótulo. Rótulo para é o id de nome e nome e um asterix porque é necessário. E então faremos o mesmo para e-mail, para ID de e-mail. E então escreveremos um e-mail aqui. Está bem? E você pode ver os rótulos aparecendo lá. Agora, isso tem todas as coisas que foram sinalizadas para acessibilidade. Então eu não vou fazer é este farol claro e, em seguida, é gerar um relatório uma segunda vez. E espero que estejamos no verde. Lá vamos nós. Acessibilidade é 100 e no verde, perfeito. A próxima ferramenta que eu gosto de mostrar-lhe é resfriado site melhorar verificador de acessibilidade. E é pelo site da empresa melhorar. E você pode baixar isso da Chrome Web Store aqui mesmo. Certo, e isso mergulha mais fundo do que estrelas de aluguel de luz. Portanto, é muito útil se você realmente precisa ter certeza de que seu site está acessível para dobrar ou até mesmo triplicar um padrão. O serviço é uma ferramenta de acessibilidade muito profunda. Agora, primeiro, eu só gostaria de mostrar os filtros aqui. Então você pode apenas verificar para os diferentes níveis, um debate para avião. Vamos verificar se há todos eles. Você também pode especificar qual é o seu trabalho. Então nós somos desenvolvedores, então vamos mantê-lo assim. Outros se aplicariam a provedores de conteúdo, por exemplo. Então seria útil para eles. Mas só queremos verificar o código. E no momento eu só tenho erros selecionados para apenas fechar os filtros. Não há áreas, então isso é muito bom. Mas que tal se nós apenas adicionar algumas manhãs e comentários apenas para ter certeza de que nós temos tudo coberto. Eu também vou selecionar todos os títulos de trabalho, apenas dois, só para que possamos verificar tudo. Sabemos que não temos erros, mas há algumas coisas que valem a pena verificar. Então, abrimos isso para inter-relações, a etiqueta pequena é usada corretamente? Aqui diz: “Vamos clicar nisso. Você verá que a ferramenta rola automaticamente para baixo até a ocorrência disso e realça em vermelho que está aqui embaixo. Então tudo isso está me dizendo é para verificar novamente se eu estou usando a tag pequena corretamente. Não use a tag pequena para alterar o tamanho do texto. Isso é bom. Não vou usar tudo para o tamanho. Só estou usando para a declaração de direitos autorais aqui no rodapé. Certo, claro que verificamos. Outra. Imagens de texto. É a imagem livre de texto. Agora isso tem a ver com o logotipo aqui, que é destacado em grande parte no lado aqui. E basicamente está me dizendo que você não deve usar imagens que tenham texto dentro. No entanto, se imagens de texto não puderem ser evitadas como se estivesse em um logotipo da empresa, por exemplo, a tag alt deve conter o mesmo texto da imagem. Então o texto alternativo diz aqui, não contém o mesmo texto. Então estamos todos bem. Portanto, há algumas ferramentas úteis para você usar. Eu recomendaria que se você está indo para código junto comigo quando começamos no projeto que você usa Farol para testar como você vai porque ele vai sinalizar problemas úteis que você pode alterar. Se você realmente quer aprofundar mais do Siteimprove realmente vai para muito mais profundidade de acessibilidade. Então, duas opções lá. 7. Marcação semântica: Agora vamos olhar para a maquete semântica e por que é importante para a acessibilidade. Então, aqui podemos ver um layout típico do site e observar os diferentes elementos e as diferentes tags HTML usadas. Senhor, temos um NAB que está dentro do cabeçalho. Temos um rodapé na parte inferior, temos um lado. E, em seguida, no centro onde o conteúdo principal é, é uma tag principal com a seção. E essa seção tem um cabeçalho 1 tag. E, em seguida, dentro da seção há um artigo. Então este é apenas um exemplo das várias tags de layout que eu queria mostrar a vocês. E eu queria também salientar que você não pode ver div único. Então o que estou tentando atravessar aqui é não usar um div ou menos. Não há literalmente outras tags que você possa usar para essa situação. Então aqui estão algumas divs, e isso é para um componente de navegação ou menu de navegação. E então só há contêineres de comparação e dentro dos devs, divs individuais para cada item de menu. Esta é uma má forma de o fazer. Então, como mencionado no slide anterior, não use divs e como você precisa. Então, um exemplo melhor é usar uma tag nav para o contêiner. E então temos uma lista desordenada. Dentro da lista não ordenada, nossos itens de lista individuais. Então, novamente, basta tentar usar os tanques que é muito mais claro para os leitores de tela para indicar qual parte do site que em, se você usar tags semânticas é fácil distinguir entre diferentes tipos de dados. E também muito bom para motores de busca como o Google para navegar pela sua página. Então HTML semântico é tudo sobre o uso das tags corretas para cada elemento. Então, o que isso significa para os leitores de tela? Vamos dar uma olhada em como um leitor de tela leria esses dois exemplos. Vamos primeiro dar uma olhada em como o leitor de tela lê essa navegação na página, enquanto nós a codificamos apenas usando divs. Então não da melhor maneira semântica. Você está atualmente em uma nova janela. Você está atualmente em um link. Você está atualmente em um link. Para clicar neste link, controle de grama, espaço de leilão. Música. Ok, então ele lê como link e lê o nome do link. Mas isso poderia ser mais descritivo. Não há maneira de saber. Este é um menu de navegação. Apenas soa como se fosse uma seleção ou links aleatórios, que podem estar em qualquer lugar na página. Agora vamos verificar como o leitor de tela lê essa navegação quando estamos usando os elementos HTML de navegação corretos. Ok, Agora esses três itens estão em uma lista correta no HTML. Vamos ver como o leitor de tela lê isso como uma guia para o item de página sobre. Lista de itens tem uma nova janela. Está bem. Então é realmente dito que há uma lista de três itens porque ele sabe que esses itens estão em uma lista de, bem três itens e, em seguida, não em algumas tags div aleatórias. Então, apenas aquele pouco de informação extra diz ao usuário que é uma lista de três itens. Então um pouco isso vai ser um cardápio de alguma descrição. Agora vamos dar uma olhada em algumas tags HTML que você pode não estar ciente. Então estes não são necessariamente tão comuns. E muitas vezes, em vez de usar essas tags corretas, divs podem ser usadas ou tags de parágrafo podem ser usadas quando na verdade há tantas que você pode escolher. Aqui está um bom exemplo de usar uma tag de tempo para representar este dia de 20 de maio aqui. E a lista de descrição? Então você já deve ter ouvido falar de uma lista ordenada ou de uma lista não ordenada. Bem, esta lista de descrição contém o termo de descrição e, em seguida, o detalhe da descrição. E esse detalhe é para o termo acima. Então é uma espécie de resumo do ponto acima. Então este é um tipo diferente de lista que vale a pena conhecer. Que tal a etiqueta de endereço? Assim, dentro das etiquetas de endereço, você pode conter um endereço físico, conter um número de telefone e e-mail, até mesmo pontos de mapa ou longitude e latitude. Você pode até incluir identificadores do Twitter e outros URLs de mídia social. Que tal a etiqueta pequena? Isso é frequentemente usado para compartilhamento de direitos autorais I neste exemplo. Então realmente vai ajudar com acessibilidade se você usar as tags semânticas corretas e camada seus sites da melhor maneira que você pode usando todas as tags disponíveis para você. Agora é dar uma olhada em alguns elementos HTML mais comuns e como eles podem ser usados da maneira acessível correta. 8. Elementos HTML: Vamos dar uma olhada em detalhes em alguns elementos HTML mais comuns e como melhor usá-los para uma acessibilidade ideal. Então, com cabeçalhos comuns, você provavelmente verá H1, H2, H3 e assim por diante, até chegarmos a H6. E eu vi muitos desenvolvedores usá-los dessa maneira para alterar o tamanho do cabeçalho e isso é errado. Eles representam o nível de importância, não o tamanho. Então isso é uma coisa importante para lembrar quando se trata de usar essas tags de cabeçalho corretamente. Agora eles devem seguir uma ordem sequencial na página. Então você não pode simplesmente entrar e H4. Se, por exemplo, não houver um H1, H2, H3 prosseguindo na página. E é útil saber que alguns leitores de tela podem pular entre cabeçalhos. Senhor, qualquer coisa que forneça algum tipo de importância que possa vir antes do cabeçalho pode ser perdido. Agora deixe-me dar um exemplo do que eu quero dizer com isso, desculpe o estilo muito branda aqui. Mas você pode ver vários post de blog ou pequenos artigos dispostos desta forma com uma data de quando foi publicado eo texto Anson título. Agora, o problema aqui é, como mencionado, alguns leitores de tela podem pular entre cabeçalhos para navegar pela página. Mais fácil. Mas isso significa que uma vez que você pular para este cabeçalho bem aqui, vai perder completamente qualquer coisa acima dele neste recipiente. Então esta data não será aposentada. Então, por favor, não exponha seus posts assim. A melhor maneira seria trocá-los e manter todas as suas informações importantes abaixo do cabeçalho. As imagens devem sempre incluir uma tag alt descritiva. E a única vez que você deixaria as etiquetas antigas em branco se a imagem for puramente apresentacional. Quando se trata de usar imagens que contêm palavras, por exemplo, logotipos geralmente têm palavras neles. A tag antiga deve incluir as palavras exatas usadas. Agora vamos ver rapidamente alguns exemplos de imagem. Então, quando se trata de imagens, quando você adiciona uma tag alt à sua tag de imagem, certifique-se de que ela é descritiva e descreve o que está na imagem. Agora isso não é coisa óbvia para declarar preço BBs como o mínimo mais alto, alguns tanques antigos são cena ao vivo. Então, com esta imagem, esta bela imagem deste gato, a tag alt é um gato cinza vestindo uma coroa. Então, sim, descreve exatamente o que está na foto. Então eu mencionei imagens de apresentação. As únicas vezes em que você deixa a etiqueta antiga vazia. Então isso pode incluir como uma divisória como esta. Portanto, ele realmente não adiciona qualquer informação para a tela, se você quiser, é puramente apenas para apresentação. Então, neste exemplo, a tag alt está vazia. E para ajudar os leitores de tela ainda mais, adicionei uma função igual a apresentação aqui à tag de imagem. Agora, quando se trata de logotipos como este que eu tenho usado ao longo do curso. Ele tem texto dentro do logotipo. Geralmente você quer evitar o uso de qualquer texto dentro de uma imagem, mas, claro, alguns logotipos da empresa têm texto. Então, neste exemplo, a tag antiga deve dizer exatamente quais são as palavras, e faz aqui. Agora, quando se trata de âncoras e botões, certifique-se de que todos eles têm um estado de foco e também um contorno de foco. Agora pode ser tentador remover o contorno de foco se você acha que ele parece feio, mas não removê-lo, você pode remodelá-lo. Mas apenas não removê-lo completamente é importante que um contorno Fergus permanece para fins de acessibilidade. Quando se trata de links externos, eles devem indicar de alguma forma que eles são realmente externos e eles vão abrir uma nova guia ou uma nova janela. Então você pode fazer isso com algum texto que o acompanha, diz abre em uma nova janela. Ou você pode incluir um ícone que representa que se abre em uma nova janela. Certifique-se de que o texto da âncora e do botão descritivo. Então botões que podem ter algo como ler mais ou clique aqui por si só simplesmente não são suficientes. Então, para incluir mais informações sem realmente adicioná-lo ao texto, você pode usar atributos aria, onde você pode incluir algum texto fora da tela. Vamos dar uma olhada em alguns exemplos disso. Então, como mencionado, certifique-se de que suas âncoras ou botões clicáveis, você tem um estado de foco e um estado de foco? Então, se eu guia para este primeiro botão, você verá o contorno azul. Se eu passar o mouse sobre ele, tem uma data de colheita com a sombra. E quando se trata de datas de colheita, por favor, não mude apenas a cor do texto porque pessoas com baixa visibilidade ou daltonismo não seriam capazes de ver a diferença. Então certifique-se de que algo mude fisicamente. E com links externos, indique que é um link externo. Portanto, ou com um ícone ou ainda melhor ter algum texto descritivo que literalmente afirma que ele será aberto em uma nova janela. E, por favor, seja descritivo. Então, muitas vezes você vai usar botões ou crianças de íons que apenas dizer ler mais ou clique aqui ou algo ao longo dessas linhas. Mas para alguém com pouca visibilidade, você não pode obter todo o contexto da página ou do conteúdo. Precisamos de mais informações. Então, o que eles estão lendo? Mohr Buret. Então isso é apenas inspecionar este botão Leia mais. E você verá que eu adicionei um rótulo aria com uma descrição de ler mais sobre ser descritivo. Então, pelo menos quando um leitor de tela chega a isso, mas tem mais informações sobre o contexto deste botão. Gostaria de salientar que a etiqueta de traço RA. As palavras dentro dele não são 100% traduzíveis. Então isso significa que não há 100% acessível. Uma solução melhor estaria aqui. E para incluir algum texto descritivo que não é visivelmente visto, mas será pego pelos leitores de tela. Então, em um intervalo, eu incluí este texto aqui. Teríamos mais por ser descritivos. Eu adicionei uma classe de SR ou link, que é o leitor de tela traço cedo. E então, se pudermos ver os estilos aqui, agora eu não adiciono display nenhum para isso porque então isso estará faltando e o leitor de tela não vai lê-lo. Então, em vez disso, você pode adicionar os estilos, removendo bordas, dando uma altura e largura de apenas um pixel. Posicionamento absoluto e, em seguida, dar-lhe uma margem de menos 1 estouro oculto e preenchimento de 0 basicamente remove-o completamente da tela. Então não é visível para você. E eu comprar um será visível para leitores de tela. E com entradas de formulário semelhantes a botões e âncoras, eles devem sempre ter um contorno de foco. Assim, você pode ver qual campo está em Foco. Os campos de formulário também devem ter rótulos. Por favor, não removê-los e colocar titulares por conta própria não são suficientes. Então você deve incluir um rótulo. Leitores de tela lerão o nível de associado mesmo quando o campo estiver em foco. Então é bom saber isso. E você também pode adicionar foco à entrada apenas clicando no rótulo para que a área de acerto seja maior. E isso também se aplica a dispositivos de tela sensível ao toque, como telefones celulares. Esperamos que você tenha encontrado essas dicas úteis e você poderá começar a implementá-las assim que começar a seguir junto com o projeto de classe que está chegando em breve. 9. Atributos DA ARIA: Vejamos agora os atributos aria e como eles podem ajudar com a acessibilidade. Então, eles são documentos MDM úteis estado onde Acessível, Rich Internet Applications, que é o que R é significa, é um conjunto de atributos que encontra maneiras de fazer conteúdo web e aplicativos web, especialmente em todo o JavaScript, mais acessível a pessoas com deficiência. Assim, eles podem adicionar semântica de acessibilidade a componentes personalizados onde normalmente só existiriam em elementos nativos. Nas duas lições anteriores, eu expliquei contratar muitos elementos HTML nativos já têm recursos acessíveis para você utilizar. Mas pode haver situações e ocasiões em que você precisa criar algo mais personalizado. Então vamos dar uma olhada em como podemos ajudar com isso. Agora aqui está uma situação comum onde os ícones de âncora, então você pode encontrar isso em uma lista de ícones sociais ou um telefone especial de navegação compacto e celular onde você pode não obter qualquer texto em tudo, mas você só tem ícones para representar um item clicável. O problema é que não há nenhum texto associado a esses ícones. leitor de tela vem até eles. Eles não sabem o que representam. Eles não podem ver o estilo deste ícone, então eles não teriam idéia de que ele fosse Instagram e Twitter, muito menos onde isso iria clicar. Então, em nosso código, há uma maneira de resolvermos isso. Então, em nossa âncora apenas dentro do Chrome DevTools aqui, eu vou apenas adicionar um atributo. E esta vai ser ária, etiqueta de traço. E, em seguida, dentro deste rótulo, podemos escrever algum texto descritivo. Então podemos dizer que abre a conta do Instagram de mim. E então os colchetes se abrem em uma nova janela. Certo? E então, quando um leitor de tela chegar a isso, será capaz de ler este rótulo aria, que descreve exatamente o que este ícone clicável irá levá-lo ao que abre e o que ele representa. Vamos fazer o mesmo para o Twitter como um atributo, aria, rótulo. E é por isso que abro o interruptor. Corrente. Eu novamente entre parênteses, abre em uma nova janela. Então, quando não há textos para ler, um rótulo aria faz bom uso disso. E eu diria que este é o exemplo mais básico de um caso de atributo ária. Quero mostrar dois exemplos de um conjunto de caixas de seleção e como o leitor de tela as lê. Primeiro vamos olhar para as caixas de seleção nativas. Então, usando as tags de caixa de seleção HTML de entrada normal. E, em seguida, abaixo está um conjunto de caixas de seleção personalizadas que eu mesmo fiz usando extensões e rótulos, mas não usando as tags de caixa de seleção de entrada nativa. Então, vamos ligar o leitor de tela de voz e ver como redigitar as caixas de seleção nativas. Caixas de seleção, janela do Google Chrome, caixa de seleção O Poderoso Chefão tem foco no teclado. Você está atualmente em uma caixa de seleção para selecionar ou desmarcar essa caixa de seleção, pressione Control option space. Tudo bem, vamos tocar elipse agora, estou dizendo caixa de seleção. Você está atualmente em uma caixa de seleção, a caixa de seleção selvagem. Você é atualmente a caixa de seleção selvagem. Está bem. Então isso é bem claro. Ele reconheceu que eram caixas de seleção, reconheceu que estavam em um grupo de caixas de seleção e também reconheceu quando estavam marcadas e não marcadas. Muito útil. No entanto, o que acontece se você quiser estilizar algumas caixas de seleção personalizadas de z? Este design é terrível. Eu não vou conseguir nenhuma marca por um bom design aqui, mas este não é o objetivo desta lição. Eu só quero mostrar que o que acontece se criarmos designs e caixas de seleção personalizadas onde não podemos usar o equivalente HTML. Como o leitor de tela irá lê-los, e o que precisamos fazer para usar aria para garantir que eles estão acessíveis. Então deixe-me ativar o VoiceOver e veremos como ele lê atualmente esta lista de caixas de seleção. Voiceover em caixas de seleção do Chrome aria, janela do Google Chrome. Você está atualmente em um elemento de texto dentro do conteúdo da web para sair deste grupo de controle de imprensa área molhada. Você está atualmente em um elemento de texto dentro do grupo de conteúdo da Web. Você está atualmente em um elemento de texto dentro do conteúdo da Web para sair desta opção de controle de pressionamento área molhada. No momento, você está com um texto desativado do VoiceOver. Certo, então não é muito útil. Ele acha que é apenas o elemento de texto. Ele não sabe que é uma caixa de seleção, não sabe se está marcada ou desmarcada. É basicamente muito em branco e não é útil para quem está usando um leitor de tela. Então, como podemos mudar isso? Então, no span, que é a própria caixa de seleção, eu já adicionei um índice de tabulação de 0 em todos eles para que eu possa pelo menos tabular para eles. Caso contrário, eu nem seria capaz de usar um teclado para selecioná-los. Então, para esses quatro, precisamos dizer aos leitores de tela que o papel real dessas caixas de seleção personalizadas são, de fato, caixas de seleção. Então, uma função é igual a caixa de seleção. Então esse é o primeiro passo. Em seguida, precisamos indicar se isso, estes estão marcados ou desmarcados. Então podemos usar um rótulo aria de Aria Dash verificado. E vamos definir o padrinho para a verdade. E então para estes três abaixo, vamos adicionar uma ária, verificado é igual a falso. Certo, guarde isso. Ok, e eu já estilizei, então o cheque tem uma pequena cruz nele. Isso também não é suficiente. Portanto, esses rótulos precisam ser vinculados a essas caixas de seleção personalizadas. Agora, semelhante ao tipo de entrada nativa da caixa de seleção é onde há um rótulo abaixo que diz quatro. E, em seguida, o valor dentro dos links completos para o ID da entrada. Precisamos replicar isso com nossas caixas de seleção personalizadas. Então, para fazer isso, podemos usar um outro rótulo de ária chamado Aria Dash, rotulado por. E isso precisa ser igual ao ID do rótulo. Então, isto aqui. E eu vou adicionar rapidamente a mesma ária rotulada por para as seguintes caixas de seleção. Com esses papéis ariais e atributos adicionados às nossas caixas de seleção personalizadas. Vamos ver como o leitor de tela os lê. Aja agora. Voiceover no Chrome, caixas de seleção aria, janela do Google Chrome. A caixa de seleção Padrinho tem foco no teclado. Você está atualmente em uma caixa de seleção dentro quando o conteúdo selecionar ou desmarcar esta caixa de seleção, Apocalypse. Agora eu sou Jake para marcar caixa. Você está desmarcada no momento. Caixa de seleção. Você está na orla para marcar a caixa. Você está atualmente em uma caixa de seleção interna quando o CMS não está desativado. Ok, isso é ótimo. Então, com o uso do aria, conseguimos garantir que nossas caixas de seleção personalizadas tenham detalhes semânticos acessíveis que ajudarão com os leitores de tela. Agora tenha em mente que novamente, o documento MDS afirma que a primeira regra da aria é se um elemento ou atributo HTML nativo tem a semântica e o comportamento que você precisa, use-o em vez de redefinir um elemento e adicionar um estado de papel aria ou propriedade para torná-lo acessível, use apenas papéis aria quando não há nenhum elemento HTML equivalente para alcançar a mesma coisa. Muitos elementos HTML já têm tantos recursos de acessibilidade excelentes já incorporados. Portanto, deve ser apenas uma situação única onde você tem que criar algo único. E se você precisa se manter acessível, o que é claro que você deve fazer, então é quando a ária entra em jogo. 10. Projeto do curso - Configuração: Agora é a parte do curso onde eu vou construir um mini-projeto, apenas um único pager, que tem vários elementos de acessibilidade para ele. Então eu realmente exorto você a seguir junto comigo e construir um site de página única semelhante também. Vou mostrar-lhe nas próximas aulas e tentar incluir tantos recursos de acessibilidade que você aprendeu ao longo deste curso. Então eu vou estar usando VS Code aqui. E se você quiser acompanhar e copiar meu projeto de curso, bem, você vai precisar de um index.html para sua maquete, um style.css para seus estilos. Então o que eu gostaria que você fizesse é pensar em seu ator ou músico favorito, ou alguém que é um herói para você e talvez escrever uma página sobre eles. E então usamos Marlon Brando porque acho que ele é um grande ator ou há alguma parede? Então estamos usando um retrato dele. E eu também criei este logotipo que vamos usar no cabeçalho. Então crie isso eu mesmo. Não tínhamos acesso a algo para criar um logotipo. Basta encontrar uma imagem adequada on-line. E realmente a melhor maneira de aprender é colocar seu novo conhecimento encontrado em prática. Então, vamos continuar a hospedar seu projeto em uma página para que todos vejam. E eu e outros podemos lhe dar feedback. Vou mostrar-lhe como hospedar seu projeto no GitHub Pages é completamente gratuito e é fácil de fazer. Se você ainda não tem uma conta do GitHub, acesse github.com e inscreva-se. Eu já tenho uma conta, então eu não vou passar por todo o processo, mas basta seguir as instruções na tela e você será definido. A maneira mais simples de empurrar seu trabalho para o GitHub é baixar e usar o GitHub desktop. Você pode baixar este ponto de desktop github.com. E, no final, teremos todo o seu trabalho pronto para hospedar no GitHub Pages. Agora, quando você tiver baixado GitHub Desktop vai parecer algo semelhante a isso. Agora, não precisaremos empurrar nenhum trabalho até que você termine seu projeto seja totalmente testado e você esteja pronto para hospedá-lo. Então eu vou mostrar-lhe este processo no final da lição do projeto. Mas quando você tiver GitHub área de trabalho, apenas certifique-se de que você está conectado ao GitHub. E você pode fazer isso indo para o menu principal, clicando nas preferências. Eu posso ver que eu estou conectado no GitHub bem aqui. Como eu disse, não se preocupe em empurrar qualquer trabalho até o fim. 11. Projeto do curso - Parte 1 em HTML: Vamos dar uma olhada em um mini-projeto, certo? Então eu vou construir um site de página única sobre minha atuação aqui, eu, Marlon Brando. Agora, seria legal se você pudesse me acompanhar. Então vá em frente e abra seu editor de código. Agora, por que você não fez uma página sobre seu herói pessoal, seja um ator ou uma atriz, ou um músico, ou um membro da família incrível, ou até mesmo um animal de estimação? O importante aqui é não gastar muito tempo se preocupando com o conteúdo em si, porque o foco neste mini-projeto é tornando componentes acessíveis. Então, por favor, me acompanhe. Pai perfeito são pontos. Talvez olhar para o uso de algumas tags HTML acessíveis não são mostradas em lições anteriores. E também você não tem que copiar a ordem exata dos meus componentes pode ser trocado o seu em torno de um pouco. Então tente experimentar se puder, mas se não nos sentirmos confortáveis, você pode, é claro, seguir com o que estou fazendo. E vou explicar os recursos acessíveis como nossa codificação. Espero que esteja claro. Então vamos começar. Bem, eu vou estar mostrando a vocês nesta lição é o maquete HTML. Então, tudo que você precisará no momento é um arquivo index.html. Então eu vou usar extensão chamada emmet, que me permite usar trechos de código como este, gráficos de tabulação de ponto de exclamação. E fez um modelo HTML, certo? E se você não tem Emmett, você pode procurar em extensões e procurá-lo. No final, você deve encontrar Emmett na lista de extensões que eu acredito que ele vem empacotado com código VS fora da caixa. Ok. Pare de criar recursos acessíveis. Então primeiro eu vou ajustar o título, o que pode causar a página de informações de Marlon Brando. Primeiro dentro do corpo, vou fazer uma cabeça. E dentro do cabeçalho eu vou fazer um rap. E quando começamos a olhar para os estilos, eu vou ajustar a rampa para ser uma largura máxima. Então todo o nosso conteúdo está bem no centro. Dentro do cabeçalho, eu quero incluir uma tag de imagem. Vou dar-lhe uma classe de logotipo cabeçalho. Agora vou usar este logo aqui. Agora, eu mesmo criei isso dentro de um pacote gráfico. Então, se você não pode fazer o mesmo, brilhante. Se você não tem acesso a algo assim, você não pode simplesmente usar qualquer logotipo que você encontrar na Internet por enquanto. Mas mesmo que você não queira usar uma imagem para o seu logotipo, você não pode simplesmente usar um cabeçalho como um H1 no topo da sua cabeça, uma linha que pode representar o título da sua página. Mas faça o que fizer, certifique-se de que está acessível. Senhor. Vou usar este logotipo, que está aqui. E nossa primeira parte importante da acessibilidade é adicionar uma tag antiga, desculpe, porque é. Um logotipo com texto é importante escrever as palavras estão dentro da imagem. Desculpe, é literalmente Marlon Brando. Agora vamos dar uma olhada na construção de uma lista de navegação. Desculpe, vou usar algumas etiquetas semânticas S ou não usar devs, tentei usar o que está disponível para você, senhor nav. E depois uma lista desordenada. Dentro haverá três itens de lista que contêm âncoras. Agora isso não será um navegador funcional. Então estes não eram realmente link em nenhum lugar. Mas digamos que pode haver uma página, digamos talvez galeria. E digamos uma página de blog. Ok, como nosso cabeçalho. Agora vejamos o corpo principal do trabalho. Assim, a tag principal é usada para conter todos os elementos visíveis dentro do corpo principal da sua página. Desculpe, não incluindo o cabeçalho, não incluindo o rodapé, mas o conteúdo entre eles. Então, dentro do principal, eu vou fazer uso da tag de seção. Vou dar uma aula de introdução, pois esta será a nossa introdução. Certo, e então usaremos a aula de rap para garantia de div. Você usa outra classe legal chamada coluna rap. E vou mandar para o meu trabalho. Então eu vou criar outra classe chamada centro de rap. Então, essas classes se tornarão claras na próxima lição quando olharmos para o CSS, os estilos reais em si. E, em seguida, esta seção terá seu próprio cabeçalho. E dentro do cabeçalho será um H1. Agora este título é importante. Este será o título muito rápido e principal da página. E eu só devo ser um H1 por página e por seção. Então eu vou dizer bem-vindo à página de informações da marca. K fora do cabeçalho. Menos incluem uma tag de imagem com uma imagem inter classe. Vou usar este retrato do próprio homem. E então vamos dar uma olhada rápida nesta foto para que saibamos o que incluir para a tag ol era foto de arte negra dele em seus dias mais jovens. Então a tag alt deve ser algo ao longo das linhas de um retrato de um jovem Marlon Brando. E, na verdade, isso é colocar um retrato preto e branco de um jovem Marlon Brando. Ok, isso é legal. Deixe-me fechar esta paleta lateral de íons para que haja mais espaço. Ok, então, e então vamos ter um pequeno parágrafo com algum texto introdutório. Então eu vou adicionar uma classe de inter texto. E vamos escrever algo sobre Marlon Brando. Mono, marca é considerado um dos melhores atores de todos. Tempo, ele ganhou dois Óscares. E sua estimada Coréia para a orla. E em que ano ele ganhou isso? Deixe-me tentar lembrar das coisas. 1954. E você deve ter 4 e 4 anos, O Poderoso Chefão. Ok? Então, se você está acompanhando comigo e você criou sua própria página, talvez pense em algum bom inter-texto sobre seu pessoal aqui e escreva lá. Só não perca muito tempo se preocupando muito com o conteúdo. Apenas certifique-se de que ele está acessível usando as tags HTML corretas como estamos fazendo aqui. Ok, então próxima seção. Vamos dar uma aula de descobrir Mu. Agora isso deve ter um cabeçalho. Agora já usamos um H1, então não deve haver um segundo na página, então deve ser H2. Descubra mais. Vamos ter algum texto para ler mais sobre Marlin Breuer e em sua página IMDB, por favor clique no link abaixo. E vou adicionar um link também. Então este ANCA, eu vou dar-lhe uma classe de âncora de texto para que eu possa estilizá-lo. Então, o árbitro H, vou direcionar as pessoas para o perfil dele no IMDB. Deixe-me colocar esses atributos em sua própria linha para que seja mais fácil de ler. Agora tem um alvo. Eu quero uma certa pessoa Nin em uma nova janela ou novas guias ou alvo deve ser sublinhado em branco, o que vamos fazer isso. E, em seguida, o texto interno ou texto para a âncora. Leia mais. Agora, para tornar isso acessível. E então eu escrevo abre em uma nova janela. Então é muito claro que é isso que vai acontecer. E então para tornar isso ainda mais descritivo porque ler mais não é realmente suficiente, eu vou adicionar um rótulo aria aqui, que diz, leia mais sobre Marlon Brando em sua página IMDB. Porque, ou ele diz que abre em uma nova janela, eu não estava escrevendo na gravadora ária. Devem ser palavras descritivas suficientes para a ANC. Vamos mover isso para que você possa ver isso um pouco mais claro. Agora a próxima seção vai adicionar um formulário de contato. Então eu vou adicionar meu rap e eu vou adicionar coluna rap também. Assim, os itens dentro serão empilhados quando chegarmos ao estilo na próxima lição. Então o próximo cabeçalho tem que ser um H3. Já usamos H1 e H2. Agora você pode ter vários h dois em uma página, geralmente como dois ou três e não mais do que isso. Então isso pode ser um H2, mas não pode ser um H1. Nós já usamos sua economia e H4 porque usamos H1 e H2. Então nossas opções aqui, H2 ou H3, H3 porque isso é sequencial. E eu vou pular o antigo título de contato comigo. K, e depois em um parágrafo. Tudo bem, se você gostaria de conversar comigo diretamente por Marlon Brando, por favor preencha o formulário abaixo. Salve isso. E lá vamos nós. Nossa maquete inicial ainda não terminou o contato para mim. Só queria ver como é que isto se desenha. 12. Projeto do curso - Parte 2 em HTML: Ok, então agora vamos olhar para o nosso formulário dentro de uma etiqueta de formulário. Agora isso não será realmente uma forma de trabalho. Ele não vai estar clicando em qualquer lugar por nós gostaríamos de usar alguns campos de formulário como um exemplo de como melhor usá-los de uma forma acessível. Ok, então eu vou ter alguns campos obrigatórios. Isso impedirá que o usuário envie o formulário sem preencher os campos obrigatórios. Então, para deixar isso claro para todos dentro de uma tag de parágrafo, vou escrever todos os campos marcados com asterix são obrigatórios, modo que é claro para todos. Ok? E eu vou agrupar os campos em um grupo de forma div refrigerado como este. Agora vamos colocar uma entrada, uma entrada de texto. E o ID deve ser o nome, e vamos dar-lhe um lugar detentor do nome Enter. Vamos salvar isso. Você pode ver no fundo aqui digite o nome e ele diz isso bem ali. No entanto, apenas tendo um lugar titular, este hit Enter nome não é suficiente. Deve haver uma etiqueta. Então vamos incluir rótulo. O rótulo para é para este ID aqui, que é nome e rótulo do nome. E este vai ser um campo obrigatório. Então vamos colocar um asterix bem ali e podemos ver o asterix no fundo aqui. Agora são também para ajudar com leitores de tela certificando-se de que eles sabem que este é um campo obrigatório. Vou adicionar um atributo no campo da adquirida. E eu só gostaria de salientar que usando Emmet no código VS, ele nos dá algumas recomendações muito úteis IntelliSense, Ei, quando você começa a digitar, então necessário são necessários. Então isso ajuda com a inclusão de atributos de acessibilidade como este. Muito útil. Ok, Isso é bom, tem todos os rótulos acessíveis corretos, incluindo informações sobre isso sendo necessário. Então, estamos com bom aspecto. Certo, nosso próximo grupo de formulários pode soletrar corretamente. Vamos incluir uma entrada para um endereço de e-mail. Portanto, certificando-se de que você usa as tags HTML corretas disponíveis para você, eu estarei usando o tipo de entrada de e-mail. Digamos que o ID deve ser e-mail. Não vamos esquecer o rótulo do e-mail. E certifique-se de que ele diz e-mail e isso não será necessário. Então eu não vou incluir um asterix ou uma etiqueta necessária. Então, o que vem a seguir para o nosso formulário, podemos adicionar outra div. Formulário de grupo. E o que vamos usar aqui talvez algumas caixas de seleção. Então pense sobre o formulário que você vai incluir em seu projeto e qual campo você pode incluir. Não importa se você não copiar exatamente o que eu faço. Como eu disse, certifique-se de que o que está fazendo é totalmente acessível. E vamos testar isso no final desta lição e logo no final do projeto. Ok? Então, porque vai haver algumas caixas de seleção, mas todos eles vão fazer parte do mesmo grupo. Podemos agrupá-los usando um conjunto de campos. E isso vai mantê-los juntos. E um conjunto de campos deve ter uma legenda, que é basicamente o cabeçalho do conjunto de campos. E esta seção vai ser a natureza da investigação. Ok, ótimo. Então, há caixas de seleção dentro de uma div, cada um pode fazer caixa de seleção tipo de entrada. Portanto, certifique-se de que você está usando as tags HTML corretas. E então o nome vai ser inquérito. E então vamos dar uma olhada no rótulo que eu vou colocar por baixo. E esta gravadora é uma pergunta sobre seus filmes, digamos. Então dê à entrada uma identificação de seus filmes e o rótulo para as necessidades que correspondam a isso. Bem ali. Isso é copiar e colar isso na próxima caixa de seleção. Então a informação dela sobre a vida dele diz que mudou o RD e o 4. Agora repare como estamos mantendo o mesmo nome aqui de investigação. Isso porque as caixas de seleção são parte da mesma pergunta. Então vamos fazer mais uma por qualquer outra informação. Assim, o ID deve ser outro, rótulo para, deve ser outro, eo nome vai ficar é inquérito porque ele corresponde à mesma pergunta. E tudo isso é muito importante para os leitores de tela porque este é o tipo de informação que será lido para o usuário. Salve que as caixas de seleção K Saqqara estão funcionando perfeitamente bem. Ok, em seguida, vamos ter um, talvez um campo de texto como um campo de texto livre onde você pode escrever o que eles quiserem. Desde que eu fiz div form-group, Eu vou usar uma área de texto. E vamos dar-lhe uma fileira de, digamos, oito. Não se preocupe com as colunas. Dê a ele um ID da mensagem. E, em seguida, o rótulo deve ter cheio de mensagem. E vamos apenas escrever mensagem para o rótulo k. e então precisamos de alguma maneira de enviar o formulário como se fosse um telefone funcionando. Não é. Mas vamos construir o marcador e os estilos como se fosse uma forma de trabalho. Então, precisamos enviar botão, então vamos fazer botão Enviar. Ok, então tipo de submissão, coisas boas, e então vamos escrever enviar. Aqui. Tem um botão lá embaixo. Então é isso para a nossa seção principal e o cabeçalho acima. Então tudo o que precisamos agora é de um rodapé. A etiqueta do rodapé. Coloque-o dentro da minha aula de rap. E então eu vou usar uma declaração de direitos autorais aqui. Então, para usar o símbolo de direitos autorais, faça um ponto e vírgula comercial e copie e veja como o VS Code IntelliSense reconhece essas coisas boas. Certo, direitos autorais, meu nome e o ano. E o que seria melhor para tornar isso ainda mais semântico e mais acessível é usar a tag certa para esses direitos autorais. Então eu vou usar o pequeno. Ou pequeno é muito útil para coisas como, Bem, termos e condições ou declaração de direitos autorais. Nós pairamos sobre isso. A referência MDM acima diz que o elemento pequeno representa comentários laterais, como impressão pequena. E esta é uma impressão pequena. Não use a etiqueta pequena só para as minhas mensagens de texto. Essa é a maneira errada de usá-la. Use-o para, bem, para algo como direitos autorais, então certifique-se que é semântico. Ok, e esse é praticamente o laboratório HTML que vou usar. Então, como eu disse, você pode copiar exatamente o que eu estou fazendo, mas você vai ganhar pontos de bônus por mover seus concorrentes ao redor. Então talvez não os tenha na mesma ordem que estou fazendo ou use componentes diferentes completamente. Talvez pensando em campos de formulário diferentes que você possa usar. Isso só garante que seja acessível. O que podemos fazer é talvez testar isso dentro contratações de luz para que não haja nenhum estilo ainda e certamente não terminamos com o trabalho ainda. Mas à medida que a maquete é feita, vamos clicar em colmeias leves e ver qual pontuação ela nos dá. Então a acessibilidade é verificar o, gerar o relatório e ver que pontuação obtemos. Acessibilidade 100. Então isso é muito, muito bom. Se descermos, não há nada para trabalhar aqui. Dá-nos razões para o porquê de ter passado. E os botões têm um nome acessível. Isso é bom. Nós incluímos o elemento título. A página contém um título. Nossas identidades são únicas. Elementos de formulário têm rótulos. Ok, isso é bom. Talvez quando começarmos a trabalhar com os estilos, isso possa lançar algumas sugestões para nós, mas veremos quando chegarmos a essa seção, que está chegando a seguir. 13. Projeto do curso - CSS Parte 1: Agora sua maquete está no lugar. Vamos pensar sobre o estilo da página. E quando você parar sua página. Talvez feito copiar exatamente os estilos e cores que eu vou estar compartilhando você talvez pensar em algo seu próprio. Mas como vou continuar dizendo, pense na acessibilidade. São as cores que você vai escolher, vai ser visto por todos. O contraste é bom? O texto legível ou as animações muito distraindo? Estas são apenas algumas das coisas que você precisa pensar nesta lição. A primeira coisa que vou fazer é adicionar alguns estilos de fonte personalizados. Então, eu só vou para o Google Fonts. Então, talvez escolha a partir da lista em fontes do Google e escolha algo, um estilo de fonte que você pegou como o alotta. Então você pode ver que isso é bastante legível. Isso é muito claro de ler. Então, isso vai ser bom para mim. Mas que tal se eu te mostrar um exemplo de talvez algo que não seja tão fácil de ler? Então essas fontes de balé basta clicar sobre isso. Vamos fazer isso maior. Eu não sei quanto a você, mas isso é difícil para mim de ler e eu tenho uma visão muito boa. Pense em alguém com visão baixa lendo isso, se esta é a fonte família Youth trapo de visão, vai ser muito difícil para essa pessoa ler o conteúdo em sua página. Os cenários talvez únicos onde isso é aplicável. Mas se você está tentando obter informações em sua página web, fonte, famílias como esta não serão adequadas para todos. Então eu vou ficar com a minha escolha de um monte. E quando você encontrar a fonte que você gostaria de usar, podemos selecionar o estilo e, em seguida, ele lhe dará um link que você pode colocar no cabeçalho da sua página. Agora, eu já tenho este link pronto do Google Fonts, e nós podemos simplesmente colar isso acima do nosso título em nossa página index.html para que a fonte esteja pronta para usar. Então, os estilos começam a seguir. E ele é um asterix para selecionar tudo e ele está com o tamanho da caixa. Então, todas as nossas dimensões estão no lugar e funcionando como esperado. Agora, vamos adicionar a fonte personalizada. Então, no corpo, eu vou adicionar uma família de fontes aéreas na verdade. Então o que vou fazer é perder a diversão. A argumenta de fontes do Google eu vou usar apenas para a cabeça é o texto principal vai ser Arial. O segundo seria Helvetica e depois sans serif. Certo, e então mais alguns estilos de reinicialização no corpo, na UL e nos Aliados. Basta remover toda a margem e preenchimento e margem 0, preenchimento, 0 cabeçalhos. Estou usando um H1, H2, H3, e em nossos tornozelos também. Eu quero usar o meu monte de fonte, atualiza página e os estilos em trabalhar porque, claro, não se esqueça de vincular sua folha de estilo. Então, acima do título. Lá vamos nós. Links para style.css. E sua folha de estilos precisa estar na mesma pasta que seu HTML. Apenas guarde isso. E então podemos ver nossa fonte mudando lá. Então fiz uma aula de rap para todos os nossos componentes. Então vamos flexibilizá-los, exibir flex. E então eu gostaria de alinhar o centro de itens. Vamos justificar o conteúdo, o espaço entre. Vamos ter certeza que eles estão no centro. Então, a margem automática é dar ao representante, largura máxima de, digamos, um, dispara e pixels. Ignore o preenchimento rápido de 0, superior e inferior, 25 esquerda e direita. E vamos certificar-nos de que a largura é de 100%. Certo, veja como está o nosso embrulho. Ok. Parece bom até agora, mas há mais que precisamos acrescentar. Senhor, também incluí uma classe de coluna em alguns componentes. Não, eu preciso fazer é fazer uma direção flexível da coluna para que eles se sentem um sobre o outro. E então alinharemos os itens a serem no início. Então, ponto de traço flexível , ótimo, então você pode ver mudando lá. E então eu também fiz uma classe de centro de embrulho. E eu vou alinhar o centro de itens, o rigor. Então, para uma classe de cabeçalho, que eu deveria ter incluído no cabeçalho principal, que eu não fiz. Então adicione aqui. Classe de cabeçalho. Então este é o nosso cabeçalho que contém o nav e o logotipo na parte superior. Vamos exibir flex. Os itens. Deve alinhar os itens a serem centrais. Justificar o conteúdo para ser espaço entre. E vamos dar algum preenchimento de 10 pixels, superior e inferior, 25 pixels, esquerda e direita. K se aproximando. Ok, como você pode ver, o logotipo do cabeçalho é enorme. Assim logotipo do cabeçalho do espeto de altura pode ser automático ou alterar, e largura fará com que seja um 100 pixels. Isso é mais legível, ok, Água por este navegador. Então vamos apontar o navegador e então vamos apontar a UL, que é o filho direto da navegação. E então vamos atacar os aliados, que são todos os filhos da URL. Então, à medida que removemos os marcadores, list-style-type, none, e todos dar-lhes toda a margem esquerda de 20 pixels. Na verdade, queremos que eles se preocupem. Então o que eu vou fazer é dizer o navegador e depois o UL. Claro, o display flex. Então, em uma fileira. Assim, coisas boas e, em seguida, justificar o espaço de conteúdo entre. Agora parece mais um cabeçalho normal. Agora vamos olhar para as próprias âncoras. Então vamos remover o azul, talvez uma cor diferente. Então nav UL, LI e em seguida, âncoras vai dar uma cor de preto. E o que vamos fazer é remover a decoração do texto sublinhado, nenhuma. Agora, que tal os pairadores para estes itens de navegação? Agora eu vou apenas copiar esta linha aqui e, em seguida, adicionar pairar aqui. Então o que poderíamos fazer em pairar é talvez adicionar uma cor dourada agradável. Afb 61, ou seja. Se passarmos por cima disso. Agora, parece muito bom para mim sabia, mas eu diria que qualquer um que tem daltonismo pode não ser capaz de ver este ouro no fundo branco e também qualquer mudança de cor. Bem, eles seriam capazes de ver de qualquer maneira. Então realmente o que eu preciso fazer é também mudar algo fisicamente nessas âncoras enquanto você paira. Então eu vou adicionar decoração de texto de subjacente. Então, o sublinhado. Agora ainda não tenho certeza sobre o contraste. Talvez quando lidarmos com o teste do farol no final, vejamos se essa cor fica sinalizada. E se isso acontecer, então podemos mudá-lo. Ele vai adicionar alguns estilos básicos para todas as seções. Apenas algum preenchimento, preenchimento superior e inferior de 50 pixels. Então eles estão espalhados EIR e um pouco mais legível. O espaço em branco em sua página da Web tornará as coisas mais legíveis. Nosso H1, então você faz este tamanho de fonte de três rems. Certo, muito maior. Tão bom. Talvez eu vá embora como está por agora. Aqui é o H3 Darren. Vamos fazer um tamanho de fonte h3 maior de dois rems. Ok, observe como o H3 agora é maior que o H2 e isso é bom para fazer. Se você está procurando cabeça de tamanho diferente é. Como já mencionei no passado, não use H1 e H2 e assim por diante, apenas para alterar o tamanho do cabeçalho, não é para isso que eles são usados. Eles indicam a importância de cada seção. Então só porque isso é maior do que este cabeçalho aqui em cima, não significa que eles devem ser H2 e H3. Não é assim que você usa semanticamente esses cabeçalhos. Assim como o nível de importância. Então vamos manter o H3 sendo um pouco maior do que o H2 tem. Absolutamente bom para fazer. Agora vamos pensar sobre nossa seção de introdução. Vou certificar-me de que este é o display flex. E vamos alinhar os argumentos para ser o centro k. realmente vamos torná-los em colunas de direção flexível será coluna. No entanto, está tudo bem. Vai fazer do texto uma cor dourada. Faça o valor hexadecimal de c 6, um 105 ser. Ok, você pode ver que mudou aqui. Agora. Rsa, o contraste é uma bela piscina lá. Então vou adicionar uma cor de fundo de preto. Isso é muito mais legível, isso é bom. K A imagem é bastante grande em sua imagem. Vamos dar uma largura para talvez 200 pixels. Parece bom. Vamos apenas certificar-nos que a altura é água, por isso é responsivo. Agora o texto de introdução, vamos verificar se o alinhamento de texto está no centro. Isso parece bom? Vamos fazer uma margem superior de 25 pixels e uma largura máxima de 500 pixels. Espaçado bem. Só notei que eu corri, ele ganhou dois de Deus que é um prêmio para qualquer um. Então vamos mudar rapidamente os erros de digitação. E também soletrar estimado incorretamente. Ele é filisteu. Sim, vamos com isso. Esperemos que esteja correto. Certo, de volta aos estilos. Vamos para a nossa seção de descobrir mais. Belas artes, mais cor de fundo. Eu vou dar-lhe este registro de cor dourada usando amarelo parece legal. Por agora. Vou deixar a cor como está. Vou fazer um teste de farol para ver se isso é aceitável, se o contraste é bom, quando pode voltar a isso. Mas eu preciso adicionar um estado flutuante. Isso é importante. Todos precisam saber que isso é clicável. Então o texto que eu sou co-apresentador. Isso é apenas remover a decoração de texto para decoração de texto. Nenhum. Ótima. Ok. 14. Projeto do curso - CSS Parte 2: Ok, vamos dar uma olhada no nosso formulário agora. Então a forma, eu vou nos dar uma borda, sólido um pixel e, em seguida, Hex de j, k. Vamos torná-lo ligeiramente arredondado. Então, raio de borda de cinco pixels, largura mínima. Vamos dar 500 pixels a isso. E vamos nos certificar de que há algum preenchimento dentro de 25 pixels. Está bem, a moldar-se bem. Está bem? E então eu usei baixos de divs dentro para grupo de traço de forma, a classe de grupo tracejado de forma. E para todos esses itens, vou exibir flex. E eu vou me certificar de que a direção flexível como colunas para que eles empilham em cima do outro. Como isso. Vamos ter certeza de que havia um fundo de preenchimento ou 25 pixels, para que eles sejam espalhados. Eu estava parecendo legível. E, em seguida, para todos os nossos rótulos, certifique-se de que há algum espaço entre eles. E os campos de formulário abaixo de alguma margem, inferior. Dez pixels. Sim, é espaço suficiente para ficar bem. Que tal os próprios campos? Então entrada e também a área de texto. Vou adicionar um pouco de preenchimento de 10 pixels, superior e inferior, 25 pixels esquerda e direita, ok, e espalhar. Na verdade, acho que é muito estofamento. 15 pixels. Sim, está bem, isso parece bom. Basta perceber que o e-mail está faltando suporte lugar ruído. Então eu vou adicionar isso aqui. Espaço reservado é igual a inserir e-mail. Muito melhor. Eu vou fazer o mesmo para a área de texto. Mensagem de espaço reservado aqui. Ok, ótimo. De volta aos estilos. Agora, este formulário enviar botão poderia parecer um pouco melhor. Assim como o botão filho direto formulário. Certo, como vamos estilizar essa cor de fundo? Vamos fazer aqui zeros, 0000, algum preto. Vamos dar uma borda, um pixel sólido. E então essa é a cor dourada usada que eu tenho usado. É que olhando k, precisamos mudar a cor, então novamente, usamos o mesmo ouro. Sim. Está bem. Karina fazer isso ligeiramente arredondado. Digamos que vamos fazer o raio da borda de cinco pixels. Vamos nos certificar de que o câncer é um ponteiro. Sabemos que é clicável assim. Coisas boas. Acolchoamento. Dez pixels, superior e inferior, 20 pixels à esquerda e à direita. E isso parece muito bom. Agora eu só quero verificar é como o contorno de foco está procurando por este formulário. Então, sim, para nome como bom e-mail, caixas de seleção, mensagem e, em seguida, ele vai para o botão enviar. Mas porque eu sou padrão é preto, não posso realmente ver o bastão da companhia aérea. Bem, desculpe, vou adicionar um pouco de espaço entre o botão e o contorno. Então você pode fazer isso usando linha de olho, traço, deslocamento. Adicione cinco pixels aqui. Tab através novamente. Ok, isso parece bom. Você pode ver o contorno claramente agora. Agora, que tal um estado de pairar para o botão? Por isso, porque sou preguiçoso, vou copiar isso. E então eu vou adicionar o cursor do cólon. Ok, o que eu gostaria de mudar? Mudou a cor de fundo para ouro. Mudamos a cor do texto para ser preto. Então estou basicamente invertendo as cores. Como é que isto parece no momento? Sim, bom, ou vai mudar de ordem. Bem, na verdade, para ser o inverso, então borda sólida um pixel, preto. Bom. Porque eu sou chique, eu vou aumentar o tamanho para transformar escala a ser usado 0,25 K. E então eu vou ter certeza de que a animação é agradável e suave. Então propriedade de transição, estamos mudando a cor de fundo. Vamos mudar a fronteira. Eu li mudar a transformação. Agora tenho uma duração de transição. Vamos fazer isso em 0,2 segundos. E, em seguida, ver a função de temporização de transição para ser 0s em braços. Está bem, bonito e suave. Como já mencionei em uma lição anterior, animações como esta podem distrair pessoas com problemas neurológicos ou cognitivos. Então, o que você quer ter certeza é, se você pagar não contém animações que mudam bastante dramaticamente. Diga este botão. Você precisa dar ao usuário a opção para poder desativá-los ou pelo menos reduzir o movimento na página. Agora, como você faz isso? O que você precisa fazer é eu vou colocar isso no topo da página porque isso vai se aplicar a todas as animações, é você adicionar um código de consulta de mídia na mídia. Em seguida, entre parênteses. Para fors, traço reduzido, traço, movimento, redução de cólon. Está bem. E tudo aqui dentro. Conterá estilos que serão aplicados a alguém que definiu isso em sua máquina. Então, o que podemos fazer? Vou selecionar tudo. Vou selecionar o pseudo elemento com antes e o mesmo para depois. Assim como eu estou selecionando lá. Bem, é praticamente tudo o que existe na página. Isto é o que este asterix faz. E então isso significa que eu posso definir a duração da animação para basicamente ser 0.0012. Então eu vou definir isso como importante, para que ele substitua tudo. Assim, as animações serão instantâneas. Farei o mesmo durante a transição. Duração da transição 0,0012. Isto também vai ser importante. Agora, estes irão alterar o ou remover o movimento entre os dois estados de animação. Então, assista alto. Então isso ainda parece o mesmo. E isso é porque eu não alterei minhas configurações de movimento reduzido na minha máquina. Então alguém com problemas cognitivos pode ir para suas preferências assim. Lá vamos nós para a acessibilidade. E vamos ao Display. E eles clicavam, usavam movimento. E isso acionará qualquer informação que esteja dentro desta consulta de mídia. Então, o que isso significa para o nosso botão? Você pode ver que não há transição, é a animação acontece imediatamente. Mas esse aumento em grande escala ainda pode estar distraindo. Então eu também vou fazer especificar que a transição de dimensionamento. Então, o botão Form passa o mouse transformar. Vou redefinir a escala para ser apenas uma. Vou certificar-me de que isto é importante. Agora vamos testar isso. Portanto, possuir muda a cor para que não haja mais animações de distração. Então é assim que você testar o seu usaria animações de movimento. E eu vou apenas remover isso. Diz para verificar ainda que a animação está de volta. Muito bem, há mais a fazer. Bem, é qualquer nosso rodapé lá embaixo, se você pode vê-lo. Então, rodapé. Vamos adicionar uma cor de fundo de preto. 000, 000. Nós adicionamos uma cor de talvez cinza para o texto. Exibição. Flexione os itens. Vamos alinhar nossos itens para ser. Centro. Justifique que o conteúdo seja espaço entre o preenchimento, 10 pixels na parte superior e inferior e 25 pixels à esquerda e à direita. Certo, e isso é copyright. Então, como uma página praticamente feita, deixe-me apenas verificar. Eu não perdi nenhuma aula. Da nossa maquete. Eu posso ver que eu tenho um caso nestes tudo dentro finito mais, ter certeza que está em nosso envoltório. E também tem coluna RAP adicionado a isso. Vamos dar uma olhada em nossos estilos agora. Ok, isso parece bom. Espero que você tenha seguido junto comigo e talvez mudar as cores, pode ser alterado o layout para coincidir com a sua página herói. Mas ainda não terminamos. Posso ver algumas coisas aqui que falhariam em qualquer verificação de acessibilidade. Então, como é uma barreira? Nós apenas verificamos novamente e os cabelos leves do Farol dentro do Google Chrome. Está bem. A acessibilidade é marcada como Gerar relatório. Veja o que nos dá. Ok, acessibilidade 1907 estava no verde, então isso é bom e é isso que você deveria estar mirando. Mas vamos ver se nos dá alguma recomendação. Ok, acessibilidade, fundo e para cores de terra não tinham uma proporção de cores suficiente. Falhando elementos que são para ver se eu pairar sobre este aqui, está apontando para ler mais bem aqui. Ok, tudo bem. Então vamos consertar isso. Então isso está dentro do nosso texto ANCA. Então eu estou meio que me certificar que o texto Âncora é claro. Vamos fazer a cor preta. Então, 000, 000. Certo, não é preto. E então outro elemento falhado é pequeno, que é o direito autoral. E como você pode ver, eu espero que você possa ver que bem na parte inferior, que cinza não é muito legível no preto é a. Então vamos atualizar o rodapé. Vamos ter certeza que muda cinza para ser, tal esta cor dourada que eu tenho usado? E isso é mais legível. Está bem. E as auditorias passadas são verdes, então esses recursos serão acessíveis que usamos e estão funcionando bem. Então, por favor, execute o Lighthouse em sua página e se isso sinalizar quaisquer problemas ou avisos, por favor, trabalhe através deles. E então essa é a sua página feita com recursos totalmente funcionais e acessíveis. Bem feito. 15. Projeto do curso - Compartilhamento é cuidadoso: Agora, para compartilhar seu trabalho no Skillshare. Para que eu e outros alunos possamos ver o seu grande trabalho. Basta abrir o GitHub Desktop, o que eu fiz aqui. Apenas certifique-se de que você está conectado ou acessando Preferências e eu estou conectado. E, em seguida, o menu suspenso aqui, vamos criar um novo repositório. Ok? E eu só vou navegar para a pasta. Vamos garantir que você faça o mesmo com a pasta raiz do seu trabalho e dê seu nome de realimentação e chame a acessibilidade Skillshare. Isso é bom. E, em seguida, clique em Criar repositório. K deve estar aberto. E certifique-se de ver alguns arquivos aqui à esquerda, o que eu não vejo. Isso é provavelmente porque ele criou uma pasta de repositório para mim dentro do meu diretório. Então eu vou fazer é apenas copiar meus arquivos para aquela pasta. Assim como. E então podemos ver nossas mudanças aqui. k está pronto para enviar para o GitHub? Então, no resumo falhou, Eu só vou escrever uma nota. Recurso, página única, acessibilidade, site, algo ao longo dessas linhas, e, em seguida, comprometer-se com o principal, que é o nome do ramo. E, em seguida, na mão direita, no topo, vou publicar no repositório. Então, apenas para confirmar esse valor até GitHub. Depois de alguns segundos, uma vez que todo o seu trabalho for enviado, podemos verificar o repositório no GitHub, que faremos em nosso e ir para github.com, certifique-se de que você está conectado. E à esquerda deve haver uma lista de seus repositórios. Eu só procurei por Skillshare para reduzir o reparo. Então, basta clicar sobre isso e ele vai abrir. Ok, e para garantir que isso seja tornado público, que você possa enviá-lo para o GitHub Pages, basta acessar Configurações aqui. E então todo o caminho até o fundo. Você precisa alterar a visibilidade do repositório de privado para público. E em páginas do GitHub você pode ver que diz atualizar ou tornar este repositório público para habilitar páginas. Então mude a visibilidade aqui. No momento, está definido como privado. Clique em tornar público. E então eu vou dizer, por favor digite o nome do seu repo para confirmar. Então, vou copiar isto. Então isso é por razões de segurança. Lá vamos nós. Eu entendo a visibilidade do repositório de mudança como público estreito. E, em seguida, no GitHub Pages, você verá que agora existem algumas opções para você escolher. Então, certifique-se de escolher o ramo principal, que é onde você acabou de comprometer seu trabalho. Vamos clicar nisso. Queremos o diretório raiz, vou clicar em Salvar. E então uma vez que isso carrega, isso deve nos dar um URL para o nosso site, que será pasta pública. Veja aqui é assim quando o seu URL está pronto, Eu encorajo você a compartilhá-lo, pois será um link para a sua página como publicado, site. Eu talvez por um, pelos recursos de acessibilidade que você adicionou. Adicionando tudo isso à seção do seu projeto da classe. Porque isso me permitirá oferecer-lhe qualquer feedback e sugestões. Eu também encorajo você a interagir com outros alunos para que você possa oferecer apoio uns aos outros. Claro, se você tiver alguma dúvida ou precisar de mais dicas, então por favor me avise. Fico feliz em ajudar. 16. Resumo: Bem feito. Você fez um trabalho incrível ao percorrer todo este curso e criar seu próprio site de página única, tudo incluído, com recursos de acessibilidade. Você aprendeu muito nessas lições tudo sobre os fundamentos da acessibilidade na Web. Os diferentes níveis encontrados nas diretrizes de acessibilidade, as várias deficiências que você deve considerar quando você trabalha em seu próximo projeto web. E como implementar os recursos corretos de acessibilidade HTML e CSS para criar sites que são todos inclusivos e utilizáveis para todos. Agora eu fui um desenvolvedor e tenho conhecimento de acessibilidade na web, uma habilidade tão importante e necessária para ter, não importa em que nível você esteja, seja ele um júnior, médio ou sênior, é absolutamente fundamental que você faz acessibilidade parte do seu processo de desenvolvimento web. Não apenas em um nível legal, mas também na imprensa. Qualquer discriminação e os produtos que você faz, eu o encorajo a tomar seu novo conhecimento encontrado. E se você trabalha em uma grande equipe de desenvolvimento ou equipe criativa, transmita seu conhecimento de acessibilidade na fase de planejamento próximo projeto e explique como e por que é importante incluir esses recursos. Finalmente, eu só queria dizer um enorme obrigado por não só se inscrever nas escolas, mas também por completá-lo. Sem o seu apoio, professores como eu não seriam capazes de criar conteúdo como este. Então, muito obrigado. Se ele gostou deste curso e eu realmente espero que você tenha feito, significaria muito para mim se você pudesse tirar o tempo para deixar um comentário, eu li cada pedaço de feedback que eu recebo e tomar em consideração quaisquer comentários que você pode deixar. Então eu posso continuar a melhorar nossas lições e continuar fazendo os objetivos é que você acha útil. Então, com isso sendo dito, muito obrigado novamente, você é incrível. Agora vá em frente. Incorrido.