Projetando software inclusivo para Windows 10Designing inclusive software for Windows 10

Saiba mais sobre a evolução do Design Inclusivo com aplicativos do Windows para Windows 10.Learn about evolving inclusive design with Windows apps for Windows 10. Crie e compile software inclusivo com a acessibilidade em mente.Design and build inclusive software with accessibility in mind.

Na Microsoft, estamos desenvolvendo nossos princípios de design e práticas recomendadas.At Microsoft, we’re evolving our design principles and practices. Eles mostram a aparência, a função e o comportamento das nossas experiências.These inform how our experiences look, feel, function, and behave. Estamos elevando a nossa perspectiva.We’re elevating our perspective.

Essa nova filosofia de design é chamada de design inclusivo.This new design philosophy is called inclusive design. A ideia é criar um software com todas as pessoas em mente desde o começo.The idea is to design software with everyone in mind from the very beginning. Isso é o oposto de enxergar a acessibilidade como uma tecnologia você inclui no final do processo de desenvolvimento para satisfazer alguns pequenos grupos de usuários.This is in contrast to viewing accessibility as a technology you bolt on at the end of the development process in order to satisfy some small group of users.

"Definimos deficiência como uma incompatibilidade entre as necessidades do indivíduo e o serviço, produto ou ambiente oferecidos.“We define disability as a mismatch between the needs of the individual and the service, product or environment offered. Qualquer pessoa pode sofrer uma deficiência.Anyone can experience a disability. É uma característica humana comum a ser eliminada".It is a common human trait to be excluded.” -do vídeo inclusivo- from the Inclusive video

O design inclusivo cria produtos melhores para todos.Inclusive design creates better products for everyone. Trata-se de considerar a gama completa de diversidade humana.It’s about considering the full range of human diversity. Considere os recortes de meio-fio que você encontra na maioria das calçadas das esquinas.Consider the curb cutouts that you now find on most street corner sidewalks. Eles foram claramente pensados para serem usados por pessoas em cadeiras de rodas.They were clearly intended to be used by people in wheelchairs. Mas agora quase todo mundo os usa, inclusive pessoas com carrinhos de bebê, ciclistas, esqueitistas.But now nearly everyone uses them, including people with baby strollers, bicyclists, skateboarders. Até mesmo pedestres geralmente os usam porque estão disponíveis e proporcionam uma melhor experiência.Even pedestrians will often use curb cutouts because they are there and provide a better experience. O controle remoto da televisão pode ser considerado uma tecnologia assistencial (AT) para alguém com limitações físicas.The television remote control could be considered an assistive technology (AT) for someone with physical limitations. No entanto hoje é praticamente impossível comprar uma televisão sem um.And yet, today it is nearly impossible to buy a television without one. Antes de as crianças aprenderem a amarrar os sapatos, elas podem usar sapatos com fechamento de velcro.Before children learn to tie their shoes, they can wear slip-on or easy fastening shoes. Sapatos que são fáceis de calçar e tirar geralmente são preferenciais em culturas nas quais eles são removidos antes de entrar em uma casa.Shoes that are easy to put on and take off are often preferred in cultures where shoes are removed before entering a home. Eles também são melhores para pessoas com problemas de destreza como artrite ou até mesmo um pulso temporariamente quebrado.They are also better for people with dexterity issues such as arthritis or even a temporarily broken wrist.

Princípios de design inclusivoInclusive design principles

Os quatro princípios seguintes estão orientando a mudança da Microsoft para o design inclusivo:The following 4 principles are guiding Microsoft’s shift to inclusive design:

Pense universal: vamos nos concentrar no que unifica as pessoas — motivações, relações e habilidades humanas.Think universal: We focus on what unifies people — human motivations, relationships, and abilities. Isso nos ajuda a considerar o impacto social mais amplo do nosso trabalho.This drives us to consider the broader social impact of our work. O resultado é uma experiência que tem uma diversidade de maneiras para todas as pessoas participarem.The result is an experience that has a diversity of ways for all people to participate.

