Diseño de software inclusivo para Windows 10Designing inclusive software for Windows 10

Obtenga información sobre cómo desarrollar un diseño inclusivo con aplicaciones de Windows para Windows 10.Learn about evolving inclusive design with Windows apps for Windows 10. Diseña y crea software inclusivo teniendo en cuenta la accesibilidad.Design and build inclusive software with accessibility in mind.

En Microsoft, estamos mejorando nuestros principios y prácticas de diseño.At Microsoft, we’re evolving our design principles and practices. Estos informan cómo se ven, sienten, funcionan y comportan nuestras experiencias.These inform how our experiences look, feel, function, and behave. Estamos elevando nuestra perspectiva.We’re elevating our perspective.

Esta nueva filosofía de diseño se denomina diseño inclusivo.This new design philosophy is called inclusive design. La idea consiste en diseñar software con todos los usuarios en mente desde el principio.The idea is to design software with everyone in mind from the very beginning. Esto difiere de considerar la accesibilidad como una tecnología que se añade al final del proceso de desarrollo para satisfacer a los requerimientos de un pequeño grupo de usuarios.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 discapacidad como un desajuste entre las necesidades de la persona y las del servicio, producto o entorno que se ofrece.“We define disability as a mismatch between the needs of the individual and the service, product or environment offered. Cualquier persona puede experimentar una discapacidad.Anyone can experience a disability. Es un rasgo humano común y no debe excluirse."It is a common human trait to be excluded.” -desde el vídeo inclusivo- from the Inclusive video

El diseño inclusivo crea mejores productos para todos.Inclusive design creates better products for everyone. Se trata de considerar la gama completa de diversidad humana.It’s about considering the full range of human diversity. Considera las rampas que se encuentran ahora en la mayoría de las esquinas de las aceras.Consider the curb cutouts that you now find on most street corner sidewalks. Claramente fueron pensadas para ser usadas por personas en sillas de ruedas.They were clearly intended to be used by people in wheelchairs. Pero ahora casi todo el mundo las usa, incluso personas con sillitas para bebés, ciclistas y patinadores en monopatín.But now nearly everyone uses them, including people with baby strollers, bicyclists, skateboarders. Incluso los peatones usarán dichas rampas a menudo porque están ahí y mejoran la experiencia.Even pedestrians will often use curb cutouts because they are there and provide a better experience. El control remoto de la televisión podría considerarse una tecnología de asistencia (AT) para una persona con limitaciones físicas.The television remote control could be considered an assistive technology (AT) for someone with physical limitations. E incluso hoy es prácticamente imposible comprar un televisor sin uno de ellos.And yet, today it is nearly impossible to buy a television without one. Antes de que los niños aprendan a atarse los zapatos, pueden llevar zapatos sin cordones o de cierre fácil.Before children learn to tie their shoes, they can wear slip-on or easy fastening shoes. Los zapatos que son fáciles de poner y quitar suelen preferirse en culturas donde los zapatos se quitan antes de entrar en una casa.Shoes that are easy to put on and take off are often preferred in cultures where shoes are removed before entering a home. También son mejores para aquellas personas con problemas de habilidad, como artritis o una fractura de muñeca.They are also better for people with dexterity issues such as arthritis or even a temporarily broken wrist.

Principios de diseño inclusivoInclusive design principles

Los siguientes 4 principios están impulsando el cambio de Microsoft hacia el diseño inclusivo:The following 4 principles are guiding Microsoft’s shift to inclusive design:

Piensa de forma universal: nos enfocamos en lo que unifica a las personas (motivaciones, relaciones y capacidades humanas).Think universal: We focus on what unifies people — human motivations, relationships, and abilities. Esto nos lleva a tener en cuenta el impacto social más amplio de nuestro trabajo.This drives us to consider the broader social impact of our work. El resultado es una experiencia que tiene una diversidad de formas para que todas las personas participen.The result is an experience that has a diversity of ways for all people to participate.

