Entendendo o design de UX/UI para acessibilidade: crie uma página da web acessível! | Michelle Chin | Skillshare
Menu
Pesquisar

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Entendendo o design de UX/UI para acessibilidade: crie uma página da web acessível!

teacher avatar Michelle Chin, UX Designer, Founder - exploreUX

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      Introdução

      1:44

    • 2.

      Noções básicas de acessibilidade

      5:04

    • 3.

      Projeto do curso

      0:58

    • 4.

      Navegando com Skill de habilidades de motor

      8:37

    • 5.

      Navegando com impactos de visão

      14:03

    • 6.

      Compreensão de elementos visuais com a blindagem de cores

      5:01

    • 7.

      Compreensão de elementos visuais sem visão

      5:34

    • 8.

      Entidade com texto com impactes cognitivos

      3:27

    • 9.

      Compreensão do áudio e vídeo

      4:33

    • 10.

      Considerações finais

      0:49

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

380

Estudantes

--

Sobre este curso

Às vezes você está presente nos termos como "acessibilidade" ou um design acessível você pode se sentir intimidados. Você pode ter presente o Google de seu problema, mas encontrou que os recursos foram complicados ou difícil de ser difícil de se começar

Neste curso, vamos descrever os diferentes aspectos UX/UI precisam considerar ao criar na moda para criar para acessibilidade. Por meio de atividades e exemplos, você vai ter a sensação dos diferentes tipos de comprometimento e tecnologia de assistiva (AT) para ajudar as pessoas à navegação por sites e aplicativos. Vamos passar sobre quais ferramentas e técnicas você pode usar para ajudar a fazer seus designs ser mais acessível. Este curso é ótimo para quem estão começando no design Ux /UI e os designers que querem saber mais sobre a acessibilidade.

Para o projeto das turmas, você vai poder praticar algumas das ferramentas e usar as técnicas para criar em mente.

Ao final deste curso, você vai poder para:

  • Explique diferentes tipos de comprometimento e como ele afeta as habilidades para navegar e compreender um site ou aplicativo
  • Explique como as pessoas podem usar tecnologia para ajudar a navegar e entender um site ou aplicativo
  • Use práticas e ferramentas para criar experiências de usuários acessíveis

Antes que você se sinta acessível e vai se sentir intimidante e vai fazer parte do seu processo natural!

Conheça seu professor

Teacher Profile Image

Michelle Chin

UX Designer, Founder - exploreUX

Professor

Hi everyone! Thanks for checking out my profile. I’m a user experience (UX) designer currently in Raleigh, North Carolina. I wandered into graphic design and, through a friend, was introduced to “Don’t Make Me Think” by Steve Krug. That book opened my eyes to the whole (new to me) world of usability! I fell in love with the idea and decided, “Yes, this is it! It’s what I want to do!”

 

Later, I earned a Masters from the University of Baltimore in Interaction Design and Information Architecture (a fancy way of saying “UX design”). Soon after, I started as a UXer working at agencies and in-house design teams for enterprise apps. 

 

I absolutely love UX and enjoy sharing ideas and my passion wi... Visualizar o perfil completo

