Slide 1

Slide 1 text

Acessibilidade Além do Layout Design de produto em ambientes reais de desenvolvimento Wagner Beethoven Designer • Entusiasta da Acessibilidade Criador do Foco Acessível (@focoacessivel)

Slide 2

Slide 2 text

Acessibilidade é sobre pessoas. É sobre o que projetamos e o que permitimos que os outros façam! QUAL A SUA DÚVIDA?

Slide 3

Slide 3 text

QUAL A SUA DÚVIDA?

Slide 4

Slide 4 text

QUAL A SUA DÚVIDA?

Slide 5

Slide 5 text

Pilares da Acessibilidade Ética Legislação Estratégia QUAL A SUA DÚVIDA?

Slide 6

Slide 6 text

Ética A acessibilidade representa o reconhecimento do direito humano à participação plena, autonomia e dignidade de todas as pessoas. O design (de produtos digitais, serviços, ambientes) deve considerar o impacto nas pessoas e não apenas buscar estética ou mercado. QUAL A SUA DÚVIDA?

Slide 7

Slide 7 text

QUAL A SUA DÚVIDA?

Slide 8

Slide 8 text

Exemplos de violações éticas em acessibilidade (1) • Um site de e-commerce possui botões de “comprar” representados apenas por ícones (sem texto ou label acessível). • Um aplicativo financeiro exige autenticação via reconhecimento facial, sem alternativa acessível (ex.: PIN ou senha). • Um curso online oferece videoaulas sem legendas ou transcrições. QUAL A SUA DÚVIDA? http://legendanacional.com.br

Slide 9

Slide 9 text

Exemplos de violações éticas em acessibilidade (2) QUAL A SUA DÚVIDA? Audiodescrição • Um jogo não possui opções de contraste alto, narração de menus, nem modo daltônico. • Como pessoas cegas ou com baixa visão jogam vídeos games?

Slide 10

Slide 10 text

Steve Saylor e Ross Minor Vídeo: https://youtu.be/NftYtVg8o4M QUAL A SUA DÚVIDA? Vídeo: http://youtu.be/IcYTVThFcos; Detalhes: https://icy- veins.com/d4/news/blind-player-defeats-lilith-in-diablo-4/

Slide 11

Slide 11 text

Exemplos de violações éticas em acessibilidade (3) • Um software interno usado por toda a empresa não é acessível por teclado. • Uma empresa adiciona um botão “A+ A–” no site para parecer acessível, mas o conteúdo principal segue ilegível, com contraste baixo e navegação falha. • Um site de inscrição em concursos públicos não pode ser navegado com leitor de tela. • Postagens com imagens sem texto alternativo e vídeos sem legendas automáticas. QUAL A SUA DÚVIDA?

Slide 12

Slide 12 text

Pilar da acessibilidade: Legal No Brasil: Lei Brasileira de Inclusão da Pessoa com Deficiência (Lei 13.146/2015) garante direitos às pessoas com deficiência. Internacionalmente: Convention on the Rights of Persons with Disabilities (CRPD) da United Nations define acessibilidade como componente central. Normas técnicas: WCAG 2.2 (Web Content Accessibility Guidelines) da W3C; no Brasil, ABNT NBR 17060:2022 trata de acessibilidade de produtos digitais. Implicação para times de produto: conformidade legal pode evitar penalidades, garantir licença para operar, ampliar reputação e proteger marca. QUAL A SUA DÚVIDA?

Slide 13

Slide 13 text

Pilar da acessibilidade: Estratégia Acessibilidade não é apenas obrigação: é vantagem competitiva. Permite alcançar segmentos de público negligenciados, melhorar usabilidade geral e inovar. Dados mostram que mais de 1 em cada 6 pessoas no mundo vive com deficiência (o que representa um mercado significativo). Ao projetar para acessibilidade, um produto tende a ser mais robusto, resiliente e inclusivo para diferentes contextos de uso — melhor para todos (não apenas pessoas com deficiência). No âmbito da experiência do usuário, acessibilidade melhora métricas como taxa de conversão, satisfação de usuário, alcance de público e reputação da marca. QUAL A SUA DÚVIDA?

Slide 14

Slide 14 text