Haz que sea personal: a continuación, nos desafiamos a crear conexiones emocionales.Make it personal: Next, we challenge ourselves to create emotional connections. Las interacciones de persona a persona pueden inspirar una mejor interacción de la persona con la tecnología.Human-to-human interactions can inspire better human-to-technology interaction. Las circunstancias particulares de una persona pueden mejorar el diseño para todos los usuarios.A person’s unique circumstances can improve a design for everyone. El resultado es una experiencia que parece creada especialmente para una persona.The result is an experience that feels like it was created for one person.

Mantenlo simple: Empezamos con la simplicidad como el unificador fundamental.Keep it simple: We start with simplicity as the ultimate unifier. Cuando se reduce el desorden, las personas saben qué hacer a continuación.When we reduce clutter people know what to do next. Están inspiradas a avanzar hacia espacios que sean limpios, livianos y abiertos.They’re inspired to move forward into spaces that are clean, light, and open. El resultado es una experiencia realista e intemporal.The result is an experience that’s honest and timeless.

Crea deleite: las experiencias agradables provocan fascinación y descubrimiento.Create delight: Delightful experiences evoke wonder and discovery. Algunas veces es mágico.Sometimes it’s magical. Algunas veces es un detalle que es simplemente perfecto.Sometimes it’s a detail that’s just right. Diseñamos estos momentos para que se sientan como un ansiado cambio de ritmo.We design these moments to feel like a welcomed change in tempo. El resultado es una experiencia que tiene impulso y flujo.The result is an experience that has momentum and flow.

Usuarios de diseño inclusivoInclusive design users

Existen básicamente dos tipos de usuarios de la tecnología de asistencia (AT):There are essentially two types of users of assistive technology (AT):

  1. Aquellos que la necesitan, debido a discapacidades o dificultades, condiciones temporales (como la movilidad limitada a causa de un miembro roto) o relacionadas con la edad.Those who need it, because of disabilities or impairments, age-related conditions, or temporary conditions (such as limited mobility from a broken limb)
  2. Los que la usan por preferencia, para una experiencia informática más cómoda o conveniente.Those who use it out of preference, for a more comfortable or convenient computing experience

La mayoría de los usuarios de PC (54 por ciento) son conscientes de la existencia de alguna forma de tecnología de asistencia y el 44 por ciento de dichos usuarios usan alguna forma de ella, pero muchos de ellos no usan AT que los beneficiaría (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).

Un estudio de 2003-2004 realizado por Microsoft y realizada por Forrester Research encontró que más de — la mitad del 57 por ciento — de los usuarios del equipo en el Estados Unidos entre las edades 18 y 64 podrían beneficiarse de la tecnología de asistencia.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. La mayoría de estos usuarios no se identificaron a sí mismos como discapacitados o con algún tipo de deficiencia, pero expresaron ciertas dificultades relacionadas con la tarea cuando usan un equipo.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. Forrester (2003) también encontró la siguiente proporción de usuarios con estas dificultades específicas: uno de cada cuatro experimenta dificultades visuales.Forrester (2003) also found the following number of users with these specific difficulties: One in four experiences a visual difficulty. Uno de cada cuatro experimenta dolor en las muñecas o manos.One in four experiences pain in the wrists or hands. Uno de cada cinco experimenta dificultades auditivas.One in five experiences hearing difficulty.

Además de las discapacidades permanentes, la gravedad y los tipos de dificultades que experimenta un individuo pueden variar a lo largo su vida.Besides permanent disabilities, the severity and types of difficulties an individual experiences can vary throughout their life. La persona normal no existe.There is no such thing as a normal human. Nuestras capacidades siempre están cambiando.Our capabilities are always changing. Margaret Meade dijo: "Todos somos únicos.Margaret Meade said, “We are all unique. Ser únicos nos hace iguales."Being all unique makes us all the same.”