Level: Beginner

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Introdução: Oi. Bem-vindo a entender você X você eu projetei para acessibilidade, design e página da Web acessível. Você pode estar verificando esta classe porque você tem um interesse em acessibilidade onde você precisa aprender sobre design acessível, mas não tem certeza por onde começar. Bem, você veio ao lugar certo. Meu nome é o shell shin, e eu sou um designer de experiência de usuário, e eu tenho mais de 15 anos de experiência trabalhando com acessibilidade. Na verdade, sou originalmente da área de Washington D.C. D.C , onde muitos dos produtos em que trabalhei eram relacionados com o governo e tinham que ser acessíveis. Eu postei workshops sobre acessibilidade e falei com colegas sobre isso. Em geral, adoro ajudar as pessoas a aprenderem a ser mais inclusivas com seus designs. Nesta aula, vou analisar os diferentes aspectos da experiência de um usuário que os designers precisam considerar para acessibilidade. Você terá uma noção dos diferentes tipos de deficiências e dos tipos de tecnologia do sistema para ajudar as pessoas com essas deficiências, você verá quais ferramentas e técnicas você pode usar para tornar seus projetos mais acessíveis e, por último, você aprenderá as melhores práticas para criar designs acessíveis para esta classe. Você deve ter pelo menos básico você XY y habilidades de design Web. No entanto, você poderia ser um iniciante para uma compreensão profissional experiente. A acessibilidade é uma habilidade importante para todos. Para o projeto. Sem design. Uma página Web com acessibilidade em mente. Encorajo-o a trabalhar em seu projeto juntamente com as lições. Isso lhe dará a chance de experimentar as ferramentas em primeira mão. Eu também encorajo que você compartilhe seu progresso com os outros alunos e faça perguntas ao longo do caminho. Muitas vezes você aprende muito mais e confinado inspiração e outras soluções de pessoas. Estou ansioso para ver o seu progresso e responder às suas perguntas. Você está pronto para começar? Vamos começar. 2. Noções básicas de acessibilidade: antes de começarmos a projetar para acessibilidade, vou falar um pouco sobre os conceitos básicos da acessibilidade. E nesta lição, vou rever o que é acessibilidade, por que é importante e os diferentes tipos de deficiências e como você tem o designer U X Y pode abordar o design para acessibilidade. acessibilidade é o design de produtos como sites e APS, para que eles sejam utilizáveis independentemente das habilidades de uma pessoa. Portanto, no seu núcleo, trata-se realmente de garantir que seu site ou APP seja projetado para ser inclusivo. De acordo com o Relatório Mundial sobre Deficiência da Organização Mundial de Saúde, em 2011 mais de um bilhão de pessoas no mundo têm alguma forma de deficiência. Isso é cerca de 15% da população mundial, ou três vezes a população inteira dos Estados Unidos. O relatório afirma ainda que entre 110 e 190 milhões de pessoas têm dificuldades muito significativas para o funcionamento. Se projetamos com acessibilidade em mente, muitas pessoas podem se beneficiar de nossos sites e produtos. Existem três tipos de deficiências permanentes, que é uma deficiência que permanece indefinidamente, e alguns exemplos disso incluem cegueira, um membro ausente, lesão cerebral traumática ou artrite temporário, que é uma deficiência que é de curta duração. Alguns exemplos incluem Ah, braço quebrado, uma lesão na mão ou deficiências de cirurgias ou tratamentos médicos. E por último, há situacional, que é uma deficiência que é causada com base na situação em que você está. E alguns desses exemplos podem incluir uma barra barulhenta, e você não consegue ouvir a TV onde está tentando usar seu telefone sob a luz do sol. e os pais podem dificultar sua capacidade de navegar em sites ou compreender conteúdo neles para ajudar a entender o que é uma deficiência. Vou ler esta citação do Nações Unidas Preâmbulo da Convenção das Nações Unidassobre os Direitos das Pessoas com Deficiência. O preâmbulo menciona que a deficiência é um conceito em evolução e que a deficiência resulta da interação entre pessoas com deficiências e barreiras atitudinais e ambientais que dificultam sua participação plena e efetiva na sociedade em um igualdade de base com os outros. Então, o que isso significa para U Ex? Em termos de experiência de um usuário? A deficiência é que a interação entre um ser humano e o computador quando alguém pode interagir com o site ou site, a deficiência vive com a experiência em si e não com o usuário. Como designer U.X Y, é nossa responsabilidade remover essas barreiras para que, independentemente de suas deficiências, você possa acessar o site ou aplicativo. Em seguida, vou falar um pouco sobre como projetamos para acessibilidade. Quando se trata de projetar para acessibilidade, existem padrões disponíveis que você pode seguir. Você deve ter ouvido falar sobre a Seção 508 e esta é uma seção da Lei de Reabilitação da Força de Trabalho . Ele especifica os requisitos para a informação acessível e tecnologia de comunicação ou I C T. É um regulamento que cada agência federal precisa seguir se o seu produto de cidra é usado pelo governo e mais do que provavelmente precisa de três Seção cinco fora de conformidade. Em janeiro de 2018, as diretrizes de atualização de peso da Seção cinco entraram em vigor. Esses padrões incluem diretrizes para acompanhar nossa tecnologia em constante mudança, e mapeiam de volta para um CAG dois pontos. Outro padrão são as diretrizes de acessibilidade de conteúdo da Web ou o quê? CAG 2.1. É um padrão não governamental. Em vez disso, esses padrões de acessibilidade da Web são definidos pelo World Wide Web Consortium, ou W três C, e eles foram recomendados pelo consórcio em junho de 2018. As diretrizes CAT têm três níveis de conformidade a maioria dos critérios, e as diretrizes têm apenas um nível de conformidade. Mas alguns critérios têm vários níveis para os critérios. Com vários níveis, você pode pensar nos níveis desta maneira. A, que é uma linha de base. Pense nisso como uma nota C passando na escola, Double A é um melhor nível de acessibilidade, e Triple A é o mais alto nível de acessibilidade. Mas na maioria das situações, apontar para o Duplo A é suficiente. Em um processo típico de criação de um site ou aplicativo. Aí está o trabalho de design. Então é codificado e, finalmente, é testado. O processo de inclusão da acessibilidade não é apenas uma responsabilidade dos designers. Os desenvolvedores precisam garantir sua escrita de código acessível, e os engenheiros de teste precisam fazer sua devida diligência para confirmar que o site ou produto está acessível. No entanto, nosso papel é projetar proativamente com acessibilidade em mente para facilitar o processo de implementação da acessibilidade. O básico de nosso papel como designer U. X Y é garantir que os usuários possam navegar no site e compreender seu conteúdo. Para este curso, dividi as lições por navegação e compreensão. Cada lição baseia-se nas informações da anterior, por isso recomendo vivamente que você assista cada lição em ordem. Se você quiser ler mais sobre as diretrizes de acessibilidade e noções básicas, confira o recurso é Seção I forneceu alguns links úteis lá. 3. Projeto do curso: o projeto para esta classe é projetar um site acessível de uma página sobre sua comida favorita . Você não vai revestir a página da Web, mas você vai criar o design à medida que você projetou a página. Você terá a oportunidade de experimentar algumas das ferramentas e aplicar técnicas de design acessíveis. Eu encorajo você a começar com um design áspero de seu site de uma página e, em seguida, gerar sobre o design após cada lição. Desta forma, aproximar-se da acessibilidade não vai parecer tão assustador para esta classe. Você precisará do Sketch, do Adobe Illustrator ou do Adobe X'd ou de algum outro software de design da Web com o qual esteja familiarizado . Existem algumas outras ferramentas, e o recurso é que você vai precisar, e eu vou incluí-las no projeto. Recurso é a área que você começa a configurar imediatamente. Como você reiterar em seus projetos para a aula, não se esqueça de postar seu trabalho. Ah, grande parte de entender a Acessibilidade é ver o conteúdo antes e depois que uma técnica de Tuller foi usada e ver como outros abordaram suas soluções de design para acessibilidade 4. Navegando com Skill de habilidades de motor: antes de entrarmos em navegação com deficiências motoras, eu quero falar um pouco sobre navegação em geral, então a navegação é o processo de mover-se através deste site. Por exemplo, se eu estiver no site de compras on-line, estou navegando pelas opções de sapatos e o processo real passo a passo de comprar esses sapatos. Navegação é também sobre orientar-se com onde você está no site e onde você está dentro de uma página nesse site. Por exemplo, se eu estiver no site de notícias on-line, eu sou capaz de localizar a navegação principal. As principais manchetes na navegação de rodapé podem ser afetadas por deficiências de habilidade motora e deficiência visual. Nesta lição, vou abordar o que algumas dessas deficiências motoras são e como tornar os sites acessíveis para que eles não sejam mais uma barreira. Deficiências motoras inibem o uso de algumas ferramentas e gestos. Alguns exemplos de deficiências motoras incluem paralisia cerebral, artrite, túnel do carpo ou dedos fraturados, para citar alguns. As deficiências do podem dificultar o uso de um mouse ou teclado. Por exemplo, se meu dedo foi ferido, pode ser difícil usar os botões do mouse ou digitar em um ritmo normal. Deficiências motoras também podem tornar o uso de um dispositivo móvel desafiador. Por exemplo, se eu quebrasse meu polegar, mensagens de texto não seria tão fácil. E também não usaria alguns gestos, como beliscar para ampliar para ajudar pessoas com deficiências motoras. Há uma variedade de tecnologia assistiva disponível. A tecnologia assistiva às vezes é abreviada ou referida como T. Alguns 80 incluem um mouse especial, um teclado especial ou apenas usando um teclado. Por exemplo, se um usuário usa apenas um teclado, ele pode usar a tecla tab para navegar para vários elementos no site. Vou entrar em mais detalhes sobre como isso funciona daqui a pouco. Os sites também podem ter 80 recursos amigáveis, o que torna o uso de 80 em seu site muito mais fácil. Agora vamos ver exemplos de usar apenas um teclado para navegar. Primeiro, vou guiá-lo através de um site que é difícil de navegar, e depois vou orientá-lo através de um site que é fácil de navegar. Então agora eu vou tentar navegar no site Home Depot, usando apenas o meu teclado. Algo atingiu Tab e parece que estou ao longo do cabeçalho superior, e agora estou na busca. Mas não consigo achar onde estou agora. E de volta por minha conta. Estou tentando chegar ao principal agora. Vou tentar procurar espelhos. Então eu acho que está em casa para mobília de milho e bater em Enter. E agora acho que posso ir para o cardápio. Parece que ainda estou no topo. Define um pouco frustrante. Agora, eu não sei onde eu estou em tudo, e eu continuo batendo no Tab. E ainda não sei onde estou, e não consigo encontrar-me. Está bem. Parece que cheguei ao secundário agora, e quero entrar no menu que acabei de abrir, mas não consigo chegar lá. Certo, parece que consegui chegar lá, mas demorou muito tempo. Eu não esperava ver todos os outros itens de navegação. Agora vamos dar uma olhada em outro site aqui. Vou olhar para o site Ari i Dot com, e vou procurar mosquetões. Então agora eu estou passando, e eu estou no Petr, e agora eu estou na busca e eu posso ver onde eu estou. Então agora sobre o maio agora tão bom para escalar e imediatamente quando eu abrir o menu Climb, meus pontos de navegação estão dentro desse menu de escalada, ao contrário do site Home Depot onde eu tive que passar pelo resto da navegação. Portanto, é um pouco mais complexo porque é um site de comércio e há muita coisa acontecendo. Mas pelo menos foi fácil encontrar o que eu procurava. Pausar o vídeo e tente olhar para alguns desses sites por conta própria, usando a guia Onley do teclado ao redor do site e ver onde você acaba. Você pode ver onde você está? As coisas são selecionáveis? As coisas são impossíveis ou frustrantes? Considere isso é o que palavra-chave apenas os usuários têm que lidar. O que é bom é que com a acessibilidade mais comum torna-se, é mais difícil encontrar sites que não são compatíveis com o teclado. E isso é uma grande coisa. Esta é uma nota rápida se você estiver usando o safari. Se estiver usando o safari, você terá que ativar o controle de acessibilidade, ou não será possível navegar no safari, acessar suas preferências , ir para o avançado , acessar a acessibilidade e marcar a caixa que diz pressionado tem que destacar cada item em uma página da Web. Isso garantirá que quando você pressionar a tecla tab, ele irá para o próximo item na página. Neste exemplo, as informações reveladas quando você passa o mouse sobre um elemento também devem ser compatíveis com o teclado . Então vá em frente e olhe para esta frente da minha vista. E eles têm essas dicas de ferramentas onde você pode passar o mouse sobre e aprender mais informações sobre esses itens específicos. Então, vamos tentar. Usar a anarquia eram apenas e ter que essas dicas de ferramentas para ver se podemos acessar o conteúdo. Então, parece que eu estou tendo através dos botões e ele foi apenas para baixo para a página para que ele não parece como as dicas de ferramentas teclado ar acessível, que pode ser realmente frustrante se você é só nós temos navegação é através de um teclado Só. Então agora olhe para a página de preços de linho, e podemos ver que eles também têm dicas de ferramentas, e você pode passar o mouse sobre eles. Então vamos ver se podemos navegar até eles apenas com um teclado, e parece que podemos, que é muito bom. Então isso é ótimo, porque agora você pode acessar dicas de ferramentas apenas com o teclado e obter esse conteúdo extra. Os dispositivos móveis têm 80 recursos amigáveis, para que as pessoas possam modificar gestos padrão e substituí-los por comandos alternativos. Vou mostrar-lhe uma demonstração rápida aqui de um método alternativo de beliscar e ampliar o iPhone. Normalmente, você pode usar um gesto de zoom de pensão com o polegar e o dedo indicador para apertar e ampliar e diminuir o zoom da tela. Mas se você tinha um polegar quebrado, é realmente difícil e quase impossível fazê-lo. Então, em vez disso, você pode usar o recurso de toque assistivo, que permite que você faça o gesto de zoom de pensão com apenas o uso de um dedo. Vejamos algumas técnicas para projetar o site para que eles sejam mais fáceis de navegar. Você quer ter certeza que as pessoas podem navegar em uma ordem lógica em Ari, eu cito. Você pode prever onde você vai ser tabbing para a próxima. Você também deseja destacar o item que está em foco para que as pessoas saibam onde estão no site. Quando você tem uma navegação grande, considere fornecer links de salto de navegação. Estes foram os primeiros links no site onde as pessoas podem selecioná-los para saltar para a seção desejada. Desta forma, eles não estão tendo através de vários itens. Toda vez que a página é carregada, eles só exibem quando guia para para para que eles não perturbem o você. Eu, no entanto, os elementos também devem ser acessíveis pelo teclado. Esta é uma técnica avançada, mas você pode fornecer atalhos de teclado. atalhos de teclado são combinações de teclas. Pessoas conflitam. Para executar uma ação, Gmail tem uma lista de atalhos de teclado que você pode usar para ver essa mudança de toque. E a pergunta Marquês. Se você decidir criar atalhos de teclado, certifique-se de que eles não interferem com os comandos de teclado do leitor de tela. O que há de bom nesses atalhos de teclado? Há também ótimo para usuários avançados porque eles podem usar esses comandos para trabalhar rapidamente? Vejamos algumas técnicas para projetar sites para que eles sejam mais fáceis de navegar e fáceis criar. Documento é um documento de ordem de navegação. Este documento mostra como alguém deve navegar pelo design aqui. Estou fazendo um design na minha página da Web e estou adicionando anotações à ordem de navegação. Tento tornar a ordem lógica. Recomendo a colaboração com outros designers, desenvolvedores ou especialistas em acessibilidade. Tenho certeza que o documento funciona para todas as partes. Outra ferramenta que você pode tentar é prototipagem. Alguns de seus projetos. Trabalhando com um desenvolvedor, obtenha algumas das interações revestidas para que você possa ver como a navegação pode funcionar. Outras ferramentas incluem testes de usabilidade, testes de acessibilidade com usuários realmente finais. Pode ser difícil encontrar participantes com deficiências, mas você pode simular o que eles podem precisar fazer. Por exemplo, você pode perguntar ao participante sem usar o mouse. Tente pedir comida no site. Validar seus projetos é importante para garantir uma boa experiência do usuário. Qualquer experiência e teste que você faz ajuda você e seus companheiros de equipe a entender melhor acessibilidade. Navegação. Agora vamos falar sobre como você pode aplicar essas ferramentas e técnicas ao seu projeto. Para o seu projeto. Anote a ordem de navegação do seu design. Certifique-se de que segue uma ordem lógica e não salta quando terminar. Compartilhe sua entrega ble. Também compartilhe seu processo sobre como você se aproxima de navegar em sua página e não hesite em perguntar se você tem alguma dúvida. 5. Navegando com impactos de visão: como aprendemos na última lição. Navegação é sobre mover-se no site, mas também saber onde você está. Nesta lição, vou passar por algumas das deficiências de visão que podem afetar a capacidade de navegação de uma pessoa . Também vou compartilhar como você pode projetar uma experiência que seja mais acessível. Existem vários tipos de deficiências visuais, mas podemos agrupá-los em duas categorias. Visão parcial, perda e nenhuma visão. Exemplos de perda parcial da visão incluem glaucoma ou degeneração macular. Nenhuma visão inclui cegueira completa. Mostrarei como os tipos de deficiências de visão podem afetar a forma como as pessoas acessam o conteúdo em sites. Neste exemplo, estamos olhando para um site com visão completa. Agora. Esta é uma visão que simula a visão afetada pelo glaucoma. Neste exemplo, seu campo de visão se torna muito estreito. A simulação é apenas parcialmente precisa. Normalmente, para ver mais pessoas geralmente movem a cabeça para trás para olhar para um site com visão completa. Agora, esta é uma visão que simula a visão afetada pela degeneração macular. Neste exemplo, há patches onde você não pode ver. A simulação é apenas parcialmente precisa novamente. Normalmente, as pessoas movem a cabeça para ver, mas ainda não é muito conveniente. Se você quiser simular qualquer uma dessas deficiências de visão, você pode facilmente fazê-lo com as mãos para simular glaucoma, fazer um punho com uma abertura estreita como esta, e tentar ler alguns sites através dessa abertura estreita para simular degeneração macular . Basta colocar a palma da mão na frente da vista e tentar ler alguns sites com a obstrução . Algumas tecnologias assistivas para pessoas com visão parcial incluem uma tela de teclado especial, fogos magna e leitores de tela. Vou tocar em mais leitores de tela Na parte sem visão desta lição, uma lupa de tela faz exatamente isso. Ele amplia o conteúdo de uma tela. Às vezes, as cores podem ser alteradas para aumentar o contraste de cores. A maioria dos sistemas operacionais tem um ampliador de tela integrado. Se você quiser testá-los mais tarde, Eu forneci informações no recurso é seção desta classe. Outro comprometimento da visão é a cegueira completa. Pessoas sem visão têm que confiar em outros métodos de navegação em sites. Por exemplo, eles podem usar um leitor de tela para ler o conteúdo da tela. Para ter uma noção de como isso é, vai ouvir um menu de telefone da Carolina do Norte DNB. Vamos fingir que você deseja renovar um registro de veículo, ouvir o clipe e pensar sobre a relevância do conteúdo, sua orientação no sistema e seu modelo mental versus o modelo de sistemas. Obrigado por ligar para a Divisão de Veículos Motorizados da Carolina do Norte. Agora você pode obter o status da sua carteira de motorista, então não o sistema de resposta da polícia. Por favor, ouça com atenção. As opções de menu encontradas foram alteradas. Aqui está uma mensagem especial da Carolina do Norte D M V. Planejando pegar um vôo visitará uma base militar. Há novos requisitos de ideias na Carolina do Norte. Isso porque a Lei Federal Real exige novos padrões de segurança para construir aviões e entrar em instalações federais. A Carolina do Norte que você gosta, precisamos da exigência federal. Aprenda a obter o seu verdadeiro i d. em N. C. Real. Eu faço dot gov para marcar uma consulta para que você perceba que aperte nove. Caso contrário, pressione um para continuar a coisa menu Para perguntas sobre a vida do seu motorista na imprensa um ou dizer licença para o seguro Pressione dois ou dizer seguro para placas de licença, impostos sobre a propriedade direito vestido três ou um veículo para escritório locais preparados para ou dizer locais para todos os outros serviços DMG Pressione cinco, forçando outros a repeti-lo para o plano de registro internacional, pressione um ou, digamos licença internacional, Investir confiança ou dizer, registros de tráfego de roubo. Pressione três ou diga acidente de ônibus escolar na segurança do trânsito, pressione quatro ou diga “segurança”. Para repetir seu menu, pressione nove ou diga repita para retornar ao menu principal, pressione a tecla libra ou, digamos menu principal para assistência operacional. Pressione zero ou, digamos, operador, você foi capaz de descobrir qual seleção fazer? Esta é, na verdade, uma tarefa que tentei realizar várias vezes, e achei isso tão frustrante. Eu quase decidi ir fisicamente para o D.M. D.M. B. Talvez enquanto você escutava, você pensou em como seria mais fácil se você pudesse apenas ver onde encontrá-lo no site, e provavelmente seria. Mas esta é uma experiência que usuários sem visão teriam em uma base diária, e é por isso que é importante que projetamos o site para que eles pudessem ter um tempo fácil navegando através deles. Pessoas com menor visão muitas vezes usam medidores de tela para navegar em sites e APS, um leitor de tela, é um aplicativo que lê o conteúdo na tela para a pessoa. O leitor de tela também lê parte do código para ajudá-los a interpretar o contexto do que está ouvindo. Por exemplo, se o leitor de tela estiver prestes a ler uma lista com marcadores, você deixará a pessoa anotar que esta é uma lista com marcadores de cinco itens, e então eu vou para Alan ler esses cinco itens. Tecnologia assistiva adicional inclui código acessível e amigável. Tal elementos semânticos em atributos aria, combinados com um leitor de tela thes ajudam os usuários a entender o contexto desse site. Há vários leitores de tela disponíveis quando você tem tempo. Eu encorajo você a tentar pelo menos um e ver como ele funciona. Para o Windows, há Envy D A, que é grátis. Há também Tubarão, que é um dos leitores de tela mais utilizados disponíveis, e você pode experimentar uma demonstração gratuita dele. Por último, há narrador, que está incluído no Windows. Ao tentar o narrador, eu não tive muita sorte. Eu recomendo experimentar e VD um ou Tubarão em vez disso. Mac OS e o IOS incluem narração para o leitor de tela. Leitor de tela Android é chamado Talk Back, e está incluído no sistema também. Vamos ouvir um leitor de tela em ação. Isso é dublagem em um Mac. Ele vai ler a narração de uma visão distante na revista Jogada Off Our Travel e guiar Google Chrome Window para fora do nosso link de imagem em branco barra net. Agora vou navegar pelo site. A maioria das pessoas não lê um site do início ao fim. Em vez disso, nós normalmente deslizamos uma página. Você pode olhar manchetes e mergulhar mais fundo em um subtítulo de interesse. As pessoas que usam leitores de tela lêem da mesma maneira. Eles não querem ouvir uma página inteira do início ao fim, mas estão procurando algo para ajudar com essa tela. Os leitores podem muitas vezes saltar um cabeçalho, e então eu não poderia navegar para um cabeçalho de elementos semânticos de interesse em elementos HTML R que têm significado associado com um. Alguns exemplos incluem a tag de formulário para um formulário, a tag de tabela para indicar uma tabela e uma tag H uma para o nível de cabeçalho um. Os leitores de tela pegam esses elementos, que ajuda o usuário a entender onde eles estão e o que eles estão ouvindo. Alguns exemplos de elementos não semânticos incluem a tag DIV e a tag SPAN. Outro código acessível e amigável inclui atributos Ari Aria significa acessíveis, aplicações de Internet ricas. E esses atributos codificam nossos componentes que ajudam a tornar os ricos. experiência na Web está acessível. Alguns componentes principais incluem, mas definitivamente não estão limitados a funções como talvez na pesquisa de conteúdo de Navegação e assim por diante . leitores de tela Propriedades e Estados pegam esses atributos, que ajudam o usuário a entender onde eles estão, o que está acontecendo e o que eles estão ouvindo. O Teoh. Este é um guia visual Para ajudar a demonstrar como os atributos do aria funcionam, os atributos Aria rotulam áreas da tela para a tela. O leitor pode retransmitir essas informações para o ouvinte para fornecer contexto. Quando eu ligo os pontos de referência da área, você pode ver como as áreas são identificadas. Por exemplo, este é o banner. Esta é uma navegação, e esta é a área de conteúdo principal. Neste exemplo, há um guia sobre como os níveis de cabeçalho são identificados novamente. Esta é apenas uma demonstração visual em sites reais. Essa marcação está nos bastidores e não é visível para os usuários finais. Vamos juntar isto um exemplo. Você vai precisar de uma caneta e papel para esta atividade. Vou tocar em clipes de áudio. O primeiro leitor de tela lendo um site que foi criado com código não acessível . O segundo clipe é o mesmo site criado com código acessível. Ao ouvir o primeiro clipe, tente desenhar uma armação do que está ouvindo. O US Daily News Trending News família de notícias e Indiana encontra um dinossauro vivo. Ontem tarde, uma família visitando um playground local descobriu um T. Rex vivo e Liverpool, Indiana Trending notícias, entretenimento esportivo. Certo, agora vou tocar o segundo clipe. Este é um leitor de tela lendo um site criado com código acessível. Ao ouvir este clipe, tente desenhar uma armação de arame do que você está ouvindo. Você é o título de conteúdo da Web Lee News EUA Nível um link The US Daily News lista. Três itens ligam notícias tendências link Sports link nível de direção para notícias locais nível três. Família e Indiana encontra um dinossauro vivo. Ontem tarde, uma família visitando um playground local descobriu um T. Rex vivo e Liverpool, Indiana. Como foi ouvir aqueles clipes? Foi um segundo clipe. Mais fácil de entender? Dependendo de como seu site é revestido, pode ser mais fácil ou mais difícil para alguém que confia em um dedo do pé leitor de tela. Entenda o conteúdo. É por isso que é super importante que possa ser escrito de uma forma que ajude um leitor de tela fornecer o contexto certo. Ouvintes de dedos. Agora vamos dar uma olhada no site. Os dois clipes de áudio descritos. Aqui está como os sites reais se parecem. Eles parecem exatamente iguais. Será que seus quadros de arame geralmente se assemelham ao site No segundo clipe, código semântico e atributos ari foram usados. Isso ajuda o leitor de tela a identificar elementos para que você possa obter o contexto das informações estão sendo lidas para você. O que é importante notar é que você pode obter a mesma exibição exata, mas com dois conjuntos diferentes de códigos. Portanto, realmente usar código acessível não tem efeito sobre os resultados do seu site. Aqui estão as capturas de tela do código usado para criar o site de exemplo. O da esquerda é um casaco inacessível. O da direita é um código acessível e incluem elementos semânticos e atributos ária. Existem algumas técnicas que você pode usar ao se aproximar. Soluções para navegar seu 1º 1 é determinar a ordem de navegação do seu site, que é o que discutimos na lição sobre navegação com deficiências motoras. Isso não só ajuda para deficiências motoras. Mas determinar como alguém deve navegar no site também ajuda aqueles com deficiência visual . Encorajo você a trabalhar de forma colaborativa com seus colegas de equipe de design e desenvolvedor para determinar quais atributos Ari funcionam melhor. Os desenvolvedores podem ter uma boa idéia de quais atributos Ari existem, mas cabe a você como designer determinar qual deles fornece a melhor experiência de usuário. Determinar a hierarquia de informações é outra técnica a ser considerada no início. Começou em um achado, os níveis de direção vão de H um a H seis. Normalmente, o nível de cabeçalho H um só é usado uma vez, que é para o título principal. Ao determinar o padrão para os níveis de cabeçalho, você pode documentá-los em um guia de estilo para facilitar a referência. E, por último , ao projetar, certifique-se de fornecer uma experiência consistente. À medida que as pessoas visitam seu site, elas formam um modelo mental em sua cabeça. Por exemplo, depois de usar algumas páginas, eles podem saber a ordem dos itens na navegação principal. Ajuda-os a descobrir o seu site e a aceder ao conteúdo mais rapidamente. No entanto, se você mudar as coisas na navegação, isso interrompe seu modelo mental e se torna confuso. Semelhante ao que você quer ter certeza de que você não está pulando, níveis de cabeçalho em uma tela, por exemplo, você não quer ter um H dois e, em seguida, imediatamente seguir isso com um H, para o ouvinte vai se perguntar o que aconteceu com o H três e se de alguma forma eles se perderam na página novamente, uma ferramenta que você pode usar o documento de ordem de navegação. Além de incluir o pedido, você pode identificar quaisquer pontos de referência aria para ajudar a navegação. Eu recomendo a colaboração com outros designers, desenvolvedores, especialistas em acessibilidade para garantir que o documento funcione para todas as partes. Como acontece com outras lições, você pode tentar prototipar alguns de seus projetos ou tentar usabilidade ou acessibilidade, testando parte da interação Ao ouvir com um leitor de tela, você pode ter uma noção de como as coisas funcionam bem. Você pode perguntar a si mesmo, as pessoas realmente navegando podem realizar tarefas? O fluxo se encontra? Expectativas do usuário é uma redundância ao ouvir um leitor de tela. Outra ferramenta que você pode usar para ajudar a simular deficiência visual é um simulador de visão sem café . É um plug in disponível no Chrome e Firefox. Você pode ativar e desativar diferentes simulações de deficiências para ter uma noção do que seu site parece que eu geralmente não uso isso para fazer trabalhos de design, mas é uma ótima ferramenta para simular cenários para ajudar a criar empatia. A ferramenta Wave é um verificador de acessibilidade para desenvolvedores da Web. Você pode experimentá-lo indo para wave dot Web name dot org. É uma boa maneira de ver se você atendeu aos critérios de acessibilidade do seu site. Está disponível é uma ferramenta online e uma extensão Chrome e Firefox. Uma vez que devemos estar projetando com acessibilidade em mente, esta ferramenta serve do verificador. Depois que seu projeto foi implementado dessa forma, você pode ver qualquer coisa que você ou sua equipe possam ter perdido. Você pode tentar usar os de uma auditoria de linha de base do seu site. Se você estiver tentando identificar por onde começar a incorporar acessibilidade para o design de sua página da Web , indique os níveis de cabeçalho e os pontos de referência do aria que você pode ter. Fica a seu critério para saber como você quer identificá-los. Você pode seguir o meu estilo ou criar o seu próprio. O objetivo é garantir que seus companheiros de equipe possam entender quais anotações você fez. Depois de terminar, compartilhe como marcou o título que não marcou os pontos de referência da Aria. Compartilhar é uma ótima oportunidade para ver e se inspirar pela forma como os outros transmitem esse tipo de informação 6. Compreensão de elementos visuais com a blindagem de cores: nesta lição, vou falar sobre como a cegueira de cor pode afetar a compreensão dos elementos visuais . Vou passar por técnicas que você pode usar para tornar seus projetos mais acessíveis, e vou falar sobre algumas ferramentas que você pode usar para tornar seu trabalho mais fácil. Com cegueira de cor, uma pessoa tem falta de capacidade de ver certas cores, que significa que elas são coloridas. espectro é estreitado, e o que isso significa é que eles podem ter dificuldade em identificar itens por cor ou podem ter dificuldade em distinguir itens de uma falta de contraste nas cores. Vou mostrar alguns exemplos de como isso pode afetar o que as pessoas veem. O exemplo à esquerda é como o site do Marshmallow Peeps parece com a visão não afetada . Exemplo à direita é como o site Marshmallow Peeps se parece. Se você tentou conhecer Pia com esse exemplo, é quase impossível ajudar os peeps amarelos dos Pink Peeps. O contraste de cores é uma diferença entre duas cores. Neste exemplo, os Peeps amarelos não têm contraste de cor suficiente com os peeps rosa. Quando o contraste de cor não é alto o suficiente, pode ser difícil distinguir os diferentes itens Vamos olhar para problemas de daltonismo em termos de um elemento de interface de usuário neste exemplo, que alterna está na posição on com Visão não afetada? Você pode dizer que é o de baixo, e isso é porque é verde, que geralmente é um indicador de um não-estado. Agora vamos olhar para o mesmo exemplo como se você tivesse um cromado no topo da cegueira de cor da CIA. Neste exemplo, é difícil dizer qual alternância está ativada porque ambos são da mesma cor. E é por isso que é realmente importante evitar usar a cor Onley para diferenciar seus elementos. Isto é especialmente verdadeiro para elementos que são importantes, como aqueles que podem afetar a privacidade ou a segurança. Agora vou falar sobre técnicas que você pode considerar ao projetar com cores. Primeiro, você deseja fornecer contraste de cor suficiente para elementos com os quais os usuários interagem, por exemplo, botões, menus, mensagens de erro, cabeçalhos e assim por diante. Bem, CAG 2.1 afirma que para um nível duplo A, a taxa de contraste deve ser de pelo menos 4,5 para 1 para texto normal e 321 para texto grande . O texto grande é considerado com pelo menos 14 pontos e negrito, ou pelo menos 18 pontos de tamanho para o nível Triplo A. A taxa de contraste deve ser de pelo menos 7 a 1 para o texto normal e 4,5 a 1 para o texto grande . Outra técnica é usar mais de um tratamento visual para distinguir um elemento. Por exemplo, nessas mensagens de banner, o contexto de cor não é apenas indicado por cor, mas também por símbolos. Vamos visitar nosso exemplo U anterior com os interruptores de alternância aqui, adicionamos outro indicador visual para ajudar o usuário a distinguir qual está naquele com o checo significa que ele está ligado, e aquele com o X significa que ele está desligado . Mesmo que você tenha cegueira de cor agora, você pode determinar qual estado está ligado ou desligado. Agora vou falar sobre algumas ferramentas que você pode usar para ajudar a garantir o contraste de cores adequado. Uma ferramenta que eu gosto de usar é um analisador de contraste de cores. É um aplicativo autônomo para Windows e Mac. Ele está disponível gratuitamente no site do Grupo Paciello, e eu vou fazer uma demonstração rápida de como esta ferramenta funciona. É bastante simples, então o que eu vou fazer é abri-lo, e eu só tenho que escolher uma cor de primeiro plano. Neste caso, é o grande texto, e eu vou usar a ferramenta conta-gotas. Escolha o grande texto e, em seguida, eu vou escolher a cor de fundo, que novamente eu vou usar a ferramenta conta-gotas, e isso é aquele verde pálido. E então eu vou ver que eu falhei em todos os níveis de contraste de cor. Eu também posso usar essa ferramenta para descobrir quais cores eu posso usar para fazer o nível apropriado de contraste de cores. Então vá em frente e escolha este azul e eu mudarei o texto para um preto. E aqui diz que eu passei todos os diferentes níveis de requisitos de contraste de cor. Outra ferramenta que eu gosto de usar é o plugue stark, que está disponível para Sketch e Adobe X'd. Está disponível gratuitamente na Get Stark dot Co. Vou fazer uma demonstração rápida de como Stark trabalha no esboço para o Stark Plug in. Tudo o que você precisa fazer é selecionar duas camadas, então eu vou selecionar o texto em segundo plano. Vamos em frente e ir para plugins, stark e verificar o contraste, e lá vai me dar os resultados do contraste de cores, e neste exemplo, eu falhei em todos os níveis de contraste de cores, é o que eu posso fazer aqui é apenas manter ajustando as cores até eu obter as cores que eu quero e passar os níveis de contraste que eu preciso para o seu projeto. Use o analisador de contraste de cores e verifique os contrastes de cores dos elementos em seu design. Eles cumprem os requisitos mínimos? Aponte para uma classificação de passagem para o trabalho AG 2.1 nível duplo A. Se a cor é não passar, o que você faria para mudá-los Quando você terminar, certifique-se de compartilhar seus projetos antes e depois e nos dizer a sua abordagem para alterar o cores. 7. Compreensão de elementos visuais sem visão: nesta lição, vou discutir como ter visão parcial ou nenhuma pode afetar a capacidade de uma pessoa compreender elementos visuais. Eu também vou entrar em tecnologia assistiva disponível para acomodar essas deficiências, e eu vou orientá-lo através de algumas técnicas que você pode usar para fornecer uma experiência acessível. Quando você tem visão parcial para saber, você pode não ter certeza do que é exibido na tela. Você pode Onley confiar em um leitor de tela. Se o conteúdo puder ser detectado pelo leitor de tela, você pode realmente perder informações importantes. Em seguida, vamos tentar esta nova simulação de visão. Vou mostrar uma tela preta para simular que você não tem visão. Oh, tão bom. Isso foi hilário. Isso foi ótimo, não foi? Você gostou do que eu vi na simulação que você não foi capaz de ver, então você não experimentou o que eu fiz. E é assim que é. Se um site não oferece alternativas para que as pessoas acessem o conteúdo apenas para que você não se sinta deixado de fora, vou mostrar o que achei engraçado. Eis do que eu estava rindo. Foi um presente de uma preguiça caindo. Agora vamos falar sobre a tecnologia assistiva disponível para ajudar a tornar os elementos visuais acessíveis a pessoas com visão parcial ou nenhuma em combinação com leitores de tela. Texto alternativo para todo o texto para abreviar é a principal tecnologia assistiva disponível. Todo o texto é simplesmente uma descrição de texto de conteúdo não textual. Os leitores de tela leem todo o texto para os usuários para que eles possam entender o que está sendo exibido. Vou reproduzir este videoclipe de um leitor de tela lendo todo o texto de imagens. Link Image BMO Drea M. O. Você está atualmente em um link dentro do conteúdo do lead para clicar neste link Link imagem. Minha idade de equipe dupliquei problemas no Castelo do Espelho. Nenhum leitor de tela não é 100% perfeito. Por exemplo, ele lê ser MoaS Modry BMO Drea M O. Mas ouvinte pode pelo menos obter um justo do que está acontecendo. Vamos rever algumas técnicas para escrever todo o texto útil para todo o texto. Você deseja mantê-lo para 60 a 80 caracteres e link. Você também pode deixar de fora a imagem do em toda a tela de texto. Os leitores podem detectar quando uma imagem é apresentada e eles já incluem imagem de Se você incluir imagem de em todo o texto, ela se torna redundante ao escrever todo o texto. É importante descrever apenas o que é necessário. Sempre pergunte a si mesmo qual é a intenção desta imagem? E tenha em mente que a intenção nem sempre é o significado literal. Por exemplo, inimigo para dar ou preguiça. Se você tiver imagens mais complicadas, você pode considerar usar os atributos de descrição longa ou fornecer uma alternativa de texto de comprimento total . Agora vou mostrar-vos um exemplo de uma alternativa de texto completo. Aqui está um infográfico do site Dick Use. Fazer que também acontece a ser empresa inacessibilidade. Na parte superior, você pode ver o infográfico completo. Esta imagem tem um monte de conteúdo, o que é demais para colocar dentro do forno todo o texto. Então, se você rolar até a parte inferior, você pode ver uma alternativa de texto completo. Desta forma. Qualquer pessoa que dependa de um medidor de tela pode obter a mesma informação que alguém que é citado. Às vezes, é mais fácil entender como escrever todo o texto vendo bons e maus exemplos. Neste exemplo, temos um site para iniciantes aulas de ioga, e a imagem da preguiça precisa temos um site para iniciantes aulas de ioga, e a imagem da preguiça precisade todo o texto. Um bom exemplo é a animação de uma preguiça tentando fazer yoga, mas caindo mesmo que não seja 100% preciso que carrega. A intenção da imagem sobre o exemplo é apenas preguiça. Embora seja verdade, está faltando contexto, outro exemplo ruim é apenas GIF animado. Isto também é verdade, mas não fornece nenhum contexto valioso e, último, outro mau exemplo. Há uma preguiça coberta de algas na rua. Ele está se esticando, mas ele cai. Há um carro atrás dele. Há uma etiqueta que diz: “ Faça um presente com ponto.” Embora isso seja muito preciso, ele ainda não está fornecendo as informações relevantes para o ouvinte. Além disso, toda essa informação é ruído, o que pode contribuir para a sobrecarga cognitiva para imagens mais complicadas. É melhor resumir a intenção da imagem e não entrar em detalhes intrincados nesta captura de tela do site Bitcoin sobre o valor do Bitcoin. Uma boa descrição alternativa seria. O valor do Bitcoin aumentou constantemente desde junho de 2017, mas pegou dezembro em mais US$19.000 cada. Ele caiu drasticamente em fevereiro de 2018 para cerca de metade desse valor. Isso captura a essência do que você deseja que o leitor Para obter desta imagem sobre o exemplo de uma descrição seria algo como em 1 de junho, o valor era 2100 em 2 de junho, o valor é 2101 Em 3 de junho, o valor valor foi 2200. Eu não vou continuar, mas acho que você entendeu. Se eles pretendem mostrar a essência do que aconteceu, não é necessário ficar super granular. Nos casos em que as imagens são exibidas apenas para fins decorativos, você pode omitir todo o texto completamente para ajudar a simplificar um pouco as coisas. Se você tiver um sistema de design ou uma biblioteca de componentes, certifique-se de documentar todo o texto lá. Desta forma. Você nem sempre anota seus designs com todo o texto para cada imagem reutilizada. Outra nota S P G pode ter todo o texto para, e emojis podem ser lidos de alguns leitores de tela. Então não se sinta limitado ou não pode se divertir para tornar as coisas acessíveis. Vamos ver como você pode aplicar algumas dessas técnicas ao seu projeto. Para o seu projeto. Tente escrever todo o texto para suas imagens quando você terminar de postar seu trabalho para compartilhar com outras pessoas, às vezes entender como escrever bom todo o texto vem com a visualização de muitos exemplos 8. Entidade com texto com impactes cognitivos: nesta lição, vou falar sobre como as deficiências cognitivas podem afetar a compreensão da leitura. Eles não orientam você por alguns exemplos de escrita, bem como técnicas e ferramentas que você pode usar para melhorar sua escrita para acessibilidade. No final da lição, falarei sobre o que você estará fazendo para o texto do seu projeto. Alguns exemplos de deficiências cognitivas incluem lesão cerebral traumática, efeitos colaterais de tratamentos de quimioterapia e leitura em uma segunda língua. Quando as pessoas têm deficiências cognitivas, elas podem ter dificuldade em entender a informação. Às vezes, quando as informações não são fornecidas de uma maneira fácil de entender, elas podem sofrer de sobrecarga cognitiva. Isso significa que é demais para a pessoa processar. Isso também vale para pessoas que usam leitores de tela quando há muita informação para ouvir . É difícil analisar o que é importante e o que não é importante. Agora vamos ver um exemplo de algum conteúdo em seu estado original, onde não é fácil de ler. Então vamos olhar para como eu revisar o texto que lê muito mais fácil. Aqui está um exemplo de uma receita de pizza onde você pode ver o conteúdo é difícil de ler. Está em um grande parágrafo, e você realmente tem que descobrir como o conteúdo é organizado. No exemplo à direita, eu reformulei o conteúdo para. É mais fácil de ler. Os leitores podem facilmente encontrar os ingredientes e seguir as instruções. Vejamos algumas técnicas para escrever conteúdo mais fácil de ler. Uma técnica é escrever em linguagem simples quando possível. Linguagem simples é escrever onde os leitores podem entender as informações facilmente, rapidamente e completamente possível. Escrever em linguagem simples reduz a carga cognitiva no leitor. Ele também torna um conteúdo mais fácil de traduzir para outro idioma. Isto é especialmente importante se o seu site ou produto tiver de suportar vários idiomas ao escrever. Aponte para um ótimo nível baseado em seus usuários. No entanto, mesmo que seu público seja de natureza técnica, escrever em linguagem simples torna as coisas muito mais fáceis de ler, isso é útil para todos. Outra técnica é organizar as informações em um formato fácil de ler. Ao escrever em linguagem simples, certifique-se de usar títulos, usar listas com marcadores ou numerados e manter suas frases concisas. Quando você organiza as informações, é mais fácil para as pessoas digitalizarem e consumirem o conteúdo. Vamos mergulhar em algumas ferramentas para ajudá-lo a simplificar sua escrita. Linguagem simples não ir. Este é um site que suporta a Lei de Escrita Simples de 2010, que exige que agências federais usem linguagem clara e compreensível para comunicação pública no site. Eles têm diretrizes com Do e dont's, bem como vários exemplos para ajudá-lo a entender os conceitos de escrita. Outro recurso que recomendo é um Hemingway up. É uma ferramenta leve para ajudar você a tornar sua escrita clara e concisa. Ele vai destacar frases longas que você precisará simplificar, e eu vou fazer algumas recomendações de redação. O que é bom é que ele também resume o seu nível de leitura. Outro aplicativo. As pessoas usam Graham cedo. É semelhante ao Hemingway up, mas fornece mais detalhes. Se você quiser mais ajuda com gramática, eu recomendo usar este. Agora vamos falar sobre como você pode aplicar essas ferramentas e técnicas ao seu projeto para o seu projeto. Trabalhe para tornar o texto em seu design fácil de ler. Escreva o texto como você normalmente seria. Copie e cole o texto em Hemingway ou Graham cedo e veja o quão bem ele lê os ataques do Wordsmith até que seja fácil de ler para este projeto. Mire para o oitavo ano mais baixo quando terminar. Compartilhe o texto original e seu texto revisado. Às vezes, poderia ser divertido e até mesmo abrir os olhos para ver o quanto melhor, o texto revisado lê. 9. Compreensão do áudio e vídeo: nesta lição, vou analisar como as deficiências auditivas e visuais podem afetar a capacidade de uma pessoa compreender áudio e vídeo. Analisarei a tecnologia assistiva disponível para acomodar isso nos pais, e depois falaremos sobre as coisas que você pode fazer para garantir que sua mídia esteja acessível. A cegueira completa é uma deficiência visual que pode afetar a capacidade de uma pessoa compreender o vídeo. Por exemplo, se a pessoa pode no Li ouvir um filme, pode não obter o contexto completo sem ver os visuais com deficiências auditivas, as pessoas não podem ouvir o diálogo, as dicas de som ou a música que define o tom. Outras deficiências que podem afetar a capacidade de uma pessoa compreender o vídeo incluem estar em um ambiente barulhento. Por exemplo. Você está em um bar barulhento e não consegue ouvir o que está sendo dito na TV. Outro exemplo é que você está assistindo um filme em língua estrangeira e você não entende a língua, então você não pode entender o que está acontecendo. Se os usuários estiverem com deficiência auditiva, você pode adicionar legendas ocultas aos vídeos. Essas legendas aparecem na parte inferior da tela e exibem e informam o que as pessoas no vídeo estão dizendo. Vamos dar uma escuta a este clipe do YouTube, e você, também, você pode ativar ou desativar a legenda. Então, uh, vamos começar com isso em Harmony Chickens. Você pode? Pode mantê-lo baixo? Vocês se importam? Parecemos um bando de velociraptors no Ted Dot com. Eles têm transcrições interativas de suas palestras. Enquanto um orador fala, a transcrição abaixo destaca as palavras para que as pessoas possam acompanhar. Vamos dar uma olhada rápida em como isso funciona. Eu moro em South Central. Esta é a loja de bebidas South Central, fast food, lotes baldios. O que também é bom é que esta é uma transcrição interativa. Você pode usar o skin da transcrição, clique ou frase, e o vídeo saltará para esse local para pessoas com deficiência visual. Eles podem ouvir diálogos, sons e vídeos, mas não conseguem obter o contexto completo. É aí que entram as descrições de áudio. As descrições de áudio descrevem a atividade no vídeo para que as pessoas possam conhecer o contexto do que está acontecendo. Vamos ouvir a descrição de áudio deste vídeo. Você está? Ele toma o lugar do motorista. Eu não dirijo. Steve descansa as mãos em seus lados enquanto o carro puxa para a estrada. O volante. Virando seu próprio olhar, Prius rola por uma rua residencial tranquila. Vamos analisar algumas técnicas e ferramentas que você pode usar para tornar seu áudio e vídeo acessível . Ao lidar com áudio e vídeo, Você quer ter certeza de fornecer métodos alternativos para as pessoas a entender esta informação neste gráfico, Eu listei algumas alternativas com base no tipo de mídia e deficiência. Só porque há um vídeo, não significa que você tenha que fornecer legendas próximas. Se motivos de viabilidade ou orçamento impedirem que você faça isso, não há problema em fornecer outro método alternativo para acessar o conteúdo. Quando se trata de criar legendas, há algumas práticas recomendadas que você pode seguir. Primeiro, certifique-se de que a transcrição é precisa. Isso inclui não editar o conteúdo por extensão ou interpretar o que alguém disse. É sua responsabilidade que a transcrição seja precisa para transmitir o que é realmente dito no vídeo ou áudio. Em seguida, manter legendas duas linhas. O exemplo. Imagens da Netflix. Manter as legendas em duas linhas ajuda por alguns motivos. 1ª 2 linhas geralmente não obstruem a vista. Segundo, é mais fácil para as pessoas lerem linhas de texto mais curtas. Suas legendas devem ser exibidas em sincronia com a caixa de diálogo, mas também devem ser exibidas o tempo suficiente para que as pessoas as leiam. Embora seja tentador manter o ritmo de um diálogo, o diálogo é muito rápido. Os leitores podem não conseguir ler tudo. Se você estiver fornecendo uma descrição do vídeo, ele deve ser conciso e relevante para dar à pessoa contexto suficiente. As mesmas práticas recomendadas para escrever todo o texto também se aplicam aqui . Eu não estou muito familiarizado com ferramentas e serviços de transcrição, mas se você está procurando algumasalternativas rápidas e baratas, alternativas rápidas e baratas YouTube tem um recurso de legendas que aproveita a tecnologia de reconhecimento automático de voz do Google . Quando você carrega um vídeo, YouTube começa a legendá-lo automaticamente. É bastante preciso, e você pode facilmente fazê-lo e ajustá-los nesta lição. Informe-se sobre como as deficiências de visão podem afetar a capacidade de uma pessoa compreender áudio e vídeo. Não há atividade de projeto com esta lição, mas eu encorajo você a verificar alguns dos recursos de acessibilidade nos pontos turísticos do show . Eu adicionei links para eles na lista de recursos é 10. Considerações finais: Você chegou até a última lição. Nós cobrimos muito terreno e, assistindo a esses vídeos e indo ao projeto, espero que você tenha aprendido a pensar sobre acessibilidade de um UFC. Por que perspectiva de design Quando se trata de trazer acessibilidade para o seu processo, iniciar pequena acessibilidade não precisa ser como abrir. As comportas funcionam em fases. Por exemplo, o primeiro passo pode ser garantir que todas as suas imagens tenham toda a textura. É uma vez que é cobertura que você pode. Queremos garantir que todas as suas cores tenham taxas de contraste de cores adequadas. Sinta-se à vontade para revisar as lições enquanto você trabalha para incorporar acessibilidade ao seu processo de design . Esperemos que, tomando essa aula, esses recursos começam a fazer um pouco mais de sentido para você. Quando você tiver uma chance, por favor, revise a turma e sinta que você pode me seguir no compartilhamento de habilidades. Obrigado mais uma vez e cuide-se