Transcrições
1. 01 Introdução: Oi, todo mundo. Meu nome é Cassandra, e bem-vindos à acessibilidade da Web para designers. Vou dar-lhe uma breve explicação do que esperar neste curso. Este curso vai ser principalmente de uma interface de usuário da Web ou experiência de usuário. Perspectiva dos designers Vamos cobrir as diretrizes de acessibilidade de conteúdo da Web, também conhecidas como W C A G e as diferentes opções que você tem quando se trata de tornar seu site ou venda para um produto acessível. Então, como você pode ver na visão geral, eu também vou rever alguma acessibilidade para as seguintes áreas. Cor, cegueira, diferentes graus de deficiência visual, deficiência
auditiva e outras deficiências físicas como artrite ou mesmo ter um
braço quebrado . Não tem necessariamente de ser uma deficiência permanente. Vou dizer-lhe coisas específicas para olhar para fora durante o projeto, bem
como dar-lhe dicas diretas sobre o que fazer e o que não fazer, a fim de garantir que o seu produto está acessível para todos usarem. Também vou revisar algumas áreas específicas para desenvolvedores da Web, não em termos de como fazer essas coisas fisicamente, porque afinal de contas, eu sou um designer de produtos e não estou dizendo ser um desenvolvedor. Vou principalmente analisar essas coisas para que você,
como designer, como designer, possa se comunicar com seu desenvolvedor ou equipe de engenharia. E não, algumas das coisas integrais que precisam fazer, a fim de trazer o seu site ou vender para produto até velocidade acessibilidade sábia. Então eu espero que você aproveite este curso e boa sorte.
2. 02 por que Acessibilidade: por que torná-lo acessível? Em primeiro lugar, o que é acessibilidade? Ter um site acessível ou produto de software significa que o conteúdo está disponível e sua funcionalidade pode ser operada por qualquer pessoa. É fácil supor que todos os usuários podem ver usar um teclado, usar um mouse ou uma tela sensível ao toque e interagir com seu site ou conteúdo do produto da mesma maneira que você faz. Mas isso simplesmente não é verdade. Assumindo que todos podem usar as coisas exatamente da mesma maneira leva a uma experiência que funciona bem para algumas pessoas, mas cria grandes problemas ou barreiras. Para outras pessoas, acessibilidade refere-se à experiência de usuários que podem estar fora do intervalo do usuário
típico que podem acessar ou interagir com coisas de forma diferente do que seria esperado. Como eu disse antes, essas questões que as pessoas podem experimentar podem ser permanentes ou temporárias. Como eu disse anteriormente, túnel do carpo ou braço quebrado pode causar problemas ao tentar usar um teclado ou um mouse. Algumas pessoas podem pensar que não há muitas pessoas que sofrem de deficiência e que estão no limite. Discutiremos isso um pouco mais tarde, mas há milhões de pessoas que sofrem de deficiências neste mundo. Alguns deles são invisíveis, mas isso não significa que não estejam lá. E sim, mesmo que haja menos pessoas com deficiência em vez de não, a porcentagem de pessoas ainda é significativa. Por que você não gostaria de aumentar a sua corrida de clientes tanto quanto possível,
disponibilizando-a para todos? Como designers, temos o poder e a responsabilidade de garantir que todos tenham acesso ao que
criamos . Há também um forte caso de negócios para acessibilidade. Inúmeros estudos mostraram que sites acessíveis têm melhores resultados de pesquisa. São Morrell Seo amigável, alcançar um público maior, incentivar boas práticas de codificação e ter melhor usabilidade. modo geral, existem também argumentos jurídicos para o efeito em determinados países. Cumprir um certo nível Acessibilidade é a lei. Alguns desses países são o Canadá, que é de onde eu venho, bem
como a Alemanha, França, Noruega e algumas partes dos Estados Unidos. Há mais países que adotaram algum tipo de diretrizes legais, acessíveis, mas eu obviamente não estou familiarizado com, com todas as leis fora do lugar onde eu moro. Então eu também quero fazer um ponto de que existem diferentes graus de acessibilidade que
entrarão em nossa próxima palestra, e realmente não é tão difícil quanto parece implementar. Então, se você está se sentindo sobrecarregado ou preocupado em incorporar isso em seus projetos ou trazer isso para sua corporação, não é tão difícil quanto você pensa, e eu acho que você terá sucesso em fazê-lo.
3. 03 WCAG: as diretrizes de acessibilidade de conteúdo da Web, que eu vou me referir como o W C A. G a partir de agora, tem três níveis de acessibilidade um duplo A e Triplo A sendo o
nível mais baixo e mais fácil de se encontrar no Triplo A sendo o nível mais alto e mais difícil de acessibilidade. Para mim, o W C A. G é referido como a inacessibilidade padrão-ouro. Obviamente, não sei em que parte do mundo você está, então peço que investigue as leis de acessibilidade do seu país se houver alguma. Alguns países têm leis de acessibilidade em determinados campos, como transporte ou banca, mas isso pode não se aplicar ao seu trabalho. Alguns países têm seu próprio conjunto de leis de acessibilidade que talvez não sejam diretamente do W. C. A. G. Na maioria dos países ocidentais, há alguma referência ao W C A G dentro suas leis de acessibilidade, ou eles abraçaram o W C A G totalmente. Por exemplo, no Canadá, recém-criado um site atualizado a partir de 2014 tinha que atender a um nível um padrão para referência . Estou gravando isso em 2020 e atualmente nossas leis estão se movendo para atender a dois padrões. Assim, em 1º de janeiro de 2021, os produtos baseados na Web devem atender aos padrões A duplos, e isso está em funcionamento há anos. As empresas que não estão atualizando produtos ou criando novos produtos tiveram anos para trabalhar para a reunião da escola. padrões Triple A não são legalmente exigidos no Canadá neste momento. Eu não acho que seja legalmente exigido em nenhuma área do mundo que eu possa pensar. Mas se eu estiver errado e esse for o caso em seu país neste momento, então certifique-se de olhar para ele e cumprir esses padrões. Além disso, tenha em
mente que alguns países podem ter diferentes leis de acessibilidade para órgãos governamentais versus empresas privadas. Eu realmente não posso aconselhar ninguém com confiança fora do Canadá, então reserve um tempo para fazer uma pesquisa no Google. Tenho certeza que seu site do governo descreverá os detalhes. Se houver algum agora, vamos rever algumas estatísticas gerais sobre acessibilidade. Como eu disse, vou me concentrar na América do Norte, já que é com isso que estou mais familiarizado. E se você não mora no Canadá ou nos Estados Unidos, peço que procure estatísticas de deficiência em seu próprio país, então quase 14% da população
canadense com 15 anos ou mais, que é 3,8 milhões de indivíduos, relataram ter uma deficiência que limitava suas atividades diárias. Cerca de 56,7 milhões de americanos, que é 18,7% da população dos EUA, experimenta algum tipo de deficiência. Desse número, verificou-se que 38,3 milhões têm sérios problemas de deficiência, que representa 12,6% de toda a população
dos EUA. Esta informação de ambos os países vem do recenseamento mais recente que eu poderia encontrar que contêm esta informação, que é de 2012. Como podem ver, há milhões de pessoas só nestes dois países que têm algum tipo de deficiência. O que essa deficiência é poderia realmente muito ah, mas o ponto é que eu estou tentando fazer é que 14 a 18% não é tanto um caso de ponta como você pode pensar. Isso é quase 1/5 da população. Tenha em mente que o censo não inclui Crianças, então as crianças também podem ser experimentados algum tipo de deficiência e adicionando a esses números se houver um monte de fatos e estatísticas em você. Então, o que você pode fazer com essa informação? Como designer, seria ótimo se a empresa para a qual você trabalha já visse a acessibilidade como importante. Se não o fizerem ou legalmente não precisarem, podem ver as leis. Se houver alguma ou compartilhar estatísticas de deficiência para o seu país com sua equipe ou seu chefe, você também pode compartilhar alguns motivos de negócios para incluir acessibilidade no processo de design e desenvolvimento. Como eu disse anteriormente, aumento do alcance do cliente é grande. Descobri que compartilhar essas informações ao longo do tempo pode trazer algumas pessoas a bordo para tornar seus produtos mais inclusivos. Se convencer sua equipe ou empresa não é um fator para você, podemos começar a falar sobre as opções físicas disponíveis para você. Então, Opção um. Você pode projetar seu produto ou site para ser completamente acessível como está. O que eu quero dizer com isso é que há uma versão do seu site ou produto, por exemplo, e ele apenas é acessível e atende todas as diretrizes que precisa para todos os usuários o
tempo todo . Opção dois. Você pode usar algo chamado inacessibilidade toggle para que você tenha uma
versão não acessível do seu site ou produto, e então em algum lugar haveria uma alternância, a fim de colocar em ordem para que o usuário para
colocá-lo em modo de acessibilidade Eu pessoalmente prefiro fazer a Opção um. Se eu posso torná-lo acessível e apenas fazê-lo uma vez, por que eu não faria? Isso faria reduz complicações em longe algumas boas razões para empregar uma acessibilidade. Tolerável em vez disso é que talvez você queira atualizar seu site ou software para ser acessível sem refazê-lo completamente, porque ele já existe, então você pode ter um tipo de acessibilidade alternar no seu site, cabeçalho ou nas configurações do seu aplicativo. Isso pode ser por algumas razões. Um comum que vem à mente é que a cor da marca da empresa é uma cor ex inacessível para aqueles que são daltônicos. Então, em vez de mudar completamente a marca, eles criarão alternância de acessibilidade, na qual a cor da marca se torna muito mais escura. Um bom exemplo disso é a interface IOS eso. Se tiver um iPhone, pode aceder às definições e ativar a alternância de acessibilidade. partir daí, você verá que o tom de azul que o IOS usa para texto de repente é um tom mais escuro de azul. No final do dia, ambas as opções eram boas. Ambos seguiram o W C A. G, e ambos puderam cumprir os padrões legais, o que você escolhe depende de você e da sua situação.
4. 04 blindness de cores: daltonismo ou,
mais precisamente, mais precisamente, deficiência de visão
colorida é uma condição de herança Nen que afeta os machos com mais freqüência do que as fêmeas. Estima-se que 8% dos machos e cerca de 1% das fêmeas tenham problemas de visão colorida. Se você não é daltônico, é meio difícil entender completamente o que as pessoas com diferentes tipos de daltonismo vêem em algum software de design é. Há plugins que irão mostrar-lhe como é o seu design para aqueles que são daltônicos Um que eu gosto de usar no esboço é chamado Stark, . e eu liguei-o como uma referência ao lado da estrutura na tela. Eu vou mostrar a vocês uma paleta de cores do arco-íris que eu criei para o bem deste exemplo, e eu vou passar por oito tipos diferentes de daltonismo para mostrar essa paleta se parece para as pessoas que têm esses tipos de visão de cores Deficiências. Os tipos mais comuns de cegueira de cor hereditária são devidos à perda ou função limitada do cone vermelho conhecido como próton ou cone verde. Conhecido como pigmentos fotográficos Du Tran. Este tipo de daltonismo é comumente referido como daltonismo verde vermelho, então existem quatro tipos diferentes de daltonismo verde vermelho. Então, como você pode ver aqui, é
assim que nossa paleta de arco-íris se parece quando você tem proteína obeah e dono pia. E aqui você vê outro tipo de daltonismo verde vermelho, que é uma anomalia prote. E você depois da anomalia. O próximo tipo menos comum de cegueira de cor é a cegueira de cor amarela azul. Você pode ver neste exemplo que parece muito diferente das idéias anteriores de daltonismo
verde vermelho . Então este é tentar anomalia tote, eo segundo tipo é tentar Zenobia, o tipo final e menos comum de cor. Cegueira é cegueira de cor completa. É raro que as pessoas sejam completamente daltônicas, então vocês podem ver aqui que temos nossa colheita AC Roma tonalmente e AC Roma top da CIA. E isso é o que as pessoas veriam se vissem cores muito limitadas no
geral e nenhuma cor. E isso é o que as pessoas veriam se vissem cores muito limitadas no
geral e nenhuma cor Então agora eu vou dar-lhe algumas dicas para projetar para daltonismo. A primeira dica é evitar as seguintes combinações de cores, que são especialmente difíceis em pessoas daltônicas. Então eles são verde e vermelho, azul e marrom, azul e roxo, verde e azul como re em amarelo, azul e cinza verde e cinza e verde e preto. Eu realmente não espero que alguém memorize essas combinações, mas são apenas combinações para tentar evitar sempre que possível. E você sempre pode se referir a esta ou esta informação pode ser encontrada em outros sites. Tenho certeza que quando você está escolhendo cores, a segunda dica é torná-lo monocromático, então isso não é uma obrigação. Mas usar vários tons de uma única cor em vez de várias cores é, naturalmente, uma maneira infalível de evitar problemas de cegueira de cor. Isso porque se você estiver usando uma cor, você estará criando diferentes tons dessa cor, então cada um terá diferentes graus de escuridão e leveza. As pessoas que são daltônicas são certamente capazes de ver os diferentes graus entre a luz e escuridão. Então, se você escolher cores diferentes, você pode não notar que eles têm o mesmo nível de saturação ou o que quer que seja. Outro semelhante a isso pode ser assim para uma pessoa daltônica. Essas cores podem acabar parecendo indistinguíveis. Dica número três é usar cores de alto contraste. As pessoas cegas ainda podem perceber o contraste, bem como a diferença na tonalidade, saturação e brilho. Use isso a seu favor. Muitas pessoas daltônicas relatam ser capazes de distinguir melhor entre cores brilhantes em vez de escuras, que tendem a desfocar umas nas outras. Então eu estou apenas mostrando um exemplo de um site que usou um monte de cores brilhantes. Quatro são linhas maiores. Algumas pessoas ligeiramente cegas são capazes de ver uma cor, mas apenas se houver massa suficiente para ela. Se uma linha de cor for muito fina, ela não aparecerá como a cor certa. Tenha em mente que você não precisa necessariamente fazer isso para componentes que não precisam ser focados. Como se você tivesse uma divisória. Isso não é realmente um grande foco para o usuário. Você não precisa adicionar mais massa a ele para que ele possa ser mais facilmente visível para a cor. Pessoas cegas. Um exemplo disso é este site que eu estou mostrando a vocês como se eles tivessem texto ao longo dessas linhas, e talvez eles quisessem chamar a atenção para isso, engrossando essas linhas. Outro exemplo talvez seja em um campo de formulário. Digamos que você não preencheu o campo do formulário, e agora ele tem seu contorno ou subjacente fica vermelho, por exemplo, você pode querer adicionar algum peso a isso para que as pessoas que são ligeiramente daltônicos
admitam que contorno passou de preto para vermelho. O número cinco é muito importante. Não suponha que as cores sinalizarão emoções por si mesmas. Se você estiver usando vermelho para sinalizar ruim ou aviso, considere adicionar outro elemento simbólico para passar o ponto para os espectadores daltônicos. Um exemplo disso pode estar em alerta. Ícone. Outro grande exemplo do mundo real disso é a trilha. Oh, então é isso que você está vendo na tela agora. Eles permitem que os usuários codifiquem suas tarefas e rótulos de cor, mas eles também têm um modo de acessibilidade ou todas as cores têm padrões. Se você é daltônico, pelo menos será capaz de diferenciar tarefas através do padrão. Se você não pode comprar a cor agora entrando em contraste de cores eso contraste de cor entre o texto e sua cor de fundo vai ser a coisa que você estará verificando mais. Como designer, há um monte de verificadores de contraste de cor lá fora todos os links verões, material de
referência, o esboço plug em que eu falei anteriormente. Stark também tem um verificador de contraste de cor embutido,
então, para atender aos padrões A duplos, seu corpo copia a taxa de contraste precisa ser 4,5 para 1, então esses números estão em uma escala de 1 a 21. O primeiro número, 4.5 neste exemplo, faz referência à luminosa das cores claras. Amor. O segundo número um, neste exemplo, faz referência à luminosa das cores escuras. Portanto, 4.5 ninguém deve abordar múltiplas deficiências visuais, como deficiências de cor e perda de contraste
relacionada à idade . Sensibilidade. O texto grande é considerado 18 pontos ou mais para fins de acessibilidade. Assim, para texto grande, a taxa de contraste é um pouco menor. É 3 para 1 porque o texto é maior. As pessoas que têm deficiências de visão são mais facilmente capazes de ver o texto. Então ah, contraste
mais alta simplesmente não é necessária. Quando você coloca suas cores de texto e plano de fundo em um verificador de contraste de cor, ele irá deixá-lo saber se ele passa um duplo ou triplo padrão A e se passa qualquer um
desses níveis com cópia de corpo ou texto grande.
5. 05 Acessibilidade de texto: Outra coisa sobre a qual você tem controle total como designer é a acessibilidade do texto. Uma vez que você é a pessoa que vai escolher os têxteis, eso em formas gerais de letras e símbolos devem contrastar bem com seu fundo. O tipo de letra não deve ser muito condensado ou estendido, não muito fino ou grosso ou não ter variações grossas e finas dentro das estruturas das formas das
letras. Então, algumas fontes que atendem a esses requisitos Oh, são Helvetica Ariel Future gill sans para Dana, Avenir Franklin Gothic
e para Tigger, e você pode ver exemplos deles na tela agora. Claramente, estes são essencialmente muito legíveis Sand Saref, então qualquer coisa nessa família vai funcionar muito bem. Isso não significa que estes ar as fontes Onley que você tem que escolher, há centenas que você tem que escolher, mas algo que parece semelhante a um desses exemplos olhos provavelmente uma aposta segura. Há também diretrizes no W. C E g para a altura da linha, também chamado de arrendamento. Se você é um designer gráfico, , então o W. C A. G afirma que o espaçamento entre linhas deve ser pelo menos 1,5 vezes o tamanho da fonte. Você está trabalhando com e o espaço entre parágrafos deve ser pelo menos duas vezes o tamanho da fonte . Então, como você pode ver aqui, temos três exemplos diferentes com espaçamento de linha diferentes, que é literalmente o espaço entre cada linha de texto. Então, baseado no que o W. C. A G literalmente diz, eu argumentaria que as declarações são enganosas porque dizer que o espaço é pelo menos duas vezes o tamanho significa que ele pode ser infinitamente maior, e, em seguida, o espaçamento ainda estaria acessível ou legível. Isto é obviamente falso. Muito espaçamento é Justus Bad é muito pouco espaçamento. Como você pode ver neste exemplo, o 1º 1 tem pouco espaçamento. A segunda opção foi com um moinho tem muito espaçamento. Ainda é difícil ler sobre de maneira diferente, e então a terceira opção à direita tem espaçamento suficiente. Uh, então você realmente quer manter sua altura de linha em torno de 1,5 vezes o tamanho do corpo copia tamanho da
fonte e os parágrafos andando em torno de duas vezes o tamanho, Ah, do tamanho da fonte. Se você estiver seguindo regras de tipografia adequadas, então você também irá aderir às regras de acessibilidade em oito Lee, porque você ainda está permitindo que as pessoas leiam texto da melhor forma possível. Então o que isso significa é que se a sua cópia do corpo tiver 16 pixels, altura da linha será de 20 pixels. Isso ainda está dentro do reino aceitável para as pessoas lerem, que é próximo do que o W. C. E G pede. Da mesma forma, as diretrizes para espaçamento entre letras é que ele deve ter pelo menos 0,12 vezes o tamanho da fonte e o espaçamento entre palavras deve ser pelo menos 0,16 vezes o tamanho da fonte. Mais uma vez dizendo que pelo menos é enganoso ano, é realmente mais como aproximadamente esses tamanhos. Como podem ver,
temos três exemplos diferentes mais uma vez na extrema esquerda. Como podem ver, É muito apertado no meio, as letras ou muito espaçado para fora e à direita. As letras têm uma boa quantidade de espaçamento entre elas que é fácil de ler, e deve ser acessível, então letras e palavras sendo muito espaçadas tornariam terrivelmente difícil de ler. Como você pode ver, estou mostrando como tudo isso se parece. Uma dessas opções é claramente mais fácil de ler. Também mantendo mês esses conceitos e exemplos que estou usando estão relacionados com
conjuntos de caracteres latinos desde que eu falo um orc em Inglês. Se estiver a escrever num sistema de escrita diferente. Tes con, esses conceitos podem precisar ser ligeiramente ajustados. Algumas outras regras básicas do W C G para tornar seu texto acessível são o número 12 Nunca justifique seu texto. A justificação cria lacunas entre as palavras, o que dificulta a leitura. Então, seria melhor não definir seu texto para justificar uma borda irregular, que é o que você vê. Ah, nos 3 primeiros exemplos é o melhor, já que ele está realmente permitindo palavras consistentes e espaçamento consistente entre letras dentro de cada linha. Então, como você pode ver texto justificado à direita, se o seu designer gráfico você pode entender o termo prestes a usar, há um monte de lacunas essas lacunas no designer gráfico chamado Rivers. Então a justificativa é criar muitos rios, o
que rompe a capacidade do usuário de ler. Isso é algo que é realmente difícil para qualquer um. Não tem nada a ver com um tipo específico de problema que eu citei. Neste caso, não
há como deficiência específica que eu posso pensar onde isso é agora difícil ,
obviamente, é mais difícil se você tem, como baixa visão. Mas é apenas lee inato difícil para todos para re justificar texto que não tem sido corretamente datilografado. Como você pode ver, as outras três opções são muito mais fáceis de ler, então há também algumas regras em torno de imagens de texto, que eu sinto como nosso raramente usado hoje em dia. Mas se você estiver usando imagens de texto que é decorativo e não contém outro
significado visual do que não há nenhum requisito de contraste de cor, este requisito de contraste também não se aplica aos logotipos, que é a única calma, exemplo comum de uma imagem de texto que eu posso pensar. Portanto, se você estiver branding, a cor não atende aos requisitos de contraste. É bom deixar o logotipo como está, mas talvez você possa usar uma cor diferente para outros elementos em seu site ou produto para
substituir a cor da marca não acessível, exceto para legendas e imagens de texto, os usuários também precisam ser capazes de redimensionar o texto dentro de seu navegador sem tecnologia assistiva , até 200% sem perda de conteúdo ou funcionalidade. Então, em suma, isso significa que os usuários devem ser capazes de ampliar uma página da Web ou o que até 200% para atender a esta diretriz. E isso é para pessoas com baixa visão, o que pode ser por várias razões. Então isso é algo que um desenvolvedor não estaria encarregado de nenhum designer. Mas ainda é importante entender o que precisa ser feito fora do seu controle direto para garantir que os sites estejam acessíveis para todos.
6. 06 formas: há tanta coisa que vai para a criação de formulários acessíveis. Uma coisa importante é que você sempre precisa ajudar as pessoas a entender o que devem fazer e escrever em um campo de formulário. É por isso que é melhor se os rótulos não desaparecerem. Mesmo quando uma pessoa está preenchendo o campo, Ter um rótulo que está dentro da área de entrada significa que as pessoas perdem ou contextualizam uma vez começam a digitar. Se eles preencheram o campo incorretamente ou acidentalmente preencheram o campo errado, provavelmente não conseguiriam dizer, já que o rótulo foi substituído pelo que digitou. Algumas opções que você tem ao projetar formulários são toe tem um rótulo permanente acima do campo, como você pode ver aqui neste exemplo, no que está correto, não no que está incorreto. E a segunda opção é um campo de formulário de estilo dos EUA material, que significa que o rótulo também é o texto de espaço reservado até que você comece a digitar e, em seguida, ele anima para se tornar um rótulo na parte superior. Então esta é outra maneira de contornar o conceito de ter sempre um rótulo presente em uma nota
semelhante, assim como você deveria estar fornecendo rótulos. Você também deve fornecer instruções. Quando o conteúdo requer uma entrada do usuário, isso pode ser feito de duas maneiras. Uma maneira é que você deve fornecer instruções, geralmente sob o campo, sobre o que o usuário deve preencher. Talvez o rótulo do formulário seja muito vago, e você quer algum texto auxiliar acompanhante para ajudar o usuário a entender a segunda maneira que você poderia tomar. Isso é fornecer mensagens aéreas, que apareceriam sob o campo também, geralmente eso. Quando ocorre um erro, você deseja ajudar o usuário a encontrar onde o problema está. Por exemplo, se você deve estar destacando o campo com o erro para que eles vejam se este é um
campo de formulário em um dispositivo móvel, então você também deve ter o navegador APP Scroll para usar o campo com. O erro é
que, uma vez que pode estar fora de você para o usuário, você vai querer ter certeza de fornecer uma explicação específica e
compreensível sobre o que é o erro e também sugerir correções, se possível. Então, por exemplo, se alguém preenche um campo de preço com letras, seu texto deve dizer especificamente que este campo foi preenchido incorretamente e que ele Onley exceto números com dois pontos decimais, por exemplo, isso ajudará o usuário a ser capaz de preenchê-lo corretamente na próxima vez que talvez, por qualquer motivo, não percebeu
que não pode colocar letras em um campo de preço relacionado com o uso da cor. Você também quer ter certeza de que a representação visual do erro não será muito sutil para pessoas que têm algum tipo de deficiência visual. Por exemplo, o campo de formulário apenas ficando vermelho pode ser muito sutil, especialmente dependendo da cor do campo. Quando ele não está em seu estado de erro, para que você possa adicionar um ícone, você pode adicionar um texto aRer abaixo. Você pode alterar a cor do rótulo ou qualquer combinação dessas coisas para
ter certeza de que é claro que este é um estado de erro e que não há apenas uma simples
mudança de cor . Mas há algum tipo de adição ou mudança óbvia neste estado
7. 07 áreas de alvo: uma parte da experiência do usuário que não tem apenas a ver com acessibilidade é a
área de destino dos botões ou qualquer outro elemento clicável. Algumas pessoas poderiam ter mãos maiores e outras. Algumas pessoas terão algum tipo de deficiência motora, então isso é realmente algo que é útil para todos. Se seus usuários tiverem deficiências motoras, pode ser difícil para eles selecionar itens na página com precisão. O trabalho dos designers é garantir que as áreas-alvo não sejam muito estreitas ou difíceis de
acessar . O W C. A. G tem um critério mínimo aceitável, que é 44 pixels por 44 pixels. Então essa é uma área alvo, tamanho quadrado
mínimo 44 ou 44. Claro, sua área alvo pode ser maior. Seu botão pode ter uma altura alvo de 44 pixels, e a largura do botão pode ser de 100 50 pixels, modo que o alvo com pode se tornar 150 pixels para corresponder. Isto é apenas um destaque. Esse 44 pixels deve ser o seu padrão mínimo, então isso deve ser adequado para todos. Mas você pode aumentar seu padrão mínimo se você escolher. Por exemplo, os produtos
do Google costumam usar uma área de destino de 48 pixels. Em vez disso, não
importa o que você escolher, certifique-se de que ele atende a esse padrão mínimo e que você o usa de forma consistente e que o
tamanho da área alvo escolhida se encaixa fisicamente no seu design.
8. 08: Existem vários regulamentos gerais em vigor em relação ao idioma usado em um site ou produto
digital. De uma perspectiva de desenvolvimento, a linguagem humana da página Web precisa ser determinada programaticamente. Isso também se aplica a sites de vários idiomas. Esta é a tela Leitores e dispositivos Braille podem identificar automaticamente o idioma está sendo usado no site, que entrará em mais tarde a partir de uma perspectiva de design. Às vezes, nós, como designers, precisamos escrever pequenas quantidades de cópia para sites ou software. Geralmente são coisas como botões, cabeçalhos, rótulos, etc. Então você vai estar olhando para alguns bons exemplos disso nos próximos dois slides, onde eu estou mostrando exemplos que têm texto claro e e cópia. Portanto, há algumas regras básicas que vêm junto com isso. Em primeiro lugar, todos os títulos e rótulos precisam ser descritos precisam descrever o tópico ou a finalidade do campo de
página ou qualquer outra coisa que eles estão descrevendo. A Z concedendo o exemplo. Isto é bastante simples. Você só precisa colocar o tempo para ter certeza de que sua cópia faz sentido para a maioria, se não todas, pessoas, e é relevante para o tópico em questão. Este exemplo é muito bom. Cada uma das seções e as abas são claramente nomeadas, uh, nada de surpreendente lá, que é exatamente o que você quer. Mais uma vez, neste exemplo, os botões se relacionam diretamente. O Teoh. Que tipo de informação você vai obter na próxima página, o texto e faz. Ele coincide com a intenção do botão e o que o usuário vai entrar em seguida. Então, continuando. Em segundo lugar, a finalidade de qualquer link que possa ser texto de link em um parágrafo ou um botão, por exemplo, pode ser determinada a partir do texto sozinho ou do texto do link juntamente com seu contexto de link determinado
programaticamente . Eu sei que é exagerado, mas isso é essencialmente o que eu estava dizendo antes, onde é como se os botões fizessem sentido em relação ao que vai acontecer a seguir. Se eu for comprar tudo, eu vou para uma página de itens que eu posso comprar. Se eu for para o botão que diz o multi vitamina A multi vitamina 18 plus, eu vou ser levado para uma página que fala sobre um multivitamínico para pessoas que têm 18 mais , uh, sim, como eu estava dizendo, não relacionado com o exemplo. Então, em poucas palavras, isso significa que o ideal seu texto de link deve descrever o que o link está fazendo. Por exemplo, não relacionado ao que aparece na tela. Se eu tiver um design de carro com um botão que diz Go, isso é ridiculamente vago, eu não sei o que eu vou fazer, mas se ele diz ver mais receitas, claramente isso é descritivo. E como usuário, eu entenderia que há Link me levando a uma página cheia de receitas, certo? Existem algumas situações em que o texto ambíguo é aceitável. Por exemplo, se você está criando jogo e você tem links para três portas nas quais o usuário não deve saber o que está atrás das portas, porque esse é o ponto do jogo. Dar às portas nomes ambíguos faria sentido, uma vez que o objetivo é criar suspense para o usuário
9. 09 Compromisso de visão: 57% dos adultos relataram alguma forma de perda de visão, a maioria dos quais é corrigida por lentes. Cegueira completa foi relatada por 0,9% dos adultos. A Organização Mundial da Saúde estima que haja 246 milhões de pessoas
em todo o mundo baixa visão e 39 milhões de pessoas cegas, que indica que 86% das pessoas com deficiência visual têm baixa visão. Estou dizendo essas estatísticas, porque em um ambiente de negócios, muitas vezes ouço que a cegueira é comparativamente sem importância porque é tão raro e não vale a pena apoiar no produto. Eu imploro para diferir, já que o objetivo de tornar seu produto acessível é que ele deve funcionar
literalmente para todos, que inclui aqueles com perda de visão severa. A coisa mais conhecida que as pessoas com baixa visão muitas vezes fazem uso é leitores
de tela para ouvir a Web. De certa forma, existem diferentes tipos de tela ou anos, não, todos funcionando exatamente da mesma maneira. Mas, em geral, eles trabalham de forma semelhante o suficiente. Claro, qualquer texto no site ou APP será lido pelo leitor de tela,
configurando informações mais detalhadas a partir de uma perspectiva de desenvolvimento é o que realmente faz ou quebra a experiência para aqueles de deficiência visual. Uma questão importante é que os leitores de tela precisam ser capazes de ler imagens. Eles fazem isso usando todo o texto, que é abreviação para texto alternativo. Então, aqui está um exemplo de como todo o texto se parece. Um HTML na tela agora. Suas descrições no código no código atribuído à imagem para que o leitor de tela pode informar o usuário o que as imagens relacionadas a você também pode descrever a imagem no corpo . Copie em vez disso, desde que os usuários estejam cientes do contexto da imagem, você deve ter certeza de descrever o que está acontecendo na imagem e relacionar como ela pertence
ao texto. Então, em suma, não use linguagem genérica como imagem para o seu texto antigo. Você quer que seja mais descritivo do que isso. Se a imagem é puramente decorativa ou como eu disse, se há uma descrição no corpo do texto para acompanhá-la, você não precisa do dedo do pé em todo o texto. Mas adicionar um atributo antigo vazio normalmente fará com que o leitor de tela o ignore. Se você não escrever qualquer texto todo, alguns leitores de tela lerão o nome do arquivo para o usuário, que é a pior experiência que você pode fornecer. Então essa imagem pode ser nomeada como uma cadeia de números, pelo que sabemos, pois este é um pequeno detalhe. Mas precisa de muita atenção porque realmente afeta milhões de pessoas em todo o mundo que estão usando leitores de tela.
10. 10 Áudio e vídeo: Existem vários regulamentos quando se trata de áudio e vídeo para deficientes auditivos. Vamos rever estes regulamentos separadamente. Assim, o 1º 1 para áudio pré-gravado algum tipo de alternativa precisa ser fornecido que apresente informações equivalentes ao lidar com conteúdo Onley de áudio pré-gravado. Portanto, isso significa que o ar legendas fornecido para todo esse conteúdo de áudio, você pode fornecer legendas ou legendas permanentes para os deficientes auditivos. A legenda também deve ser fornecida para conteúdo de áudio ao vivo ou pré-gravado. Se, por qualquer motivo, você preferir não fornecer legendas escritas ou optar por não fornecer legendas, então a Interpretação de linguagem gestual precisa ser fornecida para todo o conteúdo de áudio pré-gravado. interpretação da linguagem gestual também está incluída nas diretrizes para o Triplo A no W. C A. G. Então, se você está tentando atender a uma diretriz de nível A triplo do que você precisa incluir a
linguagem de sinais , não
é na opção de legendas versus linguagem gestual. Quando se trata de vídeo pré-gravado apenas conteúdo, algum tipo de faixa alternativa ou áudio precisa ser fornecido que dê ao espectador informações
equivalentes. Se o vídeo tiver um áudio da empresa, obviamente uma descrição de áudio também precisa ser fornecida para esse vídeo pré-gravado
11. 11 Acessibilidade do teclado: acessibilidade do teclado significa que, como criadores de produtos digitais, garantimos que todos os elementos interativos sejam acessíveis via teclado. Para aqueles que têm uma deficiência motora em que eles não podem facilmente usar um mouse ou talvez não pode usar um, ele vai isso pode ser devido a uma série de razões, como uma deficiência motora permanente. Isso pode ser devido a artrite ou problemas temporários como túnel do carpo ou pulso quebrado, etc. Se você não está familiarizado com o que significa ser considerado acessível pelo teclado, isso significa essencialmente que o usuário pode navegar o site completamente usando o teclado. Principalmente, o botão superior é usado para se mover através de diferentes elementos interativos. A barra de espaços na tecla Enter também pode ser usada para adicionar ou salvar elementos se você estiver criando algo novo ou editando algo neste produto. Os botões escape e delete ou backspace também são comumente usados para excluir ed, emitir ordem ou excluir elementos. As teclas de seta para navegar também são muito comumente usadas. A acessibilidade do teclado é um dos aspectos mais importantes da acessibilidade da Web, uma vez que afeta tantos usuários. Não só ajuda os usuários que têm uma deficiência motora permanente. Ele também ajuda usuários com deficiências temporárias, e usuários cegos costumam usar o teclado para navegação também. Eu obviamente não cobriu todos os tipos de usuários que isso afeta, mas o grupo de pessoas é bastante rápido. Vou passar por diferentes elementos interativos que são comumente construídos errado para acessibilidade
do teclado. Não basta apenas certificar-se de que seu site ou aplicativo da Web é acessível pelo teclado certificando-se de que o usuário pode simplesmente seguir tudo. Precisa haver uma experiência consistente em como cada chave é usada, e precisa haver uma certa lógica para a ordem de navegação, que é uma coisa enorme que as pessoas muitas vezes negligenciam. Vou passar por vários exemplos disso mostrando elementos de análise calmos onde isso poderia ser esquecido. Então o primeiro exemplo na tela agora são modelos. Como os motéis são tecnicamente um elemento fora da tela, pode ser um enorme desastre de acessibilidade se não for executado corretamente. Quando um usuário tem um móvel aberto e está navegando dentro desse motile, é
necessário que o foco permaneça dentro do móvel e não se mova através de nenhum dos elementos por trás do motile. Como você pode ver no exemplo seria extremamente demorado para tocar através de todos os elementos por trás do móvel para voltar para ele. Se os modelos abrem, a usabilidade de foco deve ser essencialmente presa dentro desse motile. Outro comum é os estados de pairar. Como os estados de foco e foco têm funcionalidade diferente, muitos produtos têm ações ocultas sob estados de foco. Um bom exemplo é o estado de foco do Facebook para reações que você não deve pular além do
Dia do Passamento . Se você quiser se certificar de que seu site ou produto está acessível, como você pode ver no exemplo à esquerda, o usuário está bloqueado de abrir a guia sem um mouse no exemplo à direita, você pode ver que aplicar um foco a abre o cursor do mouse e permite que o usuário se concentre sobre cada item dentro do componente pairar. O último exemplo. Eu vou falar sobre Seus cartões de design de carro são muito comumente usados em produtos nos dias de hoje , e há muito mais estrutura e orientação sobre como as cartas devem ser projetadas. Mas às vezes há dificuldade em criar cartões acessíveis e amigáveis de
acessibilidade devido às suas complexidades e interações variadas. Gmail é um bom exemplo de design de carro acessível. Como você pode ver, eles assinam um foco ST para cartões. Quando eles são agora a ajuda para todas as ações de passar o mouse são realizadas quando o cartão está em foco e os itens acionáveis do Onley podem ser focados, não todos os elementos dentro do cartão. Esperemos que esses três exemplos tenham ajudado você a entender a complexidade da acessibilidade do teclado. Estes foram os componentes mais comuns com maior complexidade que muitas vezes é ignorado pelas equipes de
design e desenvolvimento. Mas é extremamente importante prestar atenção a esses detalhes se você quiser criar uma boa experiência para todos os usuários, especialmente porque às vezes as pessoas gostam de pesquisar itens sem
motivo relacionado a deficiência , então isso é extremamente útil para quase todos.
12. 12 ferramentas: Existem vários tipos de ferramentas de acessibilidade para diferentes plataformas. Vamos rever essas ferramentas para a Web para dispositivos IOS e dispositivos Android. Então vamos entrar em buracos de discussão de acessibilidade da Web, sobre os
quais falamos muito mais cedo no curso, que são basicamente as ferramentas disponíveis para fazer uma versão acessível do seu site ou aplicativo da Web. Como eu disse anteriormente, é
claro, você não pode simplesmente tornar seu produto ou site acessível desde o início. Mas se você não pode ou não quer Teoh, quer construir inacessibilidade, alternar ou comprar um serviço que fornece alternâncias de inacessibilidade construídas é a sua próxima melhor opção. Então agora vamos entrar em todas as ferramentas disponíveis para dispositivos IOS. Um desenvolvedor deve garantir que seu aplicativo funcione com as ferramentas relevantes
fornecidas com os
EUA. EUA Portanto, algumas ferramentas podem ou não ser relevantes para seu aplicativo. Por exemplo, se você não tiver nenhum componente de vídeo ou áudio
, não precisará de legendas próximas. A primeira ferramenta que vamos falar é o IOS voiceover, que permite aos usuários usar controles baseados em gestos para ouvir uma descrição de tudo o que acontece na tela, eles podem ajustar a taxa de fala, pitch e linguagem. O IOS tem mais de 30 idiomas disponíveis para voz over. Esta é essencialmente a versão IOS de um leitor de tela. Por isso, se pretende que a Europa seja totalmente acessível, sua equipa de desenvolvimento deverá garantir que todo o texto funcione com narração numa nota
semelhante. Há também a dublagem Braille Keyboard. É bastante auto-explicativo. É um teclado Braille IOS com feedback de digitação de áudio. Há também acesso guiado, que restringe a entrada de determinados usuários para que eles possam permanecer na tarefa. Isso geralmente é usado para usuários com autismo ou outros desafios sensoriais ou relacionados à tensão. A última ferramenta para IOS é legendagem e descrições, o que também é bastante simples. Ele permite que você configure legendas e descrições de áudio durante a reprodução de vídeo como um todo. O IOS tem uma opção de acessibilidade para entrar no modo de acessibilidade também, para a sua aplicação e apenas para o seu dispositivo em geral. Ok, então agora vamos finalmente discutir todas as ferramentas disponíveis em dispositivos Android. O primeiro é usar um screener aqui, modo que o leitor de tela que vem com dispositivos Android é chamado de Talk back screen Reader que permite que você interaja com seu dispositivo usando toque e feedback falado. Talk Back também descreverá coisas para o usuário, e a outra opção disponível para usuários também é chamada Selecionar para falar, que não estou mostrando na tela agora. Isso ainda é falar de volta, mas é muito semelhante. Então, basicamente permite que o seu feedback falado dedo só ocorrem em determinados momentos, que você pode definir um na mesma veia. Eles também têm acesso por voz, o que permite que os usuários controlem seus dispositivos com comandos para que seja mãos livres se isso for um problema para seus usuários. O acesso por comutador também permite que os utilizadores alterem os seus comutadores ou o respectivo teclado para controlar o dispositivo em vez do ecrã tátil. Isso pode acontecer porque os usuários têm algum tipo de problema de mobilidade em que é difícil para eles usar com precisão a tela sensível ao toque. E assim como o IOS, os dispositivos
Android também têm um teclado em Braille, que é chamado de Braille de volta, que permite que os usuários usem o display em Braille em combinação com intercomunicação, que ainda estão vendo na tela, se assim quiserem. Então, todos aqueles que acabei de falar estão interligados. Android também permite que os usuários alterem seu tamanho de fonte em suas opções de contraste e cor para que
você possa ajustar o trabalho do dedo com suas necessidades, quaisquer que sejam. Existem também várias ferramentas de áudio e legendas. Claro, você pode ativar legendas, que incluem legendas em tempo real, se necessário. Os usuários também podem usar transcritos ao vivo para capturar a fala e vê-lo como texto seus
amplificadores de som para aqueles que são difíceis de audição e suporte de aparelhos auditivos para usuários com aparelhos
auditivos que se comparam com dispositivos Android, a fim de ouvir o mais claramente. Claramente, essa era uma grande quantidade de informações, e há muitas ferramentas disponíveis que você pode garantir que os aplicativos funcionem. Essas ferramentas estão lá para facilitar a vida de todos. Então eu recomendo que você investigue se você está completamente desfamiliarizado com,
hum, e isso deve ser algo que sua organização ou sua equipe de desenvolvimento
também deve estar ciente, e eles devem estar trabalhando para conectar esses já ferramentas existentes para o aplicativo que vocês estão tentando criar
13. 13 conclusão: Esperemos que este curso tenha ajudado você a entender a acessibilidade como designer. Parte disso foi para o domínio do desenvolvimento, mas é importante saber qual é o escopo da acessibilidade, pelo
menos um alto nível. Apenas para recapitular o curso, discutimos o W, C, A G e diferentes estatísticas em torno da acessibilidade. Cobrimos acessibilidade para visão colorida, deficiência para deficiência visual em graus variados, deficiência
auditiva, deficiência de
mobilidade e conceitos gerais que poderiam ser difíceis para muitas pessoas, não necessariamente por causa de uma deficiência permanente. Na palestra anterior,
analisamos todas as ferramentas comuns disponíveis para ajudar a garantir que seu aplicativo esteja acessível. Espero que você tenha visto o quão importante pensar sobre todos esses elementos pode ser. Há milhões de pessoas que são incapazes de usar a maioria dos produtos facilmente se
for nossa responsabilidade, como criadores, garantir que esses processos sejam facilitados para todos. Quero agradecer-te por fazeres o meu curso. Espero que tenha aprendido muito
Cassandra Cappello, Product Designer and Educator