Microsoft está comprometido con la investigación sobre las ciencias de la computación y la ingeniería de software con el objetivo de mejorar la experiencia informática y crear nuevas tecnologías informáticas.Microsoft is dedicated to conducting computer science and software engineering research with goals to enhance the computing experience and invent novel computing technologies. Consulta Proyectos actuales de investigación y desarrollo de Microsoft dirigidos a hacer que el equipo sea más accesible y fácil de ver, escuchar e interactuar.See Current Microsoft Research and Development Projects aimed at making the computer more accessible, and easier to see, hear, and interact with.

Pasos prácticos de diseñoPractical design steps

Si estás preparado, esta sección es para ti.If you're all in, then this section is for you. Se describen los pasos prácticos de diseño a tener en cuenta al implementar el diseño inclusivo para tu aplicación.It describes the practical design steps to consider when implementing inclusive design for your app.

Describir el público objetivoDescribe the target audience

Define los usuarios potenciales de tu aplicación.Define the potential users of your app. Imagínate todas sus características y capacidades diferentes.Think through all of their different abilities and characteristics. Por ejemplo, la edad, sexo, idioma, sordera o problemas auditivos, impedimentos visuales, capacidades cognitivas, estilo de aprendizaje, restricciones de movilidad y así sucesivamente.For example, age, gender, language, deaf or hard of hearing users, visual impairments, cognitive abilities, learning style, mobility restrictions, and so on. ¿Satisface tu diseño sus necesidades individuales?Is your design meeting their individual needs?

Habla con personas reales con necesidades específicasTalk to actual humans with specific needs

Reúnete con los usuarios potenciales que tengan distintas características.Meet with potential users who have diverse characteristics. Asegúrate de considerar todas sus necesidades al diseñar tu aplicación.Make sure you are considering all of their needs when designing your app. Por ejemplo, Microsoft descubrió que los usuarios sordos se desactivaban las notificaciones del sistema en sus consolas Xbox.For example, Microsoft discovered that deaf users were turning off toast notifications on their Xbox consoles. Cuando se le preguntó a usuarios sordos reales sobre esto, nos dimos cuenta de que las notificaciones del sistema oscurecían una sección de subtítulos.When we asked actual deaf users about this, we learned that toast notifications were obscuring a section of closed captioning. La solución fue mostrar la notificación del sistema ligeramente más arriba en la pantalla.The fix was to display the toast slight higher on the screen. Esta fue una solución sencilla que no fue necesariamente evidente a partir de los datos de telemetría que inicialmente revelaron el comportamiento.This was a simple solution that was not necessarily obvious from the telemetry data that initially revealed the behavior.

Elige un entorno de desarrollo sabiamenteChoose a development framework wisely

En la fase de diseño, el entorno de desarrollo que usarás (es decir, UWP, Win32, web) es fundamental para el desarrollo del producto.In the design stage, the development framework you will use (i.e. UWP, Win32, web) is critical to the development of your product. Si tienes el lujo de poder elegir el entorno, piensa cuánto esfuerzo requerirá crear tus controles dentro de ese entorno.If you have the luxury of choosing your framework, think about how much effort it will take to create your controls within the framework. ¿Cuáles son las propiedades de accesibilidad integradas o predeterminadas que vienen con él?What are the default or built-in accessibility properties that come with it? ¿Qué controles necesitarás personalizar?Which controls will you need to customize? Al elegir tu entorno de desarrollo, esencialmente estás eligiendo la cantidad de controles de accesibilidad que obtendrás "gratuitamente" (es decir, qué proporción de los controles ya están integrados) y cuántos requerirán costos de desarrollo adicionales debido a las personalizaciones de los mismos.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.

Usa los controles estándar de Windows siempre que sea posible.Use standard Windows controls whenever possible. Estos controles ya están habilitados con la tecnología necesaria para interactuar con las tecnologías de asistencia.These controls are already enabled with the technology necessary to interface with assistive technologies.

Diseña una jerarquía lógica para tus controlesDesign a logical hierarchy for your controls