Personalize: em seguida, nós nos desafiamos a criar conexões emocionais.Make it personal: Next, we challenge ourselves to create emotional connections. Interações de humanos com humanos podem inspirar melhor a interação de humanos com a tecnologia.Human-to-human interactions can inspire better human-to-technology interaction. Circunstâncias únicas de uma pessoa podem melhorar um design para todos.A person’s unique circumstances can improve a design for everyone. O resultado é uma experiência que parece ter sido criada para uma pessoa.The result is an experience that feels like it was created for one person.

Mantenha a simplicidade: começamos com a simplicidade como o unificador principal.Keep it simple: We start with simplicity as the ultimate unifier. Quando reduzimos a desordem as pessoas sabem o que fazer em seguida.When we reduce clutter people know what to do next. Eles são inspirados a seguir em frente em espaços que são limpos, luminosos e abertos.They’re inspired to move forward into spaces that are clean, light, and open. O resultado é uma experiência que seja sincera e atemporal.The result is an experience that’s honest and timeless.

Crie alegria: experiências alegres evocam admiração e descoberta.Create delight: Delightful experiences evoke wonder and discovery. Às vezes, é mágico.Sometimes it’s magical. Às vezes, é um detalhe que está correto.Sometimes it’s a detail that’s just right. Criamos esses momentos para que pareçam uma mudança bem-vinda no ritmo.We design these moments to feel like a welcomed change in tempo. O resultado é uma experiência que tem impulso e fluxo.The result is an experience that has momentum and flow.

Usuários de design inclusivoInclusive design users

Há essencialmente dois tipos de usuários de tecnologia assistencial (AT):There are essentially two types of users of assistive technology (AT):

  1. Aqueles que precisam dela por deficiências ou comprometimentos, condições relacionadas à idade ou condições temporárias (como mobilidade limitada por um membro quebrado)Those who need it, because of disabilities or impairments, age-related conditions, or temporary conditions (such as limited mobility from a broken limb)
  2. Aqueles que a utilizam por preferência, para uma experiência de computação mais confortável ou convenienteThose who use it out of preference, for a more comfortable or convenient computing experience

A maioria dos usuários de computador (54%) conhece alguma forma de tecnologia assistencial e 44% dos usuários de computador usa alguma forma dela, mas muitos deles não está usando a AT que poderia beneficiá-los (Forrester 2004).The majority of computer users (54 per-cent) are aware of some form of assistive technology, and 44 percent of computer users use some form of it, but many of them are not using AT that would benefit them (Forrester 2004).

Um estudo de 2003-2004 contratado pela Microsoft e realizado pela Forrester Research descobriu que mais da metade —57%— dos usuários de computador nos Estados Unidos entre as idades de 18 e 64 anos poderiam se beneficiar da tecnologia assistencial.A 2003-2004 study commissioned by Microsoft and conducted by Forrester Research found that over half — 57 percent — of computer users in the United States between the ages of 18 and 64 could benefit from assistive technology. A maioria desses usuários não se identificou como tendo uma deficiência ou comprometimento, mas expressou determinadas dificuldades relacionadas a comprometimentos ou deficiências ao usar um computador.Most of these users did not identify themselves as having a disability or being impaired but expressed certain task-related difficulties or impairments when using a computer. A Forrester (2003) também descobriu o seguinte número de usuários com estas dificuldades específicas: um em quatro tem uma dificuldade visual.Forrester (2003) also found the following number of users with these specific difficulties: One in four experiences a visual difficulty. Um em quatro sente dor nos pulsos ou mãos.One in four experiences pain in the wrists or hands. Uma em cinco tem dificuldade de audição.One in five experiences hearing difficulty.

Além de deficiências permanentes, a gravidade e os tipos de dificuldades que uma pessoa tem podem variar durante a vida dela.Besides permanent disabilities, the severity and types of difficulties an individual experiences can vary throughout their life. Não existe um ser humano normal.There is no such thing as a normal human. Nossas habilidades estão sempre mudando.Our capabilities are always changing. Margaret Meade disse, "Somos todos únicos.Margaret Meade said, “We are all unique. Sermos todos únicos nos torna iguais".Being all unique makes us all the same.”

A Microsoft se dedica à realização de pesquisas de ciência da computação e de engenharia de software com metas para aperfeiçoar a experiência de computação e inventar novas tecnologias de computação.Microsoft is dedicated to conducting computer science and software engineering research with goals to enhance the computing experience and invent novel computing technologies. Veja Projetos de desenvolvimento e pesquisa atuais da Microsoft Research destinados a tornar o computador mais acessível e fácil de ver, ouvir e interagir.See Current Microsoft Research and Development Projects aimed at making the computer more accessible, and easier to see, hear, and interact with.