Quais os impactos da acessibilidade para o produto e para o negócio no mundo? QUAL A SUA DÚVIDA?

Slide 15

Slide 15 text

de PCDs no mundo — The Global Economics of Disability * corresponde a população da China, EUA e Japão somados 1.85 bilhões QUAL A SUA DÚVIDA?

Slide 16

Slide 16 text

95% das PCDs de 982 PCDs entrevistadas costumam comprar online — Sociedade Brasileira do Varejo e Consumo (2019) QUAL A SUA DÚVIDA?

Slide 17

Slide 17 text

potenciais usuários, amigos e familiares que possuem conexão com alguma pessoa com deficiência — Impacto na marca e no consumo. 3.3 bilhões QUAL A SUA DÚVIDA?

Slide 18

Slide 18 text

£17.1 bilhões dinheiro perdido a partir da desistência das pessoas devido falta de acessibilidade — Impacto na taxa de desistência. Click-Away Pound QUAL A SUA DÚVIDA?

Slide 19

Slide 19 text

R$5.5 bilhões é movimentado pelas pessoas com deficiência — Poder de consumo no Brasil. SBVC QUAL A SUA DÚVIDA?

Slide 20

Slide 20 text

Exercício prático: empresa de doces Baseado em uma rede fictícia global de doces finos com o gasto médio mensal por cliente: R$ 40,00, temos: QUANTIDADE DE VENDAS POSSÍVEIS NO BRASIL R$ 260 milhões de vendas apenas para pessoas com deficiência visual: R$40 × 6.5 milhões de PCD visual no Brasil. Portal do Mec QUANTIDADE DE VENDAS POSSÍVEIS NO MUNDO R$ 7 bilhões de vendas possíveis: R$40,00 × 180 milhões de PCDs visual no mundo Organização Mundial da Saúde MULTA NO BRASIL R$ 3.000,25 por dia para empresas com mais 500 empregados Hand Talk MULTA NOS EUA No mínimo $4 mil por violação ~ $25 mil com custos totais Medium | Conta Americana QUAL A SUA DÚVIDA?

Slide 21

Slide 21 text

Acessibilidade em todos os lugares da empresa NEGÓCIOS/JURÍDICO ADMINISTRATIVO/RH MARKETING DESIGN DESENVOLVIMENTO/TESTES USUÁRIOS ROI (Retorno sobre o investimento) SEO (Otimização de busca) Bem vista na sociedade Multa Texto claro e simples Sem ambiguidade Outras formas de comunicação Contratações Entrevistas Provas ou formulários Hierarquia visual Cores, contraste Textos e fontes Código semântico Bibliotecas de acessibilidade Ferramentas de testes Simuladores Avaliar Reportar erros Compartilhar experiências QUAL A SUA DÚVIDA?

Slide 22

Slide 22 text

Design Inclusivo QUAL A SUA DÚVIDA?

Slide 23

Slide 23 text

O que é e quais são os princípios do Design Inclusivo? Princípio Descrição Reconhecer a exclusão Identifique onde e como o design exclui. Use barreiras como oportunidades de inovação. Aprender com a diversidade Trabalhe com pessoas diversas — cada diferença traz novos insights e soluções. Estender a capacidade humana Use tecnologia e design para expandir o que as pessoas conseguem fazer, não para compensar o que falta. Design Inclusivo é a prática de projetar produtos e serviços que reconhecem e valorizam a diversidade de formas de ver, ouvir, pensar e interagir. Em vez de focar apenas em eliminar barreiras, o design inclusivo usa as diferenças como fonte de criatividade e melhoria. Esses três princípios funcionam como um ciclo contínuo. Quando reconhecemos a exclusão, aprendemos com ela e criamos soluções que ampliam o potencial humano. QUAL A SUA DÚVIDA?

Slide 24

Slide 24 text

Diagrama de deficiências/limitações Permanente Exemplo: pessoa cega, surda, ou com deficiência motora Aplicação: exige soluções assistivas diretas (leitor de tela, navegação por teclado). Temporária Exemplo: braço quebrado, infecção ocular, perda auditiva momentânea. Aplicação: Mostra a importância de redundância (voz, toque, texto). Situacional Dirigindo, segurando um bebê, ambiente ruidoso ou com sol intenso Demonstra como o design acessível beneficia todos. QUAL A SUA DÚVIDA?

