{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"div","parameters":{"macroParams":{"class":{"value":"a11y-checks"}},"macroMetadata":{"macroId":{"value":"09c4aec7-2eb3-4e11-8e26-c05997b3414d"},"schemaVersion":{"value":"1"},"title":"Div"}}},"content":[{"type":"paragraph","content":[{"text":"Diseñar un sitio web accesible para la diversidad de usuarios no es difícil, sin embargo es necesario advertir que las técnicas descritas en estas páginas no garantizan que su sitio web quede 100% accesible, pero se facilita mucho más el trabajo.","type":"text"}]},{"type":"paragraph","content":[{"text":"Use estas técnicas en todo su proceso de desarrollo; no espere hasta tener creado todo para evaluar si es accesible o no. Si usted va comprobando lo que va desarrollando, con seguridad los resultados serán mucho mejores en accesibilidad.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Teclado accesible","type":"text"}]},{"type":"paragraph","content":[{"text":"Desconecte el mouse de su PC y guardelo en algún cajón de su escritorio. (Si está usando un portátil, cubra con un cartón la zona en donde usa los dedos simulando el ratón). Ahora, intente ingresar a su sitio web. ¿Puede navegar usando solo el teclado? ¿Puede entrar y salir del sitio? ¿Puede diligenciar los posibles formularios que estén disponibles? ¿Puede acceder a todos los menús de navegación? ¿Puede identificar en done se hace foco usando el teclado?","type":"text"}]},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"cxhtml":"float: right; width: 50%;

¿Porqué debería preocuparse?

Mucha gente no puede, no acostumbra o no quiere usar un mouse. Tal vez son usuarios poderosos que no quieren perder el tiempo moviendo las manos del teclado al ratón; Quizá ellos están usando una pc portátil y odian la superfie para poner los dedos simulando un ratón. Es posible que ellos estén usando un ratón inalámbrico y las pilas se descargaron. O tal ellos tienen un impedimento físico que les impida usar el ratón. De pronto ellos tienen limitaciones visuales y no pueden ver la pantalla. Ninguna de estas son razones por las que ellos no quisieran ingresar a su sitio web.

","nestedContent":{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"div","parameters":{"macroParams":{"style":{"value":"float: right; width: 50%;"}},"macroMetadata":{"macroId":{"value":"4e4accdf-2d30-458c-9818-753efa0f1677"},"schemaVersion":{"value":"1"},"title":"Div"}}},"content":[{"type":"table","attrs":{"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"¿Porqué debería preocuparse?","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Mucha gente no puede, no acostumbra o no quiere usar un mouse. ","type":"text"},{"text":"Tal vez son usuarios poderosos que no quieren perder el tiempo moviendo las manos del teclado al ratón; Quizá ellos están usando una pc portátil y odian la superfie para poner los dedos simulando un ratón. Es posible que ellos estén usando un ratón inalámbrico y las pilas se descargaron. O tal ellos tienen un impedimento físico que les impida usar el ratón. De pronto ellos tienen limitaciones visuales y no pueden ver la pantalla. Ninguna de estas son razones por las que ellos no quisieran ingresar a su sitio web.","type":"text"}]}]}]}]}]}],"version":1},"reason":"A div macro in a rich body macro can't be created or edited in the new editor."}}},{"type":"paragraph","content":[{"text":"Nota: En Safari, p","type":"text"},{"text":"uede que necesite ingresar a las preferencias avanzadas del navegador y marcar la casilla de verificación \"Presione la pestaña Para resaltar cada elemento en una página web\" para poder hacer uso de la tecla TAB del teclado.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Algunas cosas a tener en cuenta (y qué hacer con ellas)","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"No ser capaz de decir donde se hace foco","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/fluid/pages/11626673/How+to+make+pages+keyboard+accessible#Howtomakepageskeyboardaccessible-Providevisualstylingforkeyboardfocus"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"No distinguir vínculos o botones activos","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/fluid/pages/11626673/How+to+make+pages+keyboard+accessible#Howtomakepageskeyboardaccessible-Makesurecontrolscanbereached"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Vínculos que se repiten ellos mismos","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/fluid/pages/11626673/How+to+make+pages+keyboard+accessible#Howtomakepageskeyboardaccessible-Avoidredundantlinks"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Diálogos con los que no se puede trabajar","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/fluid/pages/11626673/How+to+make+pages+keyboard+accessible#Howtomakepageskeyboardaccessible-Makesuredialogsgetfocus"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Diálogos que no se cierran","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/fluid/pages/11626673/How+to+make+pages+keyboard+accessible#Howtomakepageskeyboardaccessible-Makesuredialogscanbedismissed"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Menús pop up que no deberían ser pop up","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/fluid/pages/11626673/How+to+make+pages+keyboard+accessible#Howtomakepageskeyboardaccessible-Makesurepop-upspopup"}}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Semántica","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Vínculos","type":"text"}]},{"type":"paragraph","content":[{"text":"Use una herramienta del ","type":"text"},{"text":"Web Accessibility Toolbar","type":"text","marks":[{"type":"link","attrs":{"href":"http://www.visionaustralia.org.au/ais/toolbar/"}}]},{"text":" o quizá usar la extensión de navegadores web ","type":"text"},{"text":"Web Developer","type":"text","marks":[{"type":"link","attrs":{"href":"http://chrispederick.com/work/web-developer/"}}]},{"text":" para generar la lista de vínculos de cada página. ","type":"text"},{"text":"¿El texto de los enlaces tiene algún sentido cuando se saca del contexto de la página web?","type":"text"}]},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"cxhtml":"float: right; width: 50%;

¿Porqué debería preocuparse?

Los textos de los enlaces dicen algo acerca del vínculo al que dirigen al usuario. Los usuarios de lectores de pantalla suelen navegar por una página mediante el uso de la tecla Tab de su teclado y van saltando de un enlace al siguiente. El lector de pantalla solo les lee lo que dicen los textos escritos en los enlaces ¿Usted seguiría un vínculo si todo lo que escucha de parte de su lector de pantalla es "haga clic aquí?"

¿Porqué debería preocuparse?

Los textos que son simulados o mostrados con imágenes son muy difíciles para traducciones o tareas similares. También, muchas personas no ven las imágenes de un sitio web porque podrían tener impedimentos visuales o quizá tienen conexiones a Internet muy lentas, lo que dificulta la descarga de imágenes.

¿Porqué debería preocuparse?

Los motores de búsqueda no son los únicos que usan los encabezados para indexar un sitio. Muchas personas utilizan la tabla de contenido generada automáticamente para obtener una idea rápida de lo que hay en una página, así como para navegar a determinados encabezados. Si miran esta tabla de contenido y parece enredado o sin sentido, no van a estar muy impresionados con su sitio.

","type":"text","marks":[{"type":"code"}]},{"text":" y ","type":"text"},{"text":"

","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"Asegúrese de entender la forma en que crea un","type":"text"},{"text":" ","type":"text"},{"text":"documento fuera de línea","type":"text","marks":[{"type":"link","attrs":{"href":"http://html5doctor.com/outlines/"}}]},{"text":". Pruebe con un herramienta HTML5 como ","type":"text"},{"text":"HTML 5 Outliner","type":"text","marks":[{"type":"link","attrs":{"href":"http://gsnedders.html5.org/outliner/"}}]},{"text":" ","type":"text"},{"text":"para evaluar el esquema de su página.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Algunas cosas a tener en cuenta (y qué hacer con ellas)","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Errores de uso de encabezados (Ej.: ","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/fluid/pages/11598381/How+to+fix+your+headings#Howtofixyourheadings-Don'tskipheadinglevels"}}]},{"text":"h3","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/fluid/pages/11598381/How+to+fix+your+headings#Howtofixyourheadings-Don'tskipheadinglevels"}}]},{"text":" dentro de ","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/fluid/pages/11598381/How+to+fix+your+headings#Howtofixyourheadings-Don'tskipheadinglevels"}}]},{"text":"h1","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/fluid/pages/11598381/How+to+fix+your+headings#Howtofixyourheadings-Don'tskipheadinglevels"}}]},{"text":")","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/fluid/pages/11598381/How+to+fix+your+headings#Howtofixyourheadings-Don'tskipheadinglevels"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Cosas que deberían estar al mismo nivel pero no","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Encabezados utilizados sólo para formatear","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/fluid/pages/11598381/How+to+fix+your+headings#Howtofixyourheadings-Don'tuseaheadingtagwhenyouwantvisualstyling"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Encabezados que no utilizan tags de encabezado","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/fluid/pages/11598381/How+to+fix+your+headings#Howtofixyourheadings-Don'tusevisualstylingwhenyouwantaheading"}}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Hojas de estilo","type":"text"}]},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"cxhtml":"float: right; width: 50%;

¿Porqué debería preocuparse?

Con el incremento de la densidad de los pixeles en muchas pantallas, la apariencia del texto parece cada vez más pequeña para los usuarios. Mucha gente aumenta el tamaño, algunas veces añadiendo un estilo a la página. Si usted está usando valores fijos (en pixeles, por ejemplo), su contenido sera un problema para éstas personas.

También hay que tener en cuenta que existen más dispositivos de diferentes tamaños y formas que la gente usa con mayor frecuencia. La puesta en práctica del Responsive web designs puede ayudar a asegurar que su sitio luzca correctamente sin importar en dónde se mire. Pero recuerde que no debe usar medidas en píxeles para tamaños de fuente y espaciados de línea.

","nestedContent":{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"div","parameters":{"macroParams":{"style":{"value":"float: right; width: 50%;"}},"macroMetadata":{"macroId":{"value":"5210eb52-d6ea-4bca-95d0-d352f70ebc9d"},"schemaVersion":{"value":"1"},"title":"Div"}}},"content":[{"type":"table","attrs":{"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"¿Porqué debería preocuparse?","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Con el incremento de la densidad de los pixeles en muchas pantallas, la apariencia del texto parece cada vez más pequeña para los usuarios. Mucha gente aumenta el tamaño, algunas veces añadiendo un estilo a la página. Si usted está usando valores fijos (en pixeles, por ejemplo), su contenido sera un problema para éstas personas.","type":"text"}]},{"type":"paragraph","content":[{"text":"También hay que tener en cuenta que existen más dispositivos de diferentes tamaños y formas que la gente usa con mayor frecuencia. La puesta en práctica del ","type":"text"},{"text":"Responsive web designs","type":"text","marks":[{"type":"link","attrs":{"href":"http://en.wikipedia.org/wiki/Responsive_Web_Design"}}]},{"text":" puede ayudar a asegurar que su sitio luzca correctamente sin importar en dónde se mire. ","type":"text"},{"text":"Pero recuerde que no debe usar medidas en píxeles para tamaños de fuente y espaciados de línea.","type":"text"}]}]}]}]}]}],"version":1},"reason":"A div macro in a rich body macro can't be created or edited in the new editor."}}},{"type":"paragraph","content":[{"text":"Use algo como la extensión Firebug en Firefox para ","type":"text"},{"text":"para duplicar el tamaño de la fuente de la página añadiendo \"font-size: 2em\" a la etiqueta .","type":"text"},{"text":" ","type":"text"},{"text":"¿Todo el texto de la página aparece al doble del tamaño?","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Algunas cosas a tener en cuenta (y qué hacer con ellas)","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Texto que no agranda","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/fluid/pages/11542033/How+to+make+your+page+more+responsive#Howtomakeyourpagemoreresponsive-Useemsfortextsize"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Contenidos que no agrandan (Ej.: columnas, el documento en el body, etc)","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/fluid/pages/11542033/How+to+make+your+page+more+responsive#Howtomakeyourpagemoreresponsive-Useemsforcontainersizes"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Imágenes de fondo que no escalan adecuadamente","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/fluid/pages/11542033/How+to+make+your+page+more+responsive#Howtomakeyourpagemoreresponsive-UseCSStohelpimagesscale"}}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Lectores de pantalla","type":"text"}]},{"type":"paragraph","content":[{"text":"Prenda el lector de pantalla de su equipo y escuche su página web.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"En Windows puede descargar libremente ","type":"text"},{"text":"NVDA","type":"text","marks":[{"type":"link","attrs":{"href":"http://www.nvda-project.org/"}}]},{"text":", o una versión de prueba de ","type":"text"},{"text":"Jaws","type":"text","marks":[{"type":"link","attrs":{"href":"http://freedomscientific.com/downloads/demo/FS-demo-downloads.asp"}}]},{"text":", el popular lector de pantalla.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"En Mac el sistema operativo incluye la opción de ","type":"text"},{"text":"VoiceOver","type":"text","marks":[{"type":"link","attrs":{"href":"http://www.apple.com/accessibility/voiceover/"}}]},{"text":".","type":"text"}]}]}]},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"cxhtml":"float: right; width: 50%;

¿Porqué debería preocuparse?

Un creciente número de personas tienen limitaciones visuales que les impiden ver adecuadamente las pantallas. Muchos usan lectores de pantalla que leen los contenidos. Si no se escucha nada en su página web con el lector de pantalla activado, es seguro que los visitantes de su sitio dejaran de visitarlo rápidamente.

","nestedContent":{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"div","parameters":{"macroParams":{"style":{"value":"float: right; width: 50%;"}},"macroMetadata":{"macroId":{"value":"a9e6ffce-d797-4265-9b6c-430797407685"},"schemaVersion":{"value":"1"},"title":"Div"}}},"content":[{"type":"table","attrs":{"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"¿Porqué debería preocuparse?","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"Un creciente número de personas tienen limitaciones visuales que les impiden ver adecuadamente las pantallas. Muchos usan lectores de pantalla que leen los contenidos. Si no se escucha nada en su página web con el lector de pantalla activado, es seguro que los visitantes de su sitio dejaran de visitarlo rápidamente.","type":"text"}]}]}]}]}]}],"version":1},"reason":"A div macro in a rich body macro can't be created or edited in the new editor."}}},{"type":"paragraph","content":[{"text":"Ponga a funcionar el lector de pantalla y luego vaya al navegador web y recargue su página. Apague el monitor y escuche lo que lee el lector de pantalla en su sitio web. ¿Tiene sentido? ¿Usted puede entender de qué se trata la página?","type":"text"}]},{"type":"paragraph","content":[{"text":"Use la tecla Tab paranavegar el sitio. Escuche con atención o que el lector de pantalla dice sobre los enlaces y los controles. ¿Tiene sentido lo que oye? ¿Puede decir dónde está el foco del vínculo?","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"¿Desea más información?","type":"text"}]},{"type":"paragraph","content":[{"text":"Para más información sobre diseño de sitios web accesibles, intente con los siguientes recursos:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Consejos para ","type":"text"},{"text":"Pruebas con varios navegadores","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/fluid/pages/11611878"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Protocolos de revisión de accesibilidad","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/fluid/pages/11608407"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Las páginas de la red de desarrollo de Mozilla sobre la web accesible","type":"text","marks":[{"type":"link","attrs":{"href":"https://developer.mozilla.org/En/Accessibility/Web_Development"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"La lista de chequeo del proyecto DHTML Fluid","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9316362"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"WebAIM","type":"text","marks":[{"type":"link","attrs":{"href":"http://webaim.org/"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Las mejores prácticas del W3C usando ARIA (Accessible Rich Internet Applications)","type":"text","marks":[{"type":"link","attrs":{"href":"http://www.w3.org/WAI/PF/aria-practices/"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Guías del W3C's sobre Contenidos Accesibles en la Web (WCAG, por sus siglas en inglés)","type":"text","marks":[{"type":"link","attrs":{"href":"http://www.w3.org/WAI/intro/wcag.php"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Soluciones sencillas a problemas comunes de accesibilidad","type":"text","marks":[{"type":"link","attrs":{"href":"http://yahoodevelopers.tumblr.com/post/59489724815/easy-fixes-to-common-accessibility-problems"}}]},{"text":" from Yahoo! Developer Network","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Usando ARIA en HTML","type":"text","marks":[{"type":"link","attrs":{"href":"https://specs.webplatform.org/html-aria/webspecs/master/"}}]}]}]}]}]}],"version":1}

(Spanish Translation) Pruebas rápidas y sugerencias útiles de accesibilidad de un sitio web