Una vez que tienes tu entorno de desarrollo, diseña una jerarquía lógica para asignar tus controles.Once you have your framework, design a logical hierarchy to map out your controls. La jerarquía lógica de tu aplicación incluye la distribución y el orden de tabulación de los controles.The logical hierarchy of your app includes the layout and tab order of controls. Cuando los programas de tecnología de asistencia (AT), tales como los lectores de pantalla, leen tu interfaz de usuario, la presentación visual no es suficiente; debes proporcionar una alternativa de programación que tenga sentido estructural para los usuarios.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. Una jerarquía lógica puede ayudarte a hacerlo.A logical hierarchy can help you do that. Es una manera de estudiar la distribución de tu interfaz de usuario y estructurar cada elemento para que los usuarios puedan interpretarla.It is a way of studying the layout of your UI and structuring each element so that users can understand it. Principalmente se usa una jerarquía lógica:A logical hierarchy is mainly used:

  1. Para proporcionar un contexto a los programas para el orden lógico (lectura) de los elementos de la interfaz de usuarioTo provide programs context for the logical (reading) order of the elements in the UI
  2. Para identificar claramente los límites entre los controles personalizados y los controles estándar en la interfaz de usuarioTo identify clear boundaries between custom controls and standard controls in the UI
  3. Para determinar cómo interactúan entre sí las partes de la interfaz de usuarioTo determine how pieces of the UI interact together

Una jerarquía lógica es una excelente manera de solucionar posibles problemas de facilidad de uso.A logical hierarchy is a great way to address any potential usability issues. Si no puedes estructurar la interfaz de usuario de una manera relativamente sencilla, puede que tengas problemas con la facilidad de uso.If you cannot structure the UI in a relatively simple manner, you may have problems with usability. Una representación lógica de un cuadro de diálogo sencillo no debe dar como resultado páginas de diagramas.A logical representation of a simple dialog box should not result in pages of diagrams. En el caso de jerarquías lógicas que se vuelvan demasiado profundas o anchas, puede que tengas que volver a diseñar tu interfaz de usuario.For logical hierarchies that become too deep or too wide, you may need to redesign your UI. Para obtener más información, descarga el libro electrónico sobre diseño de software para accesibilidad.For more information, download the Engineering Software for Accessibility eBook.

Diseña los ajustes de interfaz de usuario visuales adecuadosDesign appropriate visual UI settings

Al diseñar la interfaz de usuario visual, asegúrate de que tu producto tenga una configuración de contraste alto, use las fuentes y opciones de suavizado predeterminadas del sistema, se escale correctamente según la configuración de puntos por pulgada (PPP) de la pantalla, tenga texto predeterminado con una relación de contraste de al menos 5:1 con el fondo y que tenga combinaciones de colores que resultarán fáciles de diferenciar a los usuarios con deficiencias en la percepción del color.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.

Configuración de contraste altoHigh contrast setting

Una de las características de accesibilidad integradas en Windows es el modo de contraste alto, el cual aumenta el contraste del color de texto e imágenes.One of the built-in accessibility features in Windows is High Contrast mode, which heightens the color contrast of text and images. Para algunas personas, aumentar el contraste de los colores reduce la fatiga ocular y facilita la lectura.For some people, increasing the contrast in colors reduces eyestrain and makes it easier to read. Cuando inspeccionas tu interfaz de usuario en modo de contraste alto, es buena idea comprobar que los controles, tales como los vínculos, se hayan codificado de forma coherente y con los colores del sistema (no con colores codificados de forma rígida) para garantizar que podrán ver todos los controles de la pantalla que vería un usuario que no está usando contraste alto.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.

Configuración de la fuente del sistemaSystem font settings