Slide 25

Slide 25 text

Design Universal QUAL A SUA DÚVIDA?

Slide 26

Slide 26 text

Conceito Desenvolvido em 1997 pelo Center for Universal Design (NCSU – North Carolina State University), o conceito propõe sete princípios fundamentais que guiam o design de ambientes, produtos e serviços de forma acessível e equitativa. Design Universal é o processo de criação de produtos e ambientes que podem ser usados pelo maior número possível de pessoas, sem necessidade de modificação ou design especializado. Embora criado para o design físico, o conceito se expande para o digital. No contexto atual, ele se traduz em: • Design Inclusivo: quando aplicado à diversidade humana em interfaces. • WCAG / ABNT 17060: quando formalizado como norma técnica de acessibilidade. QUAL A SUA DÚVIDA?

Slide 27

Slide 27 text

Os 7 princípios do Design Universal Princípios Significado Exemplo prático Uso equitativo O design é útil e comercializável para pessoas com diferentes habilidades. Rampas e portas automáticas beneficiam todos — não apenas cadeirantes. Flexibilidade de uso Acomoda diferentes preferências e habilidades individuais. Sites com temas claro/escuro e legendas opcionais. Uso simples e intuitivo Fácil de entender, independentemente da experiência, conhecimento ou idioma do usuário. Ícones universais (lupa = buscar, casa = início). Informação perceptível Comunica informações de forma eficaz, independentemente das condições sensoriais do usuário. Sinal sonoro + visual para notificações; legendas em vídeos. Baixo esforço físico Pode ser usado de forma eficiente e confortável, com o mínimo de fadiga. Botões grandes em telas de toque; navegação por teclado. Espaço e tamanho adequados Fornece espaço e dimensões apropriadas para alcance, manipulação e uso. Corredores largos; espaçamento suficiente entre elementos interativos. QUAL A SUA DÚVIDA?

Slide 28

Slide 28 text

Inclusivo × Universal Inclusivo Universal Processo Resultado Aprendizado com a diversidade Padronização de acesso Exemplo: entrevistas Exemplo: WCAG e ergonomia QUAL A SUA DÚVIDA?

Slide 29

Slide 29 text

Ciclo de produto DISCOVERY DESIGN DESENVOLVIMENTO QA/TESTE CULTURA QUAL A SUA DÚVIDA?

Slide 30

Slide 30 text

Discovery QUAL A SUA DÚVIDA?

Slide 31

Slide 31 text

Discovery A fase de Discovery é onde nascem as decisões que vão definir se o produto será inclusivo ou excludente. É o momento de ouvir, observar e sentir — principalmente aquelas experiências que o time, por privilégio ou limitação, não vivencia diretamente. Empatia no design acessível vai além de “se colocar no lugar do outro”: • é entender as barreiras que as pessoas realmente enfrentam, e agir sobre elas. • Não é sobre imaginar — é sobre perguntar, observar e incluir. Na prática: • Conduzir entrevistas acessíveis, respeitando ritmo, linguagem e canais do participante. • Observar interações reais com produtos e ambientes (não apenas simular). • Validar emoções, frustrações e estratégias de compensação usadas pelos usuários. • Registrar barreiras e facilitadores percebidos durante as conversas. QUAL A SUA DÚVIDA?

Slide 32

Slide 32 text

Ferramentas e Métodos Ferramenta / Método Aplicação prática FigJam / Miro Mapear insights, jornadas e barreiras durante entrevistas. Use post-its de diferentes cores para marcar “dor”, “barreira” e “oportunidade”. Entrevistas Inclusivas Permitem conhecer as experiências de pessoas com deficiência e diversidade cognitiva, auditiva, visual e motora. Realize por vídeo com legenda, chat, ou voz — dependendo da preferência do participante. Análise de contexto Registre as condições reais de uso: ambiente barulhento, conexões lentas, dispositivos diferentes. Matriz de empatia acessível Adapte o modelo tradicional (O que vê? O que sente? O que ouve?) adicionando a camada “O que não consegue acessar?”. QUAL A SUA DÚVIDA?

Slide 33

