Construir um site acessível: acessibilidade e design inclusivo

1. Introdução: bem-vindo a este curso sobre acessibilidade ao Web design. Este é um tópico maravilhoso para se envolver, porque ao fazê-lo, não só tornamos a Internet umlugar melhor e mais justo, lugar melhor e mais justo, mas também estamos oferecendo uma tonelada de benefícios, como abrir nossos sites para todo o novos mercados e novos clientes em tornar a experiência melhor para que todos possam melhorar. Nossas taxas de conversão melhoram nossa usabilidade. Portanto, se você está olhando para o resultado final ou se você está apenas olhando para uma habilidade realmente valiosa para o seu currículo, isso também é importante , porque os funcionários atualmente eles querem saber que os engenheiros de software tornar as coisas acessíveis porque eles sabem o quão importante isso é. E eles estão procurando por isso. E eles estão pedindo isso em entrevistas. Eu sou Chris Eu sou um consultor de software no Does Not por 10 15 anos agora trabalhou para um monte de marcas internacionais, ajudando-os a tornar seus sites mais acessíveis. E também sou um psicólogo qualificado. Então pode pensar que é uma combinação de aceno. Mas adoro descobrir como funcionam os computadores, adoro descobrir como os humanos trabalham juntar tudo isso assim é realmente excitante, então mal posso esperar para ensinar todo o material que vai se recuperar neste curso. Não se esqueça de baixar o manual de custos para que você possa ler junto com as aulas em vídeo . Vejo-te na primeira lição. 2. Guia de início rápido: Vamos dar uma olhada em algumas das maneiras que você pode começar realmente rapidamente com a acessibilidade no primeiro é apenas ligar um leitor de tela e começar a tentar usar seu site. Quando você faz isso, muito tempo, você realmente percebe rapidamente os problemas que eles são. Então, se você está no Windows, você pode usar Tubarão, que é Ah, pedaço de software pago. Mas você pode obter um teste gratuito, ou você pode usar o pouco menos popular, definitivamente ganhando popularidade. Inveja o A, que é completamente gratuito. E se você estiver na versão mais recente do Windows, ele agora vem com um leitor de tela integrado chamado Narrador. Se você estiver no Mac, então que tem um leitor de tela integrado chamado Voice Over You on Lenox Areas Walker e Lennon Screen Reader. E se você quiser Android, há um leitor de tela integrado chamado Rate chamado Talk Back. Então estes realmente fáceis de obter segurar no próximo módulo irá em um mergulho profundo em alguns deles e como eles funcionam. Mas você pode baixá-los, instalá-los e apenas começar a jogar com eles ou alguns deles apenas incorporados, por isso é uma ótima maneira de começar. Em segundo lugar, você também pode fazer uma coisa semelhante com um monte de ferramentas on-line, incluindo onda, que só permite que você coloque em um site que você está l em. Em seguida, irá mostrar-lhe esse site em todas as coisas que as coisas podem potencialmente ser um problema. E então, realmente, sem ter Teoh aprender tudo sobre acessibilidade, você pode apenas começar a consertar coisas porque eu vou te dizer o que está por vir também fez uma lista rápida de coisas que eu vejo muito que poderia fazer com melhorar, Então seria um top para a esperança. Mas definitivamente há seis. O número um é a hierarquia. Você quer um odiar um alvo no topo da página e então ele quer cair em cascata. Você pode ter vários engate dois, mas então você quer odiar livre e odiar por em todos esses. Quero ter reuniões semânticas irá para todos estes em mais detalhes no módulo de design inclusivo . Mas apenas para lhe dar um rápido aviso sobre seus cabeçalhos uma cascata para baixo contraste de cor bastante insuficiente entre seu primeiro plano em seu plano de fundo, tornando o texto difícil de ler problemas de foco sempre que há um móvel ou um elemento interativo. Se você estiver usando um leitor de tela ou navegando no site através do teclado em vez do mouse, você pode entrar e sair desses modelos? Número quatro são entradas de formulário sobre rótulos, mesmo se você escondeu os rótulos. É muito importante ter esse rótulo no ar para dizer às pessoas o que está acontecendo, porque pode ser óbvio se de um contexto visual, mas não é óbvio se você não consegue ver. Então, é realmente importante ter esses rótulos em seus botões número cinco muito próximos . Muitas vezes pensamos na acessibilidade como um problema de pessoas que não conseguem ver porque os leitores de tela da maneira predominante que tornam os computadores mais acessíveis. Mas também há deficiências motoras ou apenas geralmente, pessoas com dedos grandes tentando tocar em dispositivos móveis. Então precisamos fazer com que essas áreas de toque cliquem em áreas agradáveis e grandes, modo que se você não tem habilidades motoras perfeitas, você ainda pode apertar esses botões sem apertar o próximo a ele. Então, finalmente, número seis é conteúdo de vídeo sem legendas . Idealmente, sempre que fornecemos conteúdo de vídeo, queremos legendá-lo para pessoas que têm dificuldades auditivas em coisas como podcasts ou apenas fluxos de áudio também podem ter uma transcrição para que as pessoas que não conseguem ouvir ou as pessoas que não querem ouvir pode apenas ler a transcrição em vez disso. E vamos entrar em mais detalhes em todos esses tópicos no módulo de design inclusivo. Mas há algumas ideias só para começar. 3. Ferramentas de acessibilidade: neste módulo analisará algumas das ferramentas que você pode usar para ajudá-lo a identificar problemas de acessibilidade em seus projetos atendidos mais acessíveis. Estamos começando com isso porque ele realmente ajudará você a começar rapidamente. Se você colocar essas ferramentas, elas começarão a mostrar como corrigir as coisas imediatamente para que você possa começar a melhorar seu site hoje mesmo. 4. Farol: luz vai olhar para a Life House, que é uma ferramenta embutida no navegador Google Chrome Web. Vamos começar navegando para um site que queremos encomendá-lo e os nós para acessá-lo . Precisamos abrir as ferramentas de desenvolvedor do Chrome para fazer isso. Nós não podemos sequer escrever lambendo hit spect ou se nós apenas caber F 12 no teclado e, em seguida, provavelmente, iniciar este tablet elementos e tornar-se assim. Mas se formos à ordem, está aqui. Ele vai trazer à tona este grito de auditoria de uma pequena casa de luz, e nós podemos escolher onde queremos encomendá-lo como um dispositivo móvel ou desktop. Podemos escolher o que queremos ordenar e como queremos que a conexão seja simulada também . Então, neste caso, podemos simulá-lo até um telefone de para G, e então quando tivermos Pete de todas as suas opções, podemos apenas acertar esta ordem de fita. É botão, e isso não é especificamente para acessibilidade. Também faz Performance e ASIO e nos dá um monte de informações realmente úteis. Jets leva um minuto para executar enquanto simula várias conexões diferentes, e então ele vai dar-lhe uma pontuação de 100 para cada um desses itens. Então desempenho não tão bom, mas acessibilidade fto indo muito bem. Então vamos rolar para baixo e ver o que o relatório Saiz. Aqui estamos em excesso de capacidade, por isso é sinalizado este problema em particular. Está dizendo que não temos contraste suficiente entre o primeiro plano e o plano de fundo, e se abrirmos isso, ele vai até aceitar os elementos e nos dizer aqui que este é o número de telefone. Então isso será no final da página aqui onde ele diz que havia contraste suficiente . Justo o suficiente, você volta para a ordem que ele também dá uma lista de todas as coisas que ele já olhou para o passado. Por exemplo, a área atribui o papel, atributos, ideias sendo únicas, podemos ver todas as coisas boas que fizemos, e também quaisquer recursos são apenas acessíveis, não relevantes para este site porque não há apenas nenhuma nesta página exibida aqui também. Então esta é uma criança realmente útil para obter uma visão geral rápida de quaisquer problemas, e ele irá levá-lo para os problemas, bem como, e ele também lhe dá que dicas de desempenho se chegamos ao desempenho, nos dá todos esses conselhos sobre como aumentar o desempenho também. Então é uma ferramenta muito útil. Só dá um monte de informações. Fico feliz rapidamente. 5. Voice-over: nesta lição, vamos ver como usar o voice over, que é o integrado no Reiter que vem com o Mac OS. A Andi. Ele fala com muito, disse. Pode haver alguma conversa enquanto eu falo e vício sobre conversas. Mas para começar, só precisamos apertar o comando. Cinco em voz alternativa de em voiceover no Chrome New Tab, Google Chrome Window Address e Search Bar Editar texto tem foco no teclado e, em seguida, podemos dizer Lincoln Address acedeu. chumbo afundou. City Clinic Co. Reino Unido não conteúdo Web e para nunca se locomover, precisamos usar a voz de um modificando chaves por padrão, sua opção de controle. Então seguramos isso fazemos o que quisermos. Às vezes também precisamos mudar para cá. Não é como se os salários da JoJo pressionassem para cima e para baixo. É um monte de chaves para segurar. Mas para começar, podemos apenas segurar a voz de modificar chaves e, em seguida, rolar Chris leva quota, clínica de ansiedade, terapia privada e l s um onde o conteúdo que você está atualmente em. Se comicamente mudança foi para a área Web. Pressione a opção de controle. Mude para baixo. Voz seta sobre é muito bom, como você pode ver que, quanto a dar-lhe a direção das coisas que você precisa agora, nós caiu no conteúdo da Web, e transmitimos através da página leva clínica Ansiedade Crume tem Nova janela Menos é pular para o conteúdo principal, alguns desconfortavelmente no link para clicar neste link. Pressione o espaço de opção de controle que você pode ver os sites fazendo é que eles têm um salto oculto para link de conteúdo principal próximo ao topo. O só aparece quando você dá foco para que quando você rola usando o teclado ou usando um leitor de tela, ele apareça imediatamente. Mas os usos citados não precisam desse link. Eu não vou dizer isso. Link chamou um livro de um compromisso. Você está navegando no momento. Você é um livro de link visitado on-line visitado, vinculado , visitado, vincular nossa terapia e o que está atualmente no link Para clicar neste link Pressione o espaço de opção de controle A obter exemplo de onde você iria layout página semanticamente, mas você pode fazer com que visualmente pareça diferença. Um livro on-line que provavelmente a principal chamada à ação desta página, de modo que, na verdade, vem em primeiro lugar na navegação sobre os links vêm depois disso agora quando eles estão gritando para passar pela página. Logicamente, ele vê um livro on-line que, embora visualmente, nós o definimos para ser o evitar ao redor. Então isso foi uma piada para isso. Visitando o meu livro Link on-line, você pressiona o primeiro nome visitou Editar texto principal personalizar e controlar. Atualização do Google Chrome está disponível. Você está atualmente em um botão para clicar neste botão pressione o espaço de opção de controle. E com dublagem, é muito fácil fazer fazendas. Pode ir direto? H n Crume tem Nova Janela Cliente. Chris Button. Você está atual Chromebook on-line leva ansiedade Clínica visitado Link Ir para o conteúdo principal tem foca presentemente. Ir para o conteúdo principal. Dirigir livro de nível um on-line. Você é Johnson. Inserir telefone para e-mail. Um suave conter complementar. Você deseja vincular o nível de cabeçalho final off final para link cabeçalho clique link Título. Ficou fraco, mas visitou. Link visitado imprensa visitado link perguntas freqüentes, Leads, ansiedade, conteúdo clínica Web, compromisso e controle. atualização do Google Chrome está disponível. Você está atualmente em um botão para clicar neste botão. Pressione o espaço de opção de controle. Muito fácil de testar como os orbs acessíveis são apenas ativando a voz. Se você tem um Mac, Andi, comece a ir para o seu site e veja se você pode fazer as coisas que você quer fazer. E se não, então talvez seja hora de repensar a maneira como você o projetou. Voiceover desligado. 6. JAWS: neste laptop, temos Jaws instalado, que é o leitor de tela mais popular para Windows. Então vamos dar uma olhada rápida. Pare de abrir, John para Windows, BBC. Isso é o lar. Isso é brutal. Crow BBC. É a casa. Normalmente, ele mudará o esquema de cores. Infundir nos esquemas de cores avançados em Eu já tenho uma página Web carregada aqui na maneira principal que você navega em Mandíbulas é apenas usando as setas para cima e para baixo visitado link sobre nível de cabeçalho de jogo de página para acessibilidade Lista de leasing de dois itens. O mesmo link de página. Ir para conteúdo como um monte de sites para a BBC. Coloque alguns links de acessibilidade escondidos lá. Se queremos pular direto para o conteúdo principal goza, podemos apertar Q, podemos apertar Q, que a partir das teclas de choque e novamente continuar indo para baixo. Nível de direção para boas-vindas à BBC domingo 2 Fevereiro. Ao contrário da narração que coloca um indicador visual de onde você está na tela, George não faz o que obviamente não é problema se você é cego, potencialmente um problema parapessoas parciais e excitadas, pessoas parciais e excitadas, mas o feedback de empregos geralmente bom, então você provavelmente não precisa dele se estiver usando um leitor de tela. É mais se você está testando como uma pessoa com visão visual que você pode querer esse tipo de voz sobre estilo. Indicador. Em branco petting nível três link Australian Open título masculino no link de tênis em branco petting Nível três link de rugby union são agora. Se quisermos dividi-lo um pouco mais, podemos usar as setas esquerda e direita, e isso vai ler caracteres individuais O r. E há uma tonelada de papel relógio. Aproveite o seu para que você possa obtê-lo para ler em nível de frase e fazê-lo ler em um nível de linha . Você pode fazê-lo comer em um nível de personagem. Há um monte de chocolates diferentes para aqueles que pretendem navegar pela página. Normalmente, você deseja fazê-lo por cabeçalhos, espero que os títulos ou assim corretamente no site que você está procurando. Então, por exemplo, se eu quiser ir para os títulos de Nível 2, eu posso apenas apertar as duas principais ou principais histórias nível de cabeçalho até que as manchetes de notícias cheguem ao nível para as manchetes de esportes ao vivo dirigindo nível para Lick neste fim de semana Desporto nível dois três coisas que amamos hoje, nível dois em Se você quiser passar pelos títulos livres de ódio novamente. Basta usar as cores de texto do bolo livre Capture cultura da selva semântica nível três. Navio antigo Reconstruir o maior nível de três quebra-cabeças D do seu mundo. A Segurança Nacional 400, que inspirou lendas liderando Nível 3 Link. É uma demonstração rápida da navegação básica. Agora vamos olhar para realmente fazer algo, e isso vai nos dar uma chance de ver Tubarão é para modos também. Então isso é carregar este site para ansiedade de chumbo lá. Vamos recomeçar a página inicial contra a Clínica de Ansiedade Lambida deixa a Clínica Ansiedade visitada Live Page tem quatro dores de cabeça do estado da região e 22 menos pistas. Clínica de ansiedade Terapia Nacional de Rifle Você sabe que é uma perna visitada leva e desejo deixa ansiedade visitada Link deixa, Ansiedade Cliff. Mesma página Link Ir para conteúdo principal novamente. Um link de acessibilidade na parte superior que levará as pessoas não a ele chamado de livro e compromisso link 0113 para Região de Navegação. Bom uso das etiquetas NAFTA que ligam livro Godlike. Vamos bater este livro on-line para que nós estamos no link Spaceflight para selecionar Godlike nacionalmente decidiu a clínica Dash Google Crow Book up como nacional come e decidiu a clínica cortar Google corvo. Mas Deus, como come e desejo nacional, a clínica permanece. Região Artigo Região Primeiro nome Editar Notícias John People é velho As peças são para ler o script do formulário de reserva de texto. Etapa um dos três tipos de formulários de texto. Vote. Você deve ter ouvido aquele pequeno pio enquanto carregamos a página, e isso é para indicar que George entrou no modo de formulários onde ele permite que você preencha as coisas . Ele realmente disse modo de formulários neste caso também. Está em um muito para ambas as configurações, então vamos tentar preencher algo. Nosso I in Jaws fim de semana apenas pressione Enter para enviar formulário. Há muito mais abaixo, mas vamos ver o que acontece se acertarmos agora. Alerte Air Hollow Square Bullet, por favor. Após o número de telefone, feche este alerta. Primeiro nome Editar Notícias John Keep Lessel Plays são para ler o script de texto Chris forma de reserva Passo um dos três tipos de texto. Então não é perfeito nosso manuseio aqui, mas ele leu o alerta, então isso é ótimo. Nós também apenas como em um arcos regulares, enfraquecer toque através do texto tipo elemento interativo. Você também pode fazer isso. Gosta de quê? Três. O que? O que, o quê? O que? O que? O que? Conteúdo da citação. Está gritando? O que? Caixa de combinação Jeter. Por favor, escolha, por favor envie um e-mail. Ei com você, role para cima e para baixo na caixa. Maneira de submeter um pouco assim. Passo para que deixa e desejo a clínica que o Google corvo Mas Deus como esse passo para lidera nacionais e desejo a clínica que Google Chrome continuar botão. Então, essa é uma rápida olhada em como usar o leitor de tela Tubarão. Isso são folhas de fraude miligramas lá fora que lhe dão uma análise completa de todos os diferentes comandos disponíveis, então eu recomendo verificar isso. 7. ONDAS: nesta lição vai olhar para a avaliação de acessibilidade da Web para também conhecido esta onda e isso é fornecido pelo objetivo da Web. Então, se conseguirmos o site de mira da Web e queremos encontrar a onda também. Quando chegarmos aqui, não podemos entrar no site. Neste caso, estamos acostumados a ser. Vamos vê-lo ir e isso vai carregar o site da BBC de um lado e dar-nos este relatório. Está parecendo muito bom. Alguns erros de contraste, sem setas importantes, muitos alertas. E se formos ver os detalhes na sua salsicha, vai para a aba de detalhes. Ele nos levará através de cada um dos elementos. Então, por exemplo, muito baixo contraste, podemos apenas clicar. Estes que vai levar é para o pedaço de texto específico. Isso entra em muito mais detalhes do que farol. Então, por exemplo, temos alerta de texto suspeito porque aqui temos mais link e aqui temos ler mais link que realmente não fornece nenhum contexto. Então, se você imaginar passando com o Screen Reader e ele apenas ler mawr, não é um link muito útil podemos ir através de coisas como Texas, por exemplo, muito pequeno para ler também nos leva através de todas as coisas boas e cada um dos elementos estruturais. Assim, os ajudantes do pé do mar imaginar como navegar página como um sequoia grito, onde você estava passando pelos cabeçalhos. Ele marca cada um desses ajudantes. Compreender? Por exemplo, aqui está um H dois e aqui está o congelamento de ódio abaixo dele para que possamos verificar. Temos tudo em ordem. E se não tivéssemos títulos hierárquicos do que a onda, Till sinalizaria que para cima e também induz é o uso de todos. A área aprenderá mais sobre a nossa área mais tarde, mas esta é uma maneira de ajudar a dar contexto extra aos leitores de tela. E você pode obter mais informações, incluindo uma ferramenta de contraste integrada, e falaremos sobre contraste novamente mais tarde também. Mas, novamente, este é um relatório bastante detalhado em nosso site, para que você possa colocar o seu U R L na barra de endereços em. Ele irá gerar este um relatório detalhado sobre todas as coisas que são boas sobre o seu site e coisas que você pode melhorar também 8. Validador W3C: nesta lição vai olhar para a validação W três c para a qual é uma ferramenta que valida nossos ódio para Mel. Isso não está diretamente relacionado à acessibilidade. Mas uma das coisas mais importantes que podemos fazer para tornar o nosso site acessível é usado html semântico e aqueles validar html para que o composto navegador corretamente disse qualquer leitores de tela composta corretamente em nós não temos quaisquer grandes problemas como esse. Há rodovias que essa ferramenta pode funcionar. Você pode simplesmente colocar o u R L em ou se você ainda está desenvolvendo localmente, você poderia fazer upload de um arquivo feminino de ódio plano se você tivesse um, ou você pode simplesmente copiar e colar odeia para enviar aqui e bater. Verifique este exemplo que vamos validar. Baseado em que você está fora. Então vamos usar o site da BBC. Vou ver o Dhere. Temos o relatório. Então ele encontrou erro desgastado em muitos avisos para não parece que há algo muito errado aqui, quer que nós movamos uma meta tag acima em um monte de coisas da velha escola. Então, por exemplo, costumávamos em um atributo que foi digitado texto. Jarvis crypto permite recursos JavaScript que não são mais necessários a partir de html cinco. Coloque um monte de código ainda tem em. Na verdade, temos mais alguns erros aqui em baixo também. Esta é uma ferramenta muito agradável, porque todos nós um monte de tempo acho que estamos escrevendo grande html mas realmente atordoado mudança. Ou talvez cometamos um erro. Talvez as coisas simplesmente não são tão boas quanto pensamos, e então podemos ir ao validador, verificar, corrigir quaisquer erros e a melhor qualidade odeia amanhã que podemos produzir, então menos provável é que um navegador ou vai ficar confuso quando ele está olhando para algo que você não entende. 9. Deficiências: neste módulo vai olhar para a gama de questões de acessibilidade que os usuários do seu site podem estar enfrentando, modo que quando se trata de projetá-lo, enfraquecer, vai fazer todo um espectro de condições diferentes e certifique-se de que 're catering para o maior número possível. 10. Olhar: nesta lição vai olhar para o local. O Royal National Institute for Blind People sugere que dois milhões de pessoas no Reino Unido estão vivendo com perda de visão, que é significativo o suficiente para impactar suas vidas diárias. Então não precisa ser totalmente, mas o suficiente para ser classificado como uma deficiência, que é aproximadamente 3% de desconto na população Agora, muitos países, eles terão semelhante a isso. E, de fato, se os países tiverem um sistema de saúde menos desenvolvido, o Reino Unido poderia até ser maior do que isso. Então estamos lidando com uma quantidade significativa fora da população, e isso está espalhado por uma ampla gama de condições de gravidade, então alguém poderia ter nenhum local tudo. Nesse caso, normalmente vai usar Screen Reader porque essa é a única opção menos que eles estão usando algum tipo de sistema Braille. Então, normalmente na área de trabalho, isso pode ser mandíbulas ou inveja D A ou voz sobre. Se você estiver em um Mac e também em um dispositivo móvel, responda no Android de ambos. Assim, o no iPhone também eram muito populares, especialmente porque os móveis tendem a vir embutidos no software então, bem como ser totalmente cego. Também podemos ter avistado pessoas, então elas só têm visão prejudicada e são baixas. O tempo também usar leitores de tela porque ele apenas torna mais fácil. Mas eles também podem usar coisas como cigana ampliando para tornar as coisas maiores. É muito para construir em tills lá. Há a função de zoom do navegador, e você pode obter software de acessibilidade de terceiros, o que os ajuda. Ou eles podem simplesmente lutar. Eu tenho amigos que têm visão parcial sobre o Santo Do é apenas enfiar o rosto bem ao lado da tela para que eles possam vê-lo. Então vale a pena considerar que também, que as pessoas tentam lutar por isso. E assim queremos torná-lo o mais fácil possível para eles. E isso poderia ser criado por uma grande variedade de condições e resultará alguns dos efeitos disso mais tarde nesta lição. Outra coisa também, realmente considerar sua daltonismo. Isso afeta cerca de 5% das pessoas que querem 20 sobre o quanto daltonismo que é varia. Mas tende a ser que as pessoas têm sensores específicos em seus olhos ausentes , então eles tendem a ser afetados por uma combinação específica de cores, a mais comum das quais é verde vermelho. Mas há muitos exemplos diferentes, e há uma grande diferença de gênero no Colorblind disse Bem, homens muito mais propensos a lutar com daltonismo e mulheres. E também pode ser Grady. Então, quão daltônico você é é também está em uma escala. Então, mesmo se você tem daltonismo verde vermelho, pode ser muito grave, e você poderia ser incapaz de ainda diferença quando os dois ou ele poderia não ser, não grave na maior parte do tempo. Se você tornar as coisas bastante distintas, as pessoas serão capazes de diferenciá-las é uma grande variedade lá. Alguns dos efeitos que encontramos é, obviamente, apenas não ser capaz de ver tudo. Mas também as coisas podem estar embaçadas. Ou talvez as pessoas tenham pontos cegos que seja bastante comum. E eles podem até não estar cientes desses pontos cegos porque, a menos que , infelizmente, você esteja muito focado neles. É muito fácil esquecer porque nossas piadas de visão compensam. Então, por exemplo, todos nós temos um ponto cego em cada um de nossos olhos onde o nervo óptico sai. A parte de trás do globo ocular. Não há sensores lá para detectar a luz e disse que o local de reserva. Se você fechar um olho, você pode. Isto é apenas um ponto no fim. Eu simplesmente não podemos ver nada, mas nunca vemos isso porque nossa visão, nosso cérebro, apenas complica perfeitamente Ring preenche o resto do mundo porque o que estamos dizendo não é imagens diretas enquanto nosso cérebro pensa está lá com base na informação que está recebendo dos meus olhos. Agora somos sentidos. Então o que isso significa é que todos temos pontos cegos e não os notamos. Então, mesmo que você tenha uma condição que cria pontos cegos maiores e mais significativos, chances de que seu cérebro preencha as coisas em pontos tão cegos realmente importantes. Além disso, as pessoas podem apenas ver um relatório uma pequena parte da tela de uma só vez. Se eles estão ampliando ou eles realmente têm que pressionar o rosto contra a tela, então eles não vão ser capazes de lidar com a coisa toda de uma vez. Portanto, queremos considerar isso e como as coisas se escalam em nossos projetos. Além disso, as pessoas podem não ser capazes de distinguir a cor, então queremos ter certeza de que, quando média, ela está usando a cor como um indicador 11. Audição: nesta lição, vamos falar sobre audição. A audição nunca é condição graduada. Algumas pessoas não têm nenhuma audição. Algumas pessoas têm audição limitada. Em outra condição comum é o zumbido, onde você tem ah, som constantemente indo em seus ouvidos, tipicamente tocando ou zumbindo algo assim, que novamente torna mais difícil ouvir. Andi pode ser bastante desconfortável para viver com em termos do Teoh Web design relevante. É uma lista bem curta, porque aqui estamos falando de conteúdo de áudio e vídeo no contanto que você fatoração lá. Essa é a principal área de preocupação, e olhamos para como fazer isso mais tarde neste curso. 12. Motor: nesta lição analisará as deficiências motoras, de modo que alguns usuários têm dificuldade em controlar o mouse. Eles podem usar uma ala de chaves para nunca obter em vez disso, ou eles podem apenas usar o mouse, mas acham realmente difícil de clicar nas coisas, então eles podem ter duas mãos que podem ter uma mão em que podem não ter nenhuma mão. Eles podem usar uma variedade de dispositivos de acessibilidade diferentes. Algumas pessoas têm que controlar o computador com a boca porque eles não têm corrupção até o final menos grave, onde talvez alguém tenha algo como a doença de Parkinson , onde eles realmente lutam para mover suas bocas para onde eles queriam. Theo e clicar em alvos pequenos é realmente difícil, ou eles podem estar usando o controle de voz para controlar o computador. Assim, os efeitos significam que se você, por exemplo, tiver muitos links ou botões juntos, alguns usuários podem realmente ter dificuldades. Ou se você tem uma lista enorme de links e alguém está usando o teclado, percorra a página, então isso vai ser muito irritante porque vai levar muito tempo para passar por essa lista. Portanto, queremos levar em consideração o teclado, a navegação e a navegação pela página com algo mais do que um mouse . Queremos levar em conta o tamanho de qualquer um dos nossos alvos de toque ou links, e veremos isso no módulo de design inclusivo. 13. Cognitive: nesta lição analisará as restrições cognitivas. Não, todas as deficiências são físicas, e as pessoas também podem ter dificuldades de aprendizagem e problemas específicos com sua memória. atenção deles. Pode estar no espectro autista. Eles podem ter dislexia ou distração aqui, que é o equivalente matemático da dislexia. Então, há todas as coisas. Mesmo que os corpos físicos das pessoas funcionem bem, eles ainda podem ter problemas em usar as coisas que projetamos. E é importante que, para sermos inclusivos, consideremos aqueles em uma onda, e normalmente isso envolve simplificá-lo. Portanto, queremos ter certeza de que usamos linguagem simples e acessível em. Queremos apresentar isso de uma forma muito legível. Então isso significa olhar para coisas como espaçamento entre linhas e certificar-se com partes de informações . Então não estamos dando às pessoas parágrafos enormes e ilegíveis. Queremos que o projetado seja claro sobre o apelo à ação, que é o que você quer que eles façam. Clicar em um botão, preencher formulários, ler o artigo, o que quer que seja é realmente claro. Queremos uma aparência consistente, portanto, se tivermos um esquema de cores em um determinado botão para que a ação seja feita em seguida, queremos garantir que isso seja consistente em todo o site para que seja realmente óbvio para alguém tentando interagir com nosso Designs, o que está acontecendo. E, claro, todas essas coisas apenas tornam nosso site melhor para todos. Essa é a coisa boa sobre o design inclusivo é que quando você o torna melhor para alguém que está lutando, você também o torna melhor para pessoas que não têm quaisquer deficiências físicas ou cognitivas, e você tem taxas de conversão provavelmente serão maior para todos, não apenas para as pessoas. Temos problemas específicos que você está tentando resolver. 14. Design inclusivo: neste módulo vai ficar técnico, vai para o odeia ele fora, e olhar para como podemos estruturar nossos sites para torná-los acessíveis a todos, ficando direto para os detalhes e trabalhar no conteúdo da Web. As diretrizes de acessibilidade nos oferecem muitas orientações sobre como fazer isso e qual nível de conformidade você deseja alcançar depende de você. A maioria das empresas comerciais tendem a ir para Double A, que é um grande nível de acessibilidade e ainda lhe dá a flexibilidade para fazer isso. Bom trabalho de design divertido Se você quer ser extra rigoroso, por exemplo, você é uma agência do governo, foram um mandato para alcançar todos na população e não muito preocupado em se divertir. Sparky projetos com base comercial. Então você pode ir para o Triplo A, que é um padrão extra difícil de alcançar. Para desfrutar. Seus sites são super acessíveis À medida que vamos, frutas vão tocar sobre estes e vamos para cada área fora foram projetados para ver o que podemos fazer. O que é a melhor prática 15. HTML semântica: nesta lição vai olhar para semântica. Html. Felizmente, você já está familiarizado com o termo, mas se não, então ele se refere ao significado off tags. Então, em “Odeia Amanhã Quatro “nós tendemos a embrulhar tudo em DIV. Em tags span e thes quase não têm significado de. E então, por padrão, um está bloqueando. Quando há um elemento em linha, eles não nos dizem nada sobre Page. Então, quando um computador está processando o HTML, ele não sabe o que algo é quando é um span devora e, em seguida, odeia ele ou cinco vieram junto para resolver este problema e responder tanques mais significativos. Então agora temos coisas como o tanque de cabeçalho e rodapé que temos no artigo principal Tanque o lado. Tag para ganhar. Para obter a barra lateral, temos figuras para colocar gráficos e gráficos. Temos cavaleiros para colocar navegação em Andi. Agora, se você olhar para um escrito pago e esperar para os meus cinco, apenas faz muito mais sentido porque é muito fácil para um computador ver Qual é o cabeçalho? Qual é a navegação? Onde estão os artigos? O que tem no rodapé? E tudo faz muito mais sentido agora isso é realmente importante porque não são apenas navegadores e motores de busca que precisam ser capazes de entender isso. Mas quando um leitor de tela vem olhar para fora o que está em uma página de 60 milhas, ele precisa entender a página para que ele possa ajudar o usuário. Agora esquece. Se um usuário quer chegar à barra de menus para a navegação, onde está isso se ele quer passar por todos os links na cabeça e chegar ao conteúdo principal ? Como? É fácil para alguém que está apenas visualmente animado para fazer isso porque eles podem obter rolagem para baixo. Mas se o seu leitor de tela quer fazer isso, então como você consegue aquele lobo trabalhando? Usamos tags semânticas. Podemos obter a maior parte disso gratuitamente porque nós instantaneamente dizer ao leitor de tela como a página funciona enquanto passamos. O resto deste módulo analisará isso com mais profundidade, mas há tanta informação semântica disponível se usarmos os cinco tanques vegetais, mas também se usarmos o material que foi construído para odiá-lo desde os primeiros dias. Então, por exemplo, quando estamos usando formulários, certificando-se de que as entradas dos tipos corretos, certificando-se de que eles têm rótulos neles. Todas as coisas como esta que dizem a um computador que diz ao navegador como a página funciona super útil para leitores de tela porque ajudou-os a trabalhar e apresentar as informações de uma maneira realmente coerente sobre os laboratórios usa para navegar em nosso projeta muito mais fácil. 16. Texto: nesta lição olhará para fora o texto Yusof em designs, e uma das grandes preocupações aqui são cabeçalhos usando CSS. Podemos fazer com que os títulos pareçam o que quisermos, para que possamos ter um calor muito pequeno. Podemos ter um seis de ódio que é enorme e domina a página do DSO. O que queremos fazer é usar a tag correta para o significado semântico e tudo o resto é feito via CSS. Portanto, não queremos pensar em Tags está representando uma aparência ou estilo específico. Coloque as tags certas em para fazer sentido semântico para a página em. Então vamos apenas estilizá-los como quisermos. Então o que isso significa é que cada caçador furtivo tem usado e piada desgaste ódio. Uma tag é o seu título para a página. Então isso é uma coisa que você lê, e ele diz o que toda esta página é sobre abaixo, que podemos ter vários odeios para tags. Então, se houver vários tópicos importantes na página, cada um pode ter sua própria idade para e, em seguida, abaixo disso, teríamos cada um fora da tag de baixo para baixo. Então, se você tem subseção dentro deles, é quando você vai começar a usar ódio livre e ódio quatro e tudo dentro dele deve ser hierárquico em. Nós não pulamos nada, então nós não queremos ir para o meu ódio para um grande quatro. Porque se isso aconteceu e você estava usando um leitor de tela rolando pelos títulos , você pode pensar que você bagunçou a árvore de ódio. Ou quando ler, indo de nível para algo, você vai pensar que perdeu o ódio livre. E, na verdade, se não fosse apenas no design que super confuso tão tipicamente você poderia ter dito, Odeio um do topo da página. E então, se você tem Siris de artigos que seriam dois de ódio ou se é uma página de artigo em si, o ódio pode ser o nome do artigo e, em seguida, o corpo abaixo dele. E se você tem coisas como barras laterais ou rodapés que também precisam ir, então seu melhor fazer aqueles que eu odeio a uma ondulação e, em seguida, quaisquer subtítulos abaixo que essa parte de repartição do que ensina para, em seguida, ir para baixo para o ódio livre no engate. Quatro layout de texto também é importante, então nós queremos ter esse forte contraste de cor na lição sobre cor vai falar sobre o que , exatamente é um nível acessível de contraste. Mas, como falamos anteriormente, você pode usar ferramentas para medir o contraste e garantir que seja suficiente. Queremos texto agradável e grande para torná-lo legível. Queremos usar tags de parágrafo novamente, fazendo com que o HMR semântico funcione para frente. E em vez das marcas de quebra de linha, queremos tudo. Este parágrafo quer estar dentro de um tanque parágrafo. Também queremos considerar o espaçamento entre linhas e as opções de fonte. Então, tradicionalmente, fontes serif, aquelas com pequenas decorações, têm suas mais fáceis de ler para a maioria das pessoas. Mas não há muito nele. E há algumas evidências de que se você tem condições como autismo, na verdade é mais difícil de ler. Então fontes San Serif são uma ótima escolha e talvez salvar os telefones Sarah quatro títulos. Vamos olhar para um exemplo fora de uma parte traseira bem disposta de texto versus e não tão bem disposta Livro de tributados. Então aqui temos alguns exemplos em que à esquerda, tudo é colocado em um parágrafo gigante não teria muito espaçamento entre eles à direita , temos dois parágrafos em abundância de espaçamento entre linhas. Penso que a maioria de nós concordaria que o texto à direita é mais legível do que o tributado à esquerda e, mais uma vez, apenas fazendo estas melhorias ajudaram a todos. É um design inclusivo. Não é apenas para condições específicas, mas na verdade nosso site fica melhor para todos em que é isso que queremos. 17. Links: nesta lição vai olhar para os links. Então, uma das coisas que queremos fazer é garantir que usamos os hiperlinks e botões de tag para o propósito pretendido é assim que um link deve levá-lo para uma página da Web diferente em um boletim deve fazer algum tipo de funcionalidade. Então queremos evitar essa ideia de onde está pegando um link tag e sequestro. Foi algum tipo de evento no clique para fazer algo quando na verdade ele nunca foi destinado a ser um link. Então nós temos o A, Tag disse envia usuários para outras páginas da Web. Então não queremos esses Buehrle falsos onde colocamos um pouco de haxixe lá, então sequestrá-lo com o clique. Nesses casos, queremos ter certeza de que estamos usando um botão. Da mesma forma, o caminho ao redor Ah, botão não deve nos levar para uma página da Web diferente. Ele deve estar executando algum tipo de ação sobre se precisamos levar o usado para uma página da Web diferente do que deveríamos estar usando um link. Em termos de estilo estes, podemos usar CSS para fazê-los olhar como quisermos. Então o que isso significa é que você pode fazer uma tag de link parecer um botão que você pode fazer um botão parecer um link, então pense semanticamente primeiro. O que ele está fazendo e usar o tanque apropriado? E então você pode estilo de poder que você quer agora em termos de fazer os links. Como discutimos anteriormente, nunca devemos usar a cor para indicar algo. Então queremos outro indicador, que é por isso que tradicionalmente, links têm feijão em azul e sublinhado para indicar lá um link. Mas há outras coisas que podemos fazer, mas é isso. Boa estratégia, porque é tradicionalmente o que tem sido usado em odeia Jemele. Andi é o que continua a ser usado por muitos sites, isso é muito compreensível se pudermos fazer links visitados parecerem ligeiramente diferentes em um leitor de tela. Eles tendem a ser lido foi visitado link de qualquer maneira, então você pode apenas querer fornecer essas informações para usuários visualmente avistados. Então lá, pelo menos obter essa quantidade de informação é um leitor de tela de brancos. Um leitor de tela meio que obtém uma vantagem. Talvez seja bom que nem sempre estejam atrasados, e também queremos pensar no texto descritivo. Então, queremos evitar isso. Clique aqui para ver um artigo dizendo O clique aqui é o link. Dificuldade com isso está em uma seção readapt leitor de tela de cada vez, então vamos apenas dizer Link. Clique aqui, e isso realmente não lhe dá nenhuma informação sobre o que o link é sobre. Então, se você pensa, imagine quando o leitor de tela lê o imposto que é um Lincoln, ele diz Link. E então ele lê. O tributado que tributado deve dizer ao usuário andar. A ligação é por causa de aliados. Tudo o que temos é um monte de coisas que dizem Clique aqui, clique aqui. Clique aqui em. Isso não faz sentido para fins Seo, porque não diz aos motores de busca sobre o que é o link. No mesmo problema, leitores de tela. Eles podem ver que é um link, mas eles realmente não sabem sobre o que é o link. Então, certificar-se de que temos taxados descritivos em nossos links adiciona um monte de contexto 18. Cor: nesta lição analisará o papel que a cor desempenha em nosso design. Em uma das coisas mais importantes é certificar-se de que há contraste suficiente entre o primeiro plano no fundo, porque se colocarmos texto em, digamos, fundo branco, imposto preto, super fácil de ler. Mas grande parte do tempo para popular colocar, digamos, impostos sobre imagens em não há sempre tanto contraste em ataques MX realmente difíceis de ler. Assim, em termos de orientações de acessibilidade que eram padrões claros de contraste que deveriam ser alcançados para tornar esse texto legível. Então, uma conformidade, que é o que a maioria das empresas comerciais estaria se esforçando para texto normal quer ser 4,5 a 1 em grandes ataques porque é fácil de ler, pode ter um pouco menos contraste. É tão bom estar livre para um. Se você é, digamos, um departamento do governo ou alguém que tem padrões de acessibilidade realmente altos , você provavelmente quer dar a conformidade Triple A, que significa que seu imposto normal quer ter um contraste de 7 para 1 em seu grande imposto quer ter um contraste de 4,5 para 1. Como você sabe quanto contraste é? Bem, você pode usar uma das muitas ferramentas de contraste. Então, por exemplo, este é fornecido pelo Web Aim, e você pega os valores hexadecimais de suas cores e você os insere, e ele vai dizer qual é a sua taxa de contraste. Há também uma variedade de ferramentas acima. Tal plugins navegador que vai fazer isso para você, talvez até mesmo seção conta-gotas em dizer-lhe o que o contraste está lá para torná-lo muito mais fácil . O cedro tem que retirar os valores de cor e levado para uma ferramenta independente. Neste exemplo, usamos, ah, fundo branco, fundo branco, algum texto azul agradável, e isso cria um grande contraste de cores adequado para tudo. Mas digamos, se estivéssemos fazendo algum tipo de imposto vermelho do que se não fosse forte o suficiente, diga novamente aqui que usamos um vermelho médio em um fundo branco que não necessariamente atingiria as diretrizes de acessibilidade, porque se você olhar, digamos, o texto normal lá, é muito mais difícil de ler no texto preto. Agora, quando nos movemos para texto grande, em seguida, é um pouco mais fácil de ler que, em seguida, atingiu o dobro A porque você não precisa tanto contraste sobre o grande tributado. Mas ainda assim não alcançaria os padrões estabelecidos viagem porque você realmente precisa de forte contraste para torná-lo fácil de ler. Eu odeio apenas olhar para o exemplo e comparar isso para dizer, o título do slide. Há uma diferença clara em como eles são fáceis de ler. A outra coisa a considerar é que a cor não deve ser usada como indicador. Então conversamos sobre isso em links. Você não pode simplesmente fazer links de uma cor diferente. Eles querem ter algum indicador sobre porque se o usuário é daltônico do que eles não são necessariamente vai ser capaz de ver. Assim, por exemplo, muitas mensagens de sucesso de tempo estarão em verde e mensagens de erro estarão em vermelho ou botões e links indicarão coisas Bem. Não há nada de errado em ter uma mensagem de sucesso verde e uma mensagem de seta vermelha, porque para a maioria das pessoas, essas cores indicam o caminho feliz em um erro. Mas não podemos apenas usar isso, porque se fizéssemos isso para esses usuários são daltônicos, eles não seriam capazes de dizer o que está acontecendo. Então vamos olhar para um exemplo sobre isso em um site real. Então, no tilintar ansiedade de Leeds para final se o exemplo superior de uma mensagem de erro que não seria muito acessível, porque se você é vermelho, verde daltônico não seria muito acessível, porque se você é vermelho, , você pode não ser capaz de ver esse vermelho. E isso não indicaria necessariamente para você que isso foi um erro. Considerando que no exemplo inferior, nós adicionamos em um pequeno triângulo de erro com o imposto de saída apropriado para que o usuário saiba seu leitor na tela lá em uma propriedade aérea para que quando eles usá-lo, veja isso, eles podem Olhe para a cor. Eles podem olhar para o pequeno ícone que pode olhar para o descritivo, tributado no ícone em todas essas características diferentes. Diga-lhes que é um erro. Então, se eles estão lutando com qualquer uma dessas coisas, que muita informação para lhes dar contexto, deixe-os saber que é um erro. Não estamos apenas confiando que eles tenham uma visão de cor perfeita para serem capazes de resolver isso. Também o torna mais semântico porque assumimos que as pessoas sabem que vermelho significa era. Mas isso pode ser uma coisa cultural, então apenas dar-lhes um grande contexto e há muito significado semântico quanto possível torna mais claro 19. Imagens: nesta lição olhará para o uso de imagens, e isso começa com os atributos de saída. Esta é uma descrição alternativa que dá aos leitores de tela algum contexto sobre o que se trata . Então você coloca sua imagem dentro e, em seguida, na etiqueta de saída, você descreve o que está na imagem. Então, se você estiver usando um leitor de tela, você sabe o que está acontecendo. E só precisamos usar os atributos de saída quando há algo para descrever. Então algo é puramente decorativo, então não precisamos lá. O que queremos é uma etiqueta em branco, por exemplo, nestes botões aqui temos um pequeno ícone de boletim informativo para dizer Junte-se à nossa newsletter Nenhum ícone de pessoa para solicitar um retorno de chamada que, óbvio a partir do texto do link. O que está acontecendo lá nos dígitos dos ícones? Decorativo para adicionar mais significado. Então, neste caso, vez de descrever a imagem porque isso não daria qualquer valor a alguém usando um leitor de tela, nós ainda incluímos o atributo out. Mas seria apenas em branco e alguém para incluí-lo para que uma tela que fizemos saiba que é suposto estar em branco, porque se você apenas deixá-lo de fora, o leitor de tela vai ler na imagem rotulada, enquanto que se nós apenas colocar uma marcação em branco que o leitor de tela sabe simplesmente ignorar isso porque é decorativo. Andi, a menos que esteja olhando, está citada. Você não precisa ver nada sobre isso. Também precisamos considerar tributados dentro de imagens. E, em geral, queremos evitar isso, se possível. Como os leitores de tela não podem fazer nada sobre isso e algumas ferramentas de acessibilidade que podem modificar a integridade do texto, por exemplo, eles podem adicionar mais contraste a ele. Ou eles podem mudar bem o tamanho da fonte. Eles realmente não podem fazer nada sobre isso se ele está embutido em uma imagem, então eles não podem trabalhar nela . Mas se você tiver que usá-lo, certifique-se de que ele está em conformidade com a acessibilidade. Padrão isso significa ter um contraste de pelo menos livre, mesmo que seja texto grande. E mesmo se você está apenas indo para o dobro de uma conformidade se você está indo para Triple A ou seu corpo de texto menor regular do que o contraste quer ser ainda maior para dar às pessoas a melhor chance de ser capaz de lê-lo 20. Áudio e vídeo: nesta lição analisará o uso de multimídia dentro de nossos designs. Para a produção de vídeo, um bom lugar para começar é evitar imagens piscando. Isso causa problemas reais. Pessoas. Temos condições como a epilepsia, mas também as coisas são alternativas bem. Para ser honesto, piscando, Andrea é irritante em todos os sentidos. Muitas pessoas acham irritante e, portanto, se pudermos evitá-lo, é um ótimo começo. Considere fazer uma descrição em áudio do que está acontecendo. Faça isso enquanto estiver gravando o vídeo porque é muito difícil voltar e fazê-lo mais tarde , depois foi editar os vídeos. Se você tem que usar taxado. Idealmente, não queremos. Mas onde, onde temos que usá-lo, vamos apenas certificar-nos de que ele está em conformidade com as diretrizes de acessibilidade. Por isso, queremos muito alto contraste na sua. Queremos um texto grande e agradável . Quando, em seguida, tomar isso e colocá-lo em uma página da Web. Queremos usar as tags nativas de possível para dar-lhe esse controle semântico para que o vídeo e as tags de áudio, em vez dos leitores de flash da velha escola e coisas assim, se pudermos muito melhor para dar as flores de controle sobre que, porque novamente, isso é algo que uma ferramenta de acessibilidade pode entrar. Pode inspecionar as esperanças que a TML possa entender o que está acontecendo e dar ao usuário controle sobre isso aflições. Se estamos usando algum sistema proprietário, eles não terão acesso a isso de novo. Evitar auto play é ótimo, as pessoas não acham realmente irritante novamente. Isso não é algo apenas para problemas de acessibilidade específicos, que é um diretrizes de acessibilidade para não usar em última análise, mas também todos os outros vão agradecer porque quase todo mundo encontra auto jogando irritante também. Queremos ter certeza de que esses controles de vídeo estão acessíveis. Então, para implementar controles personalizados do que queremos testar aqueles com navegação por teclado para garantir que eles funcionam bem e que você pode executá-los. Nós dissemos leitor de tela ou sem usar um mouse, apenas para garantir que todos possam chegar a esses controles sempre que possível, nós sempre queremos fornecer uma transcrição do que está acontecendo Andi novamente. Isso é apenas algo que torna melhor para todos, porque mesmo as pessoas sem deficiência muitas vezes preferem ler a transcrição, por exemplo, você está no transporte público. Talvez você tenha esquecido seus fones de ouvido ou você só gosta de ler junto com o vídeo. Conheço muito os cursos da FedEx. Eles colocam o vídeo em um lado da tela, e eles colocam a transcrição do outro lado da tela para que você possa literalmente ouvir o vídeo e ler junto em seu obviamente ótimo se você tem audição e pais. Mas muitas pessoas que ouvem bem gostam de fazer isso também. Então, mais uma vez só torna melhor para todos. Você pode facilmente obter essas transcrições e legendas feitas por provedores para que você possa contratar alguém em um serviço como cinco anos. Você pode ir a serviços de transcrição como Rev no Egito. Dê a eles o seu áudio em seu vídeo e eles combatem com legendas ou transcrição ou o que quer que você queira novamente. Legendas semelhantes a uma transcrição transcrição transforma-se em uma versão escrita e polida. Legendas são as legendas. Ele vai realmente entrar no vídeo novamente. Podemos nos esforçar facilmente. Vá e obtenha estes feitos de ferramentas como rev ou cinco. Também podemos enviar seus vídeos para o YouTube, e agora o YouTube criará automaticamente algumas legendas para você, ou podemos criá-las manualmente usando software como subs Factory, que permitirá ter tido essas legendas em. Então depende do que você está trabalhando. Se você quiser manter as coisas econômicas, então você pode fazer sozinho com sub fábrica. Se você só quer fazer isso, você pode nos levar a algum lugar como reverência. Pague outra pessoa para fazer isso por você. E então nós poderíamos colocar isso no vídeo desse jeito, mesmo que você não possa ouvir, você pode ler junto com o que está acontecendo. 21. Formulários: nesta lição analisará o uso de formulários em nossos designs. É um dos recursos mais poderosos que podemos usar. Aqui está o rótulo. Cada entrada deve ser preparada com o rótulo para que quando uma tela realmente chega a esse campo de formulário, ele possa identificar o que é suposto ser inserido nesse campo lendo o rótulo para o usuário. Então, toda vez que você entrar na entrada, eles devem ser rótulo inapropriado dizendo ao usuário o que estava acontecendo tornou-se prática bastante comum para usar os atributos de espaço reservado em campos também. Isso não é recomendado porque isso é muito melhor servido como uma dica adicional em vez apresentar as mesmas informações de um rótulo. Então, por exemplo, se você tivesse um campo de data de nascimento, você gostaria que o rótulo dissesse data de nascimento. Você não colocaria a data de nascimento no espaço reservado porque isso seria duplicar informações. Em vez disso, você deseja fornecer um oculto, por exemplo, esse formato que você gostaria que a data tanto em colocá-lo em, por exemplo, dados uma barra de como ano. Ela queria nesse formato que seria em coisa apropriada para colocar no titular lugar. Ou você também pode simplesmente evitar o uso de espaços reservados completamente porque eles tendem a ser confusos. Uma das coisas que eu olhei quando eu estava fazendo minha tese de mestrado e guerras de psicologia, exatamente qual o efeito que o espaço reservado estava tendo em grande parte do tempo. Confundiu as pessoas porque embora seja ótimo no navegador, não está claro, especialmente se sua visão não é ótima, como parece que está sendo concluída. A Andi. Então, às vezes, as pessoas simplesmente pulam a entrada todos juntos, pensando que eu já tenho o valor ou não sabia por que esse valor estava lá. Portanto, espaços reservados podem ser úteis para fornecer dicas. Mas pular todos juntos é muitas vezes uma opção melhor. Muitas vezes desativamos botões, especialmente quando queremos que o formulário esteja em um estado válido. Mas novamente, estamos recomendando que você evite desativar. Os livros eram possíveis porque quando você faz isso, ele tira o índice de tabulação. Assim, os índices de guia onde se você estiver pulando pela página pressionando Tamp, ele irá levá-lo para toda a ação. Quais elementos na página, como links, importações, botões e quando você desabilita um botão, ele tira isso. Então, novamente, se você estiver usando um leitor de tela e sua guia através da página, você não vai ver esse botão, e você vai ficar confuso e se perguntar onde ele está. Então, uma opção melhor é permitir que o usuário envie o formulário em um estado válido indo para o botão e clicando nele, então informando o que ele fez de errado sobre o que ele precisa corrigir antes de poder enviá-lo e continuar quando o partes mais difíceis ou de tornar as formas acessíveis é lidar com erros Se possível, então queremos levá-los para a fonte da era. Mas o mais importante é que é realmente claro que o formulário é inválido e, mais importante, o que eles precisam para corrigir quais campos estão quebrados. Então, muito tempo você enviar formulário, e ele apenas diz, por favor preencha todos os campos de formulário. Alguns deles são opcionais, alguns deles e não você não sabe quais são realmente irritantes. Portanto, queremos deixar bem claro para o usuário quais campos estão causando o problema, e o que precisamos corrigir uma ótima maneira é levá-los ao erro, mas também fornecer algumas descrições sobre podemos usar a área descrita por toe identificar uma mensagem de erro para esse campo irá falar um pouco mais sobre a área mais tarde. Mas neste exemplo, por exemplo, fomos entrada de endereço de e-mail. Andi, talvez eles o usassem não importaram nada para isso. Então, estamos informando a MANERA neste caso que o endereço de e-mail já está registrado tecelões. Então temos o rótulo descrevendo qual é a entrada. Mas também temos esta área descrita por que é dizendo-lhes que vestidos de e-mail já registrados e, portanto, que significa mal fazer login ou usar um endereço de e-mail diferente. 22. ARIA: nesta lição vai falar sobre área e vamos começar com uma introdução. Por isso, são toneladas para aplicações acessíveis e ricas da Internet. E isso surgiu porque começamos a construir nesta Web legal para coisas onde estávamos implementando a funcionalidade de estilo de computador desktop em um navegador. Onda Amor. O tempo é realmente difícil de transmitir o significado semântico ao navegador para auxiliar a tecnologia. E assim o W Free See foi embora no Kim da área incorporada em que html sobre ele nos permite fazer toda essa funcionalidade legal que estavam construindo em Essas coisas são exatamente onde páginas suas aplicações, para transmitir esse significado para o tecnologia assistiva no navegador para que todos possam descobrir o que está acontecendo. Nossa primeira parada lembrou da rede elétrica usando HTML semântico. Então, quando podemos usar isso, fazemos Onda. Nós apenas tipo de caiu de volta para a área quando nós apenas incapaz de comunicar o significado que queremos em baunilha odeia e-mail, mas há momentos em que você pode querer usá-lo, mas de forma mais proativa. Por exemplo, nos formulários menos não falamos sobre como não queremos desativar o botão de envio, por exemplo, porque isso tirará do índice de tabulação. Agora é bom fazer o olhar inferior desativado, possamos usar CSS para estilizá-lo para que ele fique ótimo e tenha um pequeno machado no cursor. Alguém paira sobre ele, mas na verdade não queremos usar um desativado após vista porque isso o torna invisível para a tecnologia assistiva. Assim, da mesma forma que podemos apenas aproveitar o CSS e fazer parecer que ele está desativado , nós também poderíamos usar algo como os atributos de área desabilitada para dizer aos leitores de tela o que eles veriam como uma pessoa excitada visual veria. Ele veria um ótimo botão de saída da mesma forma que o leitor de tela ainda seria capaz tocar nele. Mas veria esta área desativada. Um dos atributos que podemos usar papéis Harris. Andi Rolls dizer a tecnologia assistiva sobre o tipo de nomes de elementos. Então, por exemplo, se você estiver plantando um menu personalizado, você poderia dar um rolo de navegação Bem, por exemplo, por exemplo, se você está estilizando a partir de caixas de seleção em, a única maneira de fazer isso trabalho é com uma série de vãos aninhados bastante comuns. Se você está fazendo formulários extravagantes, então você gostaria de dar o elemento clicável lá um rolo de caixa de seleção para que a tecnologia assistiva entendesse que guerra uma implementação fora de uma caixa de seleção que não está usando o tipo de entrada. Verifique o que o modelo padrão e também rolou texto, que é um pouco controverso porque não é parte fora do padrão oficial ou especificações. Mas muitos navegadores implementaram isso. Então, se você tem algo onde um leitor de tela é por causa de qualquer tag incorporado Aaron que está dividindo em frases muito estranhas, você poderia colocar texto rolando no elemento pai na maior parte do tempo que iria obter a tela para lê-lo. Agora, não, todos acessem Billy Consultant assim. Muitas pessoas gostam de manter o padrão, e eu posso entender completamente que eu sou um pouco pragmático, e eu quero a melhor experiência possível para alguém usando um leitor de tela, então eu não me importo usá-lo. Acho que às vezes pode resolver o problema. Essa é uma decisão para você e o grande problema que você está encontrando. O que não precisamos é de rolamentos redundantes, então Por exemplo, se você estiver usando o now of tag para indicar navegação, então você não precisa adicionar a função de navegação porque isso já está implícito pela NAFTA AG e pelo navegá-lo já pode descobrir. Só se fizermos um substituto usando tanques diferentes é que precisamos ter esse significado extra. Um bom exemplo disso é do W três C, onde eles estão construindo algumas abas. Eles têm esta lista de abas, que são os cabeçalhos superiores, e dentro que eles têm botões, cada um que tinha votos um rolo de tabulação. E está usando a área selecionada para indicar se esse botão está selecionado ou não. Sobre também o que ele controla estão abaixo. Nós temos as abas, que fizeram dibs porque não há etiqueta de tamp. Eles irão rótulos apropriados sobre. Eles estão usando um índice de tabulação de zero. Então, normalmente, se usássemos um número positivo que diria ao navegador certo, este deve ser o quinto elemento que damos a ele. Tabin parece de cinco quando eles estão caindo através dele para você zero. Isso coloca no índice de tabulação, mas cai no fluxo normal da página para que os Browns tenham descoberto, e também há menos um, que significa que normalmente não estaria no índice banheira. Mas podemos atribuir manualmente o foco usando JavaScript como o que está acontecendo lá com o índice TAM. Então aqui podemos ver um monte de bons exemplos ou onde você usaria todas as tags de área e como usá-las. Nós também usamos rótulos Teoh Adicionar contexto. Então, por exemplo, se você estiver fazendo um pequeno ícone de hambúrguer, que pode ser óbvio para um usuário avistado, como comunicaremos isso sem terminar? Poderíamos acrescentar impostos escondidos. Mas também podemos usar o rótulo da área e apenas dizer que isso está no botão do menu. E então temos uma área escondida, que é onde queremos remover qualquer coisa do dom que seja puramente apresentacional. Então, qualquer coisa importante que o navegador precise saber, nós não esconderíamos. Mas, por exemplo, neste exemplo que eu tenho aqui, nós temos um artigo e é apenas uma imagem em um título, e então você clica na história principal. Bem, a imagem salva exatamente a mesma coisa é o título. Então, se você estava rolando pela página em, você estava usando um leitor de tela que não conseguia ver. Você não precisa saber que essa imagem estava lá porque ela se projeta, comunica a mesma informação que estava dirigindo. Você não obtém mais valor se você não consegue ver a imagem em si. E então nós poderíamos apenas esconder isso, embora neste caso seja importante notar que nós poderíamos apenas usar um tanque vazio. Mas você também pode envolver essa imagem em uma tag de link, caso em que você pode simplesmente ocultar o link inteiro porque novamente você obteve as informações e ir abaixo dela em termos fora de formulários. Então queremos usar o Teoh. Rótulos rotulados por estabelece um link entre um elemento e rótulos. Então, se você não estiver usando apenas os rótulos padrão, você pode fazer a mesma coisa pela área rotulada por prop. E então temos um monte de funcionalidades, por exemplo, para recriar caixas de seleção que falamos. Você pode estar usando um span e você não pode coisas como área marcada para indicá-lo no Aria desativado quando você está fazendo os fundos que você não deseja retirar a guia em seguida. Mas você quer indicar aos usuários que não deve enviar este formulário um momento porque ele está quebrado. Então, vamos também olhar para um exemplo de como poderíamos usar isso. Então aqui temos um pequeno que é uma caixa de seleção. Vamos indicar que esta caixa de seleção sobre a assinatura de um boletim informativo. Então vamos usar a área rotulada por e dar-lhe o I D do elemento que queremos. Mas também, digamos que queremos adicionar um pouco mais de informação, digamos algum pequeno texto sob ele. Então podemos usar a área descrita por no caminho para pensar em dois. É a área rotulada por Ele será lido logo no início quando ele está explicando o que a entrada é sobre e realmente descrito por vem mais tarde, ele economiza até o fim. É tipo uma informação extra. Não é tão importante que possamos esperar mais tarde que quer ir para a área descrita por Finalmente, temos regiões vivas. Então, apaixonados, Web dois estavam fazendo atualizações dinâmicas para a página. Andi, se estás a passar pela página, não estás a olhar para a página. Você está usando um leitor de tela. Você não vai necessariamente saber que algum conteúdo no topo foi atualizado. Se você está mais abaixo na página, então para dizer ao usuário o que está acontecendo aqui, podemos usar Ari vivo nisso, diz ao leitor de tela para ler fora. Qualquer mudança está acontecendo. Há dois tipos. Então, há a configuração educada, o que significa que um leitor de tela irá ler quando tiver tempo. Então, se ele está lendo através de outra coisa, ele vai ler isso primeiro e então talvez anunciá-lo mais tarde. Assertivo significa que você deve anunciar essas mudanças assim que acontecem agora para Evers e Alertas, então já temos um atalho para viver região que podemos usar e pedir-lhe em um papel de alerta e que irá dizer ao leitor de tela para ler o alerta direto também.