Etapas de design práticoPractical design steps

Se você estiver disposto, esta seção é para você.If you're all in, then this section is for you. Ela descreve as etapas de design prático a serem consideradas ao implementar o design inclusivo para seu aplicativo.It describes the practical design steps to consider when implementing inclusive design for your app.

Descreva o público-alvoDescribe the target audience

Defina os usuários em potencial do seu aplicativo.Define the potential users of your app. Avalie cuidadosamente todas as suas habilidades e características diferentes.Think through all of their different abilities and characteristics. Por exemplo, idade, sexo, idioma, usuários surdos ou com deficiências auditivas, deficiências visuais, habilidades cognitivas, estilo de aprendizagem, restrições de mobilidade e assim por diante.For example, age, gender, language, deaf or hard of hearing users, visual impairments, cognitive abilities, learning style, mobility restrictions, and so on. Seu design atende às necessidades individuais deles?Is your design meeting their individual needs?

Converse com seres humanos reais com necessidades específicasTalk to actual humans with specific needs

Conheça usuários em potencial com características diversas.Meet with potential users who have diverse characteristics. Verifique se que você está considerando todas as necessidades deles ao criar seu aplicativo.Make sure you are considering all of their needs when designing your app. Por exemplo, a Microsoft descobriu que usuários com deficiência auditiva estavam desativando as notificações do sistema em seus consoles do Xbox.For example, Microsoft discovered that deaf users were turning off toast notifications on their Xbox consoles. Quando perguntamos aos usuários com deficiência auditiva reais sobre isso, aprendemos que as notificações do sistema estavam obscurecendo uma seção de legendas.When we asked actual deaf users about this, we learned that toast notifications were obscuring a section of closed captioning. A correção foi exibir a notificação do sistema ligeiramente acima na tela.The fix was to display the toast slight higher on the screen. Essa foi uma solução simples que não era necessariamente óbvia para os dados de telemetria que inicialmente revelaram o comportamento.This was a simple solution that was not necessarily obvious from the telemetry data that initially revealed the behavior.

Escolha uma estrutura de desenvolvimento com sabedoriaChoose a development framework wisely

No estágio de design, a estrutura de desenvolvimento que você usará (isto é, UWP, Win32, Web) é essencial para o desenvolvimento de seu produto.In the design stage, the development framework you will use (i.e. UWP, Win32, web) is critical to the development of your product. Se você tiver o luxo de escolher a sua estrutura, pense sobre quanto esforço levará para criar seus controles dentro da estrutura.If you have the luxury of choosing your framework, think about how much effort it will take to create your controls within the framework. Quais são as propriedades de acessibilidade padrão ou internas que vêm com ele?What are the default or built-in accessibility properties that come with it? Quais são os controles que você precisará personalizar?Which controls will you need to customize? Ao escolher sua estrutura, você está essencialmente escolhendo quanto dos controles de acessibilidade você receberá "gratuitamente" (ou seja, o quanto dos controles já estão incluídos) e quantos exigirão custos de desenvolvimento adicionais devido às personalizações de controle.When choosing your framework, you are essentially choosing how much of the accessibility controls you will get “for free” (that is, how much of the controls are already built-in) and how much will require additional development costs because of control customizations.

Use controles padrão do Windows sempre que possível.Use standard Windows controls whenever possible. Esses controles já estão habilitados com a tecnologia necessária para interface com tecnologias assistenciais.These controls are already enabled with the technology necessary to interface with assistive technologies.

Criar uma hierarquia lógica para seus controlesDesign a logical hierarchy for your controls

