Desenvolvendo a acessibilidade (iniciantes): crie uma página de web acessível!

1. Introdução: Oi, todo mundo. Meu nome é Brendan Kelly. Bem-vindo ao desenvolvimento para acessibilidade, construção de página web acessível Um pouco sobre mim. Eu sou um desenvolvedor Web front-end desde 2009 especializado em HTML. CSS, JavaScript e acessibilidade e vários frontais e frameworks como angulares e bibliotecas como Jake Weary, eu tenho, ah, volta primeiro grau em desenvolvimento Web e um mestrado em educação de adultos. Então hoje eu vou ensinar a vocês os conceitos básicos de construção de uma página da Web acessível foram para cobrir um número de áreas diferentes, como as diretrizes que precisamos seguir uma seção 50 esperar nas diretrizes de acessibilidade de conteúdo da Web que são escrito e mantido pelo assento de três W e, em seguida, também falar sobre a importância de escrever marcação HTML semântica e olhar para Aria, que significa aplicações de Internet ricas bem-sucedidas. E, em seguida, olhar para os vários atributos que estão disponíveis lá e como usá-los. Em seguida, analisaremos o contraste de cores e como avaliar corretamente sua paleta de cores para garantir que você esteja obtendo as taxas de conformidade adequadas para sua página da Web. E então vamos olhar para uma série de diferentes elementos e atributos que você pode adicionar à sua paginação utilizada imediatamente para obter uma acessibilidade melhorada imediatamente . E, finalmente, o que vamos fazer é olhar para como avaliar corretamente sua página da Web usando um teclado e um leitor de tela, e também perceber algumas ferramentas gratuitas como onda e atos, e ver como esses serão capazes de ajudá-lo a obter a conformidade adequada. E então, no final deste curso, você levará tudo o que aprendeu e construirá sua primeira página da Web de sucesso que fornece informações sobre seu hobby favorito. Tudo bem, vamos. 2. O que é acessibilidade na web e que são as orientações.: começou falando sobre o que é a acessibilidade da Web e quais são as ilhas caras que temos que seguir. Assim, a Wikipédia tem uma grande definição do que é a acessibilidade da Web, e eles afirmam que a acessibilidade da Web é uma prática inclusiva de garantir que não haja barreiras que impeçam a interação com ou o acesso a sites na World Wide Web pessoas com deficiência. Quando sites de desenvolvimento de design corretamente editado. Geralmente, todos os usuários têm acesso igual a informações e funcionalidades, portanto, a acessibilidade é essencial para desenvolvedores e organizações que desejam criar sites e ferramentas da Web de alta qualidade e não excluir pessoas de seus produtos e serviços. acessibilidade da Web e os copos são todas as deficiências, que incluem deficiência auditiva visual, física e cognitiva. Então, para pentear em termos que você ouve ao falar sobre acessibilidade são tecnologias assistivas e estratégias adaptativas, tecnologias assistidas, hardware e software que as pessoas com deficiência usaram para melhorar a interação com o Web. Eles incluem leitores de tela que lêem em voz alta páginas da Web para pessoas que não conseguem ler a lupa de tela de texto para pessoas com alguns tipos de software de reconhecimento de voz e baixa visão e opções de seleção para pessoas que não podem usar um teclado ou mouse e estratégias adaptativas são as técnicas que as pessoas com deficiência usaram para melhorar a interação com a Web, como aumentar o tamanho do texto, reduzir a velocidade da boca e ativar legendas. Agora, sob os dois padrões e diretrizes, que incluem a Seção cinco de distância nas diretrizes de acessibilidade de conteúdo da Web. Então 1998 Congresso alterou a Lei de Reabilitação de 1973 para exigir que agências federais para tornar a tecnologia de informação eletrônica acessível para pessoas com deficiência. Nos termos da secção 5, as agências devem dar aos trabalhadores deficientes e aos membros do público acesso a informações comparáveis às de outras pessoas. E alguns dos exemplos dessas diretrizes estão fornecendo alternativas de texto ou imagens e outros conteúdos não textuais, incluindo componentes da interface do usuário. Fornecendo legendas sincronizadas para multimídia de vídeo pré-gravado. E 1/3 seria fornecer uma ordem de leitura razoável e lógica ao usar um senso de tecnologia. E estamos falando um pouco mais sobre isso. Especificamente mais tarde, quando falamos sobre semântica e fluxo adequado ou através de uma página da Web movendo-se para diretrizes de acessibilidade de conteúdo da Web , W. C. A. G para abreviar So W. C. A. G é desenvolvido através do processo W três C em cooperação com indivíduos e organizações em todo o mundo com um ouro fornecendo um padrão único compartilhado para a acessibilidade da Web que atenda às necessidades dos indivíduos, organizações e governos internacionalmente. Então W. C E. G cobre os mesmos padrões da Seção 5 aguardam, mas muito mais. As diretrizes e critérios de sucesso o W. C A. G organizou em torno dos quatro princípios seguintes, que estabelecem as bases necessárias para qualquer pessoa acessar e usar o conteúdo da Web. Qualquer pessoa que queira usar a Web deve ter conteúdo que seja perceptível, operável, compreensível e robusto. Portanto, os componentes de informação e interface de usuário devem ser apresentáveis aos usuários de maneiras que eles possam perceber. Os componentes da interface do usuário e a navegação devem ser informações operáveis, e a operação da interface do usuário deve ser compreensível. E o conteúdo deve ser robusto o suficiente para que possa ser interpretado de forma confiável por uma grande variedade de agentes de usuários, incluindo tecnologias assistivas. Sob cada um dos princípios são diretrizes que os critérios de sucesso que ajudaram a abordar esses princípios para as pessoas com deficiência e cada um dos critérios de sucesso são identificados com um dos três níveis de prioridade de conformidade. Há o nível de ar um nível duplo A e o nível Triplo A nível A estabelecem um nível básico de conformidade e abrange um conjunto básico de questões básicas de acessibilidade, como imagens de texto alternativas e legendas e vídeos. Nível A é o nível mínimo de conformidade. Double A inclui critérios de sucesso adicionais, como fornecer um indicador de foco visível para usuários do teclado e garantir um nível de contraste de cor suficiente . Double A é um foco da maioria das organizações porque fornece um alvo razoável para sites e aplicativos da Web e, em seguida, o nível Triplo A é o nível mais alto de desempenho em conformidade com o W C E G 2.1. Ele nivelado Triple A significaria que cada critério de sucesso único teria que ser cumprido tem realmente afirmado pelo W três C. Não é recomendado que nivelado Triple A conformidade ser necessário é uma política geral para sites inteiros, porque não é possível satisfazer todos os critérios de sucesso de nível triplo para algo certo que encerra padrões e diretrizes. Em seguida, será olhar para a semântica HTML 3. Semântica passar um longo caminho: neste segmento de vídeo, vamos falar especificamente sobre semântica HTML e ordem de página. Marcação semântica é HTML que fornece significado para uma página da Web em vez de apenas apresentação. Elementos como Cabeçalho principal, manteiga , valete, um botão e assim por diante têm significado específico e transmitem isso para o navegador do usuário e tecnologia assistiva. Ao usar marcação semântica, muito já fez por você nativamente para acessibilidade. Por exemplo, as tags são usadas para navegação e botões ou usadas para interação com o usuário. Quando uma página da Web construída com marcação semântica rica, torna muito mais fácil e eficiente para a tecnologia assistiva navegar através dele e transmitir as informações de volta para o usuário. Portanto, o uso de marcação avançada não vai apenas tornar sua página da Web nativamente mais acessível. Mas também vai melhorar o CEO S do seu site também. Outra coisa importante que você quer ter em mente ao desenvolver uma página da Web para acessibilidade é manter seus elementos em uma ordem de leitura adequada. Dois. Especial. Pense nisso como superior esquerdo para baixo direito Foco. A ordem é importante porque quando um usuário está navegando pela sua página, ele vai ter uma expectativa de onde esse leitor de tela ou anel de foco vai levá-los em seguida. Então, se você tivesse o nome do site no cabeçalho do seu site, focado e então você apertou a tecla tab e ele saltou para a página em outro lugar, isso seria confuso para o usuário e comportamento inesperado. Então, em seguida, eu quero mostrar alguns exemplos da minha marcação semântica que eu usei no meu projeto. Eu construí uma página da Web que exibe informações sobre você precisa de restauração do carro. Então primeiro eu vou mostrar a vocês como eu divido as seções principais da página da Web usando tags semânticas HTML . Então, se olharmos dentro do corpo, eu tenho meu cabeçalho principal, minha tag principal principal e minha tag de rodapé principal. E quando você se divide em cada um deles, então eu começo a dividir as coisas em seções menores, e eu realmente usei a tag de seção hnl para então anotar cada seção individual em cada área individual. Então, se eu abrir minha tag principal, isso ilustrará esse ponto um pouco melhor. Então você vê onde minha primeira seção dentro principal é meu gráfico intra, e então minha segunda seção é meus itens de link rápido. E na minha terceira seção está a minha área de holofotes. E, finalmente, meu quarto são meus artigos em destaque. E então se eu entrar no meu rodapé, eu tenho apenas uma seção que mantém meu texto no rodapé e, em seguida, meus ícones sociais. Então vamos quebrar isso um pouco mais fundo dentro da minha cabeça. Er, eu tenho minha única seção, mas lá dentro eu tenho o meu H um principal e na minha estrutura de navegação. E sempre que desenvolvi sites, gostaria de seguir a regra de ter um H um em uma página, que é sempre o nome do site no cabeçalho. E então, de lá, eu gosto de cascata para baixo através dos diferentes níveis de direção, Nível H dois, h três e assim por diante. E queremos ter certeza de que não pulamos o nível de direção, porque se o fizermos, ele será sinalizado e ferramentas de avaliação de acessibilidade. Então, em seguida, passando para a minha estrutura de navegação, eu, é claro, usei a etiqueta do valete do cheiro da idade para começar, e então eu uso uma lista inalterada. Gosto de usar listas inalteradas sempre que tenho um agrupamento de itens relacionados, e isso não é apenas para navegação. São quatro artigos diferentes ou, neste caso particular, é claro, uma lista de links e assim por diante. Então eu uso minhas próprias listas de palavras e em cada item de lista é um item de navegação, e eu tenho apenas uma estrutura de navegação simples. Eu não tenho nenhum drop downs ou algo assim. Não quero complicar muito isso para um projeto. Então nós temos apenas uma lista regular de links, nada muito complicado e passando para a tag principal primeira seção. Nós temos o gráfico intra e eu marquei isso usando a tag figura dentro da tag figura. Nós apenas temos a nossa imagem simples com, claro, todo o nosso texto. E então para a legenda, eu usei a etiqueta de legenda FIG com um H dois e uma tag de parágrafo lá dentro. E se você notar que eu usei meu H dois, mas eu uso uma tag span para quebrá-lo em várias linhas. Nunca é uma boa idéia usar várias tags de idade quando você está apenas tentando dividir um título em várias linhas. Basta usar uma tag span dentro lá, disse que, bloco de exibição e chutá-lo para a próxima linha. Dessa forma, tecnologia assistida vai ver isso como um único cabeçalho e não lê-lo é, também. Isso vai ser confuso para o usuário, em seguida, mover para baixo para os nossos itens de link rápido. Eu usei um H três para este título, e então eu usei lista inalterada novamente para cada item rapidamente. Agora, algumas pessoas podem pensar que usar apenas tags de artigo em linha reta para dividi-los seria muito bom, e eles estariam corretos. Eu gosto de usar na lista ordenada especificamente porque quando um leitor de tela lê através disso , você vai ser Oto simplesmente chave de um item para outro, o que , é claro, será o mesmo se você usar tags de artigo. Mas o lado positivo para a lista em ordem é que na verdade vai dizer um de quatro ou dois de quatro e assim por diante. E eu gosto muito disso. Eu acho que é melhor feedback para o usuário. Então, olhando dentro da minha própria lista de pedidos, eu estou usando uma tag A para essas orientações rapidamente porque eles são, de fato, links. Eles vão ser usados para navegação. Então eu uso esse é o meu rapper principal, e eu só tenho um ícone simples, lutou incrível com um título simples e uma legenda simples Passando para o meu holofote. Eu tenho apenas um artigo simples com um H três em uma tag de parágrafo e, em seguida, uma imagem de acento fora para o lado, saltando para as minhas principais histórias novamente, eu estou usando uma lista inalterada. Dentro de cada item da lista há uma tag de parágrafo e, em seguida, algumas tags span para criar o layout a partir de uma imagem e texto. E, finalmente, na minha seção Rodapé, eu tenho apenas uma única seção com uma tag de parágrafo para o meu para o meu texto que linhas à esquerda e , em seguida, em uma estrutura ist nordle para os meus ícones sociais que irá alinhar à direita, Então que envolve para cima semântica html. Portanto, basta ter em mente que existem muitas tags HTML semânticas lá fora, e você quer ter certeza de usar a tag adequada para cada elemento específico que você está desenvolvendo para garantir que você obtenha o maior significado de sua página da Web. Então, em seguida, vamos dar uma olhada mais de perto em links e imagens 4. Uma aparência de links e imagens: segmento de caminho. Nós vamos dar uma olhada em links e imagens, essas áreas problemáticas comuns do ar que eu vejo muito do meu trabalho, e eu acho que é uma boa idéia tomar algum tempo para olhar alguns bons exemplos de uso. O que eu fiz aqui foi pegar minha página da Web do projeto e criar algumas seções adicionais abaixo onde eu vou ilustrar alguns bons exemplos de imagem, alguns bons exemplos de link e, finalmente , alguns bons exemplos onde nós misturamos os dois onde temos imagens vinculadas. Olhando para o primeiro exemplo, temos apenas uma imagem simples com algum texto todo e o segundo exemplo. Temos uma imagem com vazio todo o texto com uma descrição abaixo, Vamos saltar sobre o código e ver o que parece. É tão aqui, você verá que estou usando uma lista inalterada novamente, e no primeiro item temos aquela única imagem com todo o texto descritivo. Agora queremos ter certeza de que usamos todos os textos descritivos porque sempre que um leitor de tela ou tecnologia assistiva lê essa imagem de volta para o usuário, queremos ter certeza de que eles usam ou entendem completamente o que é a imagem e descritivo todo Texas. Como vamos fazer isso, saltando para o nosso segundo exemplo. Aqui é onde uma imagem tem uma legenda visual, e neste caso particular, queremos deixar todos os atributos vazios porque isso causará uma redundância. Se você tomar nota, a legenda torna-se diretamente após a imagem e tecnologia assistiva irá a isso . Então vamos disparar a voz sobre e ver como essas imagens soam. O que eu vou fazer para navegar nessas imagens, é segurar v o Key e usar minhas teclas de seta esquerda e direita. Agora, quando eu digo v o Key, isso significa opção de controle. Se você ler a documentação sobre navegação com narração, vo sempre se referirá às teclas de controle e opção juntas. Então, no futuro, quando eu disser vo, você saberá quais teclas e falando sobre controle mais opção e voz que iria ler o texto muito rápido porque eu tenho minha taxa alta, mas você pode acessar o utilitário de narração em sua máquina para ajustá-lo ao seu gosto. Reboque de carro vintage. Antes, se você notou que o caminhão Chevy vintage ganhou melhor no show, legenda foi identificada corretamente por voz sobre como o texto descritivo da imagem. Os maiores problemas que vejo com imagens regularmente são que as imagens não têm um atributo antigo ou têm um atributo vazio quando um é necessário. Ou há uso de texto não descritivo para todos os atributos. Então, há duas outras coisas que eu quero mencionar um bom uso de imagem no 1º 1 vai se referir de volta à minha seção de holofotes acima das imagens de fundo, uma imagem decorativa, e não transmite qualquer conteúdo. Nesses casos, o atributo all deve ser deixado vazio. Mais importante ainda, porém, as imagens decorativas são melhor aplicadas via fundo CSS, modo que não estejam fisicamente no fluxo da página da Web. Se você deve ter uma imagem decorativa na estrutura HTML. O que eu gosto de fazer melhor é apenas adicionar uma função igual a apresentação e área Oculto é igual a verdadeiro, juntamente com o texto vazio todo. Dessa forma, nos certificamos de que ele está escondido da tecnologia assistiva e, em terceiro lugar, se referirá à seção intra gráfica acima. Embora não transmita muita informação, eu queria propositadamente que no fluxo da minha página Web e que fosse lido por tecnologia assistiva agora eu quero passar para links. Há uma série de coisas diferentes que eu quero falar sobre ligações algumas coisas que incluem se o link abre ou não em uma nova janela. Decoração adequada do link de texto descritivo e evitando URLs redundantes. Então, em meus bons exemplos de link, meu primeiro exemplo é apenas um link simples com texto descritivo que não abre em uma nova janela. E meu segundo exemplo é um link com texto descritivo, mas abre em uma nova janela. E o que estou exibindo aqui é a maneira mais simples de alertar um usuário que esse link abre em uma nova janela. Isso é bastante comum onde o usuário terá um indicador visual de que o link abre em uma nova janela e também será lido pelo leitor de tela para Porque, claro, eles vão ler o texto do link e o abre em uma nova janela. A notificação está incluída nesse texto, então vamos pular o código para ver como eles se parecem. Então, novamente, usando meu a nordle ist e meu primeiro exemplo é meu link simples que abre na mesma janela com texto descritivo. Nada muito complicado acontecendo com este aqui. Mas meu segundo exemplo é onde eu abri o link em uma nova janela, usando os atributos de destino no espaço em branco e onde também incluem o abre, um novo texto de janela dentro da descrição do link. Existem algumas maneiras diferentes de lidar com essa funcionalidade. Mas, de longe, o mais fácil na única unidade que vamos falar nesta classe é o simples abre em uma nova janela texto incluído no texto do link descritivo saltando de volta para a página. Há três outras coisas sobre as quais eu quero falar em relação a bons exemplos de links. E o primeiro 1 é que tínhamos certeza de usar texto de link descritivo, como clique aqui ou ler mais, não é descritivo e não fornece contexto para o usuário. Em breve vamos ligar, voz, e vamos ter uma exibição, uma lista de links que vão ao ar em toda a página web. E é aí que você realmente vai ser capaz de ver onde isso pode ser problemático para nós. Então, nós sempre queremos ter certeza de que damos o texto link mais descritivo Quarta nós nos certificamos de usar um indicador diferente de apenas cor. Agora você vê que por links de cor verde ar, mas eles também estão sublinhados quais os usuários esperam. Outros exemplos comumente usar diferente sublinhado seria lutar peso ou fronteiras. E, finalmente, queremos ter certeza de que combinamos o Focus ST ao nosso estado de foco para que a interação seja exatamente a mesma, seja você navegando com teclado ou mouse. Então agora eu quero abrir o voice over, e eu quero navegar através dos dois links que temos. Mas então eu quero trazer a lista de links que estão na página usando a estrada ou função e meninos de voz sobre você precisa de restauração de carro. Janela do Google. Você precisa de conteúdo de restauração do carro. Dê uma chance. Abra a janela. Então, ouvindo uma voz sobre, você pode dizer claramente qual link vai abrir uma nova janela em que não está. Agora, vamos abrir a estrada ou ferramenta e olhar para a lista de links que estão na página da Web. Links que você vincula pulam para conteúdo principal links, links, links, links, links , assentamento, liquidação quimicamente química insulta-me. Descobre que estás à procura de algo para experimentar. Ligação de trem de carro piscando. Vintage Chevy Truck ganhou melhor em links show Facebook link Twitter pisca Lincoln, Como eu mencionei olhando para a lista de links a voz de ela fornece, você pode realmente ver como seria confuso para um usuário de todas essas listas. Apenas disse, clique aqui ou leia link mais descritivo. Tex realmente ajuda o usuário a entender o que esses vazamentos de ar para. A última vez que eu quero cobrir é alguns bons exemplos de uso de imagens vinculadas. Tenho aqui dois exemplos. Mostrar um é apenas uma imagem simples com todo o texto que é embrulhado em uma tag. E meu segundo exemplo é uma imagem com vazio todo o texto com uma descrição externa que é embrulhado em uma tag thes dois exemplos ar muito parecido com aqueles que cobrimos acima quando falamos sobre imagens com todo o texto ou imagens com uma legenda visual. Meu primeiro exemplo é apenas imagem simples com descritivo, todo o texto envolto em uma tag. Meu segundo exemplo é a imagem com atributos vazios para a legenda externa. No meu primeiro exemplo, o leitor de tela usará a imagem todos os atributos como o texto do link. E no meu segundo exemplo, o leitor de tela usará o texto da legenda como o texto do link visitado. Link Carlin Car Dreamer Vamos fazer como um link visitado. Vintage Chevy Truck ganhou melhor no show, modo que encerra os exemplos que eu queria compartilhar com. Você tem que olhar para algum código e olhar para os exemplos em ação com narração. Em seguida, vamos procurar atributos e rolos de área. 5. Atributos e papéis de ARIA: Espere. Próximo segmento, vamos cobrir a área Especificações, que é escrito e mantido pelo W três c Várias posições foram acessíveis áreas ricas aplicações da Internet, um conjunto de atributos pré-definidos usados para fazer Web conteúdo e aplicativos da Web mais acessíveis a pessoas com deficiência. Suas principais utilizações com situações como conteúdo dinâmico e interfaces de usuário avançadas. Onde HTML, CSS e JavaScript por si só não são suficientes. Existem três categorias para atributos de área. Esses são Rolls, Propriedades e estados. Funções são atributos que ajudam a localizar o elemento, tipo e/ou finalidade, e um valor de função não pode ser alterado. Algum exemplo. Os valores das funções são as propriedades ou atributos do menu do menu, do botão do cabeçalho da barra principal e da caixa de seleção que fornecem significado ou informações adicionais para o elemento ao qual ele é aplicado. Algum exemplo. Os valores das propriedades são controles de área. Área tem pop-up uma área de estados ativos ou atributos que ajudam a fornecer informações baseadas em interação para o elemento que foi aplicado e estados são mais propensos a mudar ao longo tempo por meio da interação do usuário ou outras ações. Algum exemplo. Os valores dos estados são área expandida. Sua área você verificou Preston área selecionada para permanecer dentro do escopo desta classe não estaremos cobrindo implementações avançadas de mercado de área, mas eu quero orientá-lo através do meu código de projeto e aplicar alguns dos atributos de área que vai ajudar a aumentar a qualidade da minha marcação. Eu não vou precisar usar muitos porque eu já usei marcação semântica adequada. Mas há algumas áreas onde eu gostaria de melhorar minha página. O que eu quero fazer primeiro é melhorar a marcação da minha barra de navegação Shell CEO. Minha lista de pedidos da ONU. Se eu adicionei um rolo de barra de menu para o poço, um rolo de nenhum para cada aliado e um rolo de item de menu link ensinar agora usava um rolo de nenhum em cada aliado porque o papel da barra de menu faz com que a tecnologia assistiva reconhecê-lo como um menu do nosso elemento em vez de uma UL real como ela é. Então, se você avaliar sua página com a ferramenta de avaliação de inacessibilidade, esses itens serão sinalizados porque ele está reconhecendo a UL como um elemento de barra de menus e não uma UL onde os aliados devem estar dentro de você. L. Então você tem que aplicar uma regra de nenhum para que eles sejam compatíveis. A segunda área que gostaria de falar é o ícone no meu recurso rápido é seção. Eu apliquei uma área oculta igual a verdadeira a cada uma das minhas imagens de ícones, porque eu quero que elas sejam vistas visualmente. Mas não me parece necessário que a tecnologia assistiva os interprete. E então, finalmente, para meus ícones de mídia social, estou usando Ícone novamente dentro de cada tag, e não há nenhum texto descritivo associado a eles. Então o que eu poderia fazer é ter texto dentro das etiquetas A que está oculto visualmente mas acessível à tecnologia assistiva. Ou apenas aplicar uma antena capaz a uma tag, o que eu fiz então eu apliquei um rótulo de área para Facebook, Twitter e alongar. Depois de aplicar, esses atributos serão capazes de ver a diferença em como a tecnologia assistiva interpreta os elementos e o conteúdo. Vamos disparar uma narração e navegar pelas páginas da Web. Veja como está de volta para nós. Dirigindo nível um. Você precisa de trabalho de restauração do carro, navegação, itens de menu de um item. Você está em casa no momento. Qualquer um procurado por item de menu de fabricação antes da carroçaria. Item de menu três ou quatro suspensões para quatro, e um mini-bar e navegação e um fornecedor para imagem de fundo. Restauração completa. Você está recebendo dois itens demais. Bem-vindo a você precisa de restauração do carro. Esta é uma pequena coleção do meu trabalho, e espero que encontre algo um pouco rápido. Recursos. Você está atualmente visitada pelo analista. Link Body dicas Aqui estão algumas dicas com problemas do corpo um para links visitados Fine. Vou precisar de alguma ajuda com um problema para 1/4 link visitado. Encontre cartas. Esta é uma lista de espectadores recentemente gratuitos para links visitados. Encontre o seu SWAT local para fazer alguns acordos para o final da lista, nível três. Minha parte favorita da restauração. Você está indo de nível três meses até mesmo para contar histórias. Você está atualmente em uma lista de itens que precisam ser um link visitado. Deve ter suspensão independente. Se um cliente de link visitado recebe abre uma nova janela para baixo muito bêbado gratuitamente. Muitas vezes você pode encontrar peças do seu projeto. troca local atende a um link visitado. Encontre uma lista de suas reuniões de swap locais aqui. Abre uma nova janela final da lista e de desenvolvimento para acessibilidade. Amigável edifício lista de ligação acessível links visitados Facebook um dos três visitados ligados a três Visita link Clinton livre cada e pelo menos no futuro na descrição da classe forneceram um recurso chamado guia de estilo beco em exemplos onde você encontrar uma grande coleção de exemplos de uso que incluem implementações de área. Eu recomendo olhar esses exemplos. Se você precisar de acessibilidade, ajude com implementações específicas e/ou avançadas, modo que isso encerre atributos e regras de área. Em seguida, analisaremos alguns recursos comuns que você pode adicionar imediatamente às suas páginas da Web para melhorar a acessibilidade. 6. Boilerplate de acessibilidade: forma neste segmento, eu vou compartilhar com vocês algumas características comuns que fazem parte do meu esqueleto de desenvolvimento. Recursos mais fáceis repetidos e necessários que devem fazer parte de suas páginas da Web para conformidade com acessibilidade . O primeiro recurso sobre o qual eu quero falar é o atributo HTML Lang. Este atributo informa ao navegador em tecnologia assistiva, que idioma a página da Web para conteúdo deve ser interpretada. Eu tenho um atributo Lang aplicado à tag HTML de abertura. Se você tiver seções de conteúdo que são exibidas em idiomas diferentes, poderá aplicar atributos mentirosos adicionais a esses contêineres pai. Esse recurso abrange as diretrizes de acessibilidade de conteúdo da Web 3.1 ponto um, que é o idioma da página. O segundo recurso que eu quero falar é um salto para o link de conteúdo principal. Isso é importante para fornecer uma navegação eficiente aos usuários do teclado. Ele permite que eles pulem blocos de conteúdo repetidos como estruturas de navegação e elementos de cabeçalho para que eles possam saltar diretamente para a área de conteúdo principal. Este recurso pode ser alcançado de várias maneiras diferentes. Eu escolhi ter um inimigo para baixo do topo da página quando ele recebe foco e, em seguida, tê-lo desaparecer uma vez que o foco deixa o elemento. A coisa importante a notar aqui é que é o primeiro elemento herbal foco na página. Uma vez que um usuário invoca um link lá saltou para a tag âncora, onde ele poderia começar a navegar na área de conteúdo principal. Eu usei um índice negativo de uma aba nas minhas tags âncora que ele poderia ser usado para mover o indicador de foco para sua posição, mas não receber o foco do teclado enquanto um usuário navega pela página. Naturalmente, com seu teclado, esse recurso abrange o conteúdo da Web. Diretriz de acessibilidade 2.4 ponto um, que é blocos de derivação. A terceira característica é um indicador de foco consistente. Irmãos têm indicadores de foco padrão, mas há todos diferentes e raramente, se nunca, encontram. Os requisitos do meu projeto demonstram um indicador de foco altamente visível e exclusivo compatível com contraste de cores. É um esboço CSS tracejado de dois pixels aplicado usando o foco CSS pseudo classe. A cor principal que eu uso é vermelho, mas eu alterá-lo em algumas das regiões do meu projeto para que ele passe os requisitos de contraste de cor . Esse recurso abrange a diretriz de acessibilidade de conteúdo da Web 2.4 ponto sete, que está focada, visível quarto recurso está permitindo zoom de página. O relatório Meta tag fornece um atributo chamado escala máxima. Normalmente, não use esse atributo, mas se ele for necessário para seu projeto, certifique-se de que 200% é o mínimo. O W três C recomenda que os usuários sejam capazes de redimensionar o conteúdo em até 200% sem tecnologia assistiva . Quando faço minha página do projeto, você percebeu que eu não perco conteúdo ou funcionalidade, que é um aspecto importante para atender a essa diretriz. Outra maneira de conseguir isso é através de controles personalizados para ajustar texto e/ou elemento Tamanho está localizado na parte superior da página da Web. No entanto, esta é uma prática menos comum. Esse recurso abrange o conteúdo da Web. Diretrizes de acessibilidade 1.4 ponto quatro, que é redimensionado. Texto. Os dois últimos recursos sobre os quais eu quero falar não são tanto itens esqueleto existentes, mas são tratados da mesma forma em todo o meu trabalho de desenvolvimento. E há nossa consistência em todas as páginas da Web. Tal navegação do site e branding e usando marcação semântica. De um modo geral, os cabeçalhos e rodapés de navegação devem ser muito próximos, se não idênticos em todas as páginas do site. A área de conteúdo principal será o único elemento com pequenas diferenças. Isso proporciona uma experiência mais previsível para seus usuários. Esse recurso abrange o conteúdo da Web. Diretrizes de acessibilidade 3.2 ponto quatro, que é uma identificação consistente. Nós discutimos muito sobre a importância de usar a marcação html semântica e como ela melhora a experiência de suas páginas da Web. Lembre-se de escolher sempre a marcação mais adequada para a sua solução. Esse recurso abrange o conteúdo da Web. Diretrizes de acessibilidade. 1.3 ponto um, que é informações e relacionamentos para que cobre meu recurso de acessibilidade Boilerplate. Em seguida, vamos discutir o contraste de cores. 7. Contrates das cores: neste segmento, vamos falar sobre contraste de cores e como garantir que sua paleta de cores esteja em conformidade. Contraste de cor adequado é importante, modo que o texto lido por pessoas com visão moderadamente baixa as diretrizes de acessibilidade de conteúdo da Web que precisamos analisar é 1.4 ponto três, que é nomeado adequadamente. Contraste. Ele afirma que a cor do texto, que é identificada como o primeiro plano, cor juntamente com uma cor de fundo que o texto sobrepõe deve ter uma proporção mínima de 4,5 para 1 para texto normal em uma proporção de 3 para 1 para texto grande. A primeira coisa que precisamos discutir é que a diretriz não define um valor no que eles consideram ser o tamanho normal do texto. Eles permanecem na diretriz. Esse texto de 18 pontos ou 14 pontos em negrito é considerado grande o suficiente para exigir uma taxa de contraste mais baixa para que possamos ter isso em mente. O papel que eu sigo é considerar seu tamanho padrão do corpo do texto como seu tamanho normal de texto e avaliar a taxa de contraste a partir daí, que é 4,5. O tamanho de texto normal é fortemente debatido. Mas geralmente o tamanho padrão do texto do meu desenvolvimento é em torno de 14 a 16 pixels, ou 11 a 12 pontos. Então, esta informação em mente, você pode considerar a paleta de cores para o seu site, meu favorito disse. Verificar contraste de cor é Web Afins Contraste de cores Verificador Eu forneci um link para a ferramenta na descrição da classe. Esta é uma ótima ferramenta onde você pode facilmente colar ou cores de primeiro plano e plano de fundo nas entradas, e imediatamente fornecer-lhe uma proporção onde passa ou falha. O que eu mais gosto sobre ele, porém, é que ele fornece controle deslizante de leveza para que seus pares de cores não são compatíveis. Você pode ajustar uma ou ambas as cores até que ela forneça uma proporção compatível. Eu não encontrei esse recurso útil em qualquer outra avaliação de contraste de cor disse que eu usei selecionar cores que produzem uma proporção compatível é muito fácil quando você está usando um valor de cor sólida para ambos cor de primeiro plano e plano de fundo. No entanto, isso nem sempre é o caso. Nos projetos da Web de hoje, temos texto sobre imagens, radiância de plataforma de texto, texto sobre fundos multicoloridos, texto sobre vídeos e, modo mais geral, texto diretamente ou uma imagem ou vídeo não é bom a menos que você tenha controle total sobre esse conteúdo e que ele não será alterado por 1/3 de partes onde ele possa produzir resultados incompatíveis. Avaliação de Acessibilidade informada. Quase sempre lançar violações falsas positivas nessas situações porque seus algoritmos não podem determinar a cor do primeiro plano ou do plano de fundo. E esses elementos mais complexos, fundos simples são a única coisa que eles podem lidar. Portanto, apenas esteja ciente disso. Vamos falar mais sobre isso no próximo segmento sobre avaliação de acessibilidade lidar com situações mais complexas pode ser realizada com bastante facilidade. Protege que se sentará sobre imagens ou vídeos. Eu recomendo usar uma cor sólida entre um elemento de texto e plano de fundo, ou pelo menos uma cor ou ingredientes definidos para uma porcentagem alta de opacidade. Por exemplo, se você tiver uma galeria de apresentação de slides com texto, as sobreposições de cada slide, você pode definir a cor do texto biqueira branca em uma caixa com um fundo preto transparente. Dado que as imagens podem ter qualquer combinação de cores, você deve considerar a imagem em seu pior cenário, que nós branco. Nesse caso, eles têm um fundo branco com texto branco que sobrepõe esse plano de fundo com a caixa preta transparente que fica entre o texto na imagem. A partir daqui, você pode usar uma ferramenta como o analisador de contraste de cores. Para verificar o valor da transferência de caixa preta com texto branco, você vai achar que você precisa manter pelo menos 60% de opacidade para estar em conformidade. Nesse pior cenário, forneci um link para a ferramenta analisador de contraste de cores na descrição da classe. Por outro lado, considere uma situação. Temos texto preto que relaciona a imagem dentro de uma caixa branca transparente. Então você tem que considerar uma imagem preta pura para avaliar a proporção da caixa branca transparente com texto preto. Os cenários simples onde temos preto e branco, mas a mesma abordagem a ser usada para verificar cores diferentes, se necessário. Geralmente, o conteúdo dinâmico é o mais difícil de explicar, mas a chave é sempre avaliar. Na pior das hipóteses, existem algumas situações em que o seu cliente pode ter uma marca não compatível. O esquema de cores que eles não podem mudar seu não é muito que você pode fazer nesta situação para seu esquema de cores real, Mas há uma solução que você pode implementar para alcançar a conformidade de acessibilidade. O W C E G como uma técnica geral rotulada G 1 74, fornecendo controle com uma taxa de contraste suficiente que permite aos usuários mudar para a apresentação que usa contraste suficiente. Você pode realizar esta técnica fornecendo um botão simples de ligar para o site de alta febre muito alta contraste que alterna o site para dentro e para fora de um modo de alto contraste. site Dunkin Donuts tem um grande exemplo disso. Seu contraste não vai para preto ou branco puro, mas muda muito bem. Implementei uma solução semelhante a esta no meu trabalho em várias ocasiões em que uso preto e branco com alguns acentos cinzentos escuros. Ele fornece ótimos resultados, e eu vi isso obter um monte de feedback positivo dos usuários. Então, isso envolve alto contraste e como alcançar uma paleta de cores compatível. Em seguida, analisaremos como avaliar uma página da Web para conformidade com a acessibilidade 8. Avaliação de acessibilidade: no segmento, vamos analisar como avaliar um site quanto à conformidade de acessibilidade. Para fazer isso, vamos navegar em uma página da Web com o teclado e leitor de tela e inspecionar a estrutura e marcar, em seguida, usar feixes Web,avaliação de ondas, avaliação de ondas, sistemas de índice de ferramentas, atos, ferramenta de avaliação tanto como uma medida secundária. Vamos começar navegando na página da Web com um leitor de teclado e tela porque é a forma mais importante e confiável de testar ferramentas de avaliação como Wave e Acts apenas avaliam programaticamente em um conjunto de regras, e muitas vezes cometem erros. O teste humano é sempre a forma número um de testes e avaliação. Uau, navegando com um teclado e leitor de tela, eu vou usar apenas um pequeno conjunto de controles estará usando a tecla Vo novamente que eu falei em uma lição anterior. Junto com Cherokees, também vai guia através da página para se certificar de que todos os elementos de ervas pessoas são acessados corretamente durante a navegação, vamos certificar-se de que os elementos de página e conteúdo ou acesso em uma previsível e que eles são interpretados corretamente pelo leitor de tela. Divertido Max construído em leitor de tela chamado Voice Over. Existem muitas outras opções populares, como NBD A e Jaws que podem ser usados uma vez que navegamos com sucesso na página inteira abrirá ferramentas de desenvolvedor Crume para verificar a marca e certificar-se de que a estrutura e o conteúdo são semânticos, junto com qualquer outra coisa que possa se destacar. Se você estiver fazendo isso pela primeira vez, pode parecer esmagador, confuso ou difícil, e tudo bem. A avaliação de acessibilidade requer prática, e você construirá a habilidade em nenhum momento. Para obter ajuda adicional, forneci um link na descrição da classe para um ótimo tutorial para iniciantes para narração criada pelo grupo de desenvolvedores do Chrome chamado Screen River Basics. Agora vamos disparar uma voz sobre e verificar a página da Web do meu projeto para verificar a conformidade com acessibilidade, levando a muitos talentos. Pular fisicamente para o conteúdo principal. No momento, você não está nada dentro do conteúdo, assim como o outro título de item Nível um. Precisa de reservas, navegação. Um item. Você está realmente em um menu de navegação. Itens que alguém queria para o item de menu de fabricação antes da carroçaria, item de menu para suspensão, muitos esperando por quatro e um mini-bar e navegação e um melhor fundo Nível dois itens . Bem-vindo a você. Esta é uma pequena coleção do meu trabalho, e espero que você ache algo útil. Nível 3 Recursos rápidos. Você está atualmente no nível de cabeçalho três ou quatro itens visitados. Dicas do corpo link Aqui estão algumas dicas para esses dois corpos. Um para links visitados Encontre a saúde precisa de ajuda ou direção com um problema antes de um link visitado . Encontre cartas. Esta é uma lista de espectadores recentemente três ou quatro encontros de troca de link visitados. Encontre o seu SWAT local para fazer alguns negócios para a sua lista atual. Dirigindo nível três. Minha parte favorita da restauração. O design é como um projeto de gravação, especialmente no inverno. Você está liderando histórias de nível três com três itens que você está rastreando no momento. Uma das três necessidade de modelar é tão grande livre que você visitou link, então eu tenho que dar-lhe uma tentativa. Abre uma nova janela para entrega. Deve ter suspensão independente se for perfeita para o seu cliente. Especificamente, o cliente recebe aberturas. Uma nova janela explodiu para cair de graça. Você acorda. Muitas vezes, você pode encontrar peças para o seu swap local projetado atende a um link visitado. Encontre uma lista de seus habitantes locais. Armas aqui abre uma nova janela, ea lista e eu que você está desenvolvendo atualmente para acessibilidade começar um amigável, edifício acessível vintage. Você não estava ouvindo itens que visitou. Link Facebook, um dos três visitou Lincoln. Três. Visitei Lincoln , Lincoln, liberte todos e lista, e se for assim, parece que estamos em boa forma. Todos os elementos e conteúdos tiveram acesso à ordem previsível e foram interpretados corretamente pelo leitor de tela. Meus controles de teclado se movem em toda a página da Web Exatamente como o deve acontecer. Nada interferiu na minha interação. Agora vamos tocar na página para garantir que todos os meus elementos de foco farão, defato, fato, receber foco visitado, vinculado ao conteúdo. Você quer dizer como um frigobar para itens? Fabricação do chassi, carroçaria do item do menu? De qualquer forma, é basicamente qualquer pessoa, basicamente, chips corporais. Aqui estão algumas dicas para aqueles são para ser fisicamente bem. Vou precisar de ajuda ou orientação com um problema. Visitado. Klink Encontrar cartões. Este é um desperdício de espectadores recentemente visitados Link swap atende. Encontre o seu swat local me para fazer algumas ofertas visitado link para que eu possa dar-lhe um link visitado. O cliente recebe abre uma nova janela visitada link. Encontre uma lista de suas reuniões de swap locais aqui abre uma nova janela. Links visitados Lista Facebook Revisitado Link. Quer um link visitado? Lincoln Liderando meu conteúdo exclusivo nosso destino Select tentativa. Agora que confirmamos que o meu foco vai elementos recebidos foco e na ordem correta que é agora que irá verificar a estrutura da página na marcação. Obtendo uma visão geral da estrutura da página. Tudo parece muito bom. Nosso primeiro elemento de ervas foco nas páginas. Um salto para o link de conteúdo principal, seguido pelas tags principal e rodapé do cabeçalho semântico, que é o que eu esperaria. Vamos invadir cada uma dessas etiquetas. Veja como os pedaços de conteúdo são criados. Ok, podemos ver que as tags de seção semântica estão sendo usadas para agrupar as seções maiores de conteúdo juntas, o que é ótimo. Também podemos ver que o salto para a âncora de conteúdo principal é colocado corretamente como o primeiro item dentro da tag principal. Até agora, todos os elementos HTML ar na ordem adequada no mercado que foi escolhido é apropriado . Vamos cavar o cabeçalho um pouco mais. Poderíamos ver que o H foi usado para o nome do site, que é o que eu esperaria, e daqui eu vou supor que todos os outros cabeçalhos e página irá incrementar a partir deste H. A barra de navegação foi definida corretamente usando a tag nap semântica, juntamente com uma lista inalterada utilizando os atributos de área adequados que ajudarão com a tecnologia assistiva. Passando para a seção infográfica, podemos ver que um elemento figura foi usado para marcar esta imagem com uma legenda grande e H dois no parágrafo. Dentro, podemos confirmar que a imagem tem um adequado todos os atributos também. O uso da marcação semântica aqui é ótimo, e tudo está na ordem correta. A seção Links Rápidos usa um H três incremental corretamente com uma lista setentrional para os links. Dentro de cada link, podemos ver um elemento ícone, que está escondido da tecnologia assistiva, juntamente com um título de link e legenda divididos em tags span separadas. Eu gosto de como o traço é usado para quebrar as legendas do título aqui, então eles não são vermelhos pelo leitor de tela como uma corrida no traço cria uma pausa agradável para o leitor de tela e dissidente visualmente usando o vidro escondido beco definido. A seção Spotlight usa uma única tag de artigo com um H três e um parágrafo à esquerda e uma imagem à direita. Podemos confirmar que a imagem tem um adequado todos os atributos também. A imagem de fundo não transmite conteúdo, portanto, certifique-se de que não está acessível à tecnologia assistida. Podemos ver que ele é definido como uma imagem de fundo, e isso é o que eu esperaria. A seção de artigo de recurso usa outro H três com uma lista inalterada para os artigos cada artigo, imagens, imagens, foto deixada com todo o texto adequado. Finalmente, pudemos ver que o rodapé usa um parágrafo para o slogan e uma lista ordenada pela ONU para os ícones de mídia social. Cada ícone usa um rótulo de área, o que é perfeito, dado que esses links ou apenas ícones e precisamos de texto discernível para os links. Acabamos de confirmar que a estrutura e o conteúdo da página são construídos usando marcação semântica adequada , e tudo é colocado em uma ordem adequada e previsível. Agora é hora de encerrar nossa avaliação de acessibilidade executando a onda e atua ferramentas de avaliação como uma medida final para ter certeza de que não perdemos nenhuma violação do caminho de um machado. Ferramentas são extensões de navegador que eu instalei, e vamos começar com a onda disse uma vez que eu clicar no botão, vamos ver que onda irá avaliar a página e, em seguida, exibir os resultados na barra lateral esquerda . Podemos ver imediatamente que temos zero erros e zero alertas, que é exatamente o que estamos procurando. Podemos ver todos os alertas, erros, recursos e muito mais clicando nas bandeiras. Botão no painel também gostaria de desativar CSS clicando nesses botões de estilos para que os itens sinalizados sejam mais fáceis de localizar. Se tivéssemos recebido alertas ou erros, nós os veríamos listados na parte superior deste painel, e cada item seria listado individualmente com as informações sobre a violação onde ele está localizado na página. E algumas informações úteis sobre como corrigi-lo, juntamente com as diretrizes de acessibilidade que ele pertence a onda também avalia para contraste de cor , mas eu vou olhar para esses itens no Axtell na minha experiência são os eixos comete menos erros. Bem, agora abra as ferramentas de desenvolvedor da equipe novamente e execute a ferramenta de machado, veremos quaisquer violações que encontrar na barra lateral inferior esquerda, os únicos itens da avaliação encontrados ou violações de contraste de cor. Se tivéssemos recebido quaisquer violações, nós as veríamos listadas no painel da barra lateral esquerda, e cada item seria listado individualmente com as informações sobre a violação onde ela está localizada na página e algumas informações úteis sobre como corrigi-lo. Junto com as diretrizes de acessibilidade a que se refere, Podemos ver que as violações de contraste de cor são marcadas como cotação incapaz de determinar o contraste para problemas ou elementos de cotação. A cor do plano de fundo não pôde ser determinada porque o elemento contém uma imagem. Nota. Eu inspecionei manualmente todas essas violações e confirmei que seus falsos positivos é uma ferramenta foi capaz de avaliar corretamente uma violação de contraste de cor real. Ele iria listar as cores de primeiro plano e plano de fundo, juntamente com uma proporção não compatível que eles produziram. Tenho algumas coisas que gostaria de mencionar sobre ferramentas de avaliação. O mais importante é que eles não são absolutamente perfeitos. Os problemas mais comuns que essas ferramentas sinalizaram automaticamente uma situação de contraste de cor quando a ferramenta não conseguiu avaliar corretamente uma cor de primeiro plano e/ou plano de fundo em vez de marcá-las como itens que exigem revisão adicional. Eles aparecem Israel violações, que pode inflar grandemente os resultados da avaliação e estão confundindo os clientes quando você garantir que seus falsos positivos, mas ainda estão listados nos resultados. Eu também vi uma bandeira ferramentas, marcação de área adequada e também não sinalizar situações que exigem isso. E, finalmente, eu vi vários itens sinaliza violações que na verdade não são baseadas em diretrizes de acessibilidade reais , mas em vez disso são apenas recomendações do criador da ferramenta de avaliação. Devemos sempre usar as ferramentas de avaliação da acessibilidade com cautela, e é por isso que o teste humano é sempre o número um. No fechamento. Gostaria de mencionar que, se um cliente está questionando a acessibilidade de seu site completo, é uma ótima idéia fazê-los comprar uma acessibilidade voluntária do produto, modelo ou V pat. v Pat é um documento de auto-divulgação criado pelo bender de terceiros que descreve os sucessos e falhas no que diz respeito à acessibilidade do site. O cliente pode então usá-lo como um deus e road mapping quaisquer atualizações necessárias do site para em última análise, atingir os requisitos de acessibilidade que completam nossa avaliação de acessibilidade. Em seguida, vamos dar uma breve olhada para trás e tudo o que aprendemos nesta aula. 9. Revisão de acessibilidade: Parabéns por completar a aula. Agora vamos tirar um minuto para recapitular os pontos-chave que aprendemos nesta aula. As diretrizes que precisamos seguir ao criar uma página da Web ou Seção 50 aguardam nas diretrizes de acessibilidade de conteúdo da Web, há links diretos para essas diretrizes fornecidas na descrição da classe. Além disso, as pessoas com deficiências que navegam na Web usaram tecnologia assistiva, como leitores de tela e ampliam a tela IRS, bem como estratégias adaptativas, como aumentar o tamanho do texto e ajustar a alimentação do mouse. Marcação HTML semântica é extremamente importante para a acessibilidade. Ele fornece uma interface rica que a tecnologia assistiva pode mais facilmente acessar e transmitir as informações de volta para o usuário. Há muito que é alcançado para acessibilidade, apenas com marcação HTML semântica. Além disso, construir elementos em uma ordem previsível é fundamental para links de navegação e imagens ou elementos que considero frequentemente problemáticos para acessibilidade. Nós olhamos para alguns exemplos de imagens com simples todas as imagens do Texas Wells que são acompanhadas por uma legenda que mantendo vazios todos os atributos, nós também olhamos para alguns exemplos de links que se abrem em uma nova janela e como lidar com esses texto de link descritivo juntamente com indicação adequada para links também são muito importantes para ter em mente. Atributos de área são usados para melhorar a interface do usuário e componentes Web quando HTML, CSS e JavaScript cair. Atributos de área curta são um conjunto pré-definido de funções, propriedades e estados. Os valores de função nunca mudam no ciclo de vida de um aplicativo. Os valores de propriedade podem mudar, mas é pouco frequente na mudança de valores de estado, muitas vezes através da interação do usuário. Esses atributos são interpretados pela tecnologia assistiva para aprovar a experiência geral do usuário . Há algumas coisas que devem ser parte de cada página da Web que é construída inclui o atributo HTML Lang um salto para o link de conteúdo principal, um indicador de foco consistente e permitindo que o usuário zoom para pelo menos 200% sem perder conteúdo para funcionalidade. O atributo deitado informa ao navegador e à tecnologia assistiva em que idioma a página da Web ou o conteúdo deve ser interpretado. Ir para o conteúdo principal Link é importante para fornecer navegação eficiente para usuários de teclado. Ele permite que eles pulem blocos de conteúdo repetidos como estruturas de navegação e elementos de cabeçalho para que eles possam saltar diretamente para a área de conteúdo principal. Finalmente, um indicador de foco consistente e proeminente ajuda o usuário a saber qual elemento tem o foco do teclado ? Contraste de cor adequado é importante para que o texto seja lido por pessoas com visão moderadamente baixa . As diretrizes de acessibilidade de conteúdo da Web afirmam que uma cor de primeiro plano, juntamente com a cor de fundo, deve produzir uma taxa de contraste mínima de 4,5 para 1 para texto normal em uma proporção de 3 para 1. Para texto grande. Existem muitas ferramentas que podem ajudar a construir um esquema de cores compatível, e o meu favorito é o verificador de contraste de cor do casamento. Fomos capazes de olhar para algumas situações de cor simples, bem como algumas situações de cor complexas e como avaliá-las para conformidade. Avaliação de acessibilidade é muito importante para garantir que uma página da Web compatível com base em diretrizes de acessibilidade usando um teclado junto com o leitor de tela para navegar por toda a página é a forma número um de teste de acessibilidade. Ferramentas de avaliação como onda e atos poderia ser usado como uma medida secundária para ter certeza completamente de que você não perdeu nenhuma violação. Além disso, certifique-se de verificar a estrutura da página e marcar junto com a ordem adequada da página e navegação previsível . Então você teve a chance de ver meu projeto. Muitas lições desta classe também anexadas à descrição do projeto para revisão posterior. Se você precisa agora, é hora de criar sua página da Web com base em tudo o que você aprende nesta classe Bill página Web com base em seu hobby favorito e mostrou na galeria do projeto. Certifique-se de ler a descrição do projeto para obter mais detalhes. Boa sorte, e mal posso esperar para ver o que descobrimos.