Guias de estilo digital para acessibilidade: tipos, cores e imagens

1. Introdução: Olá, eu sou Tatiana Mac, e eu sou uma diretora de arte interativa e designer, atualmente com sede em Portland, Oregon. Sou realmente apaixonado por refletir as diversas comunidades em que vivemos através do meu trabalho, o que significa criar designs que sejam inclusivos e acessíveis. Sempre fiquei intrigado com o papel que a arte pode desempenhar na reflexão da nossa paisagem social . Percebi que poderia estar fazendo Maura é designer para seguir essa ética, então comecei a ler sobre Web. É a possibilidade, bem como as condições que são afetadas por uma web inacessível, e eu percebi que um monte de guias de estilo não consideram acessibilidade ou quebrá-lo completamente. Estou muito animado para falar sobre acessibilidade hoje, mas eu quero mencionar, mas eu não sou um especialista em acessibilidade de forma alguma. Mas espero que o meu trabalho e dezenas de guias de estilo interativos para criar experiências diferentes ajudem a fornecer-lhe a perspectiva de iniciantes única para que você possa aprender a tornar seus projetos mais acessíveis de forma digerível. A aula de hoje abordará alguns fundamentos em torno da acessibilidade da Web. Você sairá da aula de hoje com a compreensão básica das diretrizes de acessibilidade da Web , como trabalhar dentro de diretrizes restritivas, incompletas ou inacessíveis sobre os erros comuns cometidos, bem como como como corrigi-los . Especificamente, discutiremos por que você deve se preocupar com acessibilidade, como criar um caso de negócios para a acessibilidade em sua empresa, as principais categorias de deficiências, bem como quebrar um cara estilo em sua partes constituintes da tipografia, cor e fotografia e imagens. Então esse conhecimento fundamental. Vamos olhar para os erros comuns cometidos que tornam a Web inacessível. Em seguida, abordaremos como corrigir esses erros para que você possa começar a afetar seu próximo guia de estilo ou projeto de site. Eu também incluí uma lista de verificação que você pode executar para o seu próximo projeto no recurso da seção, Então eu estou animado que você está aqui e vamos começar. 2. Este caso para acessibilidade: Então você pode estar aqui porque você ouviu um zumbido em torno de hashtag Ally ou um 11 Por quê? Qual é um neurônio imm para acessibilidade? Ou talvez você queira fazer mais para criar designs acessíveis dentro da sua equipe. Independentemente do motivo, estou animado por você estar aqui e espero equipá-lo com algumas maneiras importantes de melhorar a acessibilidade em seus designs e incentivá-lo com as razões pelas quais a habilidade X é importante. Razão. Uma acessibilidade é para todos, não apenas para pessoas com deficiência. Na verdade, design acessível melhora a experiência para todos. Para aqueles que não precisam de necessidades especiais, isso apenas torna a experiência mais fácil de usar. Então é de um benefício universal. O design acessível é muitas vezes confundido com o termo design universal, e eles não são equivalentes. O Design Universal expressa que um design deve ser o mais universal possível e trabalhar para o maior número possível de pessoas, reconhecendo que alguns projetos não funcionarão para todos. Acessibilidade, por outro lado, começa com uma necessidades especiais específicas de diferentes pessoas, e projetos de seu primeiro design acessível é muitas vezes sinônimo de design inclusivo e eficaz. Ambos os termos significam que você está começando com necessidades especiais e construindo a partir daí para que você esteja incluindo todos. Portanto, o objetivo final é garantir que todos os designs sejam acessíveis e eventualmente acessíveis. Design e design universal serão um no mesmo. Mas até chegarmos a esse nível de saturação, é importante considerar as necessidades únicas das pessoas, a fim de maximizar suas experiências. Há esse equívoco de que as pessoas que precisam de design acessível são um pequeno subconjunto ou em cada população. Isso não é verdade. Dos sete mil milhões de pessoas no mundo, cerca de 15% das pessoas necessitam de algum tipo de considerações de acessibilidade porque sofrem algum tipo de deficiência. Isso equivale a ser cerca de 1,14 bilhões de usuários afetados e que poderiam estar tendo uma experiência negativa do usuário. Porque você não está considerando design acessível, isso é um grande número. Razão Teoh design acessível pode fornecer enormes ganhos econômicos a pouco ou nenhum custo adicional . padrões da Web acessíveis se cruzam com muitos outros padrões, como otimização de um CEO ou mecanismo de pesquisa, considerações legais, considerações técnicas para tornar seu site mais desempenho e melhor responsivo na Web práticas. Então, se você está fazendo melhorias em seu S.E O que são acessíveis, você vai ganhar o benefício de ambos com pouco ou nenhum custo extra. Acho que é o que chamamos de bogo. design acessível também aumenta o número de usuários em geral, que pode levar ao aumento do engajamento e ao aumento da conversão, o que, em última análise, leva a mais receita. Eu acho que isso é o que os empresários chamam de uma boa razão de retorno sobre o investimento. Três. Infelizmente, porque muitas marcas negligenciam os padrões de acessibilidade, as marcas que consideram acessibilidade são separadas. Então, por exemplo, se você tem um site de comércio e com uma experiência de compra suave para pessoas que exigem considerações de acessibilidade, eles vão notar que você é uma marca que parece se importar o suficiente para fornecê-los com uma experiência positiva. E, em última análise, as pessoas se importam com as marcas que primeiro se importam Razão para Como designers modernos, precisamos entender o papel crítico que podemos desempenhar em afetar mudanças sociais positivas em nosso núcleo. O que os designers devem fazer é melhorar a vida e as experiências dos nossos usuários, de todos os nossos usuários. Portanto, devemos reconhecer nosso privilégio como designers e entender onde nossos usuários vão ao ar. Vindo de parte de ser um aliado não é Knee Shing, um grupo específico de pessoas, não importa quão pequeno o grupo um aspecto de nossa indústria está usando o termo usuário ou market share para descrever um grupo de pessoas que usaram um navegador específico dispositivo ou sistema operacional . Usamos esse termo para priorizar e priorizar diferentes problemas que ocorrem porque pode haver tantos. É uma abordagem necessária e pragmática quando se fala de dispositivos, navegadores e clientes por causa de todas as permutações que podem ocorrer. Mas quando falamos de humanos, isso se torna altamente problemático. Embora as pessoas possam normalmente escolher qual dispositivo ou navegador usam, elas não podem optar por não serem afetadas por suas condições. Por isso, temos de nos certificar de que cuidamos deles e proporcionar-lhes boas experiências. Então, as quatro razões que acabamos de cobrir ou quatro das maiores. Mas há inúmeros outros benefícios em fornecer projetos acessíveis. Se você estiver procurando por um específico, a fim de fazer um caso de negócios para suas partes interessadas incluíram, uma lista de recursos está na descrição da classe 3. Entendendo a acessibilidade: antes de mergulharmos no estilo, guias vão querer atrasar uma base básica de acessibilidade. Começaremos com as categorias de deficiências, modos de deficiência, os tipos de tecnologias assistivas ou 80 em que as pessoas dependem, bem como os padrões da Web em relação aos quais a acessibilidade é medida. Estabelecer essa base ajudará a garantir que estamos fazendo as perguntas certas o mais cedo possível dentro de nossos projetos. Vamos começar com as seis principais categorias de deficiência visual. Auditivo, motor, físico, neurológico, cognitivo e fala. Os usuários afetados por deficiência visual geralmente dependem de leitores de tela ou ampliam o IRS ou ajustam suas configurações do navegador. Os usuários auditivos são deficientes auditivos, então eles geralmente dependem de visualizações de conteúdo de áudio, como legendas ocultas. Os usuários que têm deficiências motoras ou físicas geralmente dependem de tecnologias assistivas ou anos oitenta que lhes permitem navegar na Web com mobilidade limitada, como palitos de boca ou software de rastreamento ocular ou teclados alternativos. As condições neurológicas transmitem muito com base na condição específica que seu usuário tem, mas uma comum a considerar em termos de acessibilidade são convulsões. Pessoas que podem experimentar convulsões podem ser desencadeadas por movimento de acesso, então a lei geralmente depende de movimento reduzido em seus dispositivos, que é uma configuração para evitar essas instâncias. Distúrbios cognitivos como autismo ou síndrome de down podem variar muito, como transtorno neurológico, isso é importante entender como esses usuários são afetados pelo fluxo de conteúdo. Por exemplo. Por fim, é importante notar que esta lista de deficiências não é exaustiva e que os usuários podem ser afetados por mais de um. Essas condições não são mutuamente exclusivas, então os usuários podem ter experiências muito comprometidas. Então, como designers, devemos garantir que estamos mantendo essa empatia e compreensão e sempre buscando aprender maneiras melhores e mais acessíveis de melhorar nossos projetos. As condições que descrevi são permanentes, o que significa que afetarão os usuários pelo resto de suas vidas. Mas, como mencionamos antes, tornar os projetos acessíveis ajuda a todos, não apenas pessoas com deficiência, para que ele possa ajudar as pessoas que são temporariamente ou situacionais e afetadas por essa deficiência. Por exemplo, se criarmos um design navegável por uma mão, que possa ajudar alguém que esteja em situação que Lee precisa dessa assistência, como alguém que está segurando um bebê ou que pode ajudar alguém temporariamente, como alguém que recentemente quebrou o braço e, claro, alguém que é permanentemente afetado. Então, alguém que só tem um braço agora para as pessoas que têm acesso a ambos os braços usando esse site será mais rápido e fácil, e eles provavelmente não notarão nenhuma diferença. E tenho certeza que isso é o que chamamos de privilégio. 4. Como abrir um guia de estilo: aqui, gostaria de mencionar que existem diretrizes para medir nossos padrões de acessibilidade . O World Wide Web Consortium ou W três C publica o conteúdo da Web, diretrizes de acessibilidade ou W C. A. G, e é um conjunto realmente robusto de diretrizes que poderia encher toda uma classe. Mas por hoje, o que você precisa saber é que eles existem, que eles são a Estrela do Norte para acessibilidade, e eles são, em última análise, o que nós vamos rever em nossas recomendações hoje. Então, agora que estabelecemos sua compreensão básica de acessibilidade, o quê e o porquê vamos falar sobre como podemos implementar acessibilidade em nossos designs por meio de guias de estilo. Algo importante a mencionar aqui é que eu sou um crente no design como uma parte de sistemas de design . E o que isso significa é eu acredito que o design deve ser tratado como um quadro em vez de um conjunto de regras e regulamentos a cumprir. E acredito em manter o espírito do guia de estilo em oposição à lei da letra. O guia de estilo. Este cara não cumpre, especialmente em nome da acessibilidade ao projetar para a acessibilidade da Web e design digital em geral, é impossível manter o controle de todas as diferentes combinações de dispositivos e navegadores, então provavelmente estaremos quebrando algumas regras na seção a seguir. E está tudo bem. Guias de estilo podem variar bastante em termos de quanto eles cobrem. Grandes guias de estilo corporativo podem ter 200 tons de página que são realmente ótimos para obter prateleiras muito altas, enquanto sua bodega local pode ter apenas um guia de estilo de cinco páginas. Ou talvez seja só aqui em Portland. Independentemente disso, guias de estilo cobrem os mesmos tipos de seções hoje estarão passando por tipografia, cor e fotografia e imagens. Vamos discutir os tipos comuns de erros cometidos nessas três seções, bem como maneiras de corrigi-los e tornar seus designs mais acessíveis. 5. Guia de estilo: tipografia: é tipicamente a primeira seção de um guia de estilo bem após as 17 ou 18 páginas de uso apropriado do logotipo e sua importância e prioridade faz muito sentido. Tipo é a forma como recebemos o nosso conteúdo e Foncier como o fechamento do nosso conteúdo. Mas tipo se reúnem complicado porque suas origens vêm de impressão. Muitas das nuances que foram criadas para impressão não se deparam muito bem digitalmente e podem causar problemas de acessibilidade. O objetivo principal do tipo é fornecer o conteúdo para que ele precise ser legível e claro. O W três c W C A. G chama seu tipo para ser perceptível e compreensível. Essa é a principal medida contra a qual vamos medir são exemplos hoje. Exemplo. Um. Seu guia de estilo exige que seu tipo de parágrafo seja tamanho 12, que é muito pequeno. A primeira coisa a fazer para corrigir isso é aumentar seu parágrafo. Texto para 16 ou melhor ainda 20. Então, a partir daí, faça suas tags de cabeçalho aumentarem proporcionalmente. Com base nos critérios descritos no guia de estilo, é importante lembrar aqui que seus usuários finalmente têm controle sobre o tamanho do imposto em seus dispositivos. Portanto, você não quer depender do sucesso do seu design com base em ter um tamanho de fonte específico , porque ele vai quebrar à medida que eles aumentam o exemplo de tamanho da fonte para o seu estilo. Guia chama para diversão espera Carta a coisa, que pode ser difícil de ler, particularmente para telas não retina. Minha primeira recomendação seria evitar o uso de qualquer configuração de tipo fino dentro do guia de estilo . Agora isso pode não ser possível, particularmente com marcas que têm uma afinidade para usar todos os pesos finos em toda a sua Fahnestock. Não podemos ser apenas um pouco mais positivos do peso da fonte aqui e incluir todos os pesos da fonte? Independentemente disso, Se você tiver que usar fontes Finn, certifique-se de que você aumentar o peso da fonte de 100. Diga a 200 Urban 300. A diferença visual é um pouco insignificante, mesmo para equipes de marca, e você aumentará a legibilidade em toneladas de dobra. Segundo. Se você não pode fazer isso, então eu recomendo confiar no fundo de reserva. Descobri que muitos guias de estilo são escritos por designers de impressão ou designers ambientais cuja solução para o tipo digital é apenas usar. Helvetica, que, embora não seja uma escolha muito interessante, pelo menos garante que seu conteúdo seja legível e isso é, em última análise, o que é mais importante. Exemplo três chamadas de guia de estilo para texto centrado e centrado no texto é difícil de ler porque ele altera o ponto de partida de cada linha. Isso causa uma enorme carga cognitiva e é inacessível, então uma maneira de capturar o espírito do texto centrado é centralizar o contêiner e para a esquerda, alinhar o texto dentro do contêiner. Dessa forma, você manterá o espírito do texto centralizado sem causar problemas de acessibilidade. texto central não é o único tipo problemático de texto, e na verdade é qualquer texto onde o ponto de partida muda. Assim, para idiomas da esquerda para a direita que inclui o alinhamento direito para idiomas esquerdo do dedo direito como o árabe, que inclui o alinhamento esquerdo. Também sinto muito para os fãs do jornal. Mas o texto justificado também é problemático porque enquanto funciona bem na impressão, ele muda a quantidade de espaço entre as palavras, que causa muitos problemas e design responsivo. Para as pessoas que têm distúrbios cognitivos, isso pode causar algo chamado desfocamento, que torna muito inacessível e difícil de ler. Assim, você pode capturar o espírito do texto justificado é envolver o texto em um recipiente e fora da cor de fundo ou um contorno para que você possa capturar o espírito do texto justificado sem causar problemas de acessibilidade. Exemplo. Para Guia de estilo chama para um monte de todas as maiúsculas. Texto com todas as maiúsculas O texto é, antes de tudo, difícil para as pessoas com distúrbios cognitivos de ler. Em segundo lugar, os leitores de tela lerão qualquer texto que tenha sido digitado como maiúsculas. Então, se você definir sua tecla Caps Lock como uma abreviatura, então o respeito seria lido como R E s P E C T. Se você precisa fazer o texto com todas as maiúsculas por algum motivo, certifique-se de que você está respeitando a caixa da frase ou a caixa do título quando você digitar e , em seguida , confiar no texto. Transformar propriedade maiúscula. Mas use-o com moderação porque, lembre-se, é difícil de ler. Exemplo. As tags de cabeçalho são usadas para Onley, transmitem diferenças visuais e não para transmitir hierarquia de conteúdo. Pessoas com distúrbios cognitivos dependem de tags de cabeçalho para ajudá-los a entender a arquitetura de conteúdo de sua página. Pessoas com transtorno de déficit de atenção ou desafios de memória dependerão de tags de cabeçalho para deslizar rapidamente a página ou lembrá-los onde estão, então, se você estiver usando apenas para transmitir diferenças visuais. Isso pode causar uma experiência de usuário realmente confusa para esses usuários. Então, por todos os meios, evite usar tags de cabeçalho apenas para transmitir diferenças visuais. Certifique-se de que seu conteúdo está em sequência e utiliza todas as tags de cabeçalho em ordem. Além disso, HTML cinco incluiu alguns atributos HTML muito úteis que ajudaram a esclarecer diferentes tipos de seções. Isso é super útil para leitores de tela porque ele fornece contatos adicionais para o tipo de seção em que o usuário está. Por exemplo, artigo ou seção pode ajudar a adicionar hierarquia adicional para as tags de cabeçalho Assim usado, um exemplo de estilo de ling só são diferenciados por cor. Agora, há um pequeno subconjunto de cores que você pode usar para diferenciar seus estilos de link de sua cópia corporal e do fundo. Mas essa janela de cores é muito estreita, e é provável que seu guia de estilo não inclua essas cores. Então, em vez disso, eu recomendo que você evite isso todos juntos e certifique-se de que você está adicionando um estilo adicional para diferenciar links de body copy. O mais comum e amplamente compreendido é o subjacente. O sublinhado garantirá que seu usuário saiba que é uma chamada à ação que ajudará a diferenciá-lo da cópia corporal. Em segundo lugar, você vai querer ter certeza de que você não usa a propriedade sublinhado para qualquer outra coisa, porque isso pode criar muita confusão para o seu usuário. Do ponto de vista do conteúdo, você deseja garantir que esteja vinculando uma parte apropriada da frase. A razão para isso é porque os usuários podem utilizar o leitor de tela para reunir todos os links da página para obter uma visão geral rápida de todos os links incluídos. O que isso faz é remover links de seu contexto. Portanto, é muito importante que isoladas essas frases possam descrever duas coisas. Primeiro, o que é e para onde você está me levando? 6. Guia de estilo: cor: cor é maravilhosa porque pode ajudar a diferenciar ou classificar informações e, no geral um monte de personalidade para o seu design. Mas para alguém que sofre de daltonismo, não será capaz de ver essa diferenciação. Portanto, é importante que você use a cor de forma aditiva para aprimorar sua história. Há também consideração de contraste de cor, então o W três C W C a. G inclui níveis de cor. Acessibilidade de contraste. Você vai querer levar essas telas de acessibilidade em consideração para o seu design, e uma maneira realmente útil de fazer isso é baixar o plugue stark para esboço. É uma ferramenta altamente simples, mas eficaz, que irá exibir seus designs para acessibilidade e dizer como você se sente. A Adobe Creative Cloud também inclui filtros de acessibilidade integrados. Portanto, verifique se você está revisando seus designs porque é muito fácil. Não para dar um exemplo. Um. O guia de estilo chama o tipo de luz no fundo claro ou o tipo escuro em um fundo escuro , basicamente qualquer caso em que não haja contraste suficiente. Como eu mencionei antes, existem muitas ferramentas para ajudá-lo com relação de contraste, mas um fato divertido, porque eu sei que os designers adoram grande tipo em branco é que o código hexadecimal 7676 é a forma mais leve de cinza que você pode usar contra um branco fundo e ainda ganhar nível de uma classificação no texto tamanho 16. Então, se você se lembrar de antes, esse é o mais pequeno, você deve estar fazendo sua cópia corporal para que você ainda possa ter aqueles pastar sexy. Basta fazê-lo de uma forma acessível. Guia de estilo Exemplo para Mas pede combinações de cores que vibram a vibração da cor ou croma. Steri Op Sys ocorre para cores que caem opostos um do outro na roda de cores e efetivamente, as duas cores ar apenas competindo, o que causa uma vibração visual. Alguns exemplos incluem azul e vermelho, vermelho e verde, azul e laranja. Você deve evitar vibração de cor porque pode causar sobrecarga cognitiva e ser vertiginoso, o que é uma experiência realmente negativa para todos os usuários. 7. Guia de estilo: fotografia e imagens: imagens como ilustração fotográfica e iconografia podem realmente ajudar a melhorar sua história . Eles podem fornecer emoção, personalidade e ajudar a articular sua marca além do conteúdo. Há um velho princípio do jornalismo que se aplica à acessibilidade aqui, que é a imagem fornecendo mais contexto e história adicional do que já está lá? Se não for, você não deve incluí-lo. Mas se for, vamos nos certificar de que o fazemos de uma forma acessível. Exemplo. Um guia de estilo não tem critérios em torno do texto de parada para imagens. Todo Texas. A cópia que é renderizada quando uma imagem ainda está sendo carregada falhou ao carregar. E o que um leitor de tela lê em vez da imagem. Todo o texto pode ajudar a fornecer o contexto que a imagem inclui. Então, quando avaliamos se uma imagem está ajudando ou não a articular nossa história, precisamos ter certeza de que todo o nosso texto descreve como ela ajuda a articular a história apesar de ser um dos aspectos mais conhecidos para uma acessibilidade da Web devido à sua interseccionalidade com um CEO ou otimização do motor de busca, implementar todo o texto adequadamente pode realmente ser muito difícil. Há uma literatura tremenda em torno das nuances apropriadas, e eu realmente sugiro que você leia sobre isso porque há muitos e eles são todos muito importantes para hoje vai cobrir alguns conceitos básicos. Primeiro, você precisa determinar se sua imagem está fornecendo conteúdo ou uma função. Se ele está fornecendo conteúdo, então você deve avaliar se a imagem está além de uma descrição que pode ajudar a descrevê-la já. Então, por exemplo, em um site de museu que tem uma pintura abrangida por uma longa descrição que descreve a pintura O artista naquele ano foi pintado então você não precisa incluir todo o texto nesta instância porque seria redundante. Mas, na maioria dos casos, este não é o caso. As imagens exigem esse conteúdo. Então, quando esse for o caso, certifique-se de que você está sendo o mais conciso possível porque os usuários ao ar tentando rapidamente desviar o conteúdo usando seu leitor de tela e longas descrições floridas irão interromper essa experiência. Em segundo lugar, se sua imagem serve como uma função, você deve sempre incluir todo o texto. Isso proporcionaria uma experiência de usuário confusa se você omiti-la. Portanto, sempre, sempre, sempre se estiver vinculando em algum lugar, que é a função mais principal que uma imagem serve, certifique-se de incluir todo o texto. Se você achar que uma imagem é altamente complexa, digamos um gráfico onde há muitos aspectos para descrever e todo o texto pode não ser apropriado porque queremos que ele seja conciso. Então, nesses casos, pode ser mais apropriado usar os atributos HTML de longa mesa ou descrição longa. Falaremos um pouco mais sobre isso mais tarde, modo que abranja alguns dos aspectos mais básicos de todo o texto. Antes de seguirmos em frente, eu acho que é importante mencionar que todo o texto é freqüentemente algo que cai nas mãos da última pessoa que toca nele, que é tipicamente um desenvolvedor ou especialista em NSE Oh. E isso é problemático porque geralmente é uma pressa para o acabamento seu em Q. E eles notaram que o texto todo está faltando em vez. Esta é uma ótima oportunidade para incentivar suas equipes a começar a integrar todo o texto como parte de sua arquitetura abrangente de informações, porque com a acessibilidade, você não pode ser a única pessoa em sua equipe que está prestando atenção a isso . Portanto, todo o texto é uma ótima maneira de equipar outros membros de sua equipe para considerá-lo. Mais cedo, como durante a fase de hierarquia de conteúdo, porque quando feito corretamente, microcópia como todo o texto, pode realmente aprimorar a história. Você está contando, hum, e fornece um monte de contexto adicional. Exemplo para Raster. As imagens são usadas quando gráficos vetoriais escaláveis ou de S. P. P. G podem ser usados. S P G são realmente incríveis porque eles fornecem muito mais do que o que imagens raster podem. Assim, por exemplo, SV G's permitem que você aperte e amplie os usuários com deficiência visual para obter mais detalhes sem exigir o inchaço de grandes imagens raster. O SPG também permite que você personalize determinadas propriedades CSS para ajudar a tornar sua imagem mais acessível. E há enormes quantidades de animação e outras propriedades aditivas que você pode fazer que são realmente legais. Então vamos cobrir algumas noções básicas para hoje. Primeiro, certifique-se de que o SPG inclui atributos de título e descrição da mesma forma , todas as etiquetas. Isso ajudará o usuário a entender o conteúdo do seu SPG, especialmente para leitores de tela. Em segundo lugar, você vai querer garantir que para Suggs mais complexos, como aqueles que incluem uma paisagem ou um gráfico que você agrupa como atributos e fornecer-lhes seus próprios títulos. Assim, por exemplo, ah imagem de paisagem com casa e um carro e um corgi devem todos ter seus títulos individuais . Isso ajudará o usuário a obter uma visão geral desses layouts complexos. E, como acontece com as fotos, você vai querer se certificar de incluir todo o texto agora. Uma exceção para S P G é que se eles são decorativos, isto é, eles realmente não são. Eles não são necessários para o fluxo de conteúdo. Você não precisa incluir um texto completo, mas certifique-se de incluir o que é chamado de branco todos os textos para garantir que o SPG seja renderizado corretamente. Estes são apenas alguns conceitos básicos. Há um monte de literatura sobre S P G, e eu recomendo que você tire algum tempo para ler grande parte da literatura lá fora. E uma das minhas favoritas especialistas SVG, Sarah Sweden, escreveu dezenas de artigos e conduziu muitas palestras sobre Suggs e acessibilidade. Além disso, ela adora pássaros para que você possa colocar um pássaro SVG nele. Exemplo. Três. Um guia da marca depende fortemente da visualização de dados para contar sua história. Agora isso em si mesmo, não é uma coisa ruim. Não sei se notou, mas estamos na era dos dados agora. E muitas empresas, especialmente empresas de tecnologia, dependem da visualização de dados para fornecer um contexto visual para suas informações altamente complexas . Sem ele, eles não teriam muito o que visualizar. Então, é maravilhoso que a visualização de dados esteja tendo sua maioridade agora. Mas queremos ter certeza de que estamos incluindo visualizações de dados de forma muito acessível . A visualização de dados é excelente porque pode pegar dados altamente complexos e transformá-los em um formato visual digerível. Mas quero lembrar disso para aqueles que não têm acesso a vê-lo visualmente e garantir que estamos fornecendo descrições úteis ao longo do caminho. Então, há duas maneiras principais de você fazer isso. A primeira é descrever uma descrição clara e concisa dentro do seu SPG ou imagem. Se seus dados são altamente complexos, como, digamos, há muitos gráficos de barras ou sistemas complexos que são difíceis de descrever Concisely, eu recomendo usar um atributo HTML chamado Long Desk, e o que isso efetivamente faz é ligá-lo a uma página separada onde, então você pode articular completamente a imagem e fornecer todas as pistas contextuais para que alguém com deficiência visual ainda possa ganhar todo o contexto de alguém que pode ver os dados exemplo de visualização para um estilo Guy escreveu mentiras pesadamente ou exclusivamente em movimento a fim de ajudar a articular ou para melhorar suas histórias, eu vi alguns guias de estilo que usam o movimento em todos os casos possíveis. Tenho certeza que você já viu sites que dependem fortemente do Parallax, e isso é problemático porque pode causar um monte de enjôo para as pessoas que têm para Tego. Ou pode causar problemas cognitivos para pessoas que têm distúrbios como o autismo. Mas o movimento, quando usado com moderação, pode realmente fornecer muito para a sua história e e um pouco de capricho. Portanto, há duas regras básicas que você vai querer considerar em torno da emoção. Primeiro, melhora a história que está tentando contar? E segundo, a história pode aguentar sozinha sem ela? Se você respondeu sim a ambas as perguntas, então, por todos os meios, prossiga. Mas a razão pela qual é importante garantir que a história ainda seja coerente sem ela é que os usuários têm acesso a desligar o movimento no que é chamado de movimento reduzido. Efetivamente. O que isso faz é remover interações como paralaxe ou saltar todas as interações com as quais nos tornamos tão familiarizados hoje, a fim de reduzir um pouco desse enjôo que pode ocorrer. Portanto, você vai querer ter certeza de que sua experiência ainda é verdadeira mesmo sem o movimento . Acabamos de cobrir muitas informações de que eles são, mas nós realmente apenas focamos em três aspectos principais dos guias de estilo, que são fundos, cores, fotografia e imagens. Há uma riqueza de informações lá fora que não cobrimos hoje, e eu recomendo que você mergulhe profundamente nela. Incluí alguns dos meus links favoritos em The Resource is Section, mas por favor leia evangelize, faça perguntas, faça perguntas, comunidades de acessibilidade muito acolhedoras e entusiasmadas por qualquer pessoa que esteja entusiasmada com a acessibilidade. Então em diante 8. Como defender a quebra da regra: Então você possuiu seu design contra esses padrões de acessibilidade, e agora você está pronto para o próximo passo, que é enviar seu projeto para os poderes que são para o lado da agência. Isso pode significar enviá-lo para a equipe de marca do seu cliente. Se o lado da sua marca de software enviá-lo para as partes interessadas do nível do mar Independentemente, você provavelmente está um pouco nervoso porque tecnicamente você quebrou algumas regras. Há dois cenários que podem acontecer, e eu vou guiá-lo através dos dois cenários um. Você envia e ele é aprovado. Legal. Você só está preso no cenário do homem. Dois. Você é pego. Felizmente, passei muito da minha vida assistindo procedimentos antigos do Lee, e isso vai ser útil aqui porque você vai tratar isso como uma transação legal . Primeiro, avalie a regra do guia de estilo. Verifique se você realmente quebrou a regra. Se você fez, então site as diretrizes de acessibilidade W três c W. C. C. A G que foram quebradas pelo estilo Guide Express Como isso afeta negativamente seu usuário. Acho que é realmente útil aqui se você pode financiar o acesso aos dados específicos para a empresa porque isso permite que você transforme o usuário em um número real tangível. E se você pode associar esse número com engajamento ou melhor ainda, receita, então você pode associar uma quantia específica em dólar. Às vezes você só tem que mostrar a eles o dinheiro perdido. E se você ainda achar que está recebendo um monte de empurrões, acho que é útil tentar chegar a um compromisso e entrar no telefone com a equipe da marca. Por exemplo. É importante notar aqui que com acessibilidade, não se trata da busca pelo Nível A uma perfeição, embora isso seja ótimo. Então, se a equipe da marca está empurrando para trás fortemente em um tom específico de cinza que você sabe não ser acessível, tente torná-lo o mais acessível possível enquanto obtê-lo através. Porque o acesso é sobre garantir que o usuário recebe as informações, e se ela nunca for ativa, ele não obterá as informações. Esse processo pode parecer muito, especialmente se você é a única pessoa em sua equipe que parece se importar com acessibilidade. Mas eu prometo que com cada conversa que você tem em cada regra que você descreve para sua equipe, vai ficar um pouco mais fácil a cada vez, então continue continuando 9. Desenhando com acessibilidade em mente: Então muito do que discutimos hoje tem sido no contexto de trabalhar dentro de um guia de estilo existente. Mas se a oportunidade se apresenta para você criar um guia de estilo a partir do zero ou site a partir do zero, isso é incrível. Eu recomendo que você tome a seguinte abordagem primeiro começar com um quadro de arame esquelético claro . Seu quadro de arame deve ter hierarquia de conteúdo claro. Expresse seu conteúdo de forma coerente e seja altamente acessível. Agora seria um pouco preocupante se cada site parecesse uma tese de faculdade. Papel vezes New Roman tamanho 12 Dupla espaçada. Então, um top este devemos sentir-se livre para usar cores e imagens e tipos, a fim de melhorar a nossa experiência e dar marcas de turnê de personalidade. Nós só precisamos ter certeza de que, à medida que adicionamos cada uma dessas propriedades aditivas, o quadro de arame e seu sucesso da experiência do usuário é mantido a cada passo do caminho. Dessa forma, todos recebem uma experiência clara do usuário, e para aqueles que têm acesso a essas melhorias, eles ainda estão obtendo uma ótima experiência de usuário também. Se e quando esses extras adoram ser extra são despojados por tecnologias assistivas. Seus usuários ainda ficam com uma experiência de usuário coerente, e seu design não será quebrado. E isso é ases. Eu encorajo-te a começar com o teu próximo guia de estilo na natureza. Isso pode ser para suas próprias marcas, guia de estilo interno ou seu próximo projeto cliente. Mas, independentemente disso, eu incluí uma lista de verificação para você que cobre todo o material de hoje na seção de recursos . Então, por favor, compartilhe seu trabalho e estou animado para ver seu processo e o que você aprendeu que mal posso esperar para ver. 10. Conclusão: o futuro da acessibilidade: Quero mencionar que hoje, maioria das considerações de acessibilidade que fizemos foram principalmente para deficiências físicas e mentais. Mas há uma série de outras considerações a serem feitas em nome da inclusão social . Inclusividade social pode incluir tudo, desde a inclusão de opções de gênero não binárias em seus campos de formulário até refletir raças sub-representadas em suas escolhas de fotos de estoque até a criação de um site com mais desempenho que funcione em duas velocidades G Internet. Pode ser fácil ficar sobrecarregado com o número de considerações a serem feitas, mas gosto de lembrar que não se trata de perfeição. Em vez disso, trata-se de dar passos pequenos e incrementais todos os dias, para que possa ser tão simples como melhorar um formulário no seu website ou iniciar uma conversa sobre como ser mais acessível com a sua equipa. Cada coisa que pegamos nos move em frente nesta luta por uma web mais acessível, e com a tecnologia sempre evoluindo, nós realmente precisamos manter essa busca da perfeição em mente. E, de fato, o W três, c W. C. A. G, lançará seu lançamento 2.1 ainda este ano. Já se passaram cerca de 10 anos desde que o último foi lançado, então haverá muitas informações novas e novas maneiras de inovar dentro do nosso espaço. Outras maneiras que estão inovando para se divertir que são acessíveis são CSS grid do trabalho que estão fazendo para criar designs editoriais e dinâmicos nos permitirá ter nosso bolo e comê-lo, também. Os designs serão interessantes, mas o mais importante, mantiveram sua acessibilidade por meio de sua hierarquia de conteúdo. E isso é realmente uma grande coisa. Ser um bom aliado significa ser resiliente à medida que continuamos esta busca por tornar uma Web mais acessível e eventualmente universal. À medida que o papel da tecnologia se expande na vida de nossos usuários, é importante que tenhamos certeza de trazer todos os nossos usuários de forma justa e responsável. Muito obrigado por assistir minha aula de compartilhamento de habilidades e parabéns por se tornar um aliado