Depois de ter a sua estrutura, crie uma hierarquia lógica para mapear seus controles.Once you have your framework, design a logical hierarchy to map out your controls. A hierarquia lógica do seu aplicativo inclui o layout e a ordem de tabulação dos controles.The logical hierarchy of your app includes the layout and tab order of controls. Quando os programas de tecnologia assistencial (AT), como leitores de tela, leem a sua interface do usuário, a apresentação visual não é suficiente; você deve fornecer uma alternativa programática que faça sentido de forma estrutural para os usuários.When assistive technology (AT) programs, such as screen readers, read your UI, visual presentation is not sufficient; you must provide a programmatic alternative that makes sense structurally to your users. Uma hierarquia lógica pode ajudá-lo a fazer isso.A logical hierarchy can help you do that. É uma maneira de estudar o layout da sua interface do usuário e a estruturação de cada elemento para que os usuários possam entendê-la.It is a way of studying the layout of your UI and structuring each element so that users can understand it. Uma hierarquia lógica é usada principalmente para:A logical hierarchy is mainly used:

  1. Fornecer contexto de programas para a ordem lógica (leitura) dos elementos da interface do usuárioTo provide programs context for the logical (reading) order of the elements in the UI
  2. Identificar limites claros entre os controles padrão e os controles personalizados na interface do usuárioTo identify clear boundaries between custom controls and standard controls in the UI
  3. Determinar como partes da interface do usuário interagem juntasTo determine how pieces of the UI interact together

Uma hierarquia lógica é uma ótima maneira de lidar com quaisquer possíveis problemas de usabilidade.A logical hierarchy is a great way to address any potential usability issues. Se não pode estruturar a interface do usuário de maneira relativamente simples, talvez você possa ter problemas com a usabilidade.If you cannot structure the UI in a relatively simple manner, you may have problems with usability. Uma representação lógica de uma caixa de diálogo simples não deve resultar em páginas de diagramas.A logical representation of a simple dialog box should not result in pages of diagrams. Para hierarquias lógicas que se tornam muito profundas ou muito amplas, talvez seja necessário reprojetar sua interface do usuário.For logical hierarchies that become too deep or too wide, you may need to redesign your UI. Para saber mais, baixe o eBook Engenharia de software para acessibilidade.For more information, download the Engineering Software for Accessibility eBook.

Crie configurações visuais apropriadas da interface do usuárioDesign appropriate visual UI settings

Ao criar a interface do usuário visual, verifique se o seu produto tem uma configuração de alto contraste, usa as fontes padrão do sistema e as opções de suavização, é dimensionada corretamente para as configurações de tela de pontos por polegada (dpi), tem texto padrão com pelo menos uma taxa de contraste de 5:1 com a tela de fundo e tem combinações de cores que serão fáceis para os usuários com daltonismo diferenciar.When designing the visual UI, ensure that your product has a high contrast setting, uses the default system fonts and smoothing options, correctly scales to the dots per inch (dpi) screen settings, has default text with at least a 5:1 contrast ratio with the background, and has color combinations that will be easy for users with color deficiencies to differentiate.

Configuração de alto contrasteHigh contrast setting

Um dos recursos integrados de acessibilidade no Windows é o modo de alto contraste, que aumenta o contraste de cor de texto e imagens.One of the built-in accessibility features in Windows is High Contrast mode, which heightens the color contrast of text and images. Para algumas pessoas, aumentar o contraste das cores reduz a fadiga ocular e facilita a leitura.For some people, increasing the contrast in colors reduces eyestrain and makes it easier to read. Ao verificar sua interface do usuário no modo de alto contraste, você deseja verificar se os controles, tais como links, foram codificados consistentemente e com cores do sistema (não com cores embutidas em código) para garantir que os usuários possam ver todos os controles na tela que um usuário que não usa alto contraste veria.When you verify your UI in high contrast mode, you want to check that controls, such as links, have been coded consistently and with system colors (not with hard-coded colors) to ensure that they will be able to see all the controls on the screen that a user not using high contrast would see.

Configurações de fonte do sistemaSystem font settings

Para garantir a legibilidade e minimizar quaisquer distorções inesperadas no texto, certifique-se de que seu produto sempre use as fontes padrão do sistema e use as opções de suavização.To ensure readability and minimize any unexpected distortions to the text, make sure that your product always adheres to the default system fonts and uses the anti-aliasing and smoothing options. Se o seu produto usa fontes personalizadas, os usuários podem enfrentar distrações e questões de legibilidade significativas ao personalizarem a apresentação de sua interface do usuário (com o uso de um leitor de tela ou usando diferentes estilos de fonte para exibir sua interface do usuário, por exemplo).If your product uses custom fonts, users may face significant readability issues and distractions when they customize the presentation of their UI (through the use of a screen reader or by using different font styles to view your UI, for instance).