Slide 33 text

Técnicas de pesquisa inclusiva QUAL A SUA DÚVIDA?

Slide 34

Slide 34 text

O que é pesquisa inclusiva? A pesquisa inclusiva amplia o entendimento sobre como diferentes pessoas interagem com produtos e serviços, revelando barreiras invisíveis que métodos tradicionais não capturam. Pesquisa inclusiva é a prática de envolver pessoas com diferentes habilidades, contextos e tecnologias assistivas nos processos de descoberta, validação e teste. Ela ajuda a criar soluções mais completas, éticas e representativas. Objetivo: Não é criar um produto “para pessoas com deficiência”, mas um produto que funcione para todos.

Slide 35

Slide 35 text

Técnicas e Aplicações Técnica Aplicação prática Entrevistas com pessoas com deficiência Entender como diferentes usuários percebem, navegam e interagem com produtos. Incluir participantes cegos, surdos, neurodivergentes e com limitações motoras. Matriz CSD com camada “Barreiras” Acrescente uma coluna extra à Matriz de Certezas, Suposições e Dúvidas, identificando barreiras potenciais de acesso ou uso. Benchmarking acessível Avalie produtos e concorrentes sob a ótica da acessibilidade. Use critérios das WCAG 2.2 e valide com leitores de tela e teclado. Jornadas com diversidade Mapeie a experiência considerando contextos reais (ex.: acesso móvel em transporte público, diferentes dispositivos, internet instável). Testes observacionais Observe como pessoas com deficiência usam o produto — suas rotas, adaptações e dificuldades revelam insights valiosos. QUAL A SUA DÚVIDA?

Slide 36

Slide 36 text

Persona inclusiva QUAL A SUA DÚVIDA?

Slide 37

Slide 37 text

Conceito O objetivo das personas inclusivas é incluir perspectivas de usuários com diferentes capacidades, contextos e modos de interação, ajudando o time a tomar decisões mais empáticas e realistas. Uma persona inclusiva é uma representação sem estereótipos de um usuário real, que considera deficiências, contextos, limitações temporárias ou situacionais, além de aspectos culturais, socioeconômicos e tecnológicos. Não é sobre deficiência, é sobre diversidade de uso. Ela ajuda a equipe a pensar: • Como essa pessoa acessa? • O que pode ser uma barreira para ela? • Que recursos ou tecnologias assistivas ela usa? QUAL A SUA DÚVIDA?

Slide 38

Slide 38 text

Exemplo prático: Persona Inclusiva Nome: Joana Barbosa Idade: 35 anos Profissão: Analista de Dados Contexto: pessoa surda, usuária de Libras, utiliza legendas automáticas e aplicativos de reconhecimento de voz para se comunicar em reuniões. Citação: “Eu não quero ajuda, quero autonomia. A tecnologia me dá isso.” Objetivos: Acompanhar reuniões híbridas sem perder informações. Compartilhar apresentações acessíveis com a equipe. Frustrações: Plataformas de videoconferência sem legendas precisas. Falta de acessibilidade em dashboards visuais (sem descrição textual). Tecnologias assistivas: Transcrição automática de áudio, legendas em tempo real, alertas visuais. QUAL A SUA DÚVIDA?

Slide 39

Slide 39 text

Estrutura sugerida para persona inclusiva Elemento Descrição Dica de inclusão Nome e idade Representa o perfil Evite caricaturas e nomes genéricos Contexto de uso Situação real do usuário Inclua barreiras e soluções Objetivos O que busca atingir Conecte com autonomia e acesso Frustrações Obstáculos de acessibilidade Descreva como o produto pode ajudar Tecnologias assistivas Ferramentas utilizadas Ex.: leitor de tela, reconhecimento de voz Citação realista Frase síntese do comportamento Ajuda na empatia da equipe QUAL A SUA DÚVIDA?

Slide 40

Slide 40 text

Design System QUAL A SUA DÚVIDA?

Slide 41

Slide 41 text