Para garantizar la legibilidad y minimizar cualquier distorsión inesperada en el texto, asegúrate de que tu producto se adhiera siempre a las fuentes predeterminadas del sistema y use las opciones de suavizado de contorno y suavizado.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. Si tu producto usa fuentes personalizadas, los usuarios pueden enfrentan distracciones y problemas de legibilidad significativos cuando personalicen la presentación de su interfaz de usuario (mediante el uso de un lector de pantalla o mediante distintos estilos de fuentes para ver tu interfaz de usuario, por ejemplo).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).

Resoluciones con valores altos de PPPHigh DPI resolutions

Para usuarios con dificultades visuales, es importante tener una interfaz de usuario escalable.For users with vision impairments, having a scalable UI is important. Las interfaces de usuario que no se escalen correctamente en resoluciones con valores altos de puntos por pulgada (PPP) pueden hacer que los componentes importantes se superpongan o que tapen otros componentes y los hagan inaccesibles.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.

Relación de contraste de colorColor contrast ratio

La sección 508 actualizada de la Ley estadounidense sobre la discapacidad (ADA), al igual que otras legislaciones, requiere que el contraste de color predeterminado entre el texto y su fondo sea de 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 los textos grandes (tamaños de 18 puntos o de 14 puntos y en negrita) el contraste necesario predeterminado es de 3:1.For large texts (18-point font sizes, or 14 points and bolded) the required default contrast is 3:1.

Combinaciones de coloresColor combinations

Aproximadamente el 7 por ciento de los hombres (y menos del 1 por ciento de las mujeres) tienen alguna forma de daltonismo.About 7 percent of males (and less than 1 percent of females) have some form of color deficiency. Los usuarios con daltonismo tienen problemas para distinguir entre algunos colores, así que es importante que nunca se use el color por sí solo para transmitir el estado o el significado en una aplicación.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. Para obtener imágenes decorativas (tales como iconos o fondos), las combinaciones de colores se deberían elegirse de manera que se maximice la percepción de la imagen por parte de los usuarios 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. Si diseñas usando estas recomendaciones de color desde el principio, tu aplicación ya estará dando pasos importantes hacia ser inclusiva.If you design using these color recommendations from the beginning, your app will already be taking significant steps toward being inclusive.

Resumen — de siete pasos para el diseño inclusivoSummary — seven steps for inclusive design

En resumen, sigue estos siete pasos para garantizar que tu software sea inclusivo.In summary, follow these seven steps to ensure your software is inclusive.

  1. Decide si un diseño inclusivo es un aspecto importante para tu software.Decide if inclusive design is an important aspect to your software. Si lo es, aprende y aprecia cómo le permite a los usuarios reales vivir, trabajar y jugar, para ayudarte a guiar tu diseño.If it is, learn and appreciate how it enables real users to live, work, and play, to help guide your design.
  2. A medida que diseñes soluciones para tus requisitos, usa los controles proporcionados por tu entorno de desarrollo (controles estándar) tanto como sea posible y evita los esfuerzos y costos innecesarios de los 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. Diseña una jerarquía lógica para tu producto, tomando nota de dónde están los controles estándar, los controles personalizados y el foco del teclado en la interfaz de usuario.Design a logical hierarchy for your product, noting where the standard controls, any custom controls, and keyboard focus are in the UI.
  4. Diseña configuraciones del sistema útiles (tales como la navegación por teclado, el contraste alto y los valores altos de PPP) en tu producto.Design useful system settings (such as keyboard navigation, high contrast, and high dpi) into your product.
  5. Implemente el diseño mediante el Centro para desarrolladores de accesibilidad de Microsoft y la especificación de accesibilidad de su marco de trabajo como punto de referencia.Implement your design, using the Microsoft accessibility developer hub and your framework’s accessibility specification as a reference point.
  6. Prueba tu producto en usuarios con necesidades especiales para garantizar que podrán aprovechar las técnicas de diseño inclusivo implementadas en él.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. Entrega tu producto final y documenta tu implementación para aquellas otras personas que trabajen en el proyecto después de ti.Deliver your finished product and document your implementation for those who may work on the project after you.