Resoluções de alto DPIHigh DPI resolutions

Para usuários com deficiência visual, é importante ter uma interface do usuário escalonável.For users with vision impairments, having a scalable UI is important. Interfaces de usuário que não sejam dimensionadas corretamente em resoluções de alto DPI podem fazer com que componentes importantes se sobreponham ou ocultem outros componentes, e podem se tornar inacessíveis.User interfaces that do not scale correctly in high dots-per-inch (DPI) resolutions may cause important components to overlap or hide other components and can become inaccessible.

Taxa de contraste de corColor contrast ratio

A Seção 508 atualizada do Americans with Disability Act (ADA), bem como outras leis, exige que o contraste de cor padrão entre o texto e seu plano de fundo deve ser 5:1.The updated Section 508 of the Americans with Disability Act (ADA), as well as other legislations, requires that the default color contrasts between text and its background must be 5:1. Para textos grandes (tamanhos de fonte de 18 pontos ou 14 pontos e em negrito), o contraste padrão necessário é 3:1.For large texts (18-point font sizes, or 14 points and bolded) the required default contrast is 3:1.

Combinações de coresColor combinations

Cerca de 7% dos homens (e menos de 1% das mulheres) têm alguma forma de deficiência para identificar cores.About 7 percent of males (and less than 1 percent of females) have some form of color deficiency. Os usuários com daltonismo têm problemas para diferenciar determinadas cores, portanto, é importante que não apenas a cor seja usada para transmitir status ou significado em um aplicativo.Users with colorblindness have problems distinguishing between certain colors, so it is important that color alone is never used to convey status or meaning in an application. Assim como em imagens decorativas (como ícones ou planos de fundo), as combinações de cores devem ser escolhidas de forma que maximize a percepção da imagem por usuários daltônicos.As for decorative images (such as icons or backgrounds), color combinations should be chosen in a manner that maximizes the perception of the image by colorblind users. Se o seu design usa essas recomendações de cor desde o início, seu aplicativo já estará dando passos significativos para ser inclusivo.If you design using these color recommendations from the beginning, your app will already be taking significant steps toward being inclusive.

Resumo — sete etapas para design inclusivoSummary — seven steps for inclusive design

Em resumo, siga essas sete etapas para garantir que o seu software seja inclusivo.In summary, follow these seven steps to ensure your software is inclusive.

  1. Decida se o design inclusivo é um aspecto importante para o seu software.Decide if inclusive design is an important aspect to your software. Se for, aprenda e aprecie como ele permite que os usuários reais vivam, trabalhem e joguem, para ajudar a orientar o seu design.If it is, learn and appreciate how it enables real users to live, work, and play, to help guide your design.
  2. Ao criar soluções para suas necessidades, use controles fornecidos por sua estrutura (controles padrão) tanto quanto possível e evite qualquer esforço desnecessário e os custos de controles personalizados.As you design solutions for your requirements, use controls provided by your framework (standard controls) as much as possible, and avoid any unnecessary effort and costs of custom controls.
  3. Crie uma hierarquia lógica para seu produto, observando onde estão os controles padrão, os controles personalizados e o foco do teclado na interface do usuário.Design a logical hierarchy for your product, noting where the standard controls, any custom controls, and keyboard focus are in the UI.
  4. Crie configurações úteis do sistema (como navegação de teclado, alto contraste e alto dpi) em seu produto.Design useful system settings (such as keyboard navigation, high contrast, and high dpi) into your product.
  5. Implemente seu design, usando o hub de desenvolvedor de acessibilidade Microsoft e a especificação de acessibilidade da estrutura como um ponto de referência.Implement your design, using the Microsoft accessibility developer hub and your framework’s accessibility specification as a reference point.
  6. Teste seu produto com os usuários com necessidades especiais para garantir que eles poderão aproveitar as técnicas de design inclusivo implementadas nele.Test your product with users who have special needs to ensure they will be able to take advantage of the inclusive design techniques implemented in it.
  7. Ofereça seu produto final e documente sua implementação para quem possa trabalhar no projeto depois de você.Deliver your finished product and document your implementation for those who may work on the project after you.