Oi, bem-vindo de volta.
Nesta palestra vamos falar sobre navegação acessível.
Eu sei que este curso é principalmente sobre CSS, mas eu sempre gosto de aparecer e
lembrá-lo das diferentes coisas que você precisa
pensar enquanto você está estilizando suas páginas.
A navegação é realmente o aspecto mais crítico da acessibilidade.
Se as pessoas não conseguem navegar pela sua página e chegar ao conteúdo que realmente precisam acessar
, então você realmente desperdiçou seu tempo e parte do seu.
Então, os usuários citados têm esse tipo de coisas testadas e verdadeiras que eles procuram
em uma página.
Eles sabem o que é uma caixa de busca.
Eles sabem para onde a bandeira costuma ir.
Onde está a navegação principal.
E não é surpreendente para eles que muitas vezes o conteúdo principal,
no que chamamos de conteúdo bem, está escondido mais baixo em uma página.
E sabemos disso porque podemos vê-lo assim que abrimos o navegador.
Mas para usuários cegos ou com visão baixa, eles realmente precisam confiar
na codificação adequada da página, a fim de chegar ao que eles querem chegar.
E não apenas a codificação adequada, mas
há um monte de questões estilísticas que você precisa pensar quando você está fazendo isso.
Então, e se você não pode ver?
O primeiro lugar onde você obtém informações é a partir do título da página.
Você quer ter certeza de que seu título é curto, mas
também permite que o usuário saiba como esta página é diferente de outras páginas em seu site.
Em seguida, o posicionamento adequado do cabeçalho, e o tipo dessa hierarquia,
permite que os usuários da tela pulem os diferentes links de navegação e acessem
diretamente o que eles estão procurando.
Eu acho que todos vocês já foram a sites onde parece que você precisa ir a um lugar e
então você segue outro e você segue outro.
E isso pode ser muito irritante e irritante.
Especialmente se é realmente importante que o mouse esteja no lugar certo.
Portanto, queremos ter certeza de que deixamos os leitores de tela e
outros usuários pularem diretamente para onde eles querem ir.
Também queremos pensar nos seus links.
Porque quando você tem os links para os diferentes sites em sua página,
essas descrições são tudo o que as pessoas têm para eles.
Então você não quer usar Click Me, Follow Me Here.
Você deseja fornecer boas informações nessas descrições de links.
Em seguida, precisamos falar sobre a hierarquia adequada, ok?
Cabeçalhos precisam ser aninhados para realmente fornecer estrutura, então
você não deve ter cabeçalhos h3 antes de ter cabeçalhos h2.
Você só deve ter um título h1.
Você não deve pular de h2 para h4.
Em vez disso, você realmente quer seguir um certo tipo de ordem para
que as pessoas possam perceber que há significado por trás de sua página.
Então, aqui está um exemplo.
Eu tenho o meu único título h1, e, em seguida, nesta página,
eu posso imaginar que eu tenho três seções.
Cada uma dessas seções tem um cabeçalho h2 dentro dela.
E na minha primeira seção, pode ser que eu tenha esses certos pontos de bala
ou outros pontos que estou fazendo, onde eles são importantes o suficiente para que eu decidi hey,
eu vou usar h3 para significar que esta é outra subseção dentro da minha seção.
Onde as pessoas se metem em apuros e o que você vê o tempo todo, é que as pessoas decidem,
eu realmente gosto do olhar dessa fonte h2.
Gosto do tamanho do texto.
Eu gosto de como o tipo de fonte que eles usam, então eu vou colocar o
máximo de coisas que eu puder na fonte h2 porque eu gosto do jeito que ele parece.
E eles não estão pensando na semântica.
A mesma coisa acontece com a fonte h3.
Você vai para a página de alguém e descobrir que não há fontes h2 em tudo.
Em vez disso, são todos os elementos h3, e
eles só fizeram isso porque eles gostam da aparência dessa tag em particular.
Então agora, é aqui que o estilo entra,
é por isso que estou falando sobre isso na aula de estilo.
É que agora você sabe que, em vez disso, se você realmente gosta da aparência desse cabeçalho h3,
em vez de usar a tag, você deve estar estilizando outras tags para replicar esse olhar.
Descubra qual família de fontes eles usam.
Descubra qual o tamanho da fonte.
Apenas repita.
Não use etiquetas só porque gosta da aparência delas.
A outra coisa que você pode pensar para ajudar a navegação,
é essa idéia de títulos fora de página.
É útil fazer quando você quer dar ao usuário leitor de tela algum tipo de
ajuda de navegação, mas você não quer colocá-lo direito na página e
ter seus usuários avistados também têm que lidar com isso o tempo todo.
Então, deixem-me dar-vos um exemplo deste.
Nós vamos usar folhas de estilo para basicamente definir algo fora de página,
nós demos o nome de offpage, e nós dissemos,
hey, eu quero colocar isso em uma posição absoluta fora para a esquerda por -1000px.
Então você vai saber que isso é muito longe.
Tenho aqui a página de Recursos Humanos da Universidade de Michigan.
E se você olhar para cima perto do topo, não há realmente nada
lá, aqui no canto superior.
Mas o que eu vou fazer, é ir em frente e bater no Tab.
E, o que Tab faz, é trazer o próximo elemento em foco.
Então, vá em frente e Tab, ali.
E você pode ver,
que agora, há uma coisa nova aqui que diz Ir para o conteúdo principal.
Se eu clicar nele, eu vou até o fim, e eu fui capaz
de ignorar muitas dessas informações adicionais que eles realmente não precisavam ver.
Era mais apenas marketing e coisas diferentes assim.
Então, esses diferentes links de navegação fora da tela são extremamente úteis para permitir que as pessoas
pulem imediatamente para o que eles querem chegar.
Mas, usando o estilo,
nós o tiramos da página que você só o usa se você realmente quiser.
Uma das coisas que eu queria mencionar é, se você vai fazer títulos fora da página,
não use {display: none} ou {visibility: hidden}.
Estes realmente apenas meio que bagunçam com o código e tornam muito difícil para
leitores de tela ou outras pessoas olhando para o seu código para ver o que está acontecendo.
No início da palestra mencionei que o texto de link significativo é
muito importante para a
acessibilidade porque os leitores de tela podem encontrar e listar todos os links.
Agora, o que você pode não perceber é que a maneira como esses links são exibidos
pode não estar da maneira que você espera.
Então, eles podem estar fora de contexto.
Você pode apenas ser capaz de acessá-los via tabbing ou
eles podem ser apresentados em uma lista.
Então, você realmente quer evitar usar coisas como clique aqui, leia isso e muito mais.
A razão
é que talvez o único contexto que algumas pessoas têm para ir para os links.
Além disso, não use o URL como uma descrição do link.
É muito comum ir a um site e você pode ver clique aqui, e
eles têm a URL inteira, www.umich.edu/etc.
Pode parecer muito descritivo, mas se você tiver que ouvir a descrição
, pode ser muito confuso.
Em vez disso, a menos que você tenha um URL muito curto, vá em frente e
use algum tipo de descrição textual.
Então, apenas para rever, vamos pensar sobre o que aprendemos hoje.
Quando você terminar de fazer sua página, não é suficiente para que ela fique bem.
Você precisa pensar sobre como é fácil navegar na sua página.
Pense no que aconteceria se as cores não estivessem lá, ou
se alguém pudesse apenas navegar até sua página com um mouse.
Então eu quero que você realmente rapidamente o que eu estou falando aqui.
Aqui está uma página antiga minha, e, no fundo, tenho a Universidade de Michigan.
Só quero mostrar o que acontece quando eu tirar o estilo.
A página agora, você não pode nem ver mais o texto.
Estas são as pequenas coisas que você nunca notaria a
menos que você verificou sua página com e sem estilo.
Então, ao planejar sua página, certifique-se de que está planejando para todos.
Faça grande uso de cabeçalhos.
Faça grande uso do texto do link.
E certifique-se de que está a fornecer às pessoas as ferramentas de que necessitam para navegar na sua página
com êxito.
Obrigado.