Conceito Um Design System é um conjunto organizado de padrões visuais, componentes, diretrizes e boas práticas que garante consistência, eficiência e qualidade no design e no desenvolvimento de produtos digitais. Um Design System Acessível é aquele que combina: • Padrões visuais acessíveis (contraste, tipografia, espaçamento); • Comportamentos interativos inclusivos (foco, labels, navegação por teclado); • Documentação viva com guidelines e código semântico. Ele é o elo entre design, desenvolvimento e QA, garantindo que as decisões de acessibilidade não dependam de pessoas específicas, mas do próprio sistema. QUAL A SUA DÚVIDA?

Slide 42

Slide 42 text

Exemplo prático: Botão padrão × Botão acessível Botão Padrão Botão Acessível Contraste Texto cinza sobre fundo claro (baixa legibilidade). Contraste AA+ validado pelo Stark (ex.: fundo azul #0057D9, texto branco #FFFFFF). Foco Nenhum estado de foco visível. Borda de foco com outline visível (ex.: 2px azul escuro ou amarelo alto contraste). Label Ícone de “enviar” sem texto. Texto + ícone + atributo aria-label="Enviar formulário". Tamanho 32px de altura (difícil de clicar). 44px mínimo de área clicável (recomendado pela WCAG 2.5.5 – Target Size). Estado Apenas hover visual. Estados claros: hover, focus, disabled, active.

Slide 43

Slide 43 text

Técnicas de “design acessível” QUAL A SUA DÚVIDA?

Slide 44

Slide 44 text

Técnica de “design acessível” A acessibilidade não se testa só no final — ela se projeta desde o primeiro wireframe. Essas técnicas ajudam o designer a enxergar barreiras antes mesmo de o produto existir. • Wireframes com checkpoints a11y • Fluxos com alertas de barreiras • Microcopy inclusivo • Ferramentas para o processo • Heurísticas WCAG + Nielsen QUAL A SUA DÚVIDA?

Slide 45

Slide 45 text

Qual utiliza melhor microcopy? “Oops! Algo deu errado.” “Não foi possível enviar. Verifique se todos os campos estão preenchidos.” QUAL A SUA DÚVIDA? 1 2

Slide 46

Slide 46 text

Heurísticas WCAG + Nielsen Combinar as Heurísticas de Usabilidade de Nielsen com os princípios das WCAG cria uma visão holística de experiência — usável e acessível. Heurística de Nielsen Equivalente WCAG Exemplo prático Visibilidade do status 4.1.3 – Mensagens de status Mostrar feedback textual + aria-live Consistência 3.2 – Navegação consistente Manter padrões de foco e labels Prevenção de erros 3.3.3 – Sugestão de erro Orientar usuário ao invés de bloquear Reconhecer vs lembrar 1.3.1 – Estrutura programática Navegação previsível e hierarquia clara Flexibilidade e eficiência Flexibilidade e eficiência Permitir múltiplas formas de interação QUAL A SUA DÚVIDA?

Slide 47

Slide 47 text

Feedback e Comunicação QUAL A SUA DÚVIDA?

Slide 48

Slide 48 text

Feedback e comunicação Erros, alertas e confirmações são momentos críticos de comunicação entre o sistema e o usuário. Quando esses feedbacks são apenas visuais (como uma cor vermelha), parte das pessoas fica excluída da compreensão da interface. 1. O que é um feedback acessível? 2. Quais os tipos de feedback? 3. Exemplo prático QUAL A SUA DÚVIDA?

Slide 49

Slide 49 text

Tipos de feedback Tipo do erro Exemplo Boas práticas Erro Campo com a borda vermelha Adicione ícone de alerta + texto descrito + aria-* Sucesso Mensagem “Cadastro concluído” Combine ícone, cor e feedback verbal “sua conta foi criada com sucesso” Aviso “Senha fraca” ou “Seção expirando” Use contraste e linguagem clara, evite jargões técnicos. Confirmação “Você tem certeza que deseja excluir?” Forneça contexto e opções claras de ação (“cancelar” e “confirmar”) QUAL A SUA DÚVIDA?

Slide 50

Slide 50 text

Exemplo prático visual Versão não acessível Versão acessível Email Email inválido Email Insira um email válido E-mail inválido. Informe um endereço válido, ex.: [email protected]. SALVAR SALVAR

Slide 51

Slide 51 text

Ferramentas de design QUAL A SUA DÚVIDA?

Slide 52

Slide 52 text

Ferramentas principais Figma NVDA Navegadores Celulares QUAL A SUA DÚVIDA? • Lighthouse • Equal Access Accessibility Checker • Color Contrast Checker • ChromeLens • Wave • HTML5 Outliner • Visual ARIA • ARC Toolkit • Let's get color blind • Alt Text Tester • axe DevTools • disable-HTML Plugins para navegadores

Slide 53

Slide 53 text

Serviços Stark: verifica contraste, simula daltonismo e testa acessibilidade de cores e tipografia. Ajuda a garantir que a combinação de cores e fontes atenda ao nível AA/AAA das WCAG. Able: avalia contraste, luminosidade e fornece recomendações automáticas de cor. Permite ajustar paletas diretamente no Figma, sem sair do arquivo. QUAL A SUA DÚVIDA? Contrast Checker: ferramenta (plugin e site) que mede a relação de contraste entre duas cores e indica se está conforme AA ou AAA. Excelente para validar rapidamente combinações de texto e fundo. Figma Tokens: plugin para criar e gerenciar design tokens (cores, tipografia, espaçamento, radius, etc.) de forma centralizada. Ajuda a garantir consistência visual e acessibilidade em múltiplos projetos e temas (modo claro/escuro, marcas diferentes).

Slide 54

Slide 54 text

Como integrar no fluxo do designer • Adicione o Stark e Able como parte do design QA checklist no Figma. • Use Figma Tokens para manter contraste e hierarquia tipográfica consistentes entre componentes. • Valide manualmente os estados de foco e hover antes do handoff. • Registre resultados no sistema de documentação viva (Notion / Confluence / Zeroheight). QUAL A SUA DÚVIDA?

Slide 55

Slide 55 text

Boas práticas de Front-end QUAL A SUA DÚVIDA?

Slide 56

Slide 56 text

Boas práticas de Front-end Um design acessível só se concretiza quando o código traduz fielmente as intenções de inclusão. O papel do designer é criar decisões orientadas por contexto técnico, não apenas visuais — ajudando o time de front-end a construir interfaces que funcionem para todos. Então: • Design e código falam a mesma língua. • Estrutura semântica é design. • Comunicação é parte do QA. • Teste o que você desenha. • Acessibilidade nasce no Figma, não só no Dev. QUAL A SUA DÚVIDA?

Slide 57

Slide 57 text

Práticas essenciais que todo designer pode aplicar Boas práticas Descrição Ferramentas Contraste adequado Verificar contraste mínimo AA/AAA Stark, Able, Color Contrast Checker Foco visível Indicar estados visuais de foco e hover Figma Prototype, Outline Visible Leitura linear Definir ordem lógica dos elementos Figma Auto Layout Textos alternativos Criar descrições para imagens e ícones Figma Notes, Dev Handoff Componentes reutilizáveis Evitar recriar elementos com comportamento diferente Design System + Tokens QUAL A SUA DÚVIDA?

Slide 58

Slide 58 text

Cultura de acessibilidade no front-end O designer é o ponto de partida da acessibilidade técnica. Quando a cultura nasce no design, o front-end não precisa “corrigir” depois — ele apenas traduz o que já foi pensado com inclusão. Estratégia: • Colaborar com o QA acessível (axe, Lighthouse, NVDA). • Revisar design tokens sob ótica de contraste e tipografia legível. • Garantir que o sistema de cores e espaçamento respeite as normas da WCAG 2.2 e ABNT NBR 17060:2022.

Slide 59

Slide 59 text

QA e testes de acessibilidade QUAL A SUA DÚVIDA?

Slide 60

Slide 60 text

QA e testes de acessibilidade A fase de QA (Quality Assurance) é onde verificamos se as boas práticas aplicadas no design e no código realmente funcionam para todos os usuários. Os testes devem ser complementares: parte automatizados, parte manuais — e sempre validados com tecnologias assistivas reais. QUAL A SUA DÚVIDA? Testes manuais Essenciais para validar usabilidade real e experiência de usuários com deficiência. Feitos com tecnologias assistivas, teclado, voz e simulações. O que validam: ordem de leitura e foco (tabindex lógico); clareza dos rótulos e textos alternativos; feedback em formulários; legibilidade de cores e tamanhos; fluxos sem dependência exclusiva de mouse Testes automatizados Rápidos, objetivos e úteis para encontrar erros estruturais e de código. Essas ferramentas cobrem cerca de 30 a 40% das possíveis falhas de acessibilidade (segundo o W3C Accessibility Conformance Testing Report). O resto depende de validação humana. O que validam: Hierarquia de headings; textos alternativos (alt); contraste de cores; estrutura de foco; labels e ARIA roles

Slide 61

Slide 61 text

Ciclo de Testes de Acessibilidade Testar é validar inclusão. Acessibilidade precisa ser medida, sentida e verificada — por máquinas e por pessoas. A acessibilidade não é aprovada — ela é mantida Planejar Definir critérios (WCAG, ABNT, heurísticas internas) Testar automaticamente Axe, Lighthouse, Wave Validar manualmente Teclado, leitores de tela Corrigir e documentar Registrar no backlog (ex.: Jira “A11y issue”) Revalidar e repetir Manter no CI/CD Aprender e compartilhar Atualizar documentação viva QUAL A SUA DÚVIDA?

Slide 62

Slide 62 text

A acessibilidade não termina no design. Ela se confirma no teste — quando garantimos que pessoas reais conseguem usar, perceber e interagir com o produto

Slide 63

Slide 63 text

Cultura e continuidade em acessibilidade QUAL A SUA DÚVIDA?

Slide 64

Slide 64 text

Ally Champios Na Microsoft, cada área de produto tem um Accessibility Champion responsável por acompanhar métricas e apoiar a implementação das WCAG. Na BBC, o time de design realiza “A11y Reviews” conduzidas por champions antes de lançar novas interfaces. OKRs com acessibilidade A Salesforce inclui metas de acessibilidade em seus OKRs de produto desde 2019. Essas metas são revisadas a cada ciclo trimestral e divulgadas nos relatórios públicos de Accessibility Progress. Documentação Viva A Shopify mantém um “Accessibility Handbook” dentro do GitHub e Figma, atualizado a cada nova release. A Adobe criou o Spectrum Accessibility Guidelines, documentando práticas por componente. No Brasil, a Meiuca aplica o conceito no “DesignOps + A11y Framework”, com guidelines e workshops contínuos. Design Critiques inclusivas A Spotify promove sessões de “Inclusive Design Crits” a cada duas sprints. A IBM utiliza o modelo “Accessibility Peer Review” para testar fluxos antes do QA formal. No GOV.UK, as crits incluem uma etapa chamada “A11y Spot Check” com checklist público. Cultura e Continuidade em Acessibilidade A acessibilidade não deve ser tratada como um projeto pontual, mas como um processo contínuo e cultural dentro da organização. Essa maturidade vem da integração entre pessoas, processos e produto. Esses quatro eixos (ou cards) formam uma estrutura sólida para sustentar a inclusão no longo prazo. QUAL A SUA DÚVIDA?

Slide 65

Slide 65 text

Cases de sucesso • Be My Eyes • Amazon Echo • Apple • CNA QUAL A SUA DÚVIDA?

Slide 66

Slide 66 text

Be My Eyes com GPT-4o Vídeo: https://www.youtube.com/watch?v=Zq710AKC1gg QUAL A SUA DÚVIDA?

Slide 67

Slide 67 text

The Accessibility system for disable , Apple commercial Vídeo: https://youtube.com/watch?v=cfl4Mlhpbqc QUAL A SUA DÚVIDA?

Slide 68

Slide 68 text

Assistive Technology Examples -Accessibility on Amazon Echo Vídeo: https://youtube.com/watch?v=S9kvZOhspOQ QUAL A SUA DÚVIDA?

Slide 69

Slide 69 text

CNA -Speaking Exchange Vídeo: https://youtube.com/watch?v=-S-5EfwpFOk QUAL A SUA DÚVIDA?

Slide 70

Slide 70 text

Opções de acessibilidade do Last of Us Part II • Vários modos de alto contraste e sons de auxílio • Modo de escuta melhorado e conversão de texto em fala • Ampliador de Tela • Várias configurações de exibição de legendas • Modo de escuta melhorado, auxílio de navegação e sons de auxílio Fonte: As opções de acessibilidade de The Last of Us Parte II The Last of Us Part II: Accessibility Features - Text-to-Speech and Enhanced Listen Mode The Last of Us Part II features more than 60 accessibility settings, with expanded options focused on fine-motor and hearing, as well as completely new features that benefit low-vision and blind players. This video highlights our new Text-to-Speech and Enhanced Listen Mode features. Text-to-Speech enables narration of menus and on-screen text. Enhanced Listen Mode allows players to locate enemies and pickups with audio feedback. See the complete list of accessibility features and learn more at https://www.playstation.com/en-us/games/the-last-of-us-part-ii-ps4/accessibility The Last of Us Part II launches on June 19, 2020. Rated Mature: Blood and Gore, Intense Violence, Nudity, Sexual Content, Strong Language, Use of Drugs The Last of Us Part II: Accessibility Features - Screen Magnifier The Last of Us Part II features more than 60 accessibility settings, with expanded options focused on fine-motor and hearing, as well as completely new features that benefit low-vision and blind players. This video highlights the screen magnifier, which allows you to zoom in on any part of the screen and pan around using the DualShock 4 touch pad. See the complete list of accessibility features and learn more at https://www.playstation.com/en-us/games/the-last-of-us-part-ii-ps4/accessibility The Last of Us Part II launches on June 19, 2020. The Last of Us Part II: Accessibility Features - High Contrast Mode Comparison and Audio Cues The Last of Us Part II features more than 60 accessibility settings, with expanded options focused on fine-motor and hearing, as well as completely new features that benefit low-vision and blind players. This video highlights several color options for High Contrast Mode, which is a special render mode that provides more contrast for in-game elements. It also demonstrates Traversal and Combat Audio Cues, which map easily identifiable sounds to commonly used actions (such as environment traversal, scavenging, combat, and more.) See the complete list of accessibility features and learn more at https://www.playstation.com/en-us/games/the-last-of-us-part-ii-ps4/accessibility The Last of Us Part II launches on June 19, 2020. Rated Mature: Blood and Gore, Intense Violence, Nudity, Sexual Content, Strong Language, Use of Drugs The Last of Us Part II: Accessibility Features - Subtitle Display Comparison The Last of Us Part II features more than 60 accessibility settings, with expanded options focused on fine-motor and hearing, as well as completely new features that benefit low-vision and blind players. This video highlights the various subtitle display options, including size, color, dark backgrounds for contrast, speaker names, directional arrows for offscreen speakers, and more. See the complete list of accessibility features and learn more at https://www.playstation.com/en-us/games/the-last-of-us-part-ii-ps4/accessibility The Last of Us Part II launches on June 19, 2020. The Last of Us Part II: Accessibility Features - Audio and Visual Cues The Last of Us Part II features more than 60 accessibility settings, with expanded options focused on fine-motor and hearing, as well as completely new features that benefit low-vision and blind players. This video demonstrates Traversal and Combat Audio Cues, which map easily identifiable sounds to commonly used actions (such as environment traversal, scavenging, combat, and more.) See the complete list of accessibility features and learn more at https://www.playstation.com/en-us/games/the-last-of-us-part-ii-ps4/accessibility The Last of Us Part II launches on June 19, 2020. The Last of Us Part II: Accessibility Features - Audio Cues The Last of Us Part II features more than 60 accessibility settings, with expanded options focused on fine-motor and hearing, as well as completely new features that benefit low-vision and blind players. This video demonstrates Traversal and Combat Audio Cues, which map easily identifiable sounds to commonly used actions (such as environment traversal, scavenging, combat, and more.) See the complete list of accessibility features and learn more at https://www.playstation.com/en-us/games/the-last-of-us-part-ii-ps4/accessibility The Last of Us Part II launches on June 19, 2020.

Slide 71

Slide 71 text

Encerramento

Slide 72

Slide 72 text

Cada componente que você cria define o que alguém pode fazer

Slide 73

Slide 73 text

Para pesquisar Acervo do Design de Experiência do Usuário brasileiro: dexu.com.br

Slide 74

Slide 74 text

E qual é a responsabilidade do Designer?

Slide 75

Slide 75 text

Obrigado Wagner Beethoven