Traducción de los documentos sobre las “Pautas de accesibilidad al contenido en la Web 1.

0” de WAI-W3C

Región de Murcia Consejería de Trabajo, Consumo y Política Social Secretaría Sectorial de Acción Social Dirección General de Familia y Servicios Sectoriales

DISEÑO DE PÁGINAS WEB ACCESIBLES
EDICIÓN ELETRÓNICA: www.carm.es/ctra/cendoc/publicaciones/

Edita: Consejería de Trabajo Consumo y Política Social Secretaría Sectorial de Acción Social Dirección General de Familia y Servicios Sectoriales Traducción Realizada por: Carlos Egea García, Alicia Sarabia Sánchez y Alan Chuter para Fundosa Teleservicios S.A. por encargo del Real Patronato sobre Discapacidad Diseño y Maquetación: alfredoparedes diseño gráfico • ilustración Imprime: Industrias Gráficas LIBECROM Depósito Legal: ISBN 84-87926-36-3

Distribución: Sección de Documentación Consejería de Trabajo, Consumo y Política Social Avda. de la Fama, 3 - 30003 MURCIA Teléfono: 968 36 68 24 - Fax: 968 36 51 82 www.carm.es/ctra/cendoc cdss@carm.es

Aviso Legal Importante

Este documento no tieneautorización oficial de World Wide Web Consortium (W3C), Web Accessibility Initiative (WAI). Contiene material con el copyright (c) W3C Los únicos documentos reconocidos por este Consorcio son sus originales en Inglés: • Fact Sheet for “Web Content Accessibility Guidelines 1,.0” • Quick Tips To Make Accessibles Web Sites • Web Contents Accessibility Guidelines 1.0 • Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0 Todos los derechos están reservados por W3C. Las normas aplicables de W3C pueden encontrarse en: • Sobre el copyright, la propiedad intelectual y los avisos legales. • Sobre uso de los documentos. • Sobre licencias de software. Este documento puede contener errores debido a su traducción.

Construir una sociedad más justa e igualitaria es tarea de todos. Desde la Consejería de Trabajo, Consumo y Política Social de la Región de Murcia estamos construyendo igualdad; y para construirla estamos trabajando desde todos los ámbitos y todas las áreas. Nuestra meta en el sector de la discapacidad es la plena integración social y laboral de las personas que la padecen y la atención a sus familiares; tratando de adaptar nuestras políticas y nuestras acciones a las nuevas demandas sociales que se vienen produciendo, algunas de las cuales ya se han consolidado en el pórtico de este siglo XXI, como es el acceso a las nuevas tecnologías. Es en este punto, precisamente, dónde el documento que tienen entre sus manos recobra una singular importancia. “Diseño de páginas web accesibles” es un instrumento que ha visto la luz fruto de la colaboración que mantenemos con el Real Patronato de Discapacidad. El Gobierno Regional de Murcia considera que la revolución tecnológica y social que ha supuesto el acceso a Internet, dándonos capacidad para abrirnos al mundo de la información, los servicios, la cultura, o el intercambio de experiencias, no puede estar vetada para quienes por su discapacidad tienen limitadas sus condiciones sensoriales o motrices. Queremos lograr un mundo sin barreras de comunicación. Un mundo, que como personas, nos haga más libres. Creemos que “Diseño de páginas web accesibles” es una herramienta útil de trabajo, con la que, sin lugar a dudas, estamos creando nuevas oportunidades para las personas con discapacidad.

Lourdes Méndez Monasterio
Consejera de Trabajo, Consumo y Política Social Comunidad Autónoma de la Región de Murcia

2

............................0 ......... Preguntas frecuentes sobre las “Pautas de Accesibilidad al Contenido en la Web 1............................23 4................................ Introducción........................................ Pautas de Accesibilidad al Contenido en la Web 1.............0.... Tabla de Puntos de Verificación para las Pautas de Accesibilidad al Contenido en la Web 1........... Técnicas Fundamentales para las Pautas de Accesibilidad al Contenido en la Web 1........... Técnicas HTML para las Pautas de Accesibilidad al Contenido de la Web 1.........4 1............0”................13 3.................11 2.....................0....0.........índice Tabla de Contenidos........0.....0......................................................................................96 7.....................77 6.............................. Técnicas para las Pautas de Accesibilidad al Contenido en la Web 1....................155 8....................... Técnicas CSS para las Pautas de Accesibilidad al Contenido en la Web 1.......55 5............................178 3 índice ..............................

................................................................... Pautas de Accesibilidad al Contenido en la Web 1.......................................................................................................................27 2.............................. Pautas de Accesibilidad al Contenido de la Web.............................................. Asegurar una transformación correcta...............................22 3.................19 • ¿Quién se ha implicado en el desarrollo de estas pautas?...............15 • ¿Cómo afectan estas pautas a la manejabilidad y apariencia de los sitios para los usuarios sin discapacidad?..................................................................................................................................................................................................18 • ¿Qué es lo principal que hay que entender para hacer un sitio accesible?.................................................16 • ¿Es más costoso hacer un sitio accesible?...............................19 • ¿Cómo se relacionan estas pautas con otras pautas y otros trabajos de W3C/WAI?..................................................20 • ¿Cómo aprender más sobre la accesibilidad a la Web y sobre la WAI?..... Prioridades..16 • ¿Por qué no recomiendan estas pautas la utilización de páginas sólo texto?................................................................................................................................................28 5..1........................ Cómo se organizan las pautas.......................0”......15 • ¿Cuáles son algunos ejemplos de barreras habituales en las páginas Web?......... Preguntas frecuentes sobre las “Pautas de Accesibilidad al Contenido en la Web 1...................................................................17 • ¿Se convertirán estas pautas en una exigencia? ¿Hay consecuencias legales por no hacer accesible un sitio?......................14 • ¿Qué son las “prioridades”..........................................0.................................................................................................................14 • ¿Para quién están escritas estas pautas?.............................................................. Proporcione alternativas equivalentes para el contenido visual y auditivo..........................................................................................................................................................................23 Resumen...............................................................................................................................29 6......................................................................... Introducción..17 • ¿Hay herramientas que puedan ayudarme? ¿Puedo comprobar la accesibilidad de mi sitio?...24 Estatus de este documento....................................................28 4............................................................................2......30 Pauta 1.................................................................................tabla de contenidos 1.......................................................18 • ¿Mantendrán estas pautas su estabilidad a medida que se desarrollen las tecnologías de la Web?....31 4 tabla de contenidos ..............................................................19 • ¿Qué sitios de la Web están usando ya estas pautas? ¿Puedo ver ejemplos?................................................................27 3..25 1..........................................................28 3.25 2................................................................................................................................................................11 2................20 • ¿Cuál es la función del W3C en la accesibilidad a la Web?..........................................................................................................20 Sobre la Iniciativa de Accesibilidad en la Web...........................................................................................................................................................17 • ¿Qué recursos de apoyo están disponibles para usar estas pautas?..................................... No se base sólo en el color.......27 2............................................................... Introducción.........................................1............. los “niveles de adecuación” y cómo se usan los logotipos?................. Hacer comprensible y navegable el contenido.............................................................14 • ¿Por qué son necesarias estas pautas? ¿Por qué son importantes?.................................................................................................. Convenciones del documento.........................................................16 • ¿Hay algunas herramientas de creación mejores que otras para hacer accesibles los sitios?........................................... Adecuación...............................................................................................................................................................................................................................................................21 guía breve para crear sitios web accesibles.............................................13 • ¿Qué son las Pautas de Accesibilidad al Contenido en la Web?..........................................15 • ¿A cuánta gente afectan los problemas de accesibilidad en la Web?...................................................... Motivos del diseño accesible.................................................................................................30 Pauta 2.............................................................

...................59 Pauta 4.....................43 Apendice A............................................. Utilice las tecnologías y pautas W3C...57 Pauta 2.......................................................66 Pauta 14......................................................................................... Utilice marcadores y hojas de estilo y hágalo de forma apropiada............................................................... Técnicas para las Pautas de Accesibilidad al Contenido en la Web 1...............................................................................................................................................................................................................................................45 Apendice B........................... No se base sólo en el color...................67 3................................62 Pauta 8.............................. Proporcione mecanismos claros de navegación....................................................................63 Pauta 9......................................................................................58 Pauta 3........................... Utilice las tecnologías y pautas de W3C...............................................................................................................................................................................................................63 Pauta 10..........................................................................................................................34 Pauta 6.............................74 5 tabla de contenidos ......................................................................................................................................... Cómo está organizado este documento.... Proporcione información de contexto y orientación..............................................................................................................................................................................................................37 Pauta 9..................................68 4....................................................................................................................41 Pauta 13........................................................... Asegúrese de que las páginas que incorporan nuevas tecnologías se transformen correctamente......60 Pauta 6....................... Utilice soluciones provisionales..................................................................................................................... Validación......................... Utilice soluciones provisionales.................................................................................60 Pauta 5...................................................................................................... Asegure al usuario el control sobre los cambios de contenidos tempo-sensibles..............56 1................................................................................................................................................................................................................................................................................................................................................................... Crear tablas que se trasformen correctamente.....................52 Referencias...................................................................1.................................................35 Pauta 7.................................36 Pauta 8............................................ Asegure la accesibilidad directa de las interfaces de usuario incrustadas................................. Proporcione mecanismos claros de navegación.........................................................................53 4...................57 2..................65 Pauta 12..................................................................................................................................................................................................... Asegure la accesibilidad directa de las interfaces de usuario incrustadas.....................................................32 Pauta 4.............................................. Proporcione información de contexto y orientación......64 Pauta 11................................................................................................................................................................................................................................................................................. Proporcione alternativas equivalentes para el contenido sonoro y visual . Utilice marcadores y hojas de estilo y hágalo apropiadamente.................................... Referencias..........................................Pauta 3..............................................................................................0..................................................................................................................................................................................................................................................................................................................................................................................................55 Resumen.................................................57 Pauta 1..... Glosario................56 1...................................................................................................................................................................................................................................................................... Diseñe para la independencia del dispositivo...........................................61 Pauta 7.............. Asegure al usuario el control sobre los cambios de los contenidos tempo-dependientes........................................................ Diseñe con independencia del dispositivo..................................................................39 Pauta 11.....33 Pauta 5...................42 Pauta 14...............66 Pauta 13.............................................. Asegúrese de que los documentos sean claros y sencillos................. Prioridades..................... Asegúrese de que las páginas que incorporan nuevas tecnologías se transformen correctamente..............38 Pauta 10......46 Reconocimientos............................................................ Glosario................................................................................................................. Identifique el idioma utilizado..... Identifique el idioma usado.................................................................. Técnicas para las Pautas de Accesibilidad al Contenido en la Web........................................ Cree tablas que se transformen correctamente...............40 Pauta 12.................................................... Asegúrese de que los documentos sean claros y simples.

........................................................85 5...............4..................................89 11........................................................................91 15.............................................................................................................................90 14......................76 5.........Validación....88 10.............................1................................................... Otras Pautas ...................5................. Aplicaciones de usuario y otras herramientas..77 Resumen............................................................................................................88 10................................ Revisión ortográfica y gramatical........................ Estructura contra presentación.......81 ................ Información sonora................................................................... Referencias...............................................................................................................................................................................................................................81 3................................................82 3................................ Actualización automática de la página.........................................................................0............................................... Otras pautas........................................................................................................................................................93 18.........92 16.................. Herramientas de corrección....................................90 13.......................2.....................................................1....1..............................................................................................................................................................................................................................................................................................................................................................2.................................................................................................................................................................................................................................................................................. Equivalentes multimedia.....................................76 6..........................................................................................................95 6 tabla de contenidos .................................................................................78 1...............87 8...................................2.............................................................................................................................................................................. Páginas alternativas........................................................................................................................................................................................79 2...........................................................................95 19....................................................................................................................................................................................... Casos de usuarios........................87 9..................................................................89 10........................................................................................... Recursos. Técnicas Fundamentales para las Pautas de Accesibilidad al Contenido en la Web 1..............................................................................................................................................80 2......88 10...................................................................................................................................... Recursos.......................................................................................................................................................3..1..........................1.......... Información visual y movimiento................................................................................................................................................................................................................................................................................................................................... Recursos de accesibilidad...........................................2........................................................................................................................................................ Navegación..................................................................................................................... Audio y vídeo.......................................................................................94 18..................... Documentos empaquetados..................................................................................................................... Destello en la pantalla.... Trascripción textual completa.............................. Equivalentes textuales.................................................86 7............................................................................................... Estilo de redacción...................................................................................................................................93 18......................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................76 5........................................................................1...................................85 5..93 18.....................................................................................................................89 10......................... Control independiente del dispositivo para interfaces incrustadas.......................................... Panorámica de las tecnologías...................... Comprensión.........................92 17..................................... Tecnologías evaluadas en cuanto a la accesibilidad.............................................................................................................................................................................. Aplicaciones de usuario y otras herramientas.................................................. Validadores automáticos.............................. Negociación del contenido.................86 6..90 12.................. Compatibilidad con lo anterior........................................................78 Estatus de este documento..........................................................84 4............................................................................... Agradecimientos..................................................................... Soporte del navegador..................2....................................................................................................................................................................................76 5...................................................2............................84 5...................... Agradecimientos..................................3.................

...........1.................................................................................................................................................101 2........... Énfasis...........103 2............................................................................ Imágenes y mapas de imagen..................3...... texto eliminado.......................................................................... Tablas..............104 3.....128 9................................................................117 6........................105 3.....................................................2.. Dibujos con caracteres (ASCII art).4....................................................................................................................................................................... Señalar el idioma principal...........................................................................120 7.1....................................4......................... Applets accesibles directamente....................................................................................2..................... Acceso desde el teclado.....................96 Resumen..............115 5....115 5..................................................1......................................................123 7..............................................................................................................................................................................................104 3.....................................................................................................................................................................................................................................................................127 8......109 5........................................ Metadatos......................104 3......................................................................................................................... Color en las imágenes.................................................................................... Técnicas HTML para las Pautas de Accesibilidad al Contenido de la Web 1....1.............................................................. Otros ocho elementos estructurales (para identificar citas..................................... Agrupación estructural................................................................1.127 8............. Mapas de imagen.........1...............0........ Tablas de datos......................................... Alineación de las Tablas..............................106 4.................................................................116 6......................121 7............................................................................................................................................................................................................................................ Uso de hojas de estilo para cambiar las viñetas de una lista.......... Señalar los cambios de idioma...................................119 6..............................................................122 7........107 5..................................................................................98 1............................................................................... y otros)...................................................................... Vínculos.......................................................................................................................................................................127 7............................................................................................................ Vínculos y objetivos........106 4............................... Texto de los vínculos ............................... Citas..............................118 6............................................................. fragmentos de código.......2......................6......2.....................................6....................................................... Equivalentes textuales y no textuales para applets y otros objetos programados............... Acrónimos y abreviaturas............... Información sobre el idioma.........................................................................................................................117 6.........................................2.............................................................................1............................................................................................................................................. Etiquetas y hojas de estilo mejor que imágenes: el ejemplo de las matemáticas. Equivalentes textuales breves para imágenes ("texto alt")..................................................................... Etiquetado de texto................................................................120 7..97 Estatus de este documento.......127 8.....................................129 7 tabla de contenidos ................................................................. Audio y vídeo.................................110 5...............................................................................................98 1.................. Estructura y metadatos del documento..................................4............................................4........................................................................................1.......................................................................................................................................................................................3....................................2.................................. Agrupar y saltar vínculos....................5.....................3....97 1............................................................ Applets y otros objetos programados.............................................................................................................................................. Cuestiones de compatibilidad con versiones anteriores para tablas.......................................................................................................................................... Tablas para maquetar.................................................................................................120 7...........104 3....................................... Listas.....2.....3.103 2.................................................................... Descripciones largas de imágenes......................................................... Imágenes animadas...................................................103 3.........5.........................................................................................

....................................................................140 11............................................................................... Proporcionar un título para cada marco........................................................................................5....................................................................................... Scripts directamente accesibles.................................4........................................................................................................2..............................3................... Técnicas CSS para las Pautas de Accesibilidad al Contenido en la Web 1......................................................................................................................................154 7...............131 10.............. Scripts que causan movimiento y parpadeo................... Equivalentes textuales para multimedia......................134 10..............................4...................................5........................................................................133 10..............4.......................................141 12................144 13..................................0....................................139 11........................141 12...........................137 11...............................................................149 14........................6.........................................................156 Estatus de este documento.. Crear páginas para navegadores que no soportan FRAME...139 11..... Formularios...................... Presentación alternativa de scripts....................................................................................131 10..........................................142 12....................................................................................................................................................... Agradecimientos ..........................................153 15...............153 15....................................................................3................ Objetos multimedia incrustados...........................................................................................132 10............................156 1.................................. Reducir el mantenimiento y aumentar la coherencia.............................1................. Técnicas para controles de formulario específicos.................. Agrupar los controles dentro del formulario...................................................152 15...........................................................................3..157 8 tabla de contenidos .......................................................................................................................141 12........ Botones gráficos......................................................................................................153 15................................................................143 12.......................137 11.......................................................... Scripts.................................................................................................................... Recursos................................ Recursos de accesibilidad.......................................................................................135 10...................................................................................................................................................................... Describir las relaciones entre marcos................................................................................................ Referencias............................................................................................ Scripts que causan destello.136 11............................................................................................................................130 10......................................................................................................................................................................................................................142 12.......................................................................................................... Las aplicaciones de usuario y otras herramientas........1.................. Contenidos fuente para marcos.......129 9...............................................................................................155 Resumen................................................................................................................ Usar objetivos (target) para FRAME...............................157 2......................................................................................... Etiquetas para los controles de formulario .......................3.......9...................................................137 11...3.....................................................................2........................................................2.................................................................................................................................. Marcos (frames)....................................................................................... Alternativas a los marcos...........................1.............................. Otras pautas.. Índice de elementos y atributos HTML........................................................................................................................153 16............................................................................................................................................. Acceso a los formularios mediante el teclado.....................142 12........................................................................................ Información sonora... Permitir al usuario redefinir los estilos.....................................6.................................................................................................................5........................................................................................................................................................................................................................................130 9...144 Atributos............................................................... Actualizaciones de la página y ventanas nuevas............................................ Compatibilidad con versiones anteriores para formularios.....................2.........2......................................................1............................................................144 Elementos................6.1..... Transformación correcta de los scripts..

............................................................ Asegurarse de que la información no se transmite sólo por el color.................................................................167 12...................................162 8.....................................................................................................................................................178 Estatus del documento........................................ Recursos.... Colores...................................................... Referencias............3...............................................................................................................................................................................................................................................................................................................................................................174 17......................................................................................................................................................161 7................................... Líneas y bordes............ Recursos sobre la accesibilidad..161 6................................163 9........................163 9..175 18.....................176 19..............0................................................ Proporcionar pistas de contexto en las listas HTML............................................................................................... Ubicación por CSS y marcado para una transformación correcta................................178 Prioridades................................................................................. Hojas de estilo en cascada auditivas...... Unidades de medida..................................... Contraste de colores....................160 5..................................... Acceso a representaciones alternativas de los contenidos........................................................................................................... Tipos de letra......................................................................... Tabla de Puntos de Verificación para las Pautas de Accesibilidad al Contenido en la Web 1..176 19..................................................................168 13......................... Maquetación...... Formateo y posición del texto.........................................................177 Resumen.........................................................163 9................................................................................................................................................................................................................................169 14.................................................................................................................................................................................................................................................................................................................................. Tipos de medios...................................................................................................................................................................165 11.175 19..................................172 15..................................................173 16................................................................................................................... Efectos de estilo del texto................................................................... Agradecimientos .................. colocación en capas......................................................................176 8............................................................................................................................ y alineación....176 20.................................................................................1..................... Si no tiene más remedio que emplear imágenes como espaciadores................................................................1.............................................................2...............................................................................................................................................178 9 tabla de contenidos ............................................................................167 11....1........................................................................................................................................... Crear movimiento con hojas de estilo y scripts.... Contenidos generados....................................... Texto en vez de imágenes. ubicación...2..............................................................159 4............................. Otras pautas.....................164 10............................................................................

introducción .

que es desarrollado en los documentos posteriores sobre "Técnicas" y "Tabla de verificación".0: Se trata de un documento complementario al anterior en el que los autores de las Pautas nos describen los procedimientos para aplicar dichas Pautas. entornos ruidosos.0: Este documento contiene el cuerpo central de estas Pautas. • Guía breve para crear sitios Web accesibles: En tan sólo diez recomendaciones se recogen los fundamentos para diseñar de forma accesible un sitio Web. por el contrario. o las limitaciones bajo las que opere (por ejemplo.). se hará la Web más asequible también para todos los usuarios.0). • Pautas de Accesibilidad al Contenido en la Web 1. habitaciones infra o supra iluminadas. es presumible que el diseñador de páginas Web hará que sus sitios puedan ser accesibles.). los distintos niveles de prioridad y adecuación. etc. En él.0": En este documento se responde a veinte preguntas y está encaminado a proporcionar información sobre la citada Recomendación W3C. Junto a ésta. El lector puede encontrar aquí el texto de las catorce Pautas y de los respectivos puntos de verificación de cada una de ellas. teléfono móvil. podemos decir que "Estas pautas explican cómo hacer accesibles los contenidos de la Web a personas con discapacidad. entorno de manos libres. 11 introducción . Si sigue estos diez principios básicos. navegador de voz. etc. Por ello. Las pautas están pensadas para todos los diseñadores de contenidos de la Web (autores de páginas y diseñadores de sitios) y para los diseñadores de herramientas de creación. por qué. etc. recoge las traducciones. El fin principal de estas pautas es promover la accesibilidad. en orden de aparición en este libro: • Preguntas frecuentes sobre las "Pautas de Accesibilidad al Contenido en la Web 1.. mediante ejemplos prácticos. bajo el nombre de "Pautas de Accesibilidad al Contenido en la Web 1. Seguir estas pautas ayudará también a cualquier persona a encontrar información en la Web más rápidamente. Utilizando las palabras de los propios autores de estas Pautas.introducción Este conjunto de documentos.0" (Web Content Accessibility Guidelines 1. de una serie de documentos elaborados y publicados por el World Wide Web Consortium (W3C) como resultado de los trabajos realizados por la Web Accessibility Initiative (WAI) y que merecieron el reconocimiento como Recomendación W3C. Estas pautas no desalientan a los diseñadores para la utilización de imágenes. se proporciona otra información como es el caso de los motivos para realizar un diseño accesible. así como dos apéndices sobre el procedimiento de validación y un glosario de términos empleados. fue suscrita por su Director el día 5 de mayo de 1999. el lector podrá encontrar una amplia información de referencia para encuadrar el qué. cómo debemos diseñar nuestras páginas Web para que éstas cumplan los requisitos de accesibilidad. PC de automóvil. De cualquier modo. vídeo. para qué y para quién de estas Pautas y cómo implementarlas. así como sobre el trabajo de este Consorcio y su Iniciativa pro-accesibilidad. adaptadas. navegador de sobremesa. Aquí se nos enseña. Los documentos traducidos que se recopilan en esta publicación son los siguientes. siguiéndolas. cualquiera que sea la aplicación de usuario utilizada (por ejemplo. explican cómo hacer los contenidos multimedia más accesibles a una amplia audiencia". • Técnicas para las Pautas de Accesibilidad al Contenido en la Web 1. al que hemos llamado “Diseño de páginas Web accesibles”.

con referencias a los puntos de verificación que les son aplicables. El lector de este conjunto de documentos debe ser consciente de la rápida evolución que se produce en la Web. así como sendos índices de elementos y atributos HTML. para estar plenamente actualizado. Esta tabla sirve al desarrollador para repasar el trabajo realizado a la hora de componer su página Web y comprobar el grado de accesibilidad alcanzado en su diseño. 12 introducción .El documento estructura su contenido en: • Temas generales de las técnicas de accesibilidad • Técnicas fundamentales • Técnicas HTML • Técnicas CSS Junto a estos grandes bloques. Por lo tanto.w3. siga de cerca la información que se produzca en el sitio Web http://www. según su prioridad y objetivo. a que.0: Este último documento contiene la tabla con todos los puntos de verificación de las Pautas. agrupados por prioridad y por objetivo que persigue cada uno de ellos. si está interesado. Pasado un tiempo es muy posible que el contenido de este texto tenga algún extremo desactualizado y superado por los nuevos procedimientos de diseño y aplicaciones de usuario. También puede ser útil este documento como referencia rápida a los puntos de verificación.org/WAI. se proporciona un "mapa de puntos de verificación". Le invitamos. debe recurrir a las fuentes originales. • Tabla de Puntos de Verificación para la Pautas de Accesibilidad al Contenido en la Web 1. por lo tanto.

0” .preguntas frecuentes sobre las “pautas de accesibilidad al contenido en la web 1.

La especificación tiene tres "niveles de adecuación" para facilitar la referencia por otras organizaciones.0”. o para los que utilizan navegadores diferentes o los nuevos ordenadores portátiles o basados en la voz. • La Prioridad 2 el desarrollador debe satisfacerla. 3 ¿Para quién están escritas estas pautas? Estas pautas están escritas para una variada audiencia: las personas que están diseñando sitios Web. algunas personas hallarán dificultades para acceder a la información. algunos grupos de personas serán incapaces de acceder a la información de un sitio. 2 ¿Qué son las “prioridades”. Estas pautas no sólo hacen las páginas más accesibles para las personas con discapacidad. Han sido desarrolladas por la Iniciativa de Accesibilidad en la Web (WAI) del W3C. la “Lista de puntos de verificación para las Pautas de Accesibilidad al Contenido en la Web 1. • La Prioridad 3 el desarrollador puede satisfacerla. para informarse sobre los programas de revisión. y otros que están interesados en asegurar que las personas con discapacidad puedan acceder a la información de la Web. los “niveles de adecuación” y cómo se usan los logotipos? Cada punto de verificación tiene asignado uno de los tres niveles de prioridad. Vea la pregunta 12 de este documento "¿Qué recursos de apoyo están disponibles para usar estas pautas?". para encontrarlas fácilmente. El nivel "Triple A" (AAA) incluye las prioridades 1. La especificación contiene catorce pautas. de lo contrario. de ayuda para la evaluación de los sitios.preguntas frecuentes sobre las “pautas de accesibilidad al contenido en la web 1. • La Prioridad 1 es para los puntos de verificación que el desarrollador tiene que satisfacer. sin ello alguien encontrará muchas dificultades para acceder a la información. si no. Para aquellos cuyas páginas siguen estas pautas. 2 y 3.0” Este apartado de preguntas frecuentes proporciona información sobre la recomendación W3C (World Wide Web Consortium) "Pautas de Accesibilidad al Contenido en la Web 1. El nivel de adecuación "A" (A) incluye los puntos de verificación de prioridad 1. 1 ¿Qué son las Pautas de Accesibilidad al Contenido en la Web? Las "Pautas de Accesibilidad al Contenido en la Web 1. El nivel "Doble A" (AA) incluye las prioridades 1 y 2. que son los principios generales para el diseño accesible. Cada pauta está asociada a uno o más puntos de verificación que describen cómo aplicar esa pauta a las características particulares de las páginas Web. las organizaciones que desean dar a sus sitios un nivel de accesibilidad. hay disponibles unos logotipos que pueden colocar en sus sitios para mostrar su nivel de adecuación. presenta los puntos de verificación clasificados por prioridades. parcialmente automatizados. sino que tienen el beneficio adicional de hacerlas más accesibles para todos los usuarios. las que están comprobando los sitios Web existentes para verificar su accesibilidad.0". Un apéndice de estas pautas. 14 preguntas frecuentes . emitida el 5 de mayo de 1999.0" son una especificación del W3C que proporciona una guía sobre la accesibilidad de los sitios de la Web para las personas con discapacidad.

las barreras pueden significar: • La falta de acceso a información precisa para programas educativos. dispositivos multimedia o ayudas técnicas como los lectores de pantalla o reconocedores de voz). • el uso incorrecto de los elementos estructurales en las páginas. • o los sitios con un contraste de colores pobre. pero muchas sí suponen una dificultad. Los problemas habituales de accesibilidad a los sitios Web incluyen: • mágenes sin texto alternativo. auditiva y cognitiva/neurológica. 5 ¿A cuánta gente afectan los problemas de accesibilidad en la Web? El porcentaje de personas con discapacidad se sitúa entre el 10% y el 20% en muchas poblaciones. 15 preguntas frecuentes . no todas las personas con discapacidad tienen acceso a la Web. como la Web (por ejemplo. • La falta de acceso a la información general de la Web. el acceso a esta tecnología es a veces más crítico que para la población general. • la ausencia de información alternativa para los usuarios que no pueden acceder a los marcos ("frames") o a los programas incrustados ("scripts"). • ausencia de texto alternativo para los puntos sensibles de los mapas de imagen. 6 ¿Cuáles son algunos ejemplos de barreras habituales en las páginas Web? Estas pautas se refieren a las barreras que pueden encontrar en las páginas Web las personas con discapacidad física. la cual tiene una mayor facilidad para acceder a los cauces tradicionales de información. Las Pautas de Accesibilidad al Contenido en la Web tienen relación específicamente con la reducción de barreras en las páginas Web. • los sonidos no subtitulados o las imágenes no descritas. para las personas con discapacidad. No todas las discapacidades afectan al acceso a las tecnologías de la información. la dificultad para caminar o una deficiencia coronaria no afectarían al acceso a la Web). • las tablas difíciles de interpretar cuando se alinean. • La falta de acceso a información relacionada con el empleo o en las intranets del puesto de trabajo. • La incapacidad para participar en el comercio en la red. con las barreras de las "aplicaciones de usuario" (navegadores. • La falta de acceso a información sobre actividades o programas cívicos. Pero el número de usuarios de la Web está incrementándose constantemente y. Para algunas personas con discapacidad. visual. como los medios impresos.4 ¿Por qué son necesarias estas pautas? ¿Por qué son importantes? Las personas con diferentes tipos de discapacidad pueden experimentar dificultades para utilizar la Web debido a la combinación de barreras en la información de las páginas Web. Igual que otros grupos de población.

siguiendo estas pautas. . Muchas características de las pautas mejorarán efectivamente la manejabilidad de los sitios Web para los usuarios sin discapacidad. Muchos sitios que en el pasado han procurado la accesibilidad. Algunos aspectos de la accesibilidad. puede incluso reducir el coste del mantenimiento o las actualizaciones de los sitios. sería innecesario en la mayoría de las ocasiones o. las páginas sólo-texto no serán necesarias para garantizar la accesibilidad de las páginas Web que siguen las Pautas de Accesibilidad al Contenido en la Web. 9 ¿Es más costoso hacer un sitio accesible? El diseño de un sitio para que sea accesible no supone un incremento significativo del coste de desarrollo. y este beneficio se incrementaría con el tiempo.. la facilidad o dificultad para hacer los sitios accesibles depende de una variedad de factores. como el uso de las hojas de estilo. no contienen información que sí aparece en éstas. que incluyen 16 preguntas frecuentes . Las Pautas de Accesibilidad al Contenido en la Web se refieren a cómo hacer accesibles una gran variedad de características de la Web. 8 ¿Por qué no recomiendan estas pautas la utilización de páginas sólo texto? Excepto en algunos casos particulares. en vez de recomendar que los sitios deben ser sombríos o aburridos.) • Y flexibles para que se transformen de forma agradable en páginas inteligibles y útiles si no se soportan tecnologías específicas o éstas no pueden ser utilizadas por usuarios o navegadores específicos. colocar y mantener un grupo separado de páginas sólo-texto. puesto que las hojas de estilo están cada vez más ampliamente implementadas y disponibles en los navegadores como una estrategia de creación en las herramientas de creación. En los sitios existentes. ratón. La finalidad es asegurar que todo tipo de sitios Web. han utilizado como solución las páginas sólo-texto.. las páginas sólo-texto son contraproducentes para la accesibilidad. En general. Sólo necesitan ser diseñados de forma que sean flexibles: • Flexibles para que los usuarios puedan operar con ellos desde diferentes modos (con teclado. incluyendo los multimedia. De hecho.7 ¿Cómo afectan estas pautas a la manejabilidad y apariencia de los sitios para los usuarios sin discapacidad? Los sitios Web accesibles pueden ser diseñados con tanta creatividad como los sitios inaccesibles. los sitios web accesibles no tienen que diseñarse para que sean muy diferentes. incluso desaconsejable. puesto que se tiende a tenerlas menos actualizadas que las "páginas primarias" y. en algunos casos. funcionen bien para todos los usuarios. no obstante. al asegurar que los sitios son más fácilmente navegables y se puede acceder a ellos a través de una diversidad de dispositivos y no sólo desde el tradicional navegador gráfico de sobremesa.

w3. 10 ¿Hay algunas herramientas de creación mejores que otras para hacer accesibles los sitios? Las características clave a buscar en las herramientas de creación de la Web. contacte con las autoridades correspondientes para obtener más detalles sobre obligaciones y/o imposiciones. Si usted desea saber más sobre leyes específicas o políticas de los diferentes países que tienen relación con los requisitos de accesibilidad para los sitios Web. disponibles (en inglés) en http://www. validación y ayuda. W3C no tiene carácter legislativo y la especificación "Pautas de Accesibilidad al Contenido en la Web" no es una normativa. 11 ¿Se convertirán estas pautas en una exigencia? ¿Hay consecuencias legales por no hacer accesible un sitio? Estas pautas son una especificación desarrollada por W3C. son: • La "Tabla de puntos de verificación". para que sean accesibles.org/WAI). y han sido desarrolladas bajo un procedimiento definido por el W3C. un apéndice de las pautas que agrupa los puntos de verificación por prioridades y los tipifica para una fácil referencia. Las pautas pueden ser adoptadas formal o informalmente por diferentes tipos de organizaciones para aclarar qué nivel de accesibilidad exige la organización para sus propios sitios Web. Busque esta información en la documentación del producto o pregunte al desarrollador de la herramienta de creación. los sitios accesibles pueden ser rentables. 17 preguntas frecuentes . Para más información sobre la accesibilidad de las herramientas de creación. así como la mayor utilidad para otros usuarios.el tamaño del sitio. • Que contengan las características clave de accesibilidad en sus especificaciones. Por favor. Cuando se tiene en cuenta la amplitud de la audiencia para la que un sitio está disponible. vea las Pautas de Accesibilidad para las Herramientas de Creación. • Y que sean configurables por parte del usuario los avisos en pantalla. señales de alerta. incluyen: • La producción de códigos HTML y CSS válidos. su complejidad y las herramientas de creación que se usaron para crearlo. 12 ¿Qué recursos de apoyo están disponibles para usar estas pautas? Los dos documentos más importantes para usar estas pautas.w3. puede consultar algunas de ellas en la sección de "referencias a políticas" (en inglés) del sitio WAI (http://www. • El documento "Técnicas" que explica cómo marcar diferentes características de accesibilidad en diversos lenguajes de marcado.org/TR/WAI-AUTOOLS. un consorcio industrial internacional independiente. Las actualizaciones periódicas y revisiones de los sitios pueden ser una buena oportunidad para revisar la accesibilidad.

CAST). ejecuta un test automático "on-line" de muchos de los puntos de verificación que forman parte de las "Pautas de Accesibilidad al Contenido en la Web 1. Por tanto.0". e independientemente de cómo navegue un sitio. Puesto que ninguna herramienta puede ejecutar una revisión automática completa de la accesibilidad y a causa de que los falsos negativos y falsos positivos son posibles en algunos sitios. en inglés. la WAI añade frecuentemente recursos que pueden ser útiles en la enseñanza. Hay una lista de referencia sobre navegadores que vincula a información sobre características de accesibilidad de diferentes navegadores. 18 preguntas frecuentes . es importante examinar con qué versión del documento está la herramienta o logotipo sincronizada. Existe un breve documento de referencia rápida ("Quick Tips"). referencia o instrucción "on-line". "Bobby". WAI ha desarrollado un currículo "on-line" que acompaña a las Pautas de Accesibilidad al Contenido en la Web. Estos verificadores de la accesibilidad pueden ayudar a menudo con una identificación inicial de las barreras de un sitio. los requerimientos de un determinado nivel de adecuación deben contar también con una revisión manual.org/WAI). un sitio deberá presentar la información de tal manera que la gente pueda acceder a ella independientemente del equipo ("hardware") y los programas ("software") que esté usando.Además. el trabajo de la Oficina del Programa Internacional de la Iniciativa de Accesibilidad a la Web incluye formación y actividades de asistencia al público. Otras herramientas adicionales en proceso de desarrollo incluyen herramientas que ayudan a reajustar los sitios y "plug-ins" para ayudar a las versiones anteriores de los navegadores a ejecutar correctamente marcadores más modernos. incluyendo los logotipos de la WAI (en inglés). Cuando se use cualquier herramienta de evaluación o logotipo. Existen referencias técnicas (en inglés) sobre las características de accesibilidad en HTML y CSS. en las páginas de la WAI (http://www.w3. Los diseñadores de la Web no pueden suponer que todo el mundo utiliza los mismos tipos de dispositivos en la misma forma. Como resultado. Estos y otros recursos están disponibles. 13 ¿Hay herramientas que puedan ayudarme? ¿Puedo comprobar la accesibilidad de mi sitio? Hay un número creciente de herramientas que pueden ayudar a diseñar o evaluar la accesibilidad de los sitios . WAI dirige los grupos de trabajo y de interés (cuyo centro de interés son las herramientas de evaluación y reforma) y ayuda a coordinar los esfuerzos de los desarrolladores implicados en la construcción de diversas herramientas que ayuden a la accesibilidad. y cualquier información adicional sobre cómo se espera que sea utilizada. 14 ¿Qué es lo principal que hay que entender para hacer un sitio accesible? Lo más importante para hacer un sitio accesible es comprender que la gente utiliza la Web de modos muy diferentes. que es un revisor de accesibilidad desarrollado por el Centro de Tecnología Especial Aplicada (Center for Applied Special Technology . disponible en formato de tarjeta de visita. que proporciona recordatorios sobre los conceptos clave de las pautas.

A medida que los sitios implementen las pautas. y algunas organizaciones miembros han participado directamente en el Grupo de Trabajo de Pautas de Contenido de la Web o en el Grupo de Interés WAI. se espera que estas pautas sean relativamente estables a lo largo del tiempo. es específico para una característica concreta de las páginas Web.. 16 ¿Quién se ha implicado en el desarrollo de estas pautas? Como miembros de un consorcio industrial internacional.15 ¿Mantendrán estas pautas su estabilidad a medida que se desarrollen las tecnologías de la Web? Las Pautas de Accesibilidad al Contenido en la Web se han diseñado para que sean compatibles. anterior y posteriormente. es específico para lenguajes de marcado concretos y será actualizado con mayor frecuencia a medida que evolucione la tecnología. frecuentemente. crean barreras en las páginas. WAI ha recibido compromisos de diversas organizaciones que tienen previsto que sus sitios se adecuen a las pautas. visite la página principal de la WAI para más información (http://www. que incluye todos los puntos de verificación de prioridades 1 y 2. Como Recomendación W3C. 17 ¿Qué sitios de la Web están usando ya estas pautas? ¿Puedo ver ejemplos? La publicación de las Pautas de Accesibilidad al Contenido en la Web. la Iniciativa de Accesibilidad en la Red de W3C proporciona a las organizaciones de personas con discapacidad. con la máxima amplitud del contexto de la evolución de las tecnologías Web. El documento separado "Técnicas". Por tanto. las catorce pautas se centran en los principios del diseño accesible y son suficientemente abstractas como para ser estables a lo largo del tiempo. La participación en las Pautas de Accesibilidad al Contenido en la Web ha incluido representantes de todas estas áreas. significó su estabilización.org/WAI). Ciertos puntos de verificación incluyen la frase "hasta que las aplicaciones de usuario. los centros de investigación de la accesibilidad y a los gobiernos un foro para participar con los representantes de la industria en el proceso W3C.w3. que no forma parte del documento básico de las pautas. En el documento. las más de 300 organizaciones miembros de W3C han tenido frecuentes oportunidades de revisar y comentar las pautas a medida que éstas han evolucionado. puesto que los navegadores y ayudas técnicas tales como lectores de pantalla evolucionan rápidamente. WAI proporcionará vínculos a un muestreo de sitios en los que hay un compromiso de adecuación al "Doble A". Por favor. Muchos sitios están manifestando su interés en adecuarse al nivel "Doble A". con una amplia participación internacional. 19 preguntas frecuentes . serán capaces de manejar automáticamente ciertos aspectos que. que propicia un debate permanente e información a los grupos de trabajo WAI sobre las necesidades y soluciones de accesibilidad a la Web. Cada grupo de puntos de verificación asociado con una pauta determinada. pero general para una variedad de marcadores y lenguajes de presentación.." porque. como Recomendación (en inglés). esta especificación ha sido formalmente revisada por las organizaciones miembros de W3C y todos los comentarios remitidos han sido tenidos en cuenta. Además.

vínculos a muchos grupos de trabajo y grupos de interés WAI. CSS.org/WAI. Hay un gran número de organizaciones haciendo un excelente trabajo en el área de accesibilidad en la Web. es un aspecto esencial del trabajo necesario para promover la universalidad de la Web.w3.18 ¿Cómo se relacionan estas pautas con otras pautas y otros trabajos de W3C/WAI? Las Pautas de Accesibilidad al Contenido en la Web estudian un aspecto de la ecuación accesibilidad: ¿Cuán accesible es el contenido en un sitio? Una segunda parte de la ecuación es la accesibilidad de los navegadores. la cual WAI está estudiando a través de un grupo de "Pautas de Accesibilidad para las Aplicaciones de Usuario" (en inglés). etc. SMIL. 19 ¿Cómo aprender más sobre la accesibilidad a la Web y sobre la WAI? La página principal de WAI. soporten la accesibilidad. y muchas de ellas participan en la WAI. a reajustar páginas y proporcionar soluciones alternativas para soportar la accesibilidad. Una tercera parte de la ecuación es la accesibilidad de las herramientas de creación empleadas para desarrollar sitios. DOM. listados de eventos próximos. y coordina alguna actividad de investigación y desarrollo que pueda afectar al futuro del acceso a la Web. tales como HTML. que ha sido estudiada en las "Pautas de Accesibilidad para las Herramientas de Creación" (en inglés). patrocinada por W3C. Si las herramientas de creación llegan a soportar mejor una autoría accesible. Hay recursos y áreas de referencia que son actualizados con frecuencia. y un grupo de interés global para la discusión general de los temas de accesibilidad en la Web. Los vínculos referenciados por la WAI proporcionan un punto de partida para encontrar muchas de estas organizaciones. en http://www.. WAI realiza un esfuerzo activo educativo y de asistencia técnica. 20 ¿Cuál es la función del W3C en la accesibilidad a la Web? La misión de W3C es promover la evolución e interoperatividad de la Web. WAI también trabaja internamente con W3C para asegurar que las tecnologías de la Web. WAI se coordina con otras organizaciones para desarrollar herramientas que puedan ayudar a la evaluación. tiene información actualizada sobre todos los recursos de la Iniciativa de Accesibilidad en la Web. XML. 20 preguntas frecuentes . Además del desarrollo de las pautas. ello facilitará grandemente la creación de contenidos accesibles. La Iniciativa de Accesibilidad en la Web.

está promoviendo la accesibilidad de la Web a través de cinco actividades complementarias: • Asegurar que las tecnologías fundamentales de la Web soporten la accesibilidad. el Programa de Aplicaciones Telemáticas para las Personas con Discapacidad y Personas Mayores de la Dirección General XIII de la Unión Europea. IBM. en asociación con organizaciones de todo el mundo. el Departamento de Educación del Instituto Nacional de Investigación sobre la Discapacidad y la Rehabilitación de USA. • Dirigir la formación y asistencia técnica. • Desarrollar herramientas de evaluación y reforma para la accesibilidad.Sobre la Iniciativa de Accesibilidad en la Web. 21 preguntas frecuentes . La Oficina del Programa Internacional de la WAI está sostenida. Microsoft Corporation y NCR. La Iniciativa de Accesibilidad en la Web (WAI) de W3C. • Desarrollar pautas para la autoría de páginas. aplicaciones de usuario y herramientas de autor. el Gobierno de Canadá. en parte. • Seguir la pista a la investigación y desarrollo que pueda afectar a la accesibilidad futura de la Web. Para más información sobre la Iniciativa de Accesibilidad en la Web. consulte http://www. Lotus Development Corporation. con fondos de la Fundación Nacional de la Ciencia de USA.org/WAI.w3.

y descripción del vídeo. Use las herramientas.org/TR/WCAG. 22 guía breve . Use CSS para la maquetación donde sea posible. • Vínculos de hipertexto: Use texto que tenga sentido leído fuera de contexto. Por ejemplo. listas y estructura consistente. • Mapas de imagen: Use el elemento map y texto para las zonas activas. • Marcos: Use el elemento noframes y títulos con sentido.guía breve para crear sitios web accesibles • Imágenes y animaciones: Use el atributo alt para describir la función de cada elemento visual.w3. • Revise su trabajo: Verifique. evite "pincha aquí". • Scripts. • Tablas: Facilite la lectura línea a línea. • Multimedia: Proporcione subtítulos y transcripción del sonido. applets y plug-ins: Ofrezca contenido alternativo si las funciones nuevas no son accesibles. • Figuras y diagramas: Describalos brevemente en la pagina o use el atributo longdesc. • Organización de las páginas: Use encabezados. Resuma. puntos de comprobación y pautas de http://www.

pautas de accesibilidad al contenido en la web 1.0 .

etc. cualquiera que sea la aplicación de usuario que esté utilizando (Por ejemplo. habitaciones infra o supra iluminadas. Trace R & D Center. Algunas de las estrategias planteadas en este documento tratan ciertos temas concernientes a la Internacionalización de la Web y al acceso desde dispositivos móviles. o las limitaciones bajo las que opere (Por ejemplo. y por tanto no proporciona información específica sobre soportes de navegador para las diferentes tecnologías. El apéndice esta disponible tanto en forma de tabla resumen de puntos de verificación. Trace R & D Center. De cualquier modo. titulado “Técnicas para las Pautas de Accesibilidad al Contenido en la Web 1. W3C. tablas. navegador de voz.0” ([TECHNIQUES]). entorno de manos libres. Ian Jacobs.Recomendación W3C de 5 de mayo de 1999 Editores: Wendy Chisholm. se hará la Web más asequible también para todos los usuarios. siguiéndolas. Gregg Vanderheiden. CSS 1 y CSS 2 pueden no ser soportadas. En su lugar. entornos ruidosos. Este es un documento de referencia en cuanto a principios de accesibilidad e ideas de diseño. Este documento está concebido para ser definitivo. Este documento es parte de una serie de pautas de accesibilidad publicadas por la Iniciativa de Accesibilidad en la Web. El documento de Técnicas también incluye técnicas para la validación y análisis de documentos y un índice de elementos y atributos de HTML (y qué técnicas los usan). Estas pautas no desalientan a los diseñadores en la utilización de imágenes. vídeo. multimedia. Seguir estas pautas ayudará también a que cualquier persona encuentre información en la Web más rápidamente.). PC de automóvil. Nota: No todos los navegadores y herramientas multimedia pueden soportar las características descritas en estas pautas. El fin principal de estas pautas es promover la accesibilidad. etc. Esta serie incluye también las Pautas de Accesibilidad de las Aplicaciones de Usuario [WAI-USERAGENT] y las Pautas de Accesibilidad para Herramientas de Creación [WAI-AUTOOLS]. puesto que esta información cambia rápidamente. por el contrario explican cómo hacer los contenidos multimedia más accesibles a una amplia audiencia. Por favor consulte la página principal de las Actividades de Acceso de Dispositivos Móviles de W3C y la página principal de Actividades de Internacionalización de la W3C para mayor información. Los temas identificados en el apéndice incluyen imágenes. como en forma de una lista simple de puntos de verificación. el Lenguaje de Integración Multimedia Sincronizada (SMIL) y el Lenguaje de Marcado Matemático (MathML). University of Wisconsin – Madison. formularios y scripts. En particular. marcos. Las pautas están pensadas para todos los diseñadores de contenidos de la Web (creadores de páginas y diseñadores de sitios) y para los diseñadores de herramientas de creación. Este documento incluye un apéndice que organiza todos los puntos de verificación por temas y prioridad. las nuevas características de HTML 4. explica cómo aplicar los puntos de verificación definidos en este documento. este documento se centra en la accesibilidad y no trata totalmente lo relacionado con otras Actividades del W3C. El documento de Técnicas trata cada punto de verificación con más detalle y proporciona ejemplos usando el Lenguaje de Marcado de Hipertexto (HTML). Un documento aparte. pautas de accesibilidad al contenido en la web 1.0 Resumen Estas pautas explican cómo hacer accesibles los contenidos de la Web a personas con discapacidad. navegador de sobremesa. University of Wisconsin – Madison. Sin embargo. etc.0. el sitio de la Iniciativa de Accesibilidad a la Web (WAI) proporciona esa información (consulte [WAI-UA-SUPPORT]). Los puntos de verificación en el apéndice enlazan con sus definiciones en el presente documento. teléfono móvil. las Hojas de Estilo en Cascada (CSS).. El documento de Técnicas ha sido diseñado para seguir los cambios en la tecnología y es de esperar que sea renovado con más frecuencia que el presente documento. 24 pautas .).

Por ejemplo..w3. Es un documento estable y puede ser usado como material de referencia o citado como normativa de referencia desde otros documentos.w3. 25 pautas . moverse o pueden no ser capaces de procesar algunos tipos de información fácilmente o en absoluto. conduciendo un automóvil. La versión inglesa de esta especificación es la única versión normativa. cada diseño accesible elegido beneficia generalmente a muchos grupos de personas con discapacidad . harán éstas más accesibles a personas de escasa visión y. así como a la comunidad Web al completo. y eliminando el elemento "FONT". deben tener en cuenta que muchos usuarios pueden estar operando en contextos muy diferentes al suyo propio: • Pueden no ser capaces de ver. El objetivo de W3C con la elaboración de la Recomendación es atraer la atención hacia esta especificación y promover su utilización generalizada.puede encontrar traducciones en otros idiomas en: http://www. Este documento ha sido producido como parte de la Iniciativa para la Accesibilidad de la Web del W3C. • Pueden tener una pantalla que sólo presenta texto. 1 Introducción Aquellos que no estén familiarizados con los problemas de accesibilidad relacionados con el diseño de páginas Web. a menudo acortarán los tiempos de carga de las páginas. un navegador de voz o un sistema operativo distinto.org/WAI/GL/WAI-WEBCONTENT-ERRATA . La lista de las actuales Recomendaciones del W3C y otros documentos técnicos pueden encontrarse en: http://www.Estatus de este documento Este documento ha sido revisado por los miembros del W3C y otras partes interesadas y ha sido refrendado por el Director como una de las Recomendaciones del W3C. los autores HTML tendrán mayor control sobre sus páginas. trabajando en un entorno ruidoso. oídos o manos estén ocupados u obstaculizados (Por ejemplo. El objetivo del Grupo de Trabajo de las Pautas de Contenido en la Web se explica en los estatutos de constitución del Grupo de Trabajo. usando hojas de estilo para controlar los estilos de fuente. una pantalla pequeña o una conexión lenta a Internet. Puesto que hay muy diversas situaciones a tener en cuenta. • Pueden no hablar o comprender con fluidez el idioma en el que esté redactado el documento. • Pueden tener dificultad en la lectura o comprensión de un texto. Los desarrolladores de contenidos deben tener en cuenta estas diferentes situaciones cuando diseñan las páginas.) • Pueden tener una versión anterior del navegador. • Pueden encontrarse en una situación en la que sus ojos. La lista de errores conocidos de este documento (en inglés) está disponible en: http://www. Esto amplía la funcionalidad y universalidad de la Web. un navegador completamente diferente.. escuchar.org/TR.org/WAI/GL/WAI-WEBCONTENT-TRANSLATIONS. Sin embargo. • No tienen por qué tener o ser capaces de usar un teclado o un ratón.w3. compartiendo las páginas de estilo.. para todos los usuarios.

tacto para el braille o vista para el texto visible) haciendo la información accesible a grupos representativos de una variedad de discapacidades sensoriales y de otro tipo. como complemento a los beneficios que implica para los usuarios con discapacidad. Si la fotografía ha sido diseñada para hacer que el usuario seleccione la imagen (Por ejemplo. consideremos el texto equivalente para una imagen fotográfica de la Tierra vista desde el espacio. dispositivos braille. Tenga en cuenta que. el texto debe transmitir la misma función o propósito que la imagen. el texto equivalente "Fotografía de la Tierra vista desde el espacio" podría cumplir con la función requerida. en braille y en texto visible. el texto equivalente debería ser "Información sobre la Tierra". De ese modo. Una descripción auditiva es un ejemplo de equivalente no textual de la información visual. locuciones pregrabadas o un vídeo de una persona traduciendo el texto a lenguaje de señas) pueden hacer un documento accesible a personas que pueden tener dificultades para acceder al lenguaje escrito. Los equivalentes no textuales del texto pueden ayudar también a los analfabetos. incluyendo muchos individuos con discapacidades cognitivas. puede ser considerado un texto equivalente. • A fin de ser útil. Por ejemplo. Una descripción auditiva de la banda visual de una presentación multimedia beneficia a las personas que no pueden ver la información visual. • El contenido del texto puede ser presentado al usuario como una voz sintetizada. otros utilizar navegadores basados en formato texto que no soportan imágenes. ¿Cómo hace accesible a la imagen un texto equivalente? Ambas palabras “texto” y “equivalente” son importantes. Los equivalentes no textuales al texto (Por ejemplo. el texto equivalente puede ayudar a todos los usuarios a encontrar páginas con mayor rapidez. Las pautas no sugieren que se eviten las imágenes como medio para mejorar la accesibilidad. pulsando sobre ella) para acceder a la información sobre la Tierra. explican como proporcionando un texto equivalente de la imagen ésta se hará accesible. de aprendizaje o sordera.) presentar la información al usuario. Cada uno de estos tres mecanismos utiliza un sentido diferente (oído para la síntesis de voz. es responsabilidad de las Aplicaciones de Usuario (Por ejemplo. etc. si el texto transmite la misma función o propósito para el usuario con discapacidad como la imagen lo hace con el resto de usuarios. la primera pauta explica como los desarrolladores pueden hacer accesibles las imágenes. Mientras que los desarrolladores de contenidos en la Web deben proporcionar texto equivalente para las imágenes y para otros contenidos multimedia. Algunos usuarios pueden no ser capaces de ver imágenes. Por ejemplo.Las pautas tratan los aspectos de accesibilidad y proporcionan soluciones de diseño accesibles. Si el propósito de la fotografía es ilustrar una información específica sobre geografía mundial. 26 pautas . el texto equivalente debería transmitir esa información. Indican situaciones habituales (similares al ejemplo de estilo de fuentes) que puedan suponer problemas a los usuarios con ciertas discapacidades. iconos. Si el propósito de la imagen es simplemente decorativo. sin embargo. en tanto que otros pueden haber desconectado el soporte para imágenes (por ejemplo. navegadores y ayudas técnicas tales como lectores de pantalla. ya que los robots de búsqueda pueden usar el texto cuando indexen las páginas. debido a una conexión lenta con Internet).

2. 2. El motivo para hacer el contenido comprensible y navegable se recoge en las pautas 12 a 14. Los textos pueden ser interpretados por la inmensa mayoría de los mecanismos de navegación y accesibles a la inmensa mayoría de usuarios. Los usuarios pierden también información del contexto cuando sólo pueden visualizar una parte de la página. o de sección en sección (pantallas pequeñas o magnificadores de pantalla). Los usuarios ciegos pueden usar lectores de pantalla para interpretar toda la información textual de una página. marcos contiguos o gráficas que guían a los usuarios videntes de navegadores de sobremesa. 2. o sólo con salida de voz o texto. Esto no significa crear una versión pregrabada de audio de todo el sitio para hacerlo accesible a los usuarios ciegos. estructura y presentación). 27 pautas . los desarrolladores de contenidos pueden crear páginas que se transformen de manera correcta. incluyendo las discapacidades físicas. Proporcione información que sirva al mismo propósito y función tanto en audio como en vídeo para que se disponga de un canal sensorial alternativo. de baja resolución. • Cree documentos que no sólo funcionen con un tipo determinado de hardware.2 Motivos del diseño accesible Las pautas se enmarcan en dos motivos generales: asegurar una transformación correcta y hacer el contenido comprensible y navegable. etc. El proporcionar herramientas de navegación e información orientativa en las páginas maximizará la accesibilidad y la utilidad. listas o menús muy largos. es posible que los usuarios no comprendan tablas. sensoriales y cognitivas. • Proporcione textos (incluidos equivalentes textuales). Las páginas deben poder ser usadas por personas que no dispongan de ratón. • Cree documentos que funcionen incluso si el usuario no puede verlos y/u oírlos. sin pantallas. He aquí algunas claves para el diseño de páginas que se transforman correctamente: • Separe el contenido de la estructura y de la presentación (consultar la diferencia entre contenido. El tema de la transformación correcta está recogido principalmente por las pautas 1 a 11. Esto incluye no sólo la utilización de un lenguaje claro y simple. las restricciones debidas al trabajo y las barreras tecnológicas. Hacer comprensible y navegable el contenido Los desarrolladores de contenidos deben hacer que el contenido sea comprensible y navegable. Asegurar una transformación correcta Siguiendo estas pautas. Este tipo de páginas siguen siendo accesibles a pesar de cualquiera de las limitaciones descritas en la introducción. barras de desplazamiento. tanto porque acceden a la página palabra por palabra (con sintetizadores de voz o dispositivos braille). sino también proporcionar mecanismos comprensibles para navegar por y entre páginas. etc. con pantallas pequeñas. No todos los usuarios pueden utilizar las pistas visuales tales como mapas. en blanco y negro.1. Sin una información orientativa.

uno o más grupos de usuarios encontrarán imposible acceder a la información del documento. significa que está incluido en el apartado Referencias (página 53). 4 Prioridades Cada punto de verificación tiene un nivel de prioridad asignado por el Grupo de Trabajo y fundamentado en su impacto en la accesibilidad. página 46). De otra forma. • Cuando un texto aparece subrayado y en letra cursiva hace referencia a una definición recogida en el Glosario (Apéndice B. • Cuando un texto aparece en mayúsculas y entre corchetes. Los puntos de verificación de Prioridad 1 están resaltados a través del uso de hojas de estilo. • Los vínculos a las definiciones están resaltados a través del uso de hojas de estilo. • La prioridad del punto de verificación.1. • Notas informativas opcionales.3 Cómo se organizan las pautas Este documento incluye catorce pautas o principios generales de diseño accesible. ejemplos aclaratorios y referencias cruzadas a pautas o puntos de verificación relacionados. Convenciones del documento En el documento se utilizan las siguientes convenciones editoriales: • Los nombres de los elementos están en mayúsculas. Cada punto de verificación pretende ser lo suficientemente específico. • Explicación del punto de verificación. Satisfacer este punto de verificación es un requerimiento básico para que algunos grupos puedan usar los documentos Web. 3. [Prioridad 1] Un desarrollador de contenidos de páginas Web tiene que satisfacer este punto de verificación. • Una lista de definiciones de los puntos de verificación. Cada pauta incluye: • Número de la pauta. • El fundamento que sustenta la pauta y algunos grupos de usuarios que se benefician de ella. • Sus atributos están en minúsculas. Las definiciones de los puntos de verificación explican cómo se aplica la pauta en situaciones típicas de desarrollo de contenidos. 28 pautas . Cada definición de punto de verificación incluye: • Número del punto de verificación. como para que cualquiera que revise una página o sitio pueda comprobar que dicho punto ha sido satisfecho. • Exposición de la pauta.

Algunos puntos de verificación tienen especificado un nivel de prioridad que puede variar bajo ciertas condiciones (que se indicadan).0" del W3C. La afirmación de adecuación a este documento debe usarse de una de las dos formas siguientes: Forma 1: Especifique: • Título de las pautas: "Pautas de Accesibilidad al Contenido en la Web 1. nivel Doble A". "doble A" o "triple A". en cada página que afirme su conformidad. De otra forma. 29 pautas . 2 y 3. Satisfaciendo este punto de verificación mejorará la accesibilidad de los documentos Web. La información sobre los iconos y cómo insertarlos en las páginas está disponible en [WCAG-ICONS].w3. [Prioridad 3] Un desarrollador de contenidos de páginas Web puede satisfacer este punto de verificación. sitio o parte definida de un sitio). Forma 2: Incluir.W3. • El nivel de adecuación satisfecho: "A". 5 Adecuación Esta sección define tres niveles de adecuación a este documento: • Adecuación de nivel A (A): se satisfacen todos los puntos de verificación de prioridad 1.0".org/TR/1999/WAIWEBCONTENT-19990505. Satisfacer este punto de verificación eliminará importantes barreras de acceso a los documentos Web. • El alcance cubierto por la afirmación (Por ejemplo. uno o más grupos de usuarios encontrarán alguna dificultad para acceder a la información del documento. uno o más grupos encontrarán dificultades en el acceso a la información del documento. y enlazarlo con la explicación sobre la adecuación proporcionada por W3C.[Prioridad 2] Un desarrollador de contenidos de páginas Web debe satisfacer este punto de verificación. • Adecuación de nivel Triple A (AAA): se satisfacen todos los puntos de verificación de prioridad 1. Ejemplo para la forma 1: "Esta página se adapta a las "Pautas de Contenido Accesible en Web 1. • La URL: http://www. disponible en http://www.org/TR/1999/WAI-WEBCONTENT-19990505. uno de los tres iconos proporcionados por W3C. página. De otra forma. • Adecuación de nivel Doble A (AA): se satisfacen todos los puntos de verificación de prioridad 1 y 2.

podría ser "Ir a tabla de contenidos". El braille es esencial para personas sordo-ciegas. un equivalente debería describir la apariencia del contenido visual (Por ejemplo. A menos que se proporcionen descripciones verbales de las acciones representadas. la acción representada.Proporcione alternativas equivalentes para el contenido visual y auditivo Proporcione un contenido que. animaciones (por ejemplo.). mapas de imagen. applets. El texto puede ser interpretado por sintetizadores de voz o dispositivos braille y puede ser presentado visualmente (en varios tamaños) en visualizadores de ordenador y papel. En algunos casos. El sintetizador de voz es esencial para personas ciegas y para las que tienen dificultades de lectura que a menudo acompañan a discapacidades cognitivas. "longdesc" o en el contenido del elemento). cumpla esencialmente la misma función o propósito que el contenido visual o auditivo. sonido) del texto es también beneficioso para algunos usuarios.1 Proporcione un texto equivalente para todo elemento no textual (por ejemplo. no podrán percibirlo. tal como el lenguaje corporal u otras pistas visuales. botones gráficos. sonidos. Esto incluye: imágenes. para los ejemplos sonoros usados en educación). a través de "alt". banda sonora del vídeo y vídeos.. marcos. archivos exclusivamente auditivos. representaciones gráficas del texto. especialmente los analfabetos o personas con dificultad para la lectura. La importancia del texto equivalente radica en su capacidad para ser interpretado por vías que son accesibles para personas pertenecientes a diversos grupos de discapacidad usando diversa tecnología. presentado al usuario. sonido pregrabado. imágenes usadas como viñetas en las listas. "applets" y objetos programados. películas. vídeo. La información equivalente debe cumplir la misma finalidad que los contenidos visuales o auditivos. Pauta 1 . carteles o diagramas) o el sonido del contenido auditivo (Por ejemplo. Esta pauta enfatiza la importancia de aportar equivalentes textuales para los contenidos no textuales (Por ejemplo. etc directamente. Así un texto equivalente para la imagen de una flecha ascendente que vincule con una tabla de contenidos. scripts. En las películas o presentaciones visuales.. GIFs animados).Pautas de Accesibilidad al Contenido de la Web. tanto como para muchos individuos que solamente son ciegos. Puntos de verificación: 1. [Prioridad 1] Por ejemplo. imágenes. podrían no estar acompañadas de suficiente información auditiva como para transmitir la misma información. Si bien algunas personas no pueden utilizar imágenes. espaciadores. "ascii art". para tablas complejas. en HTML: • Utilice "alt" para los elementos IMG. INPUT y APPLET o proporcione texto equivalente en el contenido de los elementos OBJECT Y APPLET. La salida visual de texto beneficia tanto a los usuarios sordos como a la mayoría de usuarios de la Web. de aprendizaje o sordera. sí pueden utilizar páginas que incluyen información equivalente a los contenidos visuales o auditivos. videos. Proporcionar equivalentes no textuales (dibujos. sonidos (ejecutados con o sin interacción del usuario). 30 pautas . las personas que no puedan ver (o visualizar) el contenido visual.

página 58.2 Proporcione vínculos redundantes en formato texto para cada zona activa de un mapa de imagen del servidor. página 58. 1.5. • Para mapas de imagen.1. así como a las personas con diferentes tipos de deficiencias de percepción de los colores. un vínculo dentro de un elemento OBJECT o un vínculo descriptivo en el documento.2. Puntos de verificación: 2. use el atributo "alt" con AREA o el elemento MAP con elementos A (y otro texto) como contenido. pueden no proporcionar suficiente contraste en las pantallas monocromáticas. [Prioridad 1] Sincronice la descripción auditiva con la banda sonora como en el punto de verificación 1.1 Asegúrese que toda la información transmitida a través de los colores también esté disponible sin color.4. Pauta 2: No se base sólo en el color Asegúrese de que los textos y gráficos son comprensibles cuando se vean sin color. Consultar también punto de verificación 9. proporcione vínculos en formato texto redundantes para cada zona activa del mapa de imagen de cliente. [Prioridad 1] Consultar también punto de verificación 1. [Prioridad 3] Consultar también punto de verificación 1.5 Hasta que las aplicaciones de usuario interpreten el texto equivalente para los vínculos de los mapas de imagen de cliente.1 para información sobre textos equivalentes del contenido visual.1. las personas que no puedan diferenciar ciertos colores. 1. proporcione una descripción auditiva de la información importante de la banda visual de una presentación multimedia. Si el color por sí mismo se usa para transmitir información. Técnicas para el punto de verificación 1. proporcione una descripción adicional usando. Técnicas para el punto de verificación 1. Técnicas para el punto de verificación 1.4 Para toda presentación multimedia tempodependiente (por ejemplo. Consultar también punto de verificación 1.2 y punto de verificación 9. por ejemplo mediante el contexto o por marcadores. por ejemplo "longdesc" con IMG o FRAME. página 58. [Prioridad 1] Técnicas para el punto de verificación 1. página 58.3 Hasta que las aplicaciones de usuario puedan leer automáticamente el texto equivalente de la banda visual.1 y punto de verificación 13. subtítulos o descripciones de la banda de visual) con la presentación. 31 pautas .5 y punto de verificiación 9.3.4.• Para contenidos complejos (Por ejemplo. 1. Cuando los colores de primer plano y de fondo tienen un tono similar. Técnicas para el punto de verificación 1.1. no recibirán la información. una película o animación) sincronice alternativas equivalentes (por ejemplo. página 58. página 57. 1. las gráficas) en los que el texto del atributo "alt" no es suficiente. [Prioridad 1] Técnicas para el punto de verificación 2.10. y los usuarios que no tengan pantallas en color o utilicen dispositivos de salida no visuales.1.

los desarrolladores de contenidos no deben sacrificar el marcador apropiado porque un determinado navegador o ayuda técnica no pueda procesarlo correctamente.2. Utilice marcadores y hojas de estilo y hágalo apropiadamente Marque los documentos con los elementos estructurales apropiados.2. Cuando exista un marcador apropiado.1. Los desarrolladores de contenidos pueden sentir la tentación de usar (o usar mal) construcciones que aseguren el formato deseado en los navegadores antiguos. la DTD HTML 4.1. 3. Deben darse cuenta de que estas prácticas causan problemas de accesibilidad y deben considerar si el formato es tan importante como para hacer el documento inaccesible a algunos usuarios. Técnicas para el punto de verificación 3. Por ejemplo.0 estricto). Más aún. Utilice en su lugar texto y hojas de estilo. es apropiado usar el elemento TABLE en HTML para marcar información tabular aunque algunos lectores de pantalla antiguos no manejen correctamente el texto contiguo (consultar el punto de verificación 10.2 Cree documentos que estén validados por las gramáticas formales publicadas. página 59. Prioridad 3 para texto]. evite la utilización de imágenes para representar textos. que haga referencia a una DTD publicada (Por ejemplo.para cambiar el tamaño de la fuente) dificulta que los usuarios con software especializado entiendan la organización de la página o cómo navegar por ella.(*)[Prioridad 2] Por ejemplo. no de acuerdo con las especificaciones) se dificulta la accesibilidad. estructura y presentación).2 Asegúrese de que las combinaciones de los colores de fondo y primer plano tengan suficiente contraste para que sean percibidas por personas con deficiencias de percepción de color o en pantallas en blanco y negro. incluya una declaración del tipo de documento. Utilizando una tabla para maquetar o un encabezado . Puntos de verificación: 3.etiqueta H . 32 pautas . al comienzo del mismo. Técnicas para el punto de verificación 2.2. [Prioridad 2 para las imágenes. El mal uso de marcadores para una presentación (Por ejemplo. Consultar también pauta 6 y pauta 11. Usando el elemento TABLE correctamente y creando tablas que se transformen adecuadamente (consultar la pauta 5 ) hace posible al software interpretar tablas de otra forma que como rejilla en dos dimensiones. página 59. Pauta 3. Controle la presentación con hojas de estilo en vez de con elementos y atributos de presentación. Igualmente. construir lo que parece una tabla de datos con un elemento HTML PRE) se hace difícil interpretar una página de forma inteligible a otros dispositivos (Consultar la descripción de diferencia entre contenido. utilice MathML para marcar ecuaciones matemáticas y hojas de estilo para el formato de texto y el control de la maquetación. Usando marcadores de forma inapropiada (es decir. Técnicas para el punto de verificación 3. página 59.3). En el otro extremo. utilizando los marcadores de presentación en lugar de marcadores estructurales para transmitir estructura (por ejemplo. [Prioridad 2] Por ejemplo. use marcadores en vez de imágenes para transmitir la información.

3.3 Utilice hojas de estilo para controlar la maquetación y la presentación. [Prioridad 2] Por ejemplo, utilice la propiedad 'font' de CSS en lugar del elemento HTML FONT para controlar el estilo de las fuentes. Técnicas para el punto de verificación 3.3, página 59. 3.4 Utilice unidades relativas en lugar de absolutas al especificar los valores en los atributos de los marcadores de lenguaje y en los valores de las propiedades de las hojas de estilo. [Prioridad 2] Por ejemplo, en CSS, utilice 'em' o medidas porcentuales, en vez de 'pt' (puntos) o 'cm' (centímetros), que son unidades absolutas. Si se usan unidades absolutas, valide que el contenido presentado es utilizable. (Consultar la sección de validación). Técnicas para el punto de verificación 3.4, página 59. 3.5 Utilice elementos de encabezado para transmitir la estructura lógica y utilícelos de acuerdo con la especificación. [Prioridad 2] Por ejemplo, en HTML, utilice H2 para indicar una subsección de H1. No utilice encabezados para hacer efectos de fuente. Técnicas para el punto de verificación 3.5, página 59. 3.6 Marque correctamente las listas y los ítems de las listas. [Prioridad 2] Por ejemplo, en HTML, anide los elementos de listas OL, UL y DL adecuadamente. Técnicas para el punto de verificación 3.6, página 60. 3.7 Marque las citas. No utilice el marcador de citas para efectos de formato tales como sangrías. [Prioridad 2] Por ejemplo en HTML, utilice los elementos Q y BLOCKQUOTE para marcar citas cortas y largas, respectivamente. Técnicas para el punto de verificación 3.7, página 60. Pauta 4. Identifique el idioma usado Use marcadores que faciliten la pronunciación o interpretación de texto abreviado o extranjero. Cuando los desarrolladores de contenido especifican los cambios en el idioma de un documento, los sintetizadores de voz y los dispositivos braille pueden cambiar automáticamente al nuevo lenguaje, haciendo el documento más accesible a usuarios multilingües. Los desarrolladores de contenido deberían identificar el idioma predominante del contenido de un documento (a través de un marcador o en el encabezado HTTP). Deberían también proporcionar la expansión de las abreviaturas y los acrónimos. Además de apoyar a las ayudas técnicas, la identificación del idioma usado permite a los motores de búsqueda localizar las palabras claves e identificar los documentos en el idioma deseado. Los marcadores de idioma mejoran también la legibilidad de la Web para todo el mundo, incluso para aquellos con discapacidades de aprendizaje, cognitivas o sordera. Cuando los cambios en las abreviaturas y el idioma no son identificados, pueden ser indescifrables para los lectores de pantalla y los dispositivos braille. Puntos de verificación: 4.1 Identifique claramente los cambios en el idioma del texto del documento y en cualquier texto equivalente (Por ejemplo, leyendas). [Prioridad 1]

33

pautas

Por ejemplo en HTML, utilice el atributo "lang". En XML, utilice "xml:lang". Técnicas para el punto de verificación 4.1, página 60. 4.2 Especifique la expansión de cada abreviatura o acrónimo cuando aparezcan por primera vez en el documento. [Prioridad 3] Por ejemplo, en HTML, use el atributo "title" de los elementos "ABBR" y "ACRONYM". Proporcionar la expansión en el cuerpo principal del documento también ayuda a la usabilidad del documento. Técnicas para el punto de verificación 4.2, página 60. 4.3 Identifique el idioma principal de un documento. [Prioridad 3] Por ejemplo, en HTML, coloque el atributo "lang" en el elemento HTML. En XML, utilice "xml:lang". Los operadores de servidores podrían configurar sus servidores para aprovechar los mecanismos de transferencia del contenido del protocolo HTTP ([RFC2068], sección 14.13), de forma que los clientes puedan recibir automáticamente los documentos en el idioma seleccionado. Técnicas para el punto de verificación 4.3, página 60. Pauta 5. Cree tablas que se transformen correctamente Asegúrese de que las tablas tienen los marcadores necesarios para transformarlas mediante navegadores accesibles y otras aplicaciones de usuario. Las tablas deberían utilizarse solamente para marcar la información tabular (“tablas de datos”). Los desarrolladores de contenidos deberían evitar usarlas para maquetar páginas (“tablas de composición”). Usar tablas para cualquier finalidad crea también especiales dificultades para los usuarios de lectores de pantalla (consultar punto de verificación 10.3). Algunas aplicaciones de usuario permiten a los usuarios navegar entre las celdas de las tablas y acceder a los encabezamientos y otras informaciones de las celdas. A menos que marquemos apropiadamente las tablas, éstas no proporcionaran a la aplicación de usuario la información necesaria para ello (consultar también la pauta 3). Los siguientes puntos de verificación beneficiarán directamente a las personas que accedan a la tabla por medios auditivos (por ejemplo un lector de pantalla o un PC de automóvil), o a aquellos que sólo visualicen una parte de la página cada vez (Por ejemplo, los usuarios ciegos o de escasa visión que utilicen un sistema auditivo o un dispositivo braille u otros usuarios de dispositivos con pantallas pequeñas, etc.). Puntos de verificación: 5.1 En las tablas de datos, identifique los encabezamientos de fila y columna. [Prioridad 1] Por ejemplo, en HTML, use TD para identificar las celdas de datos y TH para los encabezamientos. Técnicas para el punto de verificación 5.1, página 60. 5.2 Para las tablas de datos que tienen dos o más niveles lógicos de encabezamientos de fila o columna, utilice marcadores para asociar las celdas de encabezamiento y las celdas de datos. [Prioridad 1] Por ejemplo, en HTML, utilice THEAD, TFOOT, y TBODY, para agrupar las filas, COL y COLGROUP para agrupar las columnas y los atributos "axis", "scope" y "headers" para describir relaciones más complejas entre los datos.

34

pautas

Técnicas para el punto de verificación 5.2, página 60. 5.3. No utilice tablas para maquetar, a menos que la tabla tenga sentido cuando se transcriba línea a línea. Por otro lado, si la tabla no tiene sentido, proporcione una alternativa equivalente (la cual debe ser una versión linearizada). [Prioridad 2] Nota. Una vez que las aplicaciones de usuario soporten la colocación mediante hojas de estilo, las tablas no se deben utilizar para maquetar. Consultar también punto de verificación 3.3. Técnicas para el punto de verificación 5.3, página 61. 5.4.Si se utiliza una tabla para maquetar, no utilice marcadores estructurales para realizar un efecto visual. [Prioridad 2] Por ejemplo, en HTML no utilice elemento TH para hacer que el contenido de una celda (que no sea de encabezamiento de tabla) se visualice centrado y en negrita. Técnicas para el punto de verificación 5.4, página 60. 5.5. Proporcione resúmenes de las tablas. [Prioridad 3] Por ejemplo, en HTML, use el atributo "summary" en el elemento TABLE. Técnicas para el punto de verificación 5.5, página 60. 5.6. Proporcione abreviaturas para las etiquetas de encabezamiento. [Prioridad 3] Por ejemplo, en HTML, use el atributo "abbr" en el elemento TH. Técnicas para el punto de verificación 5.6, página 61. Consultar también punto de verificación 10.3. Pauta 6. Asegúrese de que las páginas que incorporan nuevas tecnologías se transformen correctamente Asegúrese de que las páginas son accesibles incluso cuando no se soportan las tecnologías más modernas o éstas estén desconectadas. Si bien se alienta a los desarrolladores de contenidos a usar nuevas tecnologías que superen los problemas que proporcionan las tecnologías existentes, deberán saber cómo hacer para que sus páginas funcionen con navegadores más antiguos, y para quienes decidan desconectar esta característica. Puntos de verificación: 6.1 Organice el documento de forma que pueda ser leído sin hoja de estilo. Por ejemplo, cuando un documento HTML es interpretado sin asociarlo a una hoja de estilo, tiene que ser posible leerlo. [Prioridad 1] Cuando el contenido está organizado lógicamente, es interpretado de forma que la organización continúa siendo clara incluso cuando se desconecten o no se soporten las hojas de estilo. Técnicas para el punto de verificación 6.1, página 61. 6.2 Asegúrese de que los equivalentes de un contenido dinámico son actualizados cuando cambia el contenido dinámico. [Prioridad 1] Técnicas para el punto de verificación 6.2, página 61.

35

pautas

5 Asegúrese de que los contenidos dinámicos son accesibles o proporcione una página o presentación alternativa. 6. Para algunas aplicaciones. asegúrese de que los manejadores de evento sean independientes del dispositivo de entrada.5. se desplazan o se actualizan automáticamente.4. applets u otros objetos programados. Consultar también punto de verificación 11.1. Pauta 7.3. proporcione información equivalente en una página alternativa accesible. Si no es posible hacer la página utilizable sin scripts. Consultar también la pauta 1. puedan ser detenidos o parados. Nota: Todos los puntos de verificación que siguen. página 61. asegúrese de los vínculos que lanzan scripts funcionan cuando estos se desconecten o no se soporten (por ejemplo.4 Para los scripts y applets. 36 pautas . [Prioridad 1] Por ejemplo. [Prioridad 1] Nota: Los usuarios con epilepsia fotosensitiva pueden tener ataques desencadenados por parpadeos o destellos que oscilen entre los 4 y los 59 destellos por segundo (hertzios). implican alguna responsabilidad por parte del desarrollador del contenido hasta que las aplicaciones de usuario proporcionen adecuados mecanismos de control de la característica.1 Hasta que las aplicaciones de usuario permitan controlarlo. Los lectores de pantalla son incapaces de leer textos móviles. parpadean. así como con los cambios rápidos de oscuridad a iluminación (como las luces estroboscópicas). Algunas personas con discapacidades cognitivas o visuales son incapaces de leer textos que se mueven con la suficiente rapidez o en absoluto. El movimiento puede también distraer de tal manera que el resto de la página se vuelve ilegible para las personas con discapacidades cognitivas. página 62. [Prioridad 2] Por ejemplo en HTML. los scripts del servidor pueden ser más accesibles que los del cliente. 6.4. Técnicas para el punto de verificación 6. utilice NOFRAMES al final de cada 'frameset'. proporcione un texto equivalente con el elemento NOSCRIPT o utilice un script del servidor en lugar de un script de cliente o proporcione una página alternativa accesible como para el punto de verificación 11.6. no utilizar un "JavaScript" como objetivo de un vínculo). Si esto no es posible. evite provocar destellos en la pantalla.4. Puntos de verificación: 7.3 Asegúrese de que las páginas sigan siendo utilizables cuando se desconecten o no se soporten los scripts. página 61. Técnicas para el punto de verificación 6. [Prioridad 2] Consultar la definición de independencia del dispositivo. página 61. Las personas con discapacidades físicas podrían no ser capaces de moverse tan rápida o certeramente como para interactuar con objetos móviles. Técnicas para el punto de verificación 7. Asegure al usuario el control sobre los cambios de los contenidos tempo-dependientes Asegúrese de que los objetos o páginas que se mueven. con un nivel máximo a los 20 destellos por segundo. Técnicas para el punto de verificación 6.

evite el parpadeo del contenido (por ejemplo. En su lugar. evite los movimientos en las páginas. configure el servidor para que ejecute esta posibilidad.3 Hasta que las aplicaciones de usuario permitan congelar el movimiento de los contenidos. por favor consulte las Pautas de Accesibilidad a las Aplicaciones de Usuario [WAIUSERAGENT] y las Pautas de Accesibilidad para las Herramientas de Creación [WAI-AUTOOL]. no cree páginas que se actualicen automáticamente con "HTTP EQUIV=refresh" hasta que las aplicaciones de usuario permitan desconectar esta característica. página 62. permite a los usuarios desconectar u obviar el efecto más fácilmente. Consultar también la pauta 11. tales como scripts y applets.4.5 Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener el redireccionamiento automático. voz automática. no cree páginas que se actualicen automáticamente de forma periódica. Consultar también la pauta 8. Técnicas para el punto de verificación 7.4 Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener las actualizaciones. de otra manera.] Consultar también la pauta 6. en HTML. 37 pautas . Asegure la accesibilidad directa de las interfaces de usuario incrustadas Asegúrese de que la interfaz de usuario sigue los principios de un diseño accesible: funcionalidad de acceso independiente del dispositivo. página 62. así como el encendido y apagado). teclado operable. Cuando un objeto incrustado tiene su "propia interfaz". proporcione un mecanismo dentro de un script o un applet que permita a los usuarios congelar el movimiento o actualización. ésta (al igual que la interfaz de su navegador) debe ser accesible. [Prioridad 2] Técnicas para el punto de verificación 7.2.3. página 62. página 63. Técnicas para el punto de verificación 8. Nota.5.1. Pauta 8. debe proporcionarse una solución alternativa accesible. cambio de presentación en periodos regulares. y no deberían ser utilizados. Los elementos BLINK y MARQUEE no están definidos en ninguna especificación W3C HTML. Punto de verificación: 8. Prioridad 2. Técnicas para el punto de verificación 7. [Prioridad 2] Por ejemplo.2 Hasta que las aplicaciones de usuario permitan controlarlo. directamente accesibles o compatibles con las ayudas técnicas. Nota: Para información sobre interfaces accesibles.7. 7. página 62.1 Haga los elementos de programación. El uso de las hojas de estilo con scripts que creen movimiento. etc. 7. [Prioridad 2] Cuando una página incluye contenido móvil. [Prioridad 2] Técnicas para el punto de verificación 7. 7. [Prioridad 1 si la funcionalidad es importante y no se presenta en otro lugar. no utilice marcadores para redirigir las páginas automáticamente. Si la interfaz del objeto incrustado no puede hacerse accesible.

1 Proporcione mapas de imagen controlados por el cliente en lugar de por el servidor. con entrada de voz. Nota: Proporcionando textos equivalentes para los mapas de imagen o las imágenes usadas como vínculos. 9. puntero de cabeza (licornio) u otro. [Prioridad 3] Por ejemplo.3. especifique el orden de navegación con el tabulador a través del atributo "tabindex" o asegure un diseño de página lógico. El acceso independiente del dispositivo significa que el usuario puede interactuar con la aplicación de usuario o el documento con un dispositivo de entrada (o salida) preferido . punto de verificación 1. alguien que use la página sin verla.4. los controles de formulario y los grupos de controles de formulario.2. 9. controles de formulario y objetos. por ejemplo. página 63. Generalmente.1. página 64. voz. en HTML. teclado. [Prioridad 3] Por ejemplo. 38 pautas .5 Proporcione atajos de teclado para los vínculos más importantes (incluidos los de los mapas de imagen de cliente).5.2. [Prioridad 1] Consultar también punto de verificación 1. con teclado o quien utilice otro dispositivo de entrada que no sea de apuntamiento.4 Cree un orden lógico para navegar con el tabulador a través de vínculos.5. Técnicas para el punto de verificación 9. en HTML. página 63.1. Técnicas para el punto de verificación 9. Consultar también la pauta 1. Técnicas para el punto de verificación 9. Puntos de verificación: 9. 9. especifique manejadores de evento lógicos en vez de manejadores de evento dependientes de dispositivos.Pauta 9. Si. excepto donde las zonas sensibles no puedan ser definidas con una forma geométrica. [Prioridad 2] Consultar la definición de independencia del dispositivo. un control de formulario sólo puede ser activado con un ratón u otro dispositivo de apuntamiento.2 Asegúrese de que cualquier elemento que tiene su propia interfaz pueda manejarse de forma independiente del dispositivo. Diseñe para la independencia del dispositivo Utilice características que permitan la activación de los elementos de la página a través de diversos dispositivos de entrada.3 Para los "scripts". [Prioridad 2] Técnicas para el punto de verificación 9. no será capaz de utilizar el formulario.ratón. especifique los atajos a través del atributo "accesskey". las páginas que permiten la interacción a través del teclado son también accesibles a través de una entrada de voz o una serie de comandos. página 63. Consultar también la pauta 8. página 63. Técnicas para el punto de verificación 9. se hace posible a los usuarios interactuar con ellos sin un dispositivo de apuntamiento. y punto de verificación 1. 9.

Estos elementos activos son.4. 10.2. puede ser muy desorientador para los usuarios que no pueden ver lo que está ocurriendo. página 64. Estos puntos de verificación están clasificados como "provisionales" lo que significa que el Grupo de Trabajo de las Pautas de Contenido en la Web los considera válidos y necesarios para la accesibilidad de la Web en el momento de la publicación de este documento. 10. el Grupo de Trabajo espera que estos puntos de verificación no sean necesarios en un futuro. Técnicas para el punto de verificación 10.3. 10. Consultar también punto de verificación 12. columnas envoltorio de palabras. página 64. en HTML. [Prioridad 2] Por ejemplo. proporcione un texto lineal alternativo (en la página actual o en alguna otra) para todas las tablas que maquetan texto en paralelo. Igualmente. evite usar un marco cuyo objetivo es una nueva ventana.4 Hasta que las aplicaciones de usuario manejen correctamente los controles vacíos. haga esto con TEXTAREA e INPUT. página 64. incluya caracteres por defecto en los cuadros de edición y áreas de texto.1. para todos los controles de formularios con etiquetas asociadas implícitamente. Técnicas para el punto de verificación 10. [Prioridad 3] Por ejemplo.2 Hasta que las aplicaciones de usuario soporten explícitamente la asociación entre control de formulario y etiqueta. por tanto. en HTML. cambiar la ventana actual o hacer aparecer inesperadamente nuevas ventanas. Nota: Los siguientes puntos de verificación se aplican Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) solucionen estos problemas.Por ejemplo. no provoque apariciones repentinas de nuevas ventanas y no cambie la ventana actual sin informar al usuario. Sin embargo. los navegadores antiguos no permiten al usuario navegar a cuadros de edición vacíos. Técnicas para el punto de verificación 10. página 64. el punto de verificación no debe desanimar a los desarrolladores de contenidos en el uso de tablas para presentar información tabular. Este punto de verificación beneficia a aquellos que tienen aplicaciones de usuario (como algunos lectores de pantalla) que son incapaces de manejar bloques de texto contiguo. [Prioridad 3] Nota: Por favor. [Prioridad 2] La etiqueta debe preceder inmediatamente a su control en la misma línea (se permite más de una etiqueta/control por línea) o estar en la línea que precede al control (con sólo una etiqueta y un control por línea). 39 pautas . consulte la definición de tabla alineada. Técnicas para el punto de verificación 10. de difícil o imposible acceso. Los antiguos lectores de pantalla leen las listas de vínculos consecutivos como un solo vínculo.1 Hasta que las aplicaciones de usuario permitan desconectar la apertura de nuevas ventanas.4.3 Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) interpreten correctamente los textos contiguos. una vez que las tecnologías de la Web hayan incorporado las características y capacidades esperables. asegúrese de que la etiqueta está colocada adecuadamente. Puntos de verificación: 10.

Muchos formatos no recomendados por W3C (por ejemplo. Cuando deba utilizar tecnologías no accesibles (patentadas o no). deben ser usadas de acuerdo con las pautas de accesibilidad. en HTML.2. HTML. Las actuales pautas recomiendan las tecnologías W3C (Por ejemplo. Postscript. A menudo.1 Utilice tecnologías W3C cuando estén disponibles y sean apropiadas para la tarea y use las últimas versiones que sean soportadas. valide cada página respecto a la accesibilidad y utilidad después del proceso de conversión (consulte la sección de validación ). revise la página hasta que su presentación original se convierta adecuadamente o bien proporcione una versión en HTML o en texto plano. RTF. • Las especificaciones W3C pronto serán revisadas para asegurar que los temas de accesibilidad se toman en consideración en la fase de diseño. PDF. página 65. • Las especificaciones W3C están desarrolladas en un proceso abierto de laborioso consenso.) por varias razones: • Las tecnologías W3C incluyen características accesibles "incorporadas". incluya caracteres imprimibles (rodeados de espacios). etc. [Prioridad 3] Técnicas para el punto de verificación 10. Donde no sea posible utilizar una tecnología W3C. asegúrese de que se transforman correctamente (Consultar también la pauta 6). 40 pautas . [Prioridad 2] Por ejemplo. etc. Utilice las tecnologías y pautas W3C Utilice tecnologías W3C (de acuerdo con las especificaciones) y siga las pautas de accesibilidad. XML) no siempre crea un documento accesible.5. página 64. 11. Cuando utilice nuevas tecnologías.) a lenguajes de marcado W3C (HTML. tenderá a hacer más accesibles las páginas a más gente que utiliza una amplia variedad de hardware y software. Si una página no se convierte de forma legible. página 65. use en su lugar hojas de estilo (por ejemplo. Puntos de verificación: 11. Incluso cuando se utilicen tecnologías W3C. que no sirvan como vínculo. no utilice el elemento desaconsejado FONT. propiedades y extensiones patentados).2 Evite características desaconsejadas por las tecnologías W3C. Schockwave. Por tanto. atributos. Técnicas para el punto de verificación 11.Técnicas para el punto de verificación 11. o usándola se obtengan materiales que no se transforman correctamente.10. entre los vínculos contiguos. Nota: Convirtir los documentos (desde PDF. estos formatos no pueden ser visualizados o navegados con aplicaciones de usuario estándares (incluyendo ayudas técnicas). Evitar estos formatos y características no estándar (elementos.) requieren ser vistos bien con plug-ins o con aplicaciones autónomas. Pauta 11. debe proporcionar una página equivalente accesible. etc. CSS. proporcione una versión alternativa del contenido que sea accesible.5 Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) interpreten claramente los vínculos contiguos. la propiedad "font" en CSS). [Prioridad 2] Consulte la lista de referencias para información sobre dónde encontrar las últimas especificaciones W3C y [WAI-UA-SUPPORT] para información sobre como las aplicaciones de usuario que soportan las tecnologías W3C.1.

proporcione un vínculo a una página alternativa que use tecnologías W3C. sea accesible. utilice "longdesc" o un vínculo a una descripción. [Prioridad 1] Por ejemplo. en HTML.2. Técnicas para el punto de verificación 12.3.1 Titule cada marco para facilitar su identificación y navegación de los mismos.3 Divida los bloques largos de información en grupos más manejables cuando sea natural y apropiado. [Prioridad 2] Por ejemplo. tenga información (o funcionalidad) equivalente y sea actualizada tan a menudo como la página (original) inaccesible. Técnicas para el punto de verificación 11. [Prioridad 2] Por ejemplo. después de los mayores esfuerzos. La generación automática de páginas alternativas puede conducir a actualizaciones más frecuentes. página 65. Nota: Los desarrolladores de contenido sólo deben enviar a páginas alternativas cuando otras soluciones fallen. Pauta 12. tipo de contenido.4.) [Prioridad 3] Nota: Use la negociación de contenidos donde sea posible. página 66. Las relaciones complejas entre las partes de una página pueden resultar difíciles de interpretar a personas con discapacidades cognitivas o visuales. 12.3 Proporcione la información de modo que los usuarios puedan recibir los documentos según sus preferencias (Por ejemplo. utilice el atributo "title" en los elementos FRAME.1. haciéndola accesible es probable que la mejore para todos los usuarios. Antes de enviar a una página alternativa. 41 pautas . utilice encabezamientos para estructurar documentos. página 66. 12. utilice listados anidados cuando sea apropiado. 11. Técnicas para el punto de verificación 12. Proporcione información de contexto y orientación Proporcione información de contexto y orientativa para ayudar a los usuarios a entender páginas o elementos complejos. Técnicas para el punto de verificación 12. las páginas alternativas o ambas. página 65. reconsidere el diseño de la página original.4 Si. idioma. en HTML. Puntos de verificación: 12. la información de la página original no está disponible. página 66.11.2 Describa el propósito de los marcos y como éstos se relacionan entre sí. en HTML. porque las páginas alternativas se actualizan con menor frecuencia que las páginas primarias. etc. puesto que en ambos casos.3. Consultar también la pauta 3. [Prioridad 1] Técnicas para el punto de verificación 11. Agrupar los elementos y proporcionar información contextual sobre la relación entre elementos puede ser útil a todos los usuarios. si no resulta obvio solamente con el título del marco. etc. no puede crear una página accesible. Una página no actualizada puede ser tan frustrante como una página inaccesible. pero los desarrolladores de contenidos deben asegurar que las páginas generadas siempre tengan sentido y que los usuarios puedan navegar por el sitio siguiendo los vínculos de las páginas primarias. agrupe controles de formulario con FIELDSET y LEGEND. utilice OPTGROUP para agrupar los elementos OPTION dentro de un SELECT.

13. 13.3" en lugar de "pincha aquí". [Prioridad 2] Técnicas para el punto de verificación 13. en HTML. rel=‘index’ (índice). rel=‘previous’ (anterior). un mapa del sitio.2 Proporcione metadatos para añadir información semántica a las páginas y sitios. 13. el atributo "title"). página 66. Puntos de verificación: 13.5 Proporcione barras de navegación para destacar y dar acceso al mecanismo de navegación.4 Utilice los mecanismos de navegación de forma coherente. etc. página 66.12.4 Asocie explícitamente las etiquetas con sus controles.). (información orientativa. 42 pautas .) para incrementar la probabilidad de que una persona encuentre lo que está buscando en un sitio. escriba "información sobre la versión 4. Técnicas para el punto de verificación 12. etc. [Prioridad 2] En la descripción de la maquetación del sitio. Técnicas para el punto de verificación 13. barras de navegación. los desarrolladores de contenidos pueden aclarar el objetivo de un vínculo con un título informativo del mismo (por ejemplo.1. Por ejemplo. Los mecanismos de navegación claros y coherentes son importantes para las personas con discapacidad cognitiva o ceguera y benefician a todos los usuarios. [Prioridad 2] Por ejemplo. página 66.4. Pauta 13. Consultar también punto de verificación 13.3 Proporcione información sobre la maquetación general de un sitio (por ejemplo. etc. utilice LABEL y su atributo "for". [Prioridad 3] Técnicas para el punto de verificación 13. También debe ser conciso. Proporcione mecanismos de navegación claros y coherentes. en HTML. en HTML. [Prioridad 2] Por ejemplo. destaque y explique las características de accesibilidad disponibles. el tipo de contenido. Proporcione mecanismos claros de navegación. use RDF ([RDF]) para indicar el autor de los documentos. 13.2.3. página 66. [Prioridad 2] El texto del vínculo tiene que tener significado suficiente cuando sea leído fuera de contexto (por sí mismo o como parte de una secuencia de vínculos).5 . página 66. Nota: Algunas aplicaciones de usuario de HTML pueden construir herramientas de navegación a partir de las relaciones entre documentos descritas en el elemento HTML LINK y los atributos “rel” o “rev” (Por ejemplo rel=‘next’ (siguiente).4. Además de textos del vínculos claros. Técnicas para el punto de verificación 13. mapa del sitio o tabla de contenidos).5.1 Identifique claramente el objetivo de cada vínculo. Técnicas para el punto de verificación 13. página 66.

La utilización de un lenguaje claro y simple también beneficia a las personas cuyo primer idioma es diferente al del autor. [Prioridad 3] Por ejemplo. los gráficos reconocibles y el lenguaje fácilmente comprensible benefician a todos los usuarios. hasta que las aplicaciones de usuario lo hagan. incluidos aquellos que se comunican principalmente mediante lengua de signos. Técnicas para el punto de verificación 13. página 67.10. permita diferentes tipos de búsquedas para diversos niveles de habilidad y preferencias.9 Proporcione información sobre las colecciones de documentos (por ejemplo. página 67. Consulte también la pauta 1). la información que los diferencie.9. Nota: La mejora en la presentación ganada por un procesamiento fuera de línea (offline) puede hacer la navegación mucho menos costosa a las personas con discapacidad que puedan estar navegando lentamente..1 and ejemplo de ASCII art en el glosario. [Prioridad 3] Consultar punto de verificación 1. página 67. proporcione una manera de evitar el grupo. Técnicas para el punto de verificación 13. párrafos.6. [Prioridad 3] Nota: Esto es comúnmente denominado "front-loading" (colocar al frente) y es especialmente útil para los que acceden a la información con dispositivos seriales como un sintetizador de voz. (Por tanto. Asegúrese de que los documentos sean claros y simples.7. identifique el grupo (para las aplicaciones de usuario) y.10 Proporcione un medio para saltar sobre un dibujo ASCII art de varias líneas.13. La utilización de un lenguaje claro y simple promueve una comunicación efectiva. etc.8. 13. 13. etc. página 67. listas. stuffit. Otro modo de crear una colección es construyendo un archivo (por ejemplo con zip. Asegúrese de que los documentos son claros y simples para que puedan ser más fácilmente comprendidos. 43 pautas .7 Si proporciona funciones de búsqueda. El acceso a la información escrita puede ser difícil para personas con discapacidades cognitivas o de aprendizaje. página 67. los documentos que comprendan múltiples páginas). ayudan a personas con discapacidades cognitivas o con dificultades en la lectura. especifique las colecciones de documentos con el elemento LINK y los atributos "rel" y "rev". [Prioridad 3] Técnicas para el punto de verificación 13. [Prioridad 3] Técnicas para el punto de verificación 13.6 Agrupe los vínculos relacionados. 13. Técnicas para el punto de verificación 13. en HTML. La maquetación coherente de páginas. tar and gzip.) de las páginas múltiples.8 Localice al principio de los encabezamientos. los de baja visión o para cualquier usuario que no puede o ha elegido no ver los gráficos. Pauta 14. En particular. 13. asegúrese de que las imágenes tienen textos equivalentes para los ciegos.

[Prioridad 3] Consultar también la pauta 1. página 67. página 67. página 67. 44 pautas . [Prioridad 1] Técnicas para el punto de verificación 14. 14.1 Utilice el lenguaje apropiado más claro y simple para el contenido de un sitio. 14.3 Cree un estilo de presentación que sea coherente en todas las páginas. [Prioridad 3] Técnicas para el punto de verificación 14.2 Complemente el texto con presentaciones gráficas o auditivas cuando ello facilite la comprensión de la página.3.Puntos de verificación: 14. Técnicas para el punto de verificación 14.2.1.

como la significación del texto del vínculo. tales como las generadas por algunos procesadores de textos. Valide las hojas de estilo (Por ejemplo. 9. compruebe que el software de las herramientas trata todos los problemas de accesibilidad. • Gráficos no cargados. 10. Usuarios discapacitados expertos y noveles proporcionarán una retroalimentación valiosa sobre la accesibilidad o los problemas de uso y su gravedad. Valide la sintaxis (Por ejemplo. Eliminando problemas gramaticales se incrementa la comprensión. Los problemas de accesibilidad identificados de forma temprana son más fáciles de corregir y evitar. 2. 45 pautas-validación . Quien lea la página con un sintetizador de voz puede no ser capaz de descifrar lo que reproduce el sintetizador por un error ortográfico.Apendice A: VALIDACIÓN Valide la accesibilidad con herramientas automáticas y revisión humana. • Sin ratón. La revisión humana puede ayudar a asegurar la claridad del lenguaje y facilidad de navegación. expuestos con más detalle en la sección de validación del Documento Técnicas. Por favor. Utilice un navegador sólo-texto o un emulador. Los métodos automáticos son generalmente rápidos y oportunos. 1. antiguos y nuevos. • Sonidos no cargados. Utilice una herramienta de accesibilidad automática y una herramienta de validación del navegador. Utilice varios navegadores. Revise el documento para obtener claridad y simplicidad. Utilice verificadores de ortografía y gramática. etc. scripts. Utilice un navegador por voz. CSS). un lector de pantalla. hojas de estilo y applets no cargados. 3. pida a un experimentado editor (humano) que revise la claridad del texto escrito. 6. pueden ser útiles indicadores de claridad y simplicidad. Invite a personas con discapacidad a revisar los documentos. etc. 7. la aplicabilidad de un equivalente textuale. etc. Las estadísticas de legibilidad. 5. HTML. Comience a utilizar métodos de validación desde los primeros estadios del desarrollo. A continuación se exponen algunos importantes métodos de validación. un visualizador pequeño. Utilice varios navegadores gráficos con: • Sonidos y gráficos cargados. 4. • Marcos. XML. Los editores pueden también incrementar la utilidad de un texto identificando potenciales problemas interculturales que pueden surgir a causa del lenguaje o los iconos usados. pero pueden no identificar todos los problemas de accesibilidad. Mejor aún.). un software de magnificación. 8.

incluyendo navegadores gráficos de escritorio. Por ejemplo.-)" es el emoticono de sonrisa. dispositivos para agarrar. Generalmente es un instrumento de mano con una pequeña pantalla que permite la entrada desde varios orígenes. magnificadores de pantallas y software de reconocimiento de voz. En el área de la Accesibilidad a la Web. sintetizadores de voz y software de entrada de voz que opera junto con navegadores gráficos (entre otras aplicaciones de usuario). contactos y correos electrónicos. Ayuda técnica Software o hardware que está especialmente diseñado para ayudar a personas con discapacidad para realizar sus actividades diarias. maquinas lectoras. plug-ins y algún software de ayudas técnicas utilizado conjuntamente con navegadores.Apendice B: GLOSARIO Accesible El contenido es accesible cuando puede ser usado por alguien con discapacidad. Applet Un programa insertado en una página Web. sistemas multimedia. teléfonos móviles. las ayudas técnicas más corrientes basadas en el software incluyen lectores y magnificadores de pantalla. Las ayudas técnicas incluyen sillas de ruedas. 0 5 10 15 20 25 30 35 Frecuencia de parpadeo (hercios) 40 45 50 55 60 65 70 46 pautas-glosario . ASCII art Se refiere a los caracteres de texto y símbolos que son combinados para crear una imagen. A continuación podemos ver una figura ASCII que muestra la relación entre la frecuencia de destello y la respuesta fotocompulsiva en pacientes con los ojos abiertos y cerrados. etc. ". La mayoría de los PDA se usan para seguir la pista de datos personales como agendas. de texto. de voz. tales como lectores de pantalla. 100 90 80 70 60 50 40 30 20 10 Asistente Digital Personal (PDA) Un PDA es un pequeño dispositivo de informática portátil. Aplicación de usuario Software para acceder al contenido de la Web. Las ayudas técnicas del hardware incluyen teclados alternativos y dispositivos de apuntamiento.

Desarrolladores de contenidos Cualquier autor de páginas o diseñador de sitios Web. B. etc. Los autores deben evitar el uso de elementos y atributos desaconsejados.. La estructura de un documento es como se organiza lógicamente (por ejemplo. en HTML los elementos P. etc. estructura y presentación del documento El contenido de un documento se refiere a lo que dice el usuario a través del idioma. los más usados tienen entre 12 y 20 celdas por línea. comúnmente llamado "dispositivo dinámico braille". CENTER) es llamado elemento de presentación. por ejemplo. En HTML. como una presentación gráfica bidimensional.). el encabezamiento es un elemento estructural marcado. Un elemento que especifica la presentación de un documento (Por ejemplo. El braille dinámico presenta la hilera en tamaño que abarca desde líneas de una celda (seis u ocho puntos) hasta una línea de 80 celdas. Las aplicaciones de usuario deben continuar soportándolos en razón de la compatibilidad con lo atrasado. Los elementos desaconsejados quedarán obsoletos en futuras versiones de HTML. FONT. las imágenes. como dibujo. Contenido.Braille Utiliza seis puntos en relieve en diferentes posiciones para representar letras y números que los ciegos leen con los dedos. El índice de elementos y atributos de HTML en el Documento de Técnicas indica cuáles son los elementos y atributos desaconsejados en HTML 4. con un elemento H2. El contenido de éste es lo que el encabezamiento dice (Por ejemplo. como una presentación sólo texto. Consideremos. las animaciones. en capítulos. etc. eleva o baja las pautas de puntos mediante un dispositivo electrónico. "Veleros"). como braille. con una introducción y una tabla de contenidos.0. una línea de texto centrada. un título dicho con cierto tono de voz (como una fuente auditiva). 47 pautas-glosario .). los sonidos. normalmente un ordenador. El resultado es una línea de braille que puede cambiar a intervalos. BLOCKQUOTE) que especifica la estructura de un documento es llamado un elemento estructural. La palabra "accesible" en braille es: Un dispositivo braille. las películas. la presentación de un encabezamiento puede ser un texto en mayúsculas negritas alineada al margen.. Desaconsejado Un elemento o atributo desaconsejado es aquel que ha quedado anticuado por la aparición de nuevas construcciones. STRONG. La presentación de un documento es como éste es interpretado (por ejemplo. etc. Finalmente. Compatible con lo atrasado Diseños que continúan funcionando con versiones anteriores de un lenguaje. como un sonido sintetizado. Un elemento (Por ejemplo. un encabezamiento. programa. por ejemplo.

STYLE y SCRIPT generan información que se procesará por las hojas de estilo o el motor del script). incluyendo los atributos (por ejemplo. Por ejemplo. Los equivalentes no textuales (por ejemplo. el equivalente debe cumplir esencialmente la misma función para la persona con discapacidad (al menos en la medida que sea posible. Desde que un contenido textual puede ser presentado al usuario a través de un sintetizador de voz. LI o TABLE). para que un usuario comprenda la información transmitida por una gráfica compleja. En el contexto de este documento. como parte del contenido del elemento (por ejemplo. algunos son remplazados por un contenido externo (Por ejemplo. Tenga en cuenta que la información equivalente se centra en cumplir la misma función. un texto para el atributo "alt" en HTML y SML). El segundo sentido enfatiza que una pauta inspirada en HTML puede aplicarse fácilmente a otro lenguaje de marcado. estas pautas requieren texto equivalente para los gráficos y la información auditiva. Si la imagen es parte de un vínculo y la comprensión de la imagen es crucial para conocer el objetivo del vínculo. Equivalente Un contenido es "equivalente" a otro cuando ambos cumplen esencialmente la misma función o propósito en la presentación al usuario. puede ser necesaria la combinación de técnicas (por ejemplo. Por ejemplo. La información equivalente puede proporcionarse por otras formas. que el contenido se vea o se oiga). el texto "Luna llena" debe transmitir la misma información que una imagen de la luna llena cuando se presenta al usuario.Elemento Este documento utiliza el término "elemento" tanto en el estricto sentido de SGML (un elemento es una construcción sintáctica) como en el más general de significar un tipo de contenido (tal como vídeo o sonido) o una construcción lógica (tal como un encabezamiento o una lista). P. con discapacidades cognitivas o de aprendizaje y los sordos. Proporcionar información equivalente para contenidos inaccesibles es una de las maneras principales con las que el autor puede hacer accesibles sus documentos a las personas con discapacidad. los elemento en HTML. como parte del propósito del documento o como un vínculo a un documento (por ejemplo. etc. utilice "alt" para un equivalente abreviado. útil para los nuevos lectores). una descripción auditiva de una presentación visual. incluyendo muchos individuos ciegos. OBJECT en HTML). un vídeo de una persona contando una historia utilizando el lenguaje de signos como un equivalente para la historia escrita. útil para los lectores conocidos. Los textos equivalentes deben ser escritos de manera que transmitan todo lo esencial del contenido. dada la naturaleza de la discapacidad y el estado de la tecnología) como el contenido primario hecho para personas sin ninguna discapacidad. los autores deben describir la información visual de la misma. junto con "longdesc" como vínculo para una información más completa. braille o un texto mostrado visualmente. Dependiendo de la complejidad del equivalente. Tenga en cuenta que algunos elementos (SGML) tienen contenido que es interpretado (Por ejemplo. Un elemento que genera caracteres de texto que forman parte del documento es llamado elemento de texto. un equivalente también debe dar al usuario una idea de este objetivo. Como parte del cumplimiento de la misma función del contenido un equivalente debe suponer una descripción de lo que contiene (por ejemplo. El detalle de cómo y cuándo proporcionar información equivalente es parte del Documento de Técnicas ([TECHNIQUES]). IMG) y algunos afectan al procesamiento (Por ejemplo.) también mejoran la accesibilidad para personas que no pueden acceder a la información visual o al texto escrito. utilizando el atributo "longdesc" en HTML o con un vínculo descriptivo). 48 pautas-glosario .

creadas por los usuarios o construidas en las aplicaciones usuarias. Herramienta de creación Los editores HTML. Pueden tener tres orígenes diferentes: pueden estar escritas por los que proporcionan el contenido. no todos las aplicaciones de usuario o ayudas técnicas proporcionan el control de accesibilidad que el usuario requiere (por ejemplo. habitualmente durante una pausa natural en la misma. algunas aplicaciones de usuario pueden no permitir a los usuarios desconectar los contenidos que parpadean o algunos lectores de pantalla pueden no manejar bien las tablas). 49 pautas-glosario . las que generan contenidos Web desde bases de datos. Hasta que las aplicaciones de usuario. como los efectos de sonido. gráficos y cambios de escena en la banda de vídeo)." requieren que los desarrolladores de contenidos proporcionen soporte adicional para la accesibilidad hasta que la mayoría de las aplicaciones de usuario tengan disponible para sus usuarios las necesarias características de accesibilidad. gráficos y cambios de escena.. lenguaje corporal. En CSS ([CSS2]). Las descripciones auditivas están sincronizadas con la banda sonora de la presentación. Las descripciones auditivas incluyen información sobre acciones.Una transcripción de texto es un texto equivalente de una información de audio que incluye palabras habladas y sonidos no hablados. Nota. En la mayoría de los puntos de verificación. cuando estamos en una habitación abarrotada). lo cual beneficia a los sordos o duros de oído y a aquellos que no puedan oír la parte sonora (por ejemplo. las herramientas de conversión de documentos. Una leyenda (caption) es una trascripción de texto de la banda sonora de una presentación de vídeo que esta sincronizada con el vídeo y la banda sonora. la interacción entre el proveedor del contenido. El sitio en la Web del W3C WAI (consulte [WAI-UA-SUPPORT]) proporciona información sobre las características de accesibilidad que soportan las aplicaciones de usuario. En la fecha de publicación de este documento.. Una trascripción de texto compilada combina (compilaciones) de leyendas con descripciones textuales de la información visual (descripciones de la acción. son todas herramientas de autor. La descripción es tanto una voz humana pregrabada como una voz sintetizada (grabada o generada en el momento). hay necesidades de accesibilidad que serían más apropiadamente satisfechas por una aplicación de usuario (incluyendo las ayuda técnica).. De todas maneras. a los desarrolladores de contenidos se les pide que aseguren la accesibilidad de sus páginas y sitios. lenguaje corporal. animaciones.. Este texto equivalente hace accesible las presentaciones a personas sordo-ciegas y a quienes no pueden ejecutar las películas. Los puntos de verificación que contienen la frase "hasta que las aplicaciones de usuario. consultar la Pautas de Accesibilidad para Herramientas de Autor ([WAI-AUTOOLS]). Los desarrolladores de contenidos son instados a consultar estas páginas regularmente para actualizar la información. Un ejemplo de un equivalente no textual es una descripción auditiva de los elementos en clave visual de una presentación. etc. También hace disponible la información a maquinas de búsqueda. Hojas de estilo Una hoja de estilo es un conjunto de instrucciones que especifican la presentación de un documento. el usuario y la aplicación usuaria de una hoja de estilo se denomina cascada. Las leyendas son generalmente interpretadas por superposición sobre el vídeo. Para información sobre herramientas accesibles en vías de desarrollo.

Muchas pautas deben ser aplicables a aplicaciones que usan DHTML. pauta 3. sin embargo las siguientes pautas centran los problemas relacionados con el "scripting" y las hojas de estilo: pauta 1.). Tenga en cuenta que el "soporte independiente del dispositivo" no significa que las aplicaciones de usuario tengan que soportar todos los dispositivos de entrada y salida. Lector de pantalla Es un programa de software que lee en voz alta al usuario el contenido de la pantalla. Los dispositivos de entrada pueden incluir dispositivos de apuntamiento. Información tabular Cuando las tablas se utilizan para presentar la relación lógica entre datos (texto. si una aplicación de usuario soporta entradas de teclado y ratón. números. Las aplicaciones de usuario deben ofrecer mecanismos de entrada y salida redundantes para cada dispositivo que sea soportado. no hay una especificación de W3C que defina formalmente el DHTML. Habitualmente los lectores de pantalla pueden leer archivos en formato texto. punteros de cabeza. pauta 6. hojas de estilo. teclados. Independiencia del dispositivo Los usuarios deben poder interactuar con una aplicación de usuario (y el documento que interpreta) utilizando los dispositivos de entrada y salida de su elección y acordes a sus necesidades. auditivamente (a menudo con información de encabezamiento precediendo a las celdas) o en otros formatos. Por ejemplo. Importante Una información en un documento es importante si su comprensión es crucial para la comprensión del documento. HTML dinámico (DHTML) DHTML es en nombre de mercado aplicado a la mezcla de estándares que incluye HTML. Imagen Cualquier presentación gráfica. Los dispositivos de salida pueden incluir monitores. Sin embargo. esa información se llama "información tabular" y las tablas se llaman "tablas de datos". 50 pautas-glosario . Tenga en cuenta que los elementos "STRONG" y "EM" no se consideran marcadores de presentación puesto que transmiten información que es independiente de un estilo de fuente particular. pauta 7 y pauta 9. y no gráficos que incluyan textos. Las relaciones expresadas mediante una tabla pueden ser interpretadas visualmente (normalmente en una parrilla bidimensional). dispositivos braille. Lo usan principalmente los ciegos. sintetizadores de voz y dispositivos braille. los usuarios deben poder interactuar con toda la presentación utilizando cualquier teclado o ratón. como los elementos B e I en HTML. imágenes.Marcador de presentación: es un marcador que realiza un efecto estilístico (mas que estructura). etc. micrófonos y otros. Document Object Model [DOM1] y "scripting".

Cuando el usuario pincha en una zona activa del mapa de cliente.Idioma Lenguaje humano hablado. que realizará cierta acción. Los mapas de cliente permiten a la aplicación de usuario proporcionar retroalimentación inmediata sobre si el puntero del usuario está o no sobre una zona activa. encabezamientos. japonés. Las celdas deben tener sentido cuando se lean en orden e deben incluir elementos estructurales (que generan párrafos. Lo usan principalmente las personas de escasa visión. Pinchar en una zona activa provoca una acción. Algunos mecanismos típicos incluyen: Barras de navegación Una barra de navegación es una colección de vínculos hacia las partes más importantes de un documento o sitio. Tabla alineada Proceso de interpretación de una tabla donde los contenidos de una celda se convierten en una serie de párrafos uno tras otro (Por ejemplo. lengua de signos americano o braille. página abajo). etc. listas. Pinchar en una zona activa de un mapa de servidor genera las coordenadas que se envían al servidor. Mapa de imagen Una imagen que ha sido dividida en zonas con acciones asociadas.12). (sección 2. Texto del vínculo Contenido textual de un vínculo. Mapa del sitio Proporciona una visión global de la organización de una página o sitio Tabla de contenidos Las tabla de contenidos generalmente consiste de una lista de (y vínculos a) las secciones mas importantes de un documento. la aplicación de usuario calcula en qué zona se ha pinchado y sigue el vínculo asociado a esa zona. Magnificador de pantalla Es un programa de software que amplía una parte de la pantalla. 51 pautas-glosario . Mecanismo de navegación Es cualquier medio por el cual un usuario puede navegar una página o sitio. El idioma del contenido debe ser indicado con el atributo "lang" en HTML [HTML 40].). escrito o de signos como el francés.1) y el atributo "xml:lang" en XML [XML]. Los párrafos se sucederán en el mismo orden que las celdas definían en el documento original. (sección 8. para que pueda ser vista más fácilmente. así la página tendrá sentido tras su transformación para ser leída línea a línea. Los desarrolladores de contenidos pueden hacer los mapas de cliente accesibles proporcionando acceso independiente del dispositivo a los mismos vínculos asociados con las zonas del mapa.

Liam Quinn. Deseamos dar las gracias a las siguientes personas que han contribuido con su tiempo y sus valiosos comentarios a dar forma a estas pautas: Harvey Bingham. Murray Maloney. Mike Paciello. Raman. Steve Tyler. Greg Rosmaita. Leonard Kasday. Charles McCathieNevile. Neal Ewers. Chetz Colwell. Masafumi Nakane. Este documento incluye una lista de contribuidores adicionales. Josh Krieger. Dave Raggett. Mark Novak. Charles Oppermann. Geoff Freed. Jon Gunderson.Reconocimientos Co-directores del Grupo de Trabajo de Pautas de Contenido en la Web: Chuck Letourneau.V. George Kerscher. William Loughborough. Phill Jenkins. 52 pautas . Scott Luebking. Al Gilman. Trace Research and Development Contactos con el equipo W3C: Judy Brewer y Daniel Dardailler. Kevin Carey. David Pawson. T. Starling Access Servicies Gregg Vanderheiden. Michael Pieper. Larry Goldberg. MegaZone (Livingston Enterprises). Robert Savellis. Eric Hansen. Jutta Treviranus. Jaap van Lelieveld y Jason White El borrador original de este documento esta basado en "The Unified Web Site Accesibility Guidelines" ([UWSAG]) compilado por el Trace R & D Center de la Universidad de Wisconsin. Marja-Riitta Koivunen.

C. La última versión de MathML 1. Le Hors. eds.org/TR/REC-MathML.w3.org/TR/REC-html32.Referencias Para la última versión de cualquier especificación W3C. 1 de octubre de 1998. [MATHML] "Mathematical Markup Language". Robie. eds.w3. Le Hors e I. La recomendación HTML 4. P.org/TR/1998/REC-MathML-19980407. B.0 está disponible en: http://www.2 está disponible en: http://www..w3. J.0 está en: http://www.0 está en: http://www. revisada el 24 de abril de 1998.org/TR/REC-CSS1.0 Recommendation".w3.0 está disponible en: http://www. Bos. Sutor. 14 de enero de 1997.org/TR/1998/REC-DOM-Level-1-19981001.w3. [DOM1] "Document Object Model (DOM) Level 1 Specification". H. La recomendación de nivel 1 de DOM está en: http://www. Miner. La recomendación MathML 1. [CSS1] "CSS. La recomendación CSS1 está en: http://www. La recomendación CSS2 está en: http://www. Nicol. level 1 Recommendation".org/TR/REC-html40. La última versión de CSS2 está disponible en: http://www. Ion y R.. A. eds. Jacobs. 7 de abril de 1998. ed. por favor consulte la lista de Informes Técnicos de W3C (W3C TechnicalReports).. Jacobs. Bos. eds. G. La última versión de HTML 4. [HTML32] "HTML 3. M Champion. Wilson y L.org/TR/REC-CSS2.2 Recommendation". Isaacs.org/TR/1998/REC-CSS2-19980512. La última versión de HTML 3. Jacobs.w3. D. I. Wium Lie. A. R. revisado el 11 de enero de 1999.w3. Apparao. 17 de diciembre de 1996.org/TR/1999/REC-CSS1-19990111.w3. D..org/TR/REC-DOM-Level-1. 53 pautas .. Wium Lie e I.org/TR/1998/REC-html40-19980424. Woods. Byrne.w3. Raggett.w3. [CSS2] "CSS.. S. La última versión de CSS1 está disponible en: http://www.w3. B. 17 de diciembre de 1997. 12 de mayo de 1998. S. [HTML40] "HTML 4. level 2 Recommendation". La última versión del nivel 1 de DOM está disponible en: http://www. H. V. Raggett. eds.

T.w3. Lassila. Traducción castellana: . [RFC2038] "HTTP Version 1.0". Berners-Lee. Richards.0 está disponible en: http://www.org/TR/1998/REC-smil-19980615.w3. Este documento explica cómo implementar los puntos de verificación definidos en las "Pautas de Accesibilidad a los Contenidos en la Web 1. Gettys.w3.org/TR/WAI-AUTOOLS. ed. Vanderheiden. J. R. [WAI-UA-SUPPORT] Este página trata sobre algunas características de accesibilidad que es conocido que son soportadas por las aplicaciones de usuario (incluidas las ayudas técnicas) listadas en este documento.w3.w3.w3. J. 22 de febrero de 1999. Participante.. P.0 está disponible en: http://www.. [SMIL] "Synchronized Multimedia Integration Language (SMIL) 1.org/TR/1999/REC-rdf-syntax-19990222. J. enero 1997. Jacobs. C. eds. La recomendación RDF está en: http://www. ed.w3.0 está en: http://www. J.org/TR/REC-smil./tecnicas/WCAG10-TECHS-20001106_es. Swick. [TECHNIQUES] "Techniques for Web Content Accessibility Guidelines 1. 15 de junio de 1998..or/TR/Resources/WAI-UA-Support.1". Mogul.org/TR/REC-png. Chisholm. Hoscka. Jacobs. W.org/TR/WAI-WEBCONTENT-TECHS. R. La página está disponible en: http://www.0 está en: http://www. eds. [RDF] "Resource Description Framework (RDF) Model and Syntax Specification".w3. McCathieNeville. Fielding.0". 1 de octubre de 1996. El último borrador de estas técnicas está disponible en: http://www. Frustyk Nielsen y T. La última versión de PNG 1.org/TR/REC-rdf-syntax. El último Borrador de Trabajo de estas pautas para herramientas de creación de diseño accesible está disponible en: http://www. La última versión de RDF 1. eds. T. I. H. I.. G. La recomendación SMIL 1. La última versión de SMIL 1. Treviranus. 54 pautas . O. Lane.html [WAI-AUTOOLS] "Authoring Tool Accessibility Guidelines".[PNG] "PNG (Portable Network Graphics) Specification". ed.0 Specification". Boutell.

Chisholm.w3.[WAI-USERAGENT] "User Agent Accessibility Guidelines". G.org/TR/WAI-USERAGENT/. Jacobs. eds. Este documento está disponible en: http://www. [XML] "Extensible Markup Language (XML) 1. 55 pautas .w3.. eds. El último Borrador de Trabajo de estas pautas para el diseño de aplicaciones de usuario accesibles está disponible en: http://www. T.org/docs/html_guidelines/version8.org/TR/1998/REC-xml-19980210.html . Sperberg-McQueen.0 está en: http://www. Bray. W. La última versión de XML 1. J.w3.htm. Vanderheiden. [WCAG-ICONS] La información sobre los iconos de adecuación a este documento y como utilizarlos está disponible en: http://www.w3. Estas Pautas fueron compiladas por el Trace R & C Center de la Universidad de Wisconsin financiado por el National Institute on Disability and Rehabilitation Research (NIDRR). 10 de febrero de 1998.org/WAI/WCAG1-Conformance. Gunderson e I.M. eds. La recomendación XML 1. [UWSAG] The Unified Web Site Accessibility Guidelines". Departamento de Educación de Estados Unidos.0 está disponible en: http://www.0". Paoli. C.tracecenter.org/TR/REC-xml. J.

0 .técnicas para las pautas de accesibilidad al contenido en la web 1.

. • "Técnicas CSS para las Pautas de Accesibilidad al Contenido en la Web 1.0”. “Técnicas HTML para las Pautas de Accesibilidad al Contenido en la Web 1. • Una lista de las definiciones de los puntos de revisión. validación. University of Wisconsin -. Gregg Vanderheiden. “Técnicas fundamentales para las Pautas de Accesibilidad al Contenido en la Web 1. que es el punto de acceso a los otros documentos.0” ([WCAG10-HTML-TECHNIQUES]). por ejemplo. 3. W3C. 2. • La exposición del punto de revisión. Cada punto de revisión está seguido por uno o más vínculos a las técnicas en los siguientes documentos: • "Técnicas Fundamentales para las Pautas de Accesibilidad al Contenido en la Web 1. revisión. que expone los temas de accesibilidad y las técnicas generales que son de aplicación a todas las tecnologías (por ejemplo. que proporcionan ejemplos y estrategias para que los autores elaboren hojas de estilo en cascada (Cascading Style Sheets CSS) como parte del diseño accesible.0" ([WCAG10-CORE-TECHNIQUES]). Trace R & D Center.0” ([WCAG10-CSS-TECHNIQUES]).Nota de 6 noviembre de 2000 de W3C Editores: Wendy Chisholm. 56 técnicas .0" ([WCAG10-HTML-TECHNIQUES]).). “Técnicas para las Pautas de Accesibilidad al Contenido en la Web 1. W3C Resumen técnicas para las pautas de accesibilidad al contenido en la web 1. por ejemplo.0" [WCAG10]. Los puntos de revisión están ordenados de acuerdo asu prioridad. “Técnicas CSS para las Pautas de Accesibilidad al Contenido en la Web 1. • "Técnicas HTML para las Pautas de Accesibilidad al Contenido en la Web 1. • La prioridad del punto de revisión. Prioridad 1 antes de Prioridad 2. etc. que proporciona ejemplos y estrategias para realizar de forma accesible el contenido en lenguaje de hipertexto (HTML). el presente documento.0" [WCAG10]. 4. Cada pauta incluye: • El número de pauta. • La exposición de la pauta.0" ([WCAG10-CSS-TECHNIQUES]). Esta serie incluye: 1. validación.0” ([WCAG10-CORE-TECHNIQUES]). que proporciona ejemplos y estrategias que ayudan a los autores a elaborar hojas de estilo en cascada (CSS) como parte del diseño accesible de los contenidos. etc.Madison. La definición de cada punto de revisión incluye: • El número de punto de revisión. que proporciona ejemplos y estrategias para realizar de forma accesible el contenido en lenguaje de hipertexto ("Hypertext Markup Language HTML). pruebas.0 Este documento es el punto de acceso a una serie de documentos relacionados que describen técnicas para satisfacer los requisitos definidos en las "Pautas de Accesibilidad al Contenido en la Web 1. que expone los temas de accesibilidad y las técnicas generales que son de aplicación a todas las tecnologías. Ian Jacobs. 1 ¿Cómo está organizado este documento? La Sección 2 de este documento reproduce las pautas y puntos de revisión de las "Pautas de Accesibilidad al Contenido en la Web 1.

uno o más grupos encontrarán dificultades en el acceso a la información del documento. uno o más grupos de usuarios encontrarán imposible acceder a la información del documento. De otra forma. Satisfaciendo este punto de revisión mejorará la accesibilidad de los documentos Web. página 121. GIFs animados). página 109. [Prioridad 1] Técnicas Fundamentales: Equivalentes textuales. espaciadores. imágenes usadas como viñetas en las listas. a través de "alt". Técnicas HTML: Imágenes utilizadas como viñetas. página 124. Satisfacer este punto de revisión es un requerimiento básico para que algunos grupos puedan usar estos documentos Web. [Prioridad 3] Un desarrollador de contenidos de páginas Web puede satisfacer este punto de revisión. Esto incluye: imágenes. Técnicas HTML: Equivalentes textuales breves para imágenes ("texto alt"). Técnicas HTML: Equivalentes textuales y no textuales para applets y otros objetos programados. De otra forma. archivos exclusivamente auditivos. 57 técnicas . marcos. Técnicas HTML: Descripciones largas de imágenes. Satisfaciendo este punto de revisión eliminará importantes barreras de acceso a los documentos Web. página 118. De otra forma. animaciones (por ejemplo. representaciones gráficas del texto.1 Prioridades Cada punto de revisión tiene un nivel de prioridad asignado por el Grupo de Trabajo basado en su impacto sobre la accesibilidad. Técnicas HTML: Texto para imágenes utilizadas como vínculos. Proporcione alternativas equivalentes para el contenido sonoro y visual Puntos de revisión: 1. "longdesc" o en el contenido del elemento). "applets" y objetos programados. sonidos (ejecutados con o sin interacción del usuario). [Prioridad 1] Un desarrollador de contenidos de páginas Web tiene que satisfacer este punto de revisión. mapas de imagen.1. página 127. 2 Técnicas para las pautas de accesibilidad al contenido en la web Pauta 1. página 120. banda sonora del vídeo y vídeos. página 80. scripts. Algunos puntos de revisión tienen especificado un nivel de prioridad que puede variar bajo ciertas condiciones (indicadas). [Prioridad 2] Un desarrollador de contenidos de páginas Web debe satisfacer este punto de revisión.1 Proporcione un texto equivalente para todo elemento no textual (por ejemplo. botones gráficos. uno o más grupos de usuarios encontrarán alguna dificultad para acceder a la información del documento. Técnicas HTML: Equivalentes textuales para mapas de imagen de cliente. "ascii art".

página 80. página 125. Técnicas CSS: Asegúrese de que la información no se basa sólo en el color. página 143. Técnicas HTML: Botones gráficos. página 79. página 126. proporcione vínculos en formato texto redundantes para cada zona activa del mapa de imagen de cliente. Técnicas HTML: Describir las relaciones entre marcos. página 139. proporcione una descripción auditiva de la información importante de la banda visual de una presentación multimedia. página 164.Técnicas HTML: Equivalentes textuales para multimedia.5 (en esta misma página) y Punto de revisión 9. No se base sólo en el color Puntos de revisión: 2. página 133.1 (página 63). [Prioridad 3] Consulte también Punto de revisión 1. Técnicas HTML: Presentación alternativa de scripts.4 Para toda presentación multimedia tempodependiente (por ejemplo. página 80. Técnicas HTML: Vínculos redundantes en formato texto para mapas de imagen de cliente. [Prioridad 1] Técnicas Fundamentales: Información visual y movimiento. Técnicas HTML: Mapas de imagen de servidor. [Prioridad 1] Técnicas Fundamentales: Información sonora.2 Proporcione vínculos redundantes en formato texto para cada zona activa de un mapa de imagen del servidor.3 Hasta que las aplicaciones de usuario puedan leer automáticamente el texto equivalente de la banda visual. página 91.1 Asegúrese que toda la información transmitida a través de los colores también esté disponible sin color. página 92. una película o animación) sincronice alternativas equivalentes (por ejemplo. 1. [Prioridad 1] Técnicas Fundamentales: Estructura frente a presentación. página 128. 1. subtítulos o descripciones de la banda de visual) con la presentación. página 130. página 132.1 (página 63). por ejemplo mediante el contexto o por marcadores. Pauta 2. [Prioridad 1] Consulte también Punto de revisión 1. 1. Técnicas Fundamentales: Equivalentes textuales. 58 técnicas . Técnicas HTML: Crear páginas para navegadores que no soportan FRAME.5 Hasta que las aplicaciones de usuario interpreten el texto equivalente para los vínculos de los mapas de imagen de cliente. Técnicas HTML: Applets accesibles directamente. 1. Técnicas Fundamentales: Equivalentes textuales.2 (en esta misma página) y Punto de revisión 9.

Técnicas CSS: Contraste de color. Prioridad 3 para el texto]. 3. Técnicas HTML: Énfasis. Utilice marcadores y hojas de estilo y hágalo de forma apropiada. Técnicas CSS: Unidades de medida. 3. Técnicas CSS: Formato y posición del texto. página 100. página 104.2 Cree documentos que estén validados por las gramáticas formales publicadas. página 79. página 136. [Prioridad 2] Técnicas Fundamentales: Estructura frente a presentación. página 127. [Prioridad 2] Técnicas HTML: Applets directamente accesibles. página 105.4 Utilice unidades relativas en lugar de absolutas al especificar los valores en los atributos de los marcadores de lenguaje y en los valores de las propiedades de las hojas de estilo. 3. [Prioridad 2] Técnicas Fundamentales: Estructura frente a presentación. Técnicas CSS: Texto en lugar de imágenes. colocación y alineación. Puntos de revisión: 3. 3.5 Utilice elementos de encabezado para transmitir la estructura lógica y utilícelos de acuerdo con la especificación. use marcadores en vez de imágenes para transmitir la información. Técnicas CSS: Contenido generado. [Prioridad 2] Técnicas Fundamentales: Estructura frente a presentación. página 167. Técnicas HTML: Encabezamientos de sección. página 128. página 164.2. página 101.6 Marque correctamente las listas y los ítems de las listas. Técnicas CSS: Proporcione pistas contextuales en las listas HTML. página 79. posicionamiento. [Prioridad 2 para las imágenes. página 162. página 160.2 Asegúrese de que las combinaciones de los colores de fondo y primer plano tengan suficiente contraste para que sean percibidas por personas con deficiencias de percepción de color o en pantallas en blanco y negro. Pauta 3. página 163. página 159.3 Utilice hojas de estilo para controlar la maquetación y la presentación. Técnicas HTML: Fijar el tamaño de los marcos con unidades relativas. página 79. Técnicas HTML: Color en la imágenes. página 79. página 165. 59 técnicas . [Prioridad 2] Técnicas HTML: La declaración !DOCTYPE. 3. página 106. [Prioridad 2] Técnicas Fundamentales: Estructura frente a presentación. Técnicas CSS: Maquetación.1 Cuando exista un marcador apropiado. Técnicas HTML: Marcadores y hojas de estilo mejor que imágenes: el ejemplo de las matemáticas. Técnicas HTML: Listas.

Técnicas CSS: Maquetación. 5. Crear tablas que se trasformen correctamente Puntos de revisión: 5. página 111. 5. [Prioridad 2] Técnicas HTML: Citas. página 111.3 No utilice tablas para maquetar. página 167. Técnicas HTML: Tablas para maquetar.4 Si se utiliza una tabla para maquetar. Pauta 5.1 Identifique claramente los cambios en el idioma del texto del documento y en cualquier texto equivalente (Por ejemplo. proporcione una alternativa equivalente (la cual debe ser una versión linearizada). [Prioridad 2] Técnicas Fundamentales: Estructura frente a presentación. 4. Pauta 4. No utilice el marcador de citas para efectos de formato tales como sangrías. Por otro lado. [Prioridad 3] Técnicas HTML: Proporcionar información de resumen.7 Marque las citas. [Prioridad 2] Técnicas Fundamentales: Estructura frente a presentación.5 Proporcione resúmenes de las tablas. posicionamiento.1 En las tablas de datos. [Prioridad 3] Técnicas HTML: Señalar el idioma principal. 5. leyendas).2 Para las tablas de datos que tienen dos o más niveles lógicos de encabezamientos de fila o columna. página 79. no utilice marcadores estructurales para realizar un efecto visual. a menos que la tabla tenga sentido cuando se transcriba línea a línea. colocación y alineación. identifique los encabezamientos de fila y columna. Identifique el idioma utilizado Puntos de revisión: 4. página 115.2 Especifique la expansión de cada abreviatura o acrónimo cuando aparezcan por primera vez en el documento.3 Identifique el idioma principal de un documento. 4. [Prioridad 1] Técnicas HTML: Identifique información de filas y columnas. utilice marcadores para asociar las celdas de encabezamiento y las celdas de datos. si la tabla no tiene sentido. página 79. página 105. [Prioridad 3] Técnicas HTML: Acrónimos y abreviaturas. Técnicas HTML: Tablas para maquetar. [Prioridad 1] Técnicas HTML: Señalar los cambios de idioma. [Prioridad 1] Técnicas HTML: Identifique información de filas y columnas. 60 técnicas . 5. página 103.3. página 110. página 103. página 115. página 104.

4. tiene que ser posible leerlo. Por ejemplo. página 127. Técnicas HTML: Applets directamente accesibles. página 79.5. Técnicas CSS: Ubicación por CSS y marcado para una transformación correcta. página 82. página 141. Si esto no es posible. Técnicas Fundamentales: Información sonora. Técnicas HTML: Scripts directamente accesibles. página 128. 6.6 Proporcione abreviaturas para las etiquetas de encabezamiento. [Prioridad 2] Técnicas Fundamentales: Páginas alternativas. Pauta 6. 6. página 168.3. página 142.4 Para los scripts y applets. página 160. Técnicas HTML: Crear páginas para navegadores que no soportan FRAME. página 143.[Prioridad1] Técnicas HTML: Equivalentes textuales y no textuales para applets y objetos programados. página 142. página 100. cuando un documento HTML es interpretado sin asociarlo a una hoja de estilo. 6. [Prioridad 1] Técnicas HTML: Equivalentes textuales y no textuales para applets y objetos programados. proporcione información equivalente en una página alternativa accesible. [Prioridad 1] Técnicas CSS: Contenido generado. página 133. página 134.1 Organice el documento de forma que pueda ser leído sin hoja de estilo. applets u otros objetos programados. página 91. Consultar también el punto de revisión 10. Técnicas HTML: Scripts directamente accesibles. Técnicas HTML: Trasformación correcta de los scripts.3 Asegúrese de que las páginas sigan siendo utilizables cuando se desconecten o no se soporten los scripts. página 128. [Prioridad 3] Técnicas HTML: Proporcionar información de resumen. Técnicas HTML: Applets directamente accesibles. Técnicas HTML: El elemento LINK y documentos alternativos. página 127. asegúrese de que los manejadores de evento sean independientes del dispositivo de entrada.2 Asegúrese de que los equivalentes de un contenido dinámico son actualizados cuando cambia el contenido dinámico. página 110.5 Asegúrese de que los contenidos dinámicos son accesibles o proporcione una página o presentación alternativa. 6. Técnicas HTML: Presentación alternativa de scripts.[Prioridad2] Técnicas Fundamentales: Estructura frente a presentación. Asegúrese de que las páginas que incorporan nuevas tecnologías se transformen correctamente Puntos de revisión: 6. página 169. Técnicas CSS: Líneas y bordes. 61 técnicas . Consultar también el punto de revisión 11. Técnicas HTML: Contenidos fuente para marcos.

2 Hasta que las aplicaciones de usuario permitan controlarlo. página 144. página 142. Técnicas HTML: Imágenes animadas. Técnicas HTML: El elemento META. página 87.4 Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener las actualizaciones. Los elementos BLINK y MARQUEE no están definidos en ninguna especificación W3C HTML. página 92. cambio de presentación en periodos regulares. página 161. evite el parpadeo del contenido (por ejemplo. Técnicas Fundamentales: Información visual y movimiento. Técnicas HTML: Actualización de la página y nuevas ventanas. página 128. página 144. página 92. página 142. página 128. 7. configure el servidor para que ejecute esta posibilidad.1 Hasta que las aplicaciones de usuario permitan controlarlo.3 Hasta que las aplicaciones de usuario permitan congelar el movimiento de los contenidos. así como el encendido y apagado). Técnicas HTML: Scripts que causan destello. Técnicas HTML: El elemento META. página 142. página 172. 7. no cree páginas que se actualicen automáticamente de forma periódica. página 127. Nota.5 Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener el redireccionamiento automático. [Prioridad 2] Técnicas Fundamentales: Actualización automática de la página. En su lugar. página 87. Técnicas HTML: Scripts que causan movimiento y parpadeo. Consultar también la Pauta 11.Pauta 7. Técnicas CSS: Efectos de estilo de texto. 7. Técnicas HTML: Applets directamente accesibles. 7. página 128. [Prioridad 2] Técnicas Fundamentales: Información visual y movimiento. evite provocar destellos en la pantalla. Puntos de revisión: 7. Técnicas CSS: Creación de movimiento con hojas de estilo y scripts. [Prioridad 2] Técnicas Fundamentales: Actualización automática de la página. 62 técnicas . [Prioridad 2] Técnicas HTML: Applets directamente accesibles. evite los movimientos en las páginas. Técnicas HTML: Actualización de la página y nuevas ventanas. Técnicas HTML: Applets directamente accesibles. página 87. página 98. página 128. y no deberían ser utilizados. no utilice marcadores para redirigir las páginas automáticamente. Técnicas HTML: Scripts que causan movimiento y parpadeo. Técnicas HTML: Applets directamente accesibles. [Prioridad 1] Técnicas Fundamentales: Destello de la pantalla. Asegure al usuario el control sobre los cambios de contenidos tempo-sensibles. página 98.

especifique manejadores de evento lógicos en vez de manejadores de evento dependientes de dispositivos. Técnicas Fundamentales: Páginas alternativas. controles de formulario y objetos. de otra manera Prioridad 2. [Prioridad 1] Consultar también los puntos de revisión 1. 9. página 82. tales como scripts y applets. página 119. página 82. Consultar también la Pauta 8.1 Haga los elementos de programación. excepto donde las zonas sensibles no puedan ser definidas con una forma geométrica.1. directamente accesibles o compatibles con las ayudas técnicas. 1.[Prioridad 3] Técnicas Fundamentales: Páginas alternativas. Diseñe con independencia del dispositivo. 63 técnicas . página 142. 9.] Consultar también la Pauta 6. página 126. Técnicas HTML: Scripts directamente accesibles. Técnicas HTML: Applets directamente accesibles. Técnicas HTML: Acceso a los formularios mediante el teclado. Pauta 9. página 82 Técnicas HTML: Applets directamente accesibles. [Prioridad 2] Técnicas Fundamentales: Páginas alternativas.2.5. página 128.Pauta 8.4 Cree un orden lógico para navegar con el tabulador a través de vínculos. Puntos de revisión: 9.1 Proporcione mapas de imagen controlados por el cliente en lugar de por el servidor.3 Para los "scripts". [Prioridad 1 si la funcionalidad es importante y no se presenta en otro lugar. Técnicas HTML: Acceso desde el teclado. y 1. página 142. Punto de revisión: 8.2 Asegúrese de que cualquier elemento que tiene su propia interfaz pueda manejarse de forma independiente del dispositivo. Asegure la accesibilidad directa de las interfaces de usuario incrustadas. Técnicas HTML: Scripts directamente accesibles. página 128 9. Técnicas HTML: Mapas de imagen de servidor y de cliente. [Prioridad 2] Consultar la definición de independencia del dispositivo. página 137.

[Prioridad 3] Técnicas Fundamentales: Páginas alternativas. los controles de formulario y los grupos de controles de formulario. página 119. página 120. columnas envoltorio de palabras. 10. 64 técnicas . Utilice soluciones provisionales. Pauta 10. página 118. 10. página 82. página 135. [Prioridad 3] Técnicas HTML: Técnicas para controles de formulario específicos. [Prioridad 3] Técnicas HTML: Alineación de las tablas. Técnicas HTML: Applets directamente accesibles. página 144. para todos los controles de formularios con etiquetas asociadas implícitamente. no provoque apariciones repentinas de nuevas ventanas y no cambie la ventana actual sin informar al usuario. 10. página 115. asegúrese de que la etiqueta está colocada adecuadamente.2 Hasta que las aplicaciones de usuario soporten explícitamente la asociación entre control de formulario y etiqueta. [Prioridad 2] Técnicas HTML: Vínculos y objetivos. entre los vínculos contiguos. 10. página 128. Técnicas HTML: Acceso a los formularios mediante el teclado.9.3 Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) interpreten correctamente los textos contiguos.5 Proporcione atajos de teclado para los vínculos más importantes (incluidos los de los mapas de imagen de cliente). página 140. Técnicas HTML: Utilizar objetivos para FRAME. Técnicas HTML: Actualización de la página y nuevas ventanas. proporcione un texto lineal alternativo (en la página actual o en alguna otra) para todas las tablas que maquetan texto en paralelo. que no sirvan como vínculo. página 139. Técnicas HTML: Acceso desde el teclado. Puntos de revisión: 10. incluya caracteres imprimibles (rodeados de espacios). [Prioridad 2] Técnicas HTML: Etiquetas para los controles de formulario.1 Hasta que las aplicaciones de usuario permitan desconectar la apertura de nuevas ventanas. incluya caracteres por defecto en los cuadros de edición y áreas de texto.4 Hasta que las aplicaciones de usuario manejen correctamente los controles vacíos. [Prioridad 3] Técnicas HTML: Agrupar y saltar vínculos. página 137.5 Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) interpreten claramente los vínculos contiguos.

65 técnicas . proporcione un vínculo a una página alternativa que use tecnologías W3C. pero los desarrolladores de contenidos deben asegurar que las páginas generadas siempre tengan sentido y que los usuarios puedan navegar por el sitio siguiendo los vínculos de las páginas primarias. Técnicas CSS: Hojas de estilo en cascada auditivas. Una página no actualizada puede ser tan frustrante como una página inaccesible. Utilice las tecnologías y pautas de W3C. página 174. Técnicas Fundamentales: Negociación de contenidos. Utilice la negociación de contenidos donde sea posible. no puede crear una página accesible. 11. página 86. [Prioridad 1] Técnicas Fundamentales: Páginas alternativas. [Prioridad 2] Técnicas HTML: Índice de elementos y atributos HTML. Técnicas CSS: Acceso a representaciones alternativas del contenido. 11. Puntos de revisión: 11. Técnicas CSS: Tipos de medios de difusión. página 173. página 144. página 161. La generación automática de páginas alternativas puede conducir a actualizaciones más frecuentes. Técnicas CSS: Tipo de letra. después de los mayores esfuerzos. [Prioridad 2] Técnicas Fundamentales: Tecnologías que tienen en cuenta la accesibilidad. las páginas alternativas o ambas. Los desarrolladores de contenido sólo deben enviar a páginas alternativas cuando otras soluciones fallen. página 157.3 Proporcione la información de modo que los usuarios puedan recibir los documentos según sus preferencias (Por ejemplo.2 Evite características desaconsejadas por las tecnologías W3C. tenga información (o funcionalidad) equivalente y sea actualizada tan a menudo como la página (original) inaccesible. tipo de contenido. haciéndola accesible es probable que la mejore para todos los usuarios . Técnicas CSS: Permitir al usuario redefinir los estilos. 11. Nota. página 90. etc. idioma. Antes de enviar a una página alternativa. reconsidere el diseño de la página original.1 Utilice tecnologías W3C cuando estén disponibles y sean apropiadas para la tarea y use las últimas versiones que sean soportadas. la información de la página original no está disponible. página 82. sea accesible.Pauta 11. porque las páginas alternativas se actualizan con menor frecuencia que las páginas primarias.) [Prioridad 3] Nota. página 174. puesto que en ambos casos.4 Si.

2 Describa el propósito de los marcos y como éstos se relacionan entre sí. página 98. [Prioridad 1] Técnicas HTML: Proporcionar un título para cada marco (frame). página 101. página 84. Técnicas HTML: Metadatos. Proporcione mecanismos claros de navegación Puntos de revisión: 13. 13. Técnicas CSS: Proporcione pistas contextuales en las listas HTML. si no resulta obvio solamente con el título del marco. [Prioridad 2] Técnicas Fundamentales: Equivalentes textuales. [Prioridad 2] Técnicas HTML: Etiquetas para los controles de formulario.2 Proporcione metadatos para añadir información semántica a las páginas y sitios. página 165. [Prioridad 2] Técnicas HTML: Texto del vínculo. mapa del sitio o tabla de contenidos).1 Identifique claramente el objetivo de cada vínculo.5 Proporcione barras de navegación para destacar y dar acceso al mecanismo de navegación. página 117. [Prioridad 2] Técnicas Fundamentales: Navegación. página 137. 12. página 84.Pauta 12. Técnicas HTML: Describir la relación entre marcos. página 131. 12.3 Divida los bloques largos de información en grupos más manejables cuando sea natural y apropiado.[Prioridad2] Técnicas Fundamentales: Navegación. Pauta 13. página 132. [Prioridad 3] Técnicas Fundamentales: Navegación.1 Titule cada marco para facilitar su identificación y navegación de los mismos. Proporcione información de contexto y orientación Puntos de revisión: 12. 13. Técnicas HTML: Agrupar los controles dentro del formulario. página 84. 13. página 84.4 Asocie explícitamente las etiquetas con sus controles. [Prioridad 2] Técnicas Fundamentales: Navegación. 66 técnicas . 13. página 139.4 Utilice los mecanismos de navegación de forma coherente. página 80. [Prioridad 2] Técnicas HTML: Agrupación estructural. 12.3 Proporcione información sobre la maquetación general de un sitio (por ejemplo.

7 Si proporciona funciones de búsqueda. página 122. Asegúrese de que los documentos sean claros y sencillos Puntos de revisión: 14. 67 técnicas .10 Proporcione un medio para saltar sobre un dibujo ASCII art de varias líneas.9 Proporcione información sobre las colecciones de documentos (por ejemplo. Técnicas HTML: El elemento LINK y herramientas de navegación. Otro modo de crear una colección es construyendo un archivo (por ejemplo con zip. página 118. en HTML. [Prioridad 3] Técnicas HTML: Dibujos con caracteres (ASCII art) . 13. hasta que las aplicaciones de usuario lo hagan. página 84.. especifique las colecciones de documentos con el elemento LINK y los atributos "rel" y "rev". 13. tar y gzip. [Prioridad 3] Técnicas Fundamentales: Navegación. 14. etc. [Prioridad 3] Técnicas Fundamentales: Comprensión. stuffit. 13. la información que los diferencie.8 Localice al principio de los encabezamientos. listas. etc. [Prioridad 3] Técnicas HTML: Agrupar y saltar vínculos. [Prioridad 3] Por ejemplo.3 Cree un estilo de presentación que sea coherente en todas las páginas.6 Agrupe los vínculos relacionados. página 85. página 85. 14. permita diferentes tipos de búsquedas para diversos niveles de habilidad y preferencias. [Prioridad 3] Técnicas Fundamentales: Navegación. [Prioridad 3] Técnicas Fundamentales: Comprensión. Técnicas Fundamentales: Documentos empaquetados. página 84. Pauta 14. página 88.) de las páginas múltiples.13. 13. [Prioridad 1] Técnicas Fundamentales: Comprensión. identifique el grupo (para las aplicaciones de usuario) y. Técnicas CSS: Reducir el mantenimiento y aumentar la coherencia. página 157. los documentos que comprendan múltiples páginas). página 100.1 Utilice el lenguaje apropiado más claro y simple para el contenido de un sitio.2 Complemente el texto con presentaciones gráficas o auditivas cuando ello facilite la comprensión de la página. página 85. párrafos. proporcione una manera de evitar el grupo.

Consulte las Pautas de Accesibilidad para las Aplicaciones de Usuario 1. A continuación podemos ver una figura ASCII que muestra la relación entre la frecuencia de destello y la respuesta fotoconvulsiva en pacientes con los ojos abiertos y cerrados: 100 90 80 70 60 50 40 30 20 10 0 5 10 15 20 25 30 35 40 45 50 55 60 65 70 Frecuencia de parpadeo (hercios) Asistente personal digital (PDA) Un PDA es un pequeño dispositivo de informática portátil. Applet Un programa insertado en una página Web. de voz. sistemas multimedia. ampliadores de pantallas y software de reconocimiento de voz. Ampliador de pantalla Es un programa de software que amplía una parte de la pantalla. Generalmente es un instrumento de mano con una pequeña pantalla que permite la entrada desde varios orígenes. incluyendo navegadores gráficos de escritorio.0 [WAI-USERAGENT]) para información sobre desarrollo de herramientas accesibles. teléfonos móviles. Aplicación de usuario Software para acceder al contenido de la Web. La mayoría de los PDA se usan para seguir la pista de datos personales como agendas. Lo usan principalmente las personas de escasa visión. de texto. plug-ins y algún software de ayudas técnicas utilizado conjuntamente con navegadores. 68 técnicas-glosario . tales como lectores de pantalla. ".3 Glosario Accesible El contenido es accesible cuando puede ser usado por alguien con discapacidad. contactos y correos electrónicos.-)" es el emoticono de sonrisa. Por ejemplo. ASCII art Se refiere a los caracteres de texto y símbolos que son combinados para crear una imagen. para que pueda ser vista más fácilmente.

El braille dinámico presenta la hilera en tamaño que abarca desde líneas de una celda (seis u ocho puntos) hasta una línea de 80 celdas. STRONG. El resultado es una línea de braille que puede cambiar a intervalos. Contenido. los sonidos. dispositivos para agarrar. en HTML los elementos P..). maquinas lectoras. un encabezamiento de un documento. BLOCKQUOTE) que especifica la estructura del documento se denomina un elemento estructural. como braille.). Un elemento que especifica la presentación de un documento (por ejemplo. un elemento h2.. "Veleros"). La presentación de un documento es cómo éste es mostrado (por ejemplo. estructura y presentación del documento El contenido de un documento se refiere a lo que dice al usuario a través del idioma. una línea de texto centrada. eleva o baja las pautas de puntos mediante un dispositivo electrónico. un título dicho con cierto tono de voz (como una fuente auditiva). sintetizadores de voz y software de entrada de voz que opera junto con navegadores gráficos (entre otras aplicaciones de usuario). Finalmente. Un elemento (por ejemplo. etc. El contenido del encabezamiento es lo que el encabezamiento dice (por ejemplo. Diseñador de contenidos Cualquier autor de páginas o diseñador de sitios Web. Las ayudas técnicas incluyen sillas de ruedas. Braille El braille utiliza seis puntos en relieve en diferentes posiciones para representar letras y números que los ciegos leen con los dedos. como una presentación sólo texto. las animaciones. la presentación de un encabezamiento puede ser un texto en mayúsculas negritas alineada al margen. por ejemplo. B.Ayuda técnica Software o hardware que está especialmente diseñado para ayudar a personas con discapacidad para realizar sus actividades diarias. por ejemplo. 69 técnicas-glosario . La estructura de un documento es cómo se organiza de forma lógica (por ejemplo. normalmente un ordenador. las películas. Las ayudas técnicas del hardware incluyen teclados alternativos y dispositivos de apuntamiento. etc. Compatible con lo anterior Diseños que continúan funcionando con versiones anteriores de un lenguaje. como una presentación gráfica bidimensional. por capítulos. etc. como un sonido sintetizado. Consideremos. el encabezamiento es un elemento estructural marcado con. La palabra "accesible" en braille es: Un dispositivo braille. las imágenes. con una introducción y una tabla de contenidos. las ayudas técnicas más corrientes basadas en el software incluyen lectores y ampliadores de pantalla. programa. aunque los más usados tienen entre 12 y 20 celdas por línea. etc. comúnmente llamado "dispositivo dinámico braille". En el área de la Accesibilidad a la Web. En HTML.. etc. FONT. CENTER) es llamado elemento de presentación. como dibujo.

un vídeo de una persona contando una historia utilizando el lenguaje de signos como un equivalente para la historia escrita. En el contexto de este documento. el texto "Luna llena" debe transmitir la misma información que una imagen de la luna llena cuando se presenta al usuario. un equivalente debe incluir una descripción de lo que contiene (Por ejemplo. Si la imagen es parte de un vínculo y la comprensión de la imagen es crucial para conocer el objetivo del vínculo.Desaconsejado Un elemento o atributo desaconsejado es aquel que ha quedado anticuado por la aparición de nuevas construcciones. Los elementos desaconsejados quedarán obsoletos en futuras versiones de HTML. Un elemento que genera caracteres de texto que forman parte del documento es llamado elemento de texto.) también mejoran la accesibilidad para personas que no pueden acceder a la información visual o al texto 70 técnicas-glosario . una descripción auditiva de una presentación visual. estas pautas requieren equivalentes textuales para los gráficos y la información auditiva. Elemento Este documento utiliza el término "elemento" tanto en el estricto sentido de SGML (un elemento es una construcción sintáctica) como en el sentido más general de significar un tipo de contenido (tal como vídeo o sonido) o una construcción lógica (tal como un encabezamiento o una lista). STYLE y SCRIPT generan información que se procesará por las hojas de estilo o el motor del script). Por ejemplo. Por ejemplo. Para cumplir la misma función que el contenido. un equivalente también debe dar al usuario una idea de este objetivo. Equivalente Un contenido es "equivalente" a otro cuando ambos cumplen esencialmente la misma función o propósito en la presentación al usuario. dada la naturaleza de la discapacidad y el estado de la tecnología) como el contenido primario hecho para personas sin ninguna discapacidad. Puesto que un contenido textual puede ser presentado al usuario a través de un sintetizador de voz. braille o un texto mostrado visualmente. Tenga en cuenta que la información equivalente se centra en cumplir la misma función. Los autores deben evitar el uso de elementos y atributos desaconsejados. los elemento en HTML. los autores deben describir la información visual de la misma. El índice de elementos y atributos de HTML en el Documento de Técnicas indica cuáles son los elementos y atributos desfasados en HTML 4. Las aplicaciones de usuario deben continuar soportándolos en razón de la compatibilidad con lo anterior. Tenga en cuenta que algunos elementos (SGML) tienen contenido que es mostrado (por ejemplo. etc. Los equivalentes no textuales (Por ejemplo. IMG) y algunos afectan al procesamiento (por ejemplo. P. Los textos equivalentes deben ser escritos de manera que transmitan todo lo esencial del contenido. El segundo sentido enfatiza que una pauta inspirada en HTML puede aplicarse fácilmente a otro lenguaje de marcado. Proporcionar información equivalente para contenidos inaccesibles es una de las maneras principales con las que el autor puede hacer accesibles sus documentos a las personas con discapacidad. lo que parece o cómo suena el contenido). LI o TABLE). para que un usuario comprenda la información transmitida por una gráfica compleja. el equivalente debe cumplir esencialmente la misma función para la persona con discapacidad (al menos en la medida que sea posible.01. algunos son remplazados por un contenido externo (por ejemplo.

Este texto equivalente hace accesibles las presentaciones a personas sordo-ciegas y a quienes no pueden ejecutar las películas. Los desarrolladores de contenidos son instados a consultar estas páginas regularmente para actualizar la información. Una trascripción de texto compilada combina (compila) leyendas con descripciones textuales de la información visual (descripciones de la acción. como parte de prosa del documento o como un vínculo a un documento (Por ejemplo. algunas aplicaciones de usuario pueden no permitir a los usuarios desconectar los contenidos que parpadean o algunos lectores de pantalla pueden no manejar bien las tablas). útil para los lectores familiarizados. con discapacidades cognitivas o de aprendizaje y sordera. junto con "longdesc" como vínculo para una información más completa. no todas las aplicaciones de usuario o ayudas técnicas proporcionan el control de accesibilidad que el usuario requiere (por ejemplo. Las leyendas son generalmente interpretadas por superposición sobre el vídeo.. En la fecha de publicación de este documento. Hasta que las aplicaciones de usuario. lenguaje corporal. 71 técnicas-glosario . hay necesidades de accesibilidad que serían más apropiadamente satisfechas por una aplicación de usuario (incluyendo las ayudas técnicas). animaciones. gráficos y cambios de escena. cuando estamos en una habitación abarrotada). como parte del elemento del contenido (Por ejemplo. como los efectos de sonido. También pone la información a disposición de las maquinas de búsqueda. Un ejemplo de un equivalente no textual es una descripción auditiva de los elementos visuales clave de una presentación.. Dependiendo de la complejidad del equivalente. La descripción es tanto una voz humana pregrabada como una voz sintetizada (grabada o generada en el momento). Nota." requieren que los desarrolladores de contenidos proporcionen soporte adicional para la accesibilidad hasta que la mayoría de las aplicaciones de usuario tengan disponibles para sus usuarios las necesarias características de accesibilidad. Las descripciones auditivas están sincronizadas con la banda sonora de la presentación. Una trascripción de texto es un texto equivalente de una información de audio que incluye palabras habladas y sonidos no hablados. En la mayoría de los puntos de verificación. lenguaje corporal. lo cual beneficia a los sordos o duros de oído y a aquellos que no puedan percibir la parte sonora (Por ejemplo. El sitio en la Web del W3C WAI (consulte [WAI-UA-SUPPORT]) proporciona información sobre las características de accesibilidad que soportan las aplicaciones de usuario. Los puntos de verificación que contienen la frase "hasta que las aplicaciones de usuario. Las descripciones auditivas incluyen información sobre acciones. utilizando el atributo "longdesc" en HTML o con un vínculo descriptivo). útil para los nuevos lectores). gráficos y cambios de escena en la banda visual). habitualmente durante una pausa natural en la misma. etc. Una leyenda (caption) es una trascripción de texto de la banda sonora de una presentación de vídeo que está sincronizada con el vídeo y la banda sonora. No obstante. OBJECT en HTML). utilice "alt" para un equivalente abreviado. a los desarrolladores de contenidos se les pide que aseguren la accesibilidad de sus páginas y sitios. La información equivalente puede proporcionarse de varias formas. incluyendo muchos individuos ciegos.. incluyendo los atributos (Por ejemplo. un texto para el atributo "alt" en HTML y SMIL). puede ser necesaria la combinación de técnicas (Por ejemplo. El detalle de cómo y cuándo proporcionar información equivalente es parte del Documento de Técnicas ([WCAG10TECHS]).escrito..

1) y el atributo "xml:lang" en XML [XML]. Document Object Model [DOM1] y “scripting”. Por ejemplo. sección 2. En CSS ([CSS2]). lenguaje de señas americano o braille.Herramienta de creación Los editores HTML. Para información sobre herramientas accesibles en vías de desarrollo. si una aplicación de usuario soporta entradas de teclado y ratón. consultar la Pautas de Accesibilidad para Herramientas de Creación ([ATAG10]). el usuario y la aplicación de usuario de una hoja de estilo se denomina cascada. escrito o de señas como el francés. teclados. no hay una especificación de W3C que defina formalmente el DHTML. sección 8. las que generan contenidos Web desde bases de datos. creadas por los usuarios o construidas en las aplicaciones de usuario. Pauta 3. los usuarios deben poder interactuar con toda la presentación utilizando tanto el teclado como el ratón 72 técnicas-glosario . sintetizadores de voz y dispositivos braille. Imagen Cualquier presentación gráfica. Las aplicaciones de usuario deben ofrecer mecanismos de entrada y salida redundantes para cada dispositivo que sea soportado. HTML Dinámico (DHTML) DHTML es el nombre comercial aplicado a la mezcla de estándares que incluye HTML. Hoja de estilo Una hoja de estilo es un conjunto de instrucciones que especifican la presentación de un documento. dispositivos braille. aunque las siguientes pautas centran los problemas relacionados con el "scripting" y las hojas de estilo: Pauta 1. Sin embargo. Los dispositivos de entrada pueden incluir dispositivos de apuntamiento. Pueden tener tres orígenes diferentes: pueden estar escritas por los que proporcionan el contenido. japonés. son todas herramientas de creación. Por favor. Pauta 6. Los dispositivos de salida pueden incluir monitores. tenga en cuenta que el "soporte independiente del dispositivo" no significa que las aplicaciones de usuario tengan que soportar todos los dispositivos de entrada y salida. Independencia del dispositivo Los usuarios deben poder interactuar con una aplicación de usuario (y el documento que interpreta) utilizando los dispositivos de entrada y salida de su elección y acordes con sus necesidades. punteros de cabeza. Idioma Lenguaje humano hablado. las herramientas de conversión de documentos.12). Pauta 7 y Pauta 9. hojas de estilo. micrófonos y otros. la interacción entre el proveedor del contenido. Importante Una información de un documento es importante si su comprensión es crucial para la comprensión del documento. La mayoría de las pautas deben ser aplicables a aplicaciones que usan DHTML. El idioma del contenido debe ser indicado con el atributo "lang" en HTML ([HTML4].

Mapa de imagen Una imagen que ha sido dividida en zonas con acciones asociadas. Pinchar en una zona activa de un mapa de servidor genera las coordenadas que se envían al servidor. Marcador de presentación Es un marcador que realiza un efecto estilístico (más que de estructura). Las relaciones expresadas mediante una tabla pueden ser interpretadas visualmente (normalmente en una parrilla bidimensional). Lector de pantalla Es un programa de software que lee en voz alta al usuario el contenido de la pantalla. Los mapas de cliente permiten a la aplicación de usuario proporcionar retroalimentación inmediata sobre si el puntero del usuario está o no sobre una zona activa. Algunos mecanismos típicos incluyen: Barras de navegación Una barra de navegación es una colección de vínculos hacia las partes más importantes de un documento o sitio. lista (y vincula a) las secciones más importantes de un documento. generalmente. Pinchar en una zona activa provoca una acción. 73 técnicas-glosario . esa información se llama "información tabular" y las tablas se llaman "tablas de datos". Tenga en cuenta que los elementos "STRONG" y "EM" no se consideran marcadores de presentación puesto que transmiten información que es independiente de un estilo de fuente particular. la aplicación de usuario calcula en qué zona se ha pinchado y sigue el vínculo asociado a esa zona. Tablas de contenidos Una tabla de contenidos. no pintados. Cuando el usuario pincha en una zona activa del mapa de cliente. que realizará cierta acción.Información tabular Cuando las tablas se utilizan para presentar la relación lógica entre datos (texto. imágenes. Mecanismo de navegación Un mecanismo de navegación es cualquier medio por el cual un usuario puede navegar una página o sitio. Lo usan principalmente las personas ciegas. Mapas del sitio Un mapa del sitio proporciona una visión global de la organización de una página o sitio. Los desarrolladores de contenidos pueden hacer los mapas de cliente accesibles proporcionando acceso independiente del dispositivo a los mismos vínculos asociados con las zonas del mapa. etc.). auditivamente (a menudo con información de encabezamiento precediendo a las celdas) o en otros formatos. como los elementos B e I en HTML. Habitualmente los lectores de pantalla pueden leer textos que estén impresos. números.

Byrne. Editores: B.0 en http://www. Apparao. Hoschka. Robie. Los párrafos se sucederán en el mismo orden que las celdas definían en el documento original. Le Hors.w3. y deben incluir elementos estructurales (que generan párrafos. C. 24 de diciembre de 1999. Editores: J.0 Specification". 3 de febrero de 2000. Puede encontrar esta Recomendación DOM Nivel 1 en http://www. H. Jacobs.org/TR/1998/REC-CSS2-19980512/. para que la página tenga sentido tras su transformación para ser leída línea a línea Texto del vínculo Contenido textual de un vínculo. Sutor. Nicol. 21 de septiembre de 1999.org/TR/2000/REC-ATAG10-20000203/.org/TR/1998/REC-smil-19980615/. S. página abajo). por favor.0 está disponible en at http://www. Bos. etc.w3.w3.0".01 en http://www. Treviranus.org/TR/REC-CSS2.w3. [CSS2] "CSS. Wium Lie. Editor: P. 12 de mayo de 1998.org/TR/REC-DOM-Level1.org/TR/1998/REC-DOM-Level-1-19981001. Las celdas deben tener sentido cuando se lean en orden. Puede encontrar esta Recomendación CSS2 en http://www. Le Hors e I. Puede encontrar esta Recomendación SMIL 1. M. Editores: V. Editores: M.01 Recommendation". J.Tabla alineada (que puede leerse cuando su contenido se lee línea a línea) Proceso de interpretación de una tabla donde los contenidos de una celda se convierten en una serie de párrafos uno tras otro (por ejemplo.w3. Champion. Isaacs. Jacobs. S.w3. 15 de junio de 1998. La última versión de SMIL 1. La última versión de CSS2 está disponible en http://www. Jacobs y J. encabezamientos. Puede encontrar esta Recomendación HTML 4.w3. Puede encontrar esta Nota W3C en http://www. Wood.org/TR/1999/REC-html401-19991224/. I. [HTML4] "HTML 4.w3. C. I.0 en http://www. [SMIL] "Synchronized Multimedia Integration Language (SMIL) 1. Raggett. 4 Referencias Para la ultima versión de cualquier especificación W3C. Jacobs. Koivunen e I.w3.org/TR/1999/NOTE-SMIL-access-19990921/. G. [DOM1] "Document Object Model (DOM) Level 1 Specification". 74 técnicas . Lilley y I.org/TR/REC-smil. 1 de octubre de 1998. Richards. consulte la lista de Informes Técnicos de W3C (W3C Technical Reports). La última versión de DOM Nivel 1 está disponible en http://www. R. level 2 Recommendation". Wilson y L. [ATAG10] "Authoring Tool Accessibility Guidelines 1. [SMIL-ACCESS] "Accessibility Features of SMIL". A. Jacobs. listas. Puede encontrar esta Recomendación ATAG 1. A. McCathieNevile. C. Editores: D.).

0 en: http://www.org/TR/WCAG10-CORE-TECHS/. Sperberg-McQueen. La última versión de este documento [en inglés] está disponible en http://www.w3. 5 de mayo de 1999. G.org/TR/UAAG10/. [SVG-ACCESS] "Accessibility Features of SVG". [UAAG10] "User Agent Accessibility Guideline". [XML] "Extensible Markup Language (XML) 1.0. G. La última versión de este documento [en inglés] está disponible en http://www.0 Specification".org/TR/1998/REC-xml-19980210.w3.org/TR/REC-xml. Jacobs. La última versión de XML 1. Paoli. Editores: J. Vanderheiden e I. Editores: W. G. Puede encontrar esta Nota de W3C en http://www.w3.w3.org/TR/WCAG10-HTML-TECHS/.w3.w3. Chisholm.0 [en inglés] en http://www. Vanderheiden e I. Chisholm. La última versión de User Agent Accessibility Guidelines está disponible en http://www. McCathieNevile y M. 2 de agosto de 2000. Puede encontrar esta Recomendación XML 1.org/TR/2000/NOTE-SVG-access-20000807. Editores: W. Editores: W. Jacobs. Chisholm. 7 de agosto de 2000. [WCAG10] "Web Content Accessibility Guidelines 1. Gunderson e I.[SVG] "Scalable Vector Graphics (SVG) 1.0 está disponible en http://www. 10 de febrero de 1998. G. Editores: C. Koivunen. 75 técnicas . Jacobs. Vanderheiden e I.0". Chisholm. Vanderheiden e I.0". [WCAG10-HTML-TECHNIQUES] "HTML Techniques for Web Content Accessibility Guideliness 1.". Editor: J. Jacobs.w3.org/TR/WCAG10-CSS-TECHS/.0". Editores: T. Puede encontrar este documento Candidato a Recomendación W3C en http://www.0". Jacobs.org/TR/2000/CR-SVG-20000802/. Ferraiolo.org/TR/1999/WAI-WEBCONTENT-19990505/. J. Puede encontrar esta Recomendación WCAG 1. La última versión de este documento [en inglés] está disponible en http://www. Editores: W. C. [WCAG10-CORE-TECHNIQUES] "Core Techniques for Web Content Accessibility Guidelines 1.w3. Bray.M. [WCAG10-CSS-TECHNIQUES] "CSS Techniques for Web Content Accessibility Guidelines 1.w3.

5.1 Otras Pautas [UWSAG] "The Unified Web Site Accessibility Guidelines". Murray Maloney. Robert Savellis. Charles McCathieNevile. Chetz Colwell. Michael Pieper.V. Geoff Freed. Eric Hansen. Al Gilman. Masafumi Nakane. Mark Novak. Kevin Carey. 5. Liam Quinn. Phill Jenkins. William Loughborough. Larry Goldberg. Dave Raggett. Las referencias a estos productos no suponen un respaldo a los mismos. [WAI-UA-SUPPORT] User Agent Support for Accessibility 5 Agradecimientos Co-directores del Grupo de Trabajo para las Pautas de Contenido: Jason White. T.S. Greg Rosmaita. Trace Research and Development Contacto con el equipo W3C: Wendy Chisholm Nuestro agradecimiento a las siguientes personas que han contribuido con su tiempo y sus valiosos comentarios a dar forma a estas pautas: Harvey Bingham. Estas referencias están incluidas por su pertinencia y utilidad. Raman. Jon Gunderson. David Pawson. Steve Tyler y Jaap van Lelieveld 76 técnicas . Scott Luebking. Leonard Kasday. Jutta Treviranus. Chisholm. Vanderheiden y W. Dept. Marja-Riitta Koivunen.2 Aplicaciones de usuario y otras herramientas El sitio de WAI en la Web mantiene una lista de navegadores Web alternativos (ayudas técnicas y otras aplicaciones de usuario diseñadas para la accesibilidad). Charles Oppermann. Mike Paciello. The Unified Web Site Guidelines fue compilado por Trace R & D Center en la Universidad de Wisconsin con financiación del National Institute on Disability y Rehabilitation Research (NIDRR). MegaZone (Livingston Enterprises). Chuck Letourneau. Neal Ewers. Editores: G. Universidad Melbourne Gregg Vanderheiden. of Education. que se encuentran fuera de su control. Josh Krieger. U.5 Recursos Nota: W3C no puede garantizar la persistencia de cualquiera de las siguientes referencias. George Kerscher.

0 .técnicas fundamentales para las pautas de accesibilidad al contenido en la web 1.

pero estas técnicas no garantizan la adecuación ni son la única forma de que un autor pueda producir contenido adecuado. que pueden evolucionar de forma independiente. Está disponible en la web de W3C el acceso al “histórico de cambios en la serie de documentos”. En tanto que la Recomendación "Pautas de Accesibilidad al Contenido en la Web 1. La lista de errores conocidos de este documento está disponible en "Errores en las Pautas de Accesibilidad al Contenido en la Web".0" ("Web Content Accessibility Guidelines 1. Esta Nota no ha sido revisada ni suscrita por los Miembros de W3C. producidas y suscritas por el Grupo de Trabajo de las Pautas de Accesibilidad al Contenido en la Web (WCAG WG). Animamos a los lectores a comentar el documento y proponer soluciones a los temas actuales. Los 78 técnicas fundamentales . W3C.WAI del Consorcio World Wide Web W3C tiene disponibles una variedad de recursos sobre accesibilidad en la Web.Nota de 6 noviembre de 2000 de W3C Editores: Wendy Chisholm. La versión en inglés de esta especificación es la única versión normativa. se espera que esta serie de documentos conjuntos evolucione según cambian las tecnologías y los desarrolladores de contenidos descubren técnicas más efectivas para el diseño de contenido Web accesibles. W3C Resumen técnicas fundamentales para las pautas de accesibilidad al contenido en la web 1. University of Wisconsin -. La versión de 6 de noviembre 2000 de este documento es una Nota.org.0 Este documento describe las técnicas para crear contenido accesible que pueda aplicarse con cualquier tecnología. Gregg Vanderheiden. informe sobre los errores en este documento a wai-wcag-editor@w3. Los documentos específicos para cada tecnología permiten a los autores centrarse en una tecnología concreta.org.0" ("Web Content Accessibility Guidelines 1. Este documento es parte de una serie de documentos sobre técnicas para crear contenidos accesibles para la Web. Pueden estar disponibles traducciones de este documento. Está destinado a ayudar a los autores de contenido en la Web. La Iniciativa para la Accesibilidad en la Web . Ian Jacobs. envíe los comentarios detallados sobre este documento al Grupo de Trabajo a w3c-wai-gl@w3. Los temas del documento anterior han sido separados en documentos para cada tecnología específica. Por favor.0). Trace R & D Center. están disponibles los archivos públicos (public archives).0" [WCAG10-TECHS]. por favor recurra al "Técnicas para las Pautas de Accesibilidad al Contenido en la Web 1. Estatus de este documento Esta versión se publica para corregir algunos enlaces desfasados de la versión anterior. Por favor.Madison. Las Pautas de Accesibilidad WAI son producidas como parte de la Actividad Técnica de la WAI.0") ([WCAG10]). Las técnicas de este documento pueden ayudar a los autores de contenido en la Web a adecuarse a las "Pautas de Accesibilidad al Contenido en la Web 1.0" ("Web Content Accessibility Guidelines 1. Para información sobre otros documentos de la serie. La serie de documentos sustituye al documento único (Nota del 5 de mayo de 1999 Técnicas para las Pautas de Accesibilidad al Contenido en la Web 1. así como la “lista de temas abiertos y cerrados”. que desean declarar su adecuación a las "Pautas de Accesibilidad al Contenido en la Web 1.0" Recommendation) [WCAG10] es un documento estable.0"). perteneciente a una serie.

está diseñado para identificar 79 técnicas fundamentales . los desarrolladores deberían usar los elementos de encabezamiento (H1 . [Prioridad 2] 3. a menos que la tabla tenga sentido cuando se transcriba línea a línea. Por ejemplo. asegúrese de que los manejadores de evento sean independientes del dispositivo de entrada. en HTML. incluido un aumento de la accesibilidad. los desarrolladores de contenidos deben esforzarse en identificar la estructura que desean dar a sus documentos.3 No utilice tablas para maquetar. pero no deben ser reemplazados por ellos.4 Para los scripts y applets. no utilice marcadores estructurales para realizar un efecto visual. aunque el elemento BLOCKQUOTE puede crear sangrías de texto en algunos navegadores. [Prioridad 2] 6. proporcione una alternativa equivalente (la cual debe ser una versión linearizada). en HTML.1 Asegúrese que toda la información transmitida a través de los colores también esté disponible sin color. [Prioridad 1] 3. una línea horizontal no significa prácticamente nada.3 Utilice hojas de estilo para controlar la maquetación y la presentación. por ejemplo mediante el contexto o por marcadores. Estos pueden ser complementados con indicaciones visuales o de otro tipo tales como líneas horizontales. [Prioridad 2] 5. Esto puede ser cierto para usuarios con una visión normal. antes de pensar en cómo se presentarán los mismos al usuario. Por ejemplo. use marcadores en vez de imágenes para transmitir la información.1 Cuando exista un marcador apropiado. Por ejemplo. Está disponible una lista de las actuales Recomendaciones y otros documentos técnicos de W3C.01[HTML4] para identificar nuevas secciones. Por otro lado. [Prioridad 2] 3. [Prioridad 2] 5.4 Si se utiliza una tabla para maquetar. A la inversa también: los desarrolladores no deben usar elementos estructurales para lograr efectos de presentación. muchos desarrolladores consideran que una línea horizontal comunica una división estructural.H6) de HTML 4. pero para usuarios sin visión o sin navegadores gráficos. en primer lugar. [Prioridad 2] 3. facilidad de gestión y portabilidad. 1 Estructura contra presentación Puntos de revisión en esta sección: 2. [Prioridad 2] Cuando se diseña un documento o una serie de documentos. Distinguir la estructura del documento de la forma en que se presenta el contenido ofrece varias ventajas.objetivos del Grupo de Trabajo de las Pautas de Accesibilidad al Contenido en la Web están descritos en los estatutos.5 Utilice elementos de encabezado para transmitir la estructura lógica y utilícelos de acuerdo con la especificación.6 Marque correctamente las listas y los ítems de las listas. La identificación de lo que es estructura y lo que es presentación puede ser un reto a veces. si la tabla no tiene sentido.

Un encabezamiento de primer nivel aparece en tal modo porque el navegador reconoce la etiqueta H1. "applets" y objetos programados. imágenes usadas como viñetas en las listas. etc. marcos. sonidos. Durante el diseño de un documento que contenga información no textual (imágenes. [Prioridad 1] 1. Esto incluye: imágenes. representaciones gráficas del texto. busque abreviaturas. [Prioridad 1] 1. este enfoque no funcionará. espaciadores. agrandado. "longdesc" o en el contenido del elemento). proporcione vínculos en formato texto redundantes para cada zona activa del mapa de imagen de cliente. Para determinar la estructura dentro de las frases. puesto que los documentos XML no tienen fijadas etiquetas. GIFs animados). navegadores no visuales y lectores braille. que esperan que el elemento se utilice para señalar una cita. Puede ser presentado visualmente. Tal como afirma la Norman Walsh en "A Guide to XML" [WALSH]. De nuevo. si no resulta obvio solamente con el título del marco. cree una vista esquema de su documento. [Prioridad 2] El texto se considera accesible para prácticamente todos los usuarios si puede ser manejado por lectores de pantalla. programados con el soporte HTML incrustado.una cita. a través de "alt". Nota: Este test rápido se aplica a la estructura de capítulo. scripts. 80 técnicas fundamentales . no para crear efectos secundarios de presentación.2 Proporcione vínculos redundantes en formato texto para cada zona activa de un mapa de imagen del servidor. botones gráficos. 2 Equivalentes textuales Puntos de revisión en esta sección: 1. banda sonora del vídeo y vídeos. animaciones (por ejemplo. Cada punto de la jerarquía denota un cambio estructural. Utilice etiquetas estructurales para marcar esos cambios y etiquetas de presentación para hacerlos más aparentes visual o auditivamente. sección y párrafo. applets. Observe que las líneas horizontales no aparecerán en esta vista esquema y por tanto no son estructurales sino de presentación.). complemente esa información con textos equivalentes siempre que sea posible. La separación de presentación y estructura es inherente a los documentos XML. mapas de imagen. definiciones e ítems de lista. ¡Test rápido! Para determinar si el contenido es estructural o de presentación. cambios en el idioma. sincronizado con un vídeo para crear un subtítulo. etc. La presentación de un documento XML depende de una hoja de estilo. Los elementos BLOCKQUOTE usados para sangrías confunden a los usuarios y los robots de búsqueda. [Prioridad 3] 12. sonidos (ejecutados con o sin interacción del usuario).1 Proporcione un texto equivalente para todo elemento no textual (por ejemplo. Los navegadores HTML son. "ascii art".2 Describa el propósito de los marcos y como éstos se relacionan entre sí. en su mayoría. presentaciones multimedia. archivos exclusivamente auditivos.5 Hasta que las aplicaciones de usuario interpreten el texto equivalente para los vínculos de los mapas de imagen de cliente.

Cuando se presente al usuario un equivalente textual, éste cumple esencialmente la misma función (en la medida de lo posible) que el contenido original. Para contenidos simples, un equivalente textual puede sólo necesitar describir la función o propósito del contenido. Para contenidos complejos (gráficas, gráficos, etc.) el texto equivalente puede ser más largo e incluir información descriptiva. Deben proporcionarse textos equivalentes para los logotipos, fotografías, botones de envío, applets, viñetas en listas, ASCII art y en todos los vínculos contenidos en un mapa de imagen, así como en las imágenes invisibles usadas para maquetar una página. ¡Test rápido! Un buen test para determinar si un texto equivalente es útil es imaginar que se está leyendo en voz alta el documento por teléfono. ¿Qué diría sobre lo que encuentra en esta imagen para hacerla comprensible al interlocutor?

2.1 Panorámica de las tecnologías
Cómo se ha de especificar un texto equivalente dependerá del lenguaje del documento. Por ejemplo, dependiendo del elemento, HTML permite al desarrollador especificar textos equivalentes a través de atributos ("alt" o "longdesc") o en el contenido del elemento (el elemento "OBJECT"). Los formatos de vídeo, como QuickTime, permiten al desarrollador incluir una variedad de bandas visuales y sonoras alternativas. SMIL ([SMIL]) permite al desarrollador sincronizar trozos (clips) de imagen y sonido, y archivos de texto alternativos entre si. Cuando cree DTDs XML, asegúrese de que los elementos que podrían necesitar una descripción tienen alguna manera de asociarse por sí mismos a dicha descripción. Algunos formatos de imagen permiten texto interno en el archivo de datos junto con la información de la imagen. Si un formato de imagen soporta este texto (por ejemplo, Portable Network Graphics, ver [PNG]), los desarrolladores de contenidos también pueden proporcionar información allí.

2.2 Compatibilidad con lo anterior
Los desarrolladores de contenidos deben tener en consideración la compatibilidad con lo anterior cuando diseñen páginas o sitios Web, puesto que: • Algunas aplicaciones de usuario no soportan algunas características HTML. • Las personas pueden usar navegadores o reproductores de vídeo antiguos. • Pueden surgir problemas de compatibilidad entre programas. Por tanto, cuando se diseñe para tecnologías más antiguas, considere estas técnicas: • Proporcione textos equivalentes dentro de la línea de código. Por ejemplo, incluir una descripción de la imagen inmediatamente después de la misma.

81

técnicas fundamentales

• Proporcione vínculos hacia textos equivalentes extensos, ya sea en un archivo distinto o en la misma página. Estos son denominados vínculos descriptivos o "vínculos-d". El texto del vínculo debería explicar que éste apunta a una descripción. Donde sea posible, también debería explicar la naturaleza de la descripción. No obstante, los desarrolladores de contenido preocupados por el modo en que el vínculo descriptivo puede afectar a la apariencia visual de las páginas, pueden usar vínculos de texto más discretos tales como "[D]", lo cual es recomendado por NCAM (consultar [NCAM]). En este caso, también deberían proporcionar más información sobre el destino del vínculo, de modo que los usuarios puedan distinguir entre distintos vínculos que comparten todos el mismo texto "[D]" como contenido (por ejemplo, mediante el atributo "title" en HTML).

3 Páginas alternativas
Puntos de revisión en esta sección: 11.4 Si, después de los mayores esfuerzos, no puede crear una página accesible, proporcione un vínculo a una página alternativa que use tecnologías W3C, sea accesible, tenga información (o funcionalidad) equivalente y sea actualizada tan a menudo como la página (original) inaccesible. [Prioridad 1] 6.5 Asegúrese de que los contenidos dinámicos son accesibles o proporcione una página o presentación alternativa. [Prioridad 2] Si bien es posible hacer accesible la mayor parte del contenido, puede ocurrir que toda o parte de una página permanezca inaccesible. Algunas técnicas adicionales para crear alternativas accesibles incluyen: 1. Permita al usuario navegar a otra página diferente que sea accesible, que contenga la misma información que la página inaccesible y que sea actualizada con la misma frecuencia que la página inaccesible. 2. En lugar de páginas alternativas estáticas, sitúe en el servidor scripts que generen versiones accesibles de la página solicitada. 3. Consulte los ejemplos para Marcos y Scripts. 4. Proporcione un número de teléfono, fax, dirección de correo electrónico o postal donde la información esté disponible y accesible, preferentemente las 24 horas del día. He aquí dos técnicas para vincular a una página accesible: 1. Proporcione vínculos al principio tanto de la página principal como de la alternativa, para permitir al usuario moverse entre ellas. Por ejemplo, al principio de una página gráfica incluya un vínculo con la página sólo-texto, y en el principio de ésta incluya un vínculo hacia la página gráfica. Asegúrese de que estos vínculos son una de las primeras cosas que el usuario va a percibir, situándolo al principio de la página, antes que otros vínculos. 2. Use meta-información para diseñar documentos alternativos. Los navegadores deberían presentar la página alternativa automáticamente basándose en el tipo y preferencias del navegador del usuario.

82

técnicas fundamentales

Puntos de revisión en esta sección: 9.2 Asegúrese de que cualquier elemento que tiene su propia interfaz pueda manejarse de forma independiente del dispositivo.[Prioridad 2] 9.3 Para los "scripts", especifique manejadores de evento lógicos en vez de manejadores de evento dependientes de dispositivos. [Prioridad 2] 9.4 Cree un orden lógico para navegar con el tabulador a través de vínculos, controles de formulario y objetos. [Prioridad 3] 9.5 Proporcione atajos de teclado para los vínculos más importantes (incluidos los de los mapas de imagen de cliente), los controles de formulario y los grupos de controles de formulario. [Prioridad 3] No todos los usuarios tienen un entorno gráfico con un ratón u otro dispositivo para apuntar. Algunos usuarios dependen del teclado, teclado alternativo o entrada de voz para navegar entre vínculos, activar los controles de formulario, etc... Los desarrolladores de contenido deben asegurarse de que los usuarios puedan interactuar con una página mediante otros dispositivos que los dispositivos para apuntar. Una página diseñada para el acceso desde el teclado (además del acceso con ratón) será normalmente accesible a los usuarios con otros dispositivos de entrada. Aun más, diseñar una página para el acceso a través del teclado mejorará también habitualmente el conjunto de su diseño. El acceso desde el teclado a los vínculos y los controles de formulario puede ser especificado de varias maneras: Vínculos en los mapas de imagen. Proporcione textos equivalentes para cada área de los mapas de imagen de cliente, o proporcione vínculos redundantes en formato texto para los mapas de imagen del lado del servidor. Consultar los ejemplos de la sección de mapas de imagen. Atajos de teclado. Proporcione atajos de teclado de forma que los usuarios puedan combinar pulsaciones de teclas para navegar los vínculos o los controles de formulario en una página. Nota: Los atajos de teclado - especialmente la tecla utilizada para activar el atajo - pueden ser implementados de forma diferente por los diferentes sistemas operativos. En ordenadores Windows, las teclas "alt" y "ctrl" son las más utilizadas, mientras que con los de Macintosh, es la tecla "manzana" ("apple") o "trébol". Consulte las secciones acceso desde el teclado a los vínculos y acceso desde el teclado a los formularios para ver ejemplos. Orden de tabulación. El orden de tabulación describe un orden (lógico) para navegar de vínculo a vínculo o de control de formulario a control de formulario (habitualmente presionando la tecla de tabulación "tab", de aquí el nombre). Consultar ejemplos en la sección Acceso desde el teclado a los formularios.

83

técnicas fundamentales

aumentará la probabilidad de que el usuario consiga la información que busca en un sitio. [Prioridad 3] 13. Esto ayuda a las personas con discapacidad para el aprendizaje y la lectura. En tales casos. Es crucial que las descripciones y guías de los sitios sean accesibles. Si un sitio es en sí mismo altamente visual. [Prioridad 2] Un estilo de presentación coherente entre las páginas permite a los usuarios localizar los mecanismos de navegación más fácilmente. esto aumentará la probabilidad de que la gente encuentre la información en un sitio o la evite si así lo desean.3 Cree un estilo de presentación que sea coherente en todas las páginas. [Prioridad 2] 13. 4 Navegación Puntos de revisión en esta sección: 14. pues los usuarios que se han perdido en un sitio dependerán mucho de ellos.4 Utilice los mecanismos de navegación de forma coherente. los desarrolladores deben proporcionar equivalentes alternativos con interfaces accesibles si los propios objetos importados no los proporcionan.2 Proporcione metadatos para añadir información semántica a las páginas y sitios. Ejemplos de estructuras que pueden aparecer en el mismo lugar en distintas páginas: 1. resultaría más difícil navegar por la estructura si el usuario no puede hacerse un mapa mental de hacia dónde se dirige o dónde ha estado. mapas del sitio y funciones de búsqueda. Si la navegación es mas predecible. publicidad Un mecanismo de navegación crea un conjunto de caminos que el usuario puede seguir en un sitio.7 Si proporciona funciones de búsqueda. [Prioridad 2] 13.3. permita diferentes tipos de búsquedas para diversos niveles de habilidad y preferencias. Para ayudarlo. [Prioridad 3] 13. [Prioridad 3] 13. los desarrolladores de contenidos deberían describir los mecanismos de navegación.5 Proporcione barras de navegación para destacar y dar acceso al mecanismo de navegación. barras de navegación 2.1 Control independiente del dispositivo para interfaces incrustadas Algunos elementos importan objetos (por ejemplo applets o reproductores multimedia) cuyas interfaces no pueden ser controladas a través del lenguaje de marcado. mapa del sitio o tabla de contenidos). El hecho de proporcionar barras de navegación. 84 técnicas fundamentales . pero también facilita la navegación a todos los usuarios. contenido básico de una página 3. pero también permite saltar más rápidamente los mecanismos de navegación para encontrar los contenidos más importantes.3 Proporcione información sobre la maquetación general de un sitio (por ejemplo.

1 Estilo de redacción Las siguientes sugerencias sobre estilos de redacción podrían ayudar a hacer el contenido de un sitio más fácil de leer para todos. como a los que usan sintetizadores de voz. [Prioridad 3] 14.1 Utilice el lenguaje apropiado más claro y simple para el contenido de un sitio. Sitúe el contenido básico al principio de la frase o párrafo (esto es denominado "colocación inicial"). significa habitualmente que el usuario salta de encabezamiento a encabezamiento. 5. 4. búsquedas por similitud. párrafos. Limítese a un concepto principal por párrafo. y escucha sólo las palabras suficientes como para establecer si el fragmento de información (encabezamiento. o de párrafo a párrafo. y de cuánto sepa sobre el tema. 5 Comprensión Puntos de revisión en esta sección: 14.2 Complemente el texto con presentaciones gráficas o auditivas cuando ello facilite la comprensión de la página. las características de búsqueda pueden también ayudar a los usuarios a localizar el contenido más rápidamente. [Prioridad 1] 13. ofrecer alternativas de "la mejor opción". Prefiera las palabras de uso común. Ello ayudará tanto a la gente que está mirando superficialmente.) le interesa. Los mecanismos de búsqueda deberían incluir un revisor de ortografía.Cuando proporcionan funcionalidad en la búsqueda. Los usuarios con dificultades para deletrear o los no familiarizados con el idioma del sitio. en lugar de tener que leerla con detalle. tendrán dificultades para encontrar lo que necesitan si la búsqueda requiere una ortografía perfecta. listas. "Hojear". Esfuércese para que los encabezamientos y las descripciones de los vínculos sean claras y precisas. utilice "empezar" mejor que "principiar" o "intentar" mejor que "procurar". La mayoría de las buscadores piden al usuario que introduzca palabras clave para buscar términos. Ello incluye utilizar como vínculos frases concisas que tengan sentido cuando se lean fuera del contexto o como parte de una serie de vínculos (algunos usuarios navegan saltando de vínculo a vínculo y leyendo sólo el texto de estos vínculos). y especialmente para las personas con discapacidades para la lectura y/o cognitivas. 2. Dependiendo de lo que el usuario esté buscando. etc. [Prioridad 3] Las secciones siguientes exponen técnicas para facilitar la comprensión de una página o sitio. aplicado a la voz. la información que los diferencie. jergas y significados particulares de palabras comunes. a no ser que las defina en el propio documento. Evite el uso de argot. 1. párrafo.8 Localice al principio de los encabezamientos. Por ejemplo. Muchas guías (incluyendo [HACKER]) exponen éstos y otros aspectos del estilo de redacción con más detalle. los desarrolladores de contenidos deberían ofrecer mecanismos de búsqueda que satisfagan diferentes niveles de habilidad y distintas preferencias. de forma que los usuarios puedan revisar rápidamente una página para hallar la información. etc. Si la idea principal del párrafo está en medio o al final del mismo.etc. 3. Utilice encabezamientos informativos. búsquedas mediante preguntas. vínculo. 85 técnicas fundamentales . 5. los usuarios de sintetizadores de voz tendrán que escuchar casi todo el documento para encontrar lo que buscan.

Por ejemplo. Para ayudar a determinar si su documento es fácil de leer.) [Prioridad 3] Hay varias estrategias para permitir al usuario seleccionar el contenido apropiado: 1. Shakespeare. el vínculo "Ver la versión francesa de este documento" vincula con la versión en francés.3 Proporcione la información de modo que los usuarios puedan recibir los documentos según sus preferencias (Por ejemplo. proporcione la versión francesa de un documento a los clientes que la piden en francés. Utilice verbos en su forma activa mejor que en pasiva. 3. etc.6. El índice Fog medio de los periódicos Time. discursos hablados o efectos sonoros pueden también ayudar a los no-lectores que pueden percibir presentaciones auditivas. utilice "type" y "hreflang"). Incluya vínculos a otra versiones del contenido. tenga en cuenta que las presentaciones multimedia no siempre hacen el texto más comprensible. tales como traducciones. idioma. Un esquema de los datos complejos. Por ejemplo. La lengua de signos es muy diferente de los idiomas verbales. Como demuestra el ejemplo. contemple la posibilidad de usar el índice de dificultad de lectura ("Fog") de Gunning (descrito en [SPOOL] con ejemplos y el algorítmo en [TECHHEAD]). Newsweek y Wall St. los equivalentes multimedia (no textuales) pueden ayudar a facilitar la comprensión. 3. Mark Twain y la Guía de Televisión tienen todos un índice Fog de alrededor de 6. tipo de contenido. 86 técnicas fundamentales . Este algoritmo generalmente produce una puntuación menor cuando el contenido es más fácil de leer. en HTML. Si bien el texto puede convertirse en discurso a través del sintetizador de voz. Journal es de alrededor de 11. Indique el tipo de contenido o el idioma a través de marcadores (por ejemplo. 2. No obstante. no son capaces de leer inglés americano. Utilice la negociación del contenido para proporcionar el contenido según lo solicite el cliente.2 Equivalentes multimedia Para las personas que no leen bien o que no leen en absoluto. tales como las cifras de negocios del año fiscal anterior. Una traducción del texto a una presentación animada en lengua de signos.: Indices de dificultad de lectura(”fog”). * N. Los algoritmos publicados para estos indices citados en el documento tiene mayor validez para el inglés que para el castellano. la Biblia. algunas personas que pueden comunicarse a través del lenguaje de señas americano. 7. Los sonidos pre-grabados de música.T. 2. Por ejemplo. 6 Negociación del contenido Puntos de revisión en esta sección: 11. Ejemplos de multimedia que complementan al texto: 1. los cambios del tono de la voz del discurso grabado proporcionan información que con el sintetizador de voz se pierde.* 5. debido a la diferente estructura gramatical de ambos idiomas. Evite frases de estructura complicada. En ocasiones pueden hacerlo más confuso.

no utilice marcadores para redirigir las páginas automáticamente. los desarrolladores de contenidos crean páginas que se renuevan o cambian sin que lo pida el usuario. Las más modernas aplicaciones de usuario deberían desactivar la actualización y sustituirla por un vínculo a la nueva información en el principio de la página. Los ataques pueden ser provocados por vibraciones o destellos de frecuencia entre 4 y 59 destellos por segundo (hertzios). puede ser aplicado a documentos que no sean HTML y puede ser utilizado por aplicaciones que sólo solicitan una petición de HEAD (por ejemplo.1 Hasta que las aplicaciones de usuario permitan controlarlo. evite provocar destellos en la pantalla. no cree páginas que se actualicen automáticamente de forma periódica.5 tratan problemas con las aplicaciones de usuario antiguas.5 Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener el redireccionamiento automático.0" [WCAG10-TECHS]). con una cumbre de sensibilidad en 20 destellos por segundo. Esta actualización automática puede resultar muy desorientadora para algunos usuarios. Nota. En lugar de ello. 8 Destello en la pantalla Puntos de revisión en esta sección: 7. Del mismo modo. lo cual no puede ser dado con una actualización desde los META. Sustituir la página que sería redirigida por una página estática que contenga un vínculo normal a la nueva página. los códigos de estado del tipo 30x proporcionan información del tipo "traslado permanente" ("moved permanently") o "traslado temporal" ("moved temporarily"). así como cambios rápidos de la oscuridad a la luz (como las luces estroboscópicas). 2. [Prioridad 1] Una pantalla parpadeante o con destello puede provocar ataques en usuarios con epilepsia fotosensitiva. configure el servidor para que ejecute esta posibilidad. los desarrolladores de contenidos deben evitar causar destello de la pantalla. los autores deberían (en orden de preferencia): 1. 87 técnicas fundamentales . [Prioridad 2] 7.0" ("Techniques for Web Content Accessibility Guidelines 1.7 Actualización automática de la página Puntos de revisión en esta sección: 7.4 como en el 7. Es preferible utilizar encabezamientos HTTP porque reduce el tráfico de Internet y el tiempo de descarga. los revisores de vínculos). [Prioridad 2] A veces. Tanto el punto de revisión 7.Configurar el servidor para que utilice el código de estatus HTTP apropiado (301). En su lugar. por eso. Encontrará ejemplos desaconsejados en el documento "Técnicas para las Pautas de Accesibilidad al Contenido en la Web 1.4 Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener las actualizaciones.

Estas pruebas deberían resaltar la mayoría de los temas de accesibilidad y son valiosas para reducir un gran número de barreras de accesibilidad. algunos validadores pueden advertirle de algunos problemas de accesibilidad basados sólo en la sintaxis (por ejemplo. algunos validadores pueden hacerle preguntas y conducirle a aspectos más subjetivos del análisis. HTML. Una sintaxis correcta ayudará a eliminar parte de los problemas de accesibilidad. Un servicio de validación de hojas de estilo. Así pues. todavía encuentra que su página no es accesible. puesto que el programa procesará más fácilmente los documentos bien formados. Tenga en cuenta. Por ejemplo. tar y gzip y StuffIt para crear el paquete. [Prioridad 3] Los documentos empaquetados pueden facilitar la lectura sin conexión. una de las estrategias recomienda que el desarrollador de contenidos observe a personas con diferentes discapacidades mientras intentan usar una página o sitio. • Utilice herramientas de archivo tales como zip. En situaciones reales. Superar estas pruebas no garantiza su adecuación a las "Pautas de Accesibilidad al Contenido en la Web 1. no simulan la experiencia integral que un usuario con discapacidad podría tener. tal como Bobby (consultar [BOBBY]). CSS. los documentos que comprendan múltiples páginas). Nota. como el Servicio de validación de HTML de W3C (consultar [HTMLVAL]). Algunos ejemplos de validadores automáticos incluyen: 1. Para crear un paquete coherente: • Utilice metadatos para describir la relación entre los componentes del paquete (consultar metadatos del vínculo para HTML). 10 Validación Esta sección comenta estrategias y técnicas para revisar los documentos Web y determinar los temas de accesibilidad que han sido resueltos y los que no. XML). como el Servicio de validación de CSS de W3C (consultar [CSSVAL]) 88 técnicas fundamentales . Por tanto. Si después de completar las siguientes pruebas y reajustar su diseño conforme a ellas. algunas de estas estrategias de comprobación sólo reproducen condiciones causadas por una discapacidad. sus páginas pueden ser menos manejables de lo que esperaba. 3. pero el texto puede ser inexacto o insuficiente. que una correcta sintaxis no garantiza que el documento será accesible.9 Proporcione información sobre las colecciones de documentos (por ejemplo.9 Documentos empaquetados Puntos de revisión en esta sección: 13. Una herramienta automatizada de validación de la accesibilidad.1 Validadores automáticos Un validador puede verificar la sintaxis de sus páginas (por ejemplo. No obstante. 10. usted puede proporcionar un texto equivalente para una imagen de acuerdo con las especificaciones lingüísticas. Un servicio de validación HTML. no obstante. Igualmente. 2. un documento que haya perdido un atributo o propiedad importante para la accesibilidad). probablemente debería crear una página alternativa que sea accesible.0".

los sonidos y la funcionalidad. El Grupo de Trabajo de Evaluación y Reparación de WAI ([WAI-ER]) está trabajando para desarrollar una batería de herramientas que ayuden a los autores no sólo a identificar los problemas.10. sin ratón. Por tanto: 1. 10. Utilice otras herramientas. programas de ampliación. Revise sus páginas con un navegador sólo-texto como Lynx ([LYNX]) o un simulador de Lynx como el Lynx Viewer ([LYNXVIEW]) o Lynx-me ([LYNXME]). Utilice varios navegadores gráficos con: sonidos e imágenes cargadas. Con la variedad de aplicaciones de usuario que existen. un teclado de pantalla. 3. Nota: Algunos sistemas operativos o navegadores no permiten la instalación múltiple de navegadores en la misma máquina. Así ayudará a incrementar la comprensión de su página. 10. hojas de estilo y applets no cargados. scripts. sonidos no cargados. indican qué aspectos hay que resolver y. ofrecen ejemplos de cómo resolverlos.imágenes no cargadas. 89 técnicas fundamentales . sino a resolverlos interactivamente. También puede ser difícil encontrar programas antiguos de navegación.4 Revisión ortográfica y gramatical Una persona que lea una página con un sintetizador de voz. marcos. Normalmente no ayudan al autor a afrontar cada problema y resolverlo modificando el documento de forma interactiva. un dispositivo pequeño. un teclado alternativo. diferentes usuarios tendrán experiencias muy distintas con la Web. tales como un navegador por voz (por ejemplo [PWWEBSPEAK] y [HOMEPAGEREADER]).3 Casos de usuarios Tenga en cuenta que la mayoría de las aplicaciones de usuario (navegadores) y sistemas operativos permiten a los usuarios cambiar la configuración. 4. 2. un lector de pantalla (por ejemplo [JAWS] y [WINVISION]). Utilice varios navegadores antiguos y nuevos. etc. puede ser incapaz de comprender la interpretación del sintetizador de una palabra con errores ortográficos. Los revisores gramaticales ayudan a asegurar que el texto de su página es correcto. a menudo. Ello ayudará a los lectores cuya lengua materna no es la del documento y los que están todavía aprendiendo el idioma del documento.2 Herramientas de corrección Los validadores. normalmente. Para más información sobre una lista detallada de ayudas técnicas utilizadas para acceder a la Web consulte ([ALTBROWSERS]). Nota: Si un sitio Web es usable con uno de estos productos esto no es garantía de que sea usable con otros productos.

13 Audio y vídeo Sin contenido Sección 13 sin contenido. han sido construidas con características de accesibilidad. • PNG para gráficos (aunque algunos se presentan mejor en JPG. Breve panorámica de las actuales tecnologías W3C: • MathML para ecuaciones matemáticas.1. tenga en cuenta que las aplicaciones de usuario HTML ignoran los atributos que ellas mismas no reconocen y muestran el contenido de los elementos que no soportan. Las últimas tecnologías W3C están disponibles en la página Informes Técnicos y Publicaciones W3C.1 Utilice tecnologías W3C cuando estén disponibles y sean apropiadas para la tarea y use las últimas versiones que sean soportadas. [Prioridad 2] Las "Pautas de Accesibilidad al Contenido en la Web 1. En general. Suponemos que las secciones 14. no todos las aplicaciones de usuario soportan algunos de los (nuevos) atributos y elementos de HTML 4. 90 técnicas fundamentales . Por favor. 12 Tecnologías que tienen en cuenta la accesibilidad Puntos de revisión en esta sección: 11. • XSLT para crear transformaciones de estilo. • CSS y XSL para definir hojas de estilo. XHTML. consulte el sitio Web de W3C ([WAI-UA-SUPPORT]) para información sobre navegadores y otras aplicaciones de usuario que soportan características de accesibilidad.11 Soporte del navegador Nota: En el momento de escribir este texto. XML para documentos estructurados. 13.01 [HTML4] que pueden incrementar significativamente la accesibilidad de las páginas Web.3. 15 y 16 (a continuación) estarían mejor representadas como 13. Por respeto al documento original mantenemos la numeración de las mismas. • RDF para metadatos.0" sugieren utilizar tecnologías W3C en tanto que han sido revisadas teniendo en cuenta la accesibilidad y. que no es una especificación W3C).2 y 13. • HTML. • SMIL para crear presentaciones multimedia. además.

El vínculo hacia la transcripción debería aparecer en un lugar claramente visible. [Prioridad 2] Las presentaciones sonoras deben ir acompañadas por transcripciones del texto. subtítulos o descripciones de la banda de visual) con la presentación.14 Información sonora Puntos de revisión en esta sección: 1. Nota: Esta técnica está rodeada de alguna controversia. una película o animación) sincronice alternativas equivalentes (por ejemplo.0 y SMIL) permiten añadir subtítulos y descripciones de las imágenes a los clips multimedia. debería también disponer de una indicación visual de que el sonido está siendo reproducido y proporcionar una descripción o trascripción del sonido. No obstante.". Algunas tecnologías también permiten al usuario elegir diferentes tipos de subtítulos para adecuarlos a sus capacidades lectoras. Ejemplo. permiten archivos sonoros y visuales separados para combinarlos con los archivos de texto a través del archivo de sincronización para crear audio y películas subtitulados. N. [suena el teléfono] [ring] [ring] ¿Dígame?" Hasta que el formato que está usando soporte bandas alternativas.5 Asegúrese de que los contenidos dinámicos son accesibles o proporcione una página o presentación alternativa. [Prioridad 1] 6. según las preferencias del usuario. En este contexto el término refiere a subtítulos opcionales en el mismo idioma que la banda visual. como SMIL y SAMI. QuickTime 3. Algunos formatos de medios (por ejemplo. que vincula a una transcripción del texto o una descripción del archivo de sonido. Pueden proporcionarse equivalentes para los sonidos en forma de una frase de texto en la página. Para más información. 91 técnicas fundamentales . El teléfono suena tres veces y entonces es respondido. Para más información. Son opcionales en el sentido que se pueden activar o no.: * Subtitulos. El ejemplo siguiente demuestra que los subtítulos deberían incluir los diálogos y otros sonidos ambientales que ayuden a los espectadores a entender lo que está ocurriendo. SAMI permite que se añadan subtítulos.4 Para toda presentación multimedia tempodependiente (por ejemplo. Cuando estas transcripciones se presentan de forma sincronizada con la presentación visual. una con subtítulos y descripción de las imágenes y otra sin ello.T. vea las especificaciones SMIL 1. si un script incorpora automáticamente un sonido. porque el navegador debería cargar la forma visual de la información en lugar de la forma sonora si así lo han determinado las preferencias del usuario.T. equivalentes textuales de los eventos sonoros. Algunas tecnologías. Subtítulos para una escena de "E. podría ofrecer dos versiones de la película. como el principio de la página. El termino en inglés es “captions”. por favor consulte [NCAM]. se denominan subtítulos (*) y son utilizados por las personas que no pueden escuchar la banda sonora del material audiovisual.0 ([SMIL]). las estrategias deben también funcionar con los navegadores existentes hoy en día. De todas maneras.

Consulte la sección información sonora para más información sobre formatos multimedia.15 Información visual y movimiento Puntos de revisión en esta sección: 1. risas. por ejemplo.1 Hasta que las aplicaciones de usuario permitan controlarlo. 92 técnicas fundamentales . proporcione una descripción auditiva de la información importante de la banda visual de una presentación multimedia. [Prioridad 1] 7. todo el texto que aparece en subtítulos. observan el amanecer dorado. evite los movimientos en las páginas. Las transcripciones textuales completas incluyen diálogos hablados. gráficos y el texto mostrado. uno al lado del otro. Ejemplo. aplausos. [Prioridad 2] Las descripciones sonoras de la banda visual proporcionan una narración de los elementos visuales claves sin interferir con el sonido o el diálogo de una película. evite provocar destellos en la pantalla. Simba. Ambos. En otras palabras. Mufasa: Mira. primordialmente. Nota. Los elementos visuales clave incluyen acciones. lenguaje corporal. aparezca o no en pantalla: música. Sarabi sonríe y empuja suavemente a Simba hacia su padre. Si no hay información visual importante. una cabeza parlante animada que describe (a través de discurso pregrabado) cómo utilizar el sitio. así como cualquier otro sonido significativo. Para películas. así como las descripciones que se proporcionan en la narración sonora. por las personas ciegas para seguir la acción y la información no auditiva en el material visual. También proporcionan a cualquier persona la posibilidad de indexar y buscar información contenida en materiales audiovisuales. etc. proporcione descripciones sonoras que estén sincronizadas con el sonido original.3 Hasta que las aplicaciones de usuario puedan leer automáticamente el texto equivalente de la banda visual. todo lo que toca la luz es nuestro reino. escenarios. Las descripciones auditivas son utilizadas. Observe que el narrador proporciona una descripción auditiva de la banda visual y que la descripción ha sido integrada en la transcripción. Simba: ¡Eh! Narrador: Simba sale corriendo. seguido por sus padres.3 Hasta que las aplicaciones de usuario permitan congelar el movimiento de los contenidos. [Prioridad 1] 7. He aquí un ejemplo de una transcripción textual completa de una escena de "El Rey León". 16 Transcripción textual completa Las transcripciones textuales completas permiten el acceso de las personas con discapacidades tanto visuales como auditivas. no es necesaria una descripción sonora. Simba: ¡Guau!.

Las referencias a estos productos no suponen un respaldo a los mismos. Martin's Press.. (1993). G. Le Hors e I.w3. consulte la lista de Informes Técnicos de W3C (W3C Technical Reports) en http://www. [SMIL] "Synchronized Multimedia Integration Language (SMIL) 1. T. Chisholm.org/TR/1999/WAI-WEBCONTENT-19990505/. Estas referencias están incluidas por su pertinencia y utilidad. Hoschka.0). Diana. Editor: T.0 está disponible en http://www.0 en http://www. Schroeder. [WCAG10-TECHS] "Techniques for Web Content Accessibility Guidelines 1. MA 01845. 24 de diciembre de 1999. 93 técnicas fundamentales . G.w3. Web Site Usability: A Designer's Guide User Interface Engineering. Suite 101. Jacobs.w3. Snyder.0".w3. [HTML4] "HTML 4.org/TR/REC-smil. Puede encontrar la Recomendación HTML 4. (1997).0 está disponible en http://www. NY 10010. Sconlong. Vanderheiden e I. T.. Vanderheiden e I. por favor. A. Contribuyó a la edición: T.w3. Editores: D. La última versión de SMIL 1. Raggett.0 Specification". 5 de mayo de 1999..org/TR/1998/REC-smil-19980615/.. Puede encontrar esta Recomendación WCAG 1. 800 Turnpike St. Jacobs. New York. Editores W. [SPOOL] Spool. C.org/TR/WCAG10-TECHS/.0 en http://www.0" (Web Content Accessibility Guidelines 1. Inc. 18.org/TR/REC-png. [PNG] "PNG (Portable Network Graphics) Specification".M. Chisholm. 18 Recursos Nota: W3C no puede garantizar la persistencia de cualquiera de las siguientes referencias que se encuentran fuera de su control.w3. 15 de junio de 1998. Jacobs. Lane. Boutell. La última versión de PNG 1. W. Este documento explica como aplicar los puntos de revisión definidos en las "Pautas de Accesibilidad al Contenido en la Web 1.org/TR. DeAngelo. 1 de octubre de 1996.org/TR/1999/REC-html401-19991224/.01 en http://www. A Pocket Style Manual. J.01 Recommendation". 175 Fifth Avenue. Puede encontrar la Recomendación SMIL 1. [WCAG10] "Web Content Accessibility Guidelines 1. Editor: P. El último borrador de las técnicas esta disponible en http://www.1 Otras pautas [HACKER] Hacker. St.w3.0". Editores W. North Andover.17 Referencias Para ver la última versión de cualquier especificación W3C.

Esta página incluye un listado de algunas características de accesibilidad (incluidas las ayudas t é c n i c a s ) q u e a l g u n a s a p l i c a c i o n e s d e u s u a r i o p ro p o rc i o n a n . U. [LYNX] Lynx es un navegador sólo texto. [HTMLVAL] Servicio de validación de código HTML de W3C (W3C HTML Validation Service). 101 Morris St. The Unified Web Site Guidelines fue compilado por Trace R & D Center en la Universidad de Wisconsin con financiación del National Institute on Disability and Rehabilitation Research (NIDRR). pp 97-107." Editor Dan Connolly. W.org/WAI/References/Browsing. CA 95472. Dept. O'Reilly & Associates. G. Norman. Sebastopol. Vanderheiden.2 Aplicaciones de usuario y otras herramientas El sitio de WAI en la Web mantiene una lista de navegadores Web alternativos (ayudas técnicas y otras aplicaciones de usuario diseñadas para la accesibilidad).S. [BOBBY] Bobby es una herramienta de validación automática de la accesibilidad desarrollada por Cast. "A Guide to XML. [JAWS] Lector de pantalla JAWS de Freedom Scientific. of Education. [PWWEBSPEAK] El pwWebSpeak de Productivity Works. [HOMEPAGEREADER] Home Page Reader de IBM. [LYNXME] Lynx-me es un emulador de Lynx. L a p á g i n a e s t á d i s p o n i b l e e n http://www. [ALTBROWSERS] "Alternative Web Browsing". Tools. 18.[UWSAG] "The Unified Web Site Accessibility Guidelines". [WALSH] Walsh. y Techniques. [LYNXVIEW] Lynx Viewer es un emulador de Lynx. Chisholm. (1997). [CSSVAL] Servicio de validación de hojas de estilo de W3C (W3C CSS Validation Service). eds." En "XML: Principles.w3. 94 técnicas fundamentales .

V. Al Gilman. [WINVISION] WinVision de Artic. Kevin Carey. 19 Agradecimientos Co-directores del Grupo de Trabajo de las Pautas del Contenido: Jason White. Murray Maloney. Liam Quinn. Phill Jenkins. Chetz Colwell. 18. MegaZone (Livingston Enterprises). [WAI-ER] Grupo de Trabajo de Evaluación y Reparación de WAI (WAI Evaluation and Repair Working Group). Josh Krieger. Jon Gunderson. Trace Research and Development Contacto con el equipo W3C: Wendy Chisholm Nuestro agradecimiento a las siguientes personas que han contribuido con su tiempo y sus valiosos comentarios a dar forma a estas pautas: Harvey Bingham. Leonard Kasday. Chuck Letourneau. University of Melbourne Gregg Vanderheiden. Marja-Riitta Koivunen. George Kerscher. Eric Hansen. William Loughborough. Scott Luebking. Masafumi Nakane. Geoff Freed. Jutta Treviranus. T. Mark Novak. [NCAM] El National Center for Accessible Media incluye información sobre subtitulado y audio descripción en la Web. Neal Ewers. Charles Oppermann. Steve Tyler y Jaap van Lelieveld 95 técnicas fundamentales . Michael Pieper. [TECHHEAD] Tech Head proporciona alguna información sobre el Fog Index descrito en [SPOOL]. Dave Raggett.3 Recursos de accesibilidad [DVS] DVS Descriptive Video Services. David Pawson. Raman. Robert Savellis. Charles McCathieNevile. Larry Goldberg. Greg Rosmaita. Mike Paciello.[WAI-UA-SUPPORT] Apoyo para la accesibilidad de las aplicaciones de usuario (User Agent Support for Accessibility).

0 .técnicas HTML para las pautas de accesibilidad al contenido en la web 1.

El propósito de este documento es servir de ayuda a los creadores de contenidos web que desean manifestar su conformidad con las "Pautas de Accesibilidad de los Contenidos Web 1.0" [WCAG10TECHS]. W3C Resumen técnicas HTML para las pautas de accesibilidad al contenido en la web 1.0. 97 técnicas HTML .se incluyen únicamente a título de ilustración. Este documento forma parte de una serie de documentos sobre técnicas para la creación de contenidos Web accesibles. Se anima a los lectores a formular sus comentarios sobre el documento y a proponer soluciones a los temas que trata. Estatus de este documento Esta versión se publica para corregir algunos enlaces desfasados en la versión anterior. Aunque las técnicas descritas en este documento ayudará a crear HTML conforme con las "Pautas de Accesibilidad a los Contenidos Web 1. Por favor.0 Este documento describe técnicas para la creación de contenidos accesibles en el Lenguaje de Marcación de Hipertexto (HTML véase HTML 4. Los ejemplos desaconsejados están resaltados y los lectores los deben leer con precaución -.Madison.01 [HTML4]).org. Los documentos específicos para cada tecnología permitirán a los autores centrarse en una tecnología concreta. Esta Nota no ha sido revisada ni aprobada por los miembros del W3C. Nota W3C de 5 de mayo de 1999). perteneciente a una serie. los comentarios sobre este documento deben enviarse a w3c-wai-gl@w3. Trace R & D Center.Nota de 6 noviembre de 2000 de W3C Editores: Wendy Chisholm. Ian Jacobs. Para información sobre los otros documentos de la serie. La versión en lengua inglesa de esta especificación es la única versión normativa. Está disponible en la web de W3C el acceso al “historico de los cambios a esta serie de documentos” y la “lista de temas abiertos y cerrados” .0" ([WCAG10]). véase "Techniques for Web Content Accessibility Guidelines 1.0 (Técnicas para las Pautas de Accesibilidad al Contenido en la Web 1. Existe también un archivo histórico de consulta pública. Gregg Vanderheiden. La serie de documentos reemplaza el documento único 5 May 1999 W3C Note Techniques for Web Content Accessibility Guidelines 1. Nota: Este documento contiene algunos ejemplos que ilustran soluciones accesibles en CSS pero también ejemplos desaconsejados que ilustran lo que los desarrolladores de contenidos no deben hacer. W3C. Pueden estar disponibles traducciones de este documento.0". estas técnicas no garantizan la conformidad y no son la única manera en que un desarrollador puede crear contenidos conformes a las Pautas. La versión de este documento del 6 de noviembre de 2000 es una Nota. Mientras que la Recomendación "Pautas de Accesibilidad a los Contenidos Web" [WCAG10] es un documento estable. se espera que esta serie de documentos de acompañamiento evolucione a medida que cambien las tecnologías y los desarrolladores de contenidos descubran técnicas más efectivas para diseñar contenidos web accesibles. Los temas tratados en el documento anterior se han separado en documentos específicos para cada tecnología que pueden evolucionar de forma independiente. University of Wisconsin -. redactada y aprobada por el Grupo de Trabajo sobre la Accesibilidad de los Contenidos Web (WCAG WG).

2 El elemento ADDRESS Puede usarse para proporcionar información sobre el creador de la página.1 Metadatos Puntos de verificación en esta sección: 13.01.” Por favor. Las Pautas de Accesibilidad de la WAI se producen como parte de la actividad técnica de la WAI. Los elementos y atributos estructurales (consultar el índice de elementos y atributos HTML para identificarlos) fomentan la coherencia en los documentos y proveen información a otras herramientas (por ejemplo. herramientas de indexación. Esto es denominado "metadatos" sobre el documento (Metadato es información sobre datos). Los elementos HTML que proporcionan información útil sobre un documento incluyen: 1.La lista de errores conocidos de este documento está disponible en “Errata in Web Content Accessibility Guidelines. 1. 1 Estructura y metadatos del documento Los desarrolladores de contenidos deberían usar marcación estructural y utilizarla según la especificación.1. 1.2 Proporcione metadatos para añadir información semántica a las páginas y sitios.3 El elemento META Puntos de verificación en esta sección: 7.org. que sólo aparece una vez en un documento. programas que extraen datos de tablas a bases de datos. los errores que detecte en este documento deben enviarse a wai-wcag-editor@w3.1. Por ejemplo. 1. Observe que el elemento (preceptivo) TITLE.4 Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener las actualizaciones. Los objetivos del Grupo de Trabajo sobre Pautas de Accesibilidad del Contenido Web se describen en los estatutos. motores de búsqueda.1. "title" debería ser usado con vínculos para proporcionar información sobre el objetivo del vínculo. Los metadatos bien construidos pueden proporcionar a los usuarios importante información orientativa. no cree páginas que se actualicen automáticamente de forma periódica. [Prioridad 2] Algunos elementos estructurales proporcionan información sobre el propio documento. es diferente del atributo "title". herramientas de navegación que usan elementos de encabezamiento y programas de traducción automática que traducen el texto de un idioma a otro). La Web Accessibility Initiative (WAI ) del World Wide Web Consortium (W3C) ofrece una variedad de recursos sobre accesibilidad de la Web.1 TITLE: El título del documento. Los desarrolladores de contenido deberían usar el atributo "title" de acuerdo con las especificaciones HTML 4.01. [Prioridad 2] 98 técnicas HTML . que se aplica a casi todos los elementos HTML 4.

son ejemplos desaconsejados en HTML. Los desarrolladores de contenidos deberían evitar la actualización periódica y permitir a los usuarios elegir cuándo quieren actualizar la información..http://www. El primero cambia la página del usuario a intervalos regulares.. sino. Ejemplo desaconsejado. <HEAD> <TITLE>¡No utilice esto!</TITLE> <META http-equiv="refresh" content="5. y puede alterar el historial de páginas en el navegador.. las paginas no deben redirigir a los usuarios con estas etiquetas por que no es estándar. desorienta al usuario.7. </BODY> 99 técnicas HTML . configure el servidor para que ejecute esta posibilidad.ejemplo. Una actualización antes de tiempo desorienta al usuario. Los desarrolladores no pueden saber de antemano cuanto tiempo necesitará el usuario para leer una página. active el vínculo manualmente.5 Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener el redireccionamiento automático. no utilice marcadores para redirigir las páginas automáticamente. Ejemplo desaconsejado.com/paginanueva">sitio nuevo</A> en 5 segundos. Los que siguen.Información. En su lugar.. </BODY> El siguiente ejemplo de HTML (que emplea el elemento META) dirige al usuario de una página a otra al acabar cierto tiempo. Los desarrolladores de contenidos no deberían usar esta técnica para simular tecnología "push" de servidor.com/paginanueva"> </HEAD> <BODY> <P>Si su navegador soporta Refresh (actualización automática). No obstante. e información sobre el autor. Consulte la sección sobre actualización automática de página para obtener información sobre por qué META no debe usarse para redirigir a otras páginas o actualizar páginas automáticamente.ejemplo. [Prioridad 2] Este elemento puede especificar metadatos para un documento. <META http-equiv="refresh" content="60"> <BODY> <P>. será redirigido a nuestro <A href="http://www. que incluyen palabras clave.

sección 6. [Prioridad 2] Validar contra una gramática formal y declarar esa validación al principio del documento permite al usuario saber que la estructura del documento es fiable. También permite al usuario saber dónde buscar la semántica si fuera necesario. o "tty". Por ejemplo. Es preferible validar contra las gramáticas del W3C. [Prioridad 3] Los desarrolladores de contenido deberían usar el elemento LINK y los tipos de vínculos (consultar [HTML4]. [Prioridad 2] También se puede emplear el elemento LINK para apuntar a documentos alternativos.6 El elemento LINK y documentos alternativos Puntos de verificación en esta sección: 6. los documentos que comprendan múltiples páginas).2 Cree documentos que estén validados por las gramáticas formales publicadas. Ejemplo. 1. se puede emplear el elemento LINK como sigue: Ejemplo.1.1. Los siguientes elementos LINK podrían ser incluidos en el encabezamiento del capítulo 2 de un libro: <LINK <LINK <LINK <LINK rel="Next" href="capítulo3"> rel="Prev" href="capítulo1"> rel="Start" href="portada"> rel="Glossary" href="glosario"> 1.1.5 El elemento LINK y herramientas de navegación Puntos de verificación en esta sección: 13.9 Proporcione información sobre las colecciones de documentos (por ejemplo. "braille".1. Algunas aplicaciones de usuario pueden sintetizar herramientas de navegación o permitir la impresión ordenada de un grupo de documentos basados en esta etiqueta.5 Asegúrese de que los contenidos dinámicos son accesibles o proporcione una página o presentación alternativa. El Servicio de Validación W3C valida un documento contra toda una lista de gramáticas publicadas.12) para describir los mecanismos y organización de la navegación del documento. Los navegadores deberían cargar la página alternativa de forma automática según las preferencias y el tipo de navegador del usuario. Las aplicaciones de usuario que soportan LINK cargarán la página alternativa para aquellos usuarios cuyos navegadores se identifican como uno de los que pueden mostrar páginas "aural".4 La declaración !DOCTYPE Puntos de verificación en esta sección: 3. Véase las Tecnologías Revisadas para la Accesibilidad. 100 técnicas HTML .

los apartados se dividen en distintas secciones. puesto que pueden confundir a los usuarios..5 Utilice elementos de encabezado para transmitir la estructura lógica y utilícelos de acuerdo con la especificación.Consulte la sección siguiente para más información.H6) para crear documentos estructurados y separar tramos largos de texto. • Agrupe vínculos relacionados entre sí. Las secciones deberían iniciarse con los elementos de encabezamiento HTML (H1-H6).</BODY> 1. etc.. tty"> </HEAD> <BODY><P>. • Use los encabezamientos de sección (H1 . Consulte la sección Agrupar y saltar vínculos.3 Divida los bloques largos de información en grupos más manejables cuando sea natural y apropiado. braille. • Anide listas con UL. [Prioridad 2] Los documentos largos se suelen dividir en una serie de capítulos. • Separe las líneas de texto en párrafos (con el elemento P). OL y DL. • Utilice tablas para datos tabulares y describa la tabla con CAPTION. por ejemplo.1 Encabezamientos de sección Puntos de verificación en esta sección: 3.01 agrupan el contenido y facilitan su comprensión: • Utilice FIELDSET para agrupar controles de formulario en unidades semánticas y describa el grupo con el elemento LEGEND. cuando la información se dé en grupos lógicos.2 Agrupación estructural Puntos de verificación en esta sección: 12. los capítulos tienen apartados. • Utilice OPTGROUP para organizar las listas largas de opciones de menú en grupos más pequeños. Los desarrolladores de contenido no deberían crear grupos de forma aleatoria. • Agrupe las filas y columnas de las tablas con THEAD. Estos trozos semánticos de información constituyen la estructura del documento. 1. TBODY. Otras etiquetas pueden complementar estos 101 técnicas HTML . las secciones en párrafos. Todos estos mecanismos de agrupación deberían ser usados cuando sean apropiados y naturales. [Prioridad 2] Los siguientes grupos de mecanismos HTML 4. TFOOT y COLGROUP.2.<HEAD> <TITLE>Bienvenidos al Centro Comercial Virtual!</TITLE> <LINK title="Versión solo texto" rel="alternate" href="solo_texto" media="aural.

</DIV> Consulte también la sección sobre vínculos. es importante usarlos apropiadamente para expresar correctamente la estructura del documento. Por ejemplo. los elementos de encabezamiento (H1 . el elemento HR para crear una línea divisoria horizontal). etc. texto para esta sección . en HTML.... El siguiente etiquetado HTML muestra cómo pueden usarse las hojas de estilo para controlar la presentación de un encabezamiento y el contenido que sigue: Ejemplo. pero la presentación visual no es suficiente para identificar las secciones de un documento. <DIV class="sección2"> <H2>Cocinar con aceite</H2> . Los desarrolladores deberían ordenar los elementos de encabezamiento de forma apropiada. Observe que en HTML. por ejemplo. No utilice encabezamientos para crear efectos de fuentes.. algún texto aquí .. Puesto que algunos usuarios ojean un documento navegando sus encabezamientos.H6) sólo inician secciones y no las contienen como contenido del elemento. 102 técnicas HTML ... los elementos H2 deberían seguir a los elementos H1.. Use hojas de estilo para cambiar los estilos de fuentes. pasar directamente de H1 a H3)... los H3 deberían seguir a los elementos H2.. Los desarrolladores de contenido no deberían "saltarse" niveles (por ejemplo.section2 { margin-left: 5% } </STYLE> </HEAD> <BODY> <H1>Técnicas de cocina</H1> . texto para esta sección . </DIV> <DIV class="sección2"> <H2>Cocinar con mantequilla</H2> .. <HEAD> <TITLE>Técnicas de cocina</TITLE> <STYLE type="text/css"> /* Sangra el encabezamiento y el contenido siguiente */ DIV.elementos para mejorar la presentación (por ejemplo.

Si los cambios no están señalados. <Q lang="it">Piacere. la palabra francesa para coche. "ección". Así. ella entró tanto en la habitación como en su vida para siempre. caracteres acentuados). De forma similar. para asegurar que el programa de traducción a braille generará los caracteres correctos (por ejemplo. <Q>Mi nombre es Natasha</Q>dijo ella. [Prioridad 1] Si utiliza varios idiomas en una página. 2. Las contracciones braille combinan grupos de caracteres comúnmente utilizados. el sintetizador tratará de pronunciarlos en el idioma original del programa.2 Información sobre el idioma 2.1 Identifique claramente los cambios en el idioma del texto del documento y en cualquier texto equivalente (Por ejemplo. obtendrán la traducción de los textos de idiomas desconocidos mediante programas de traducción. <P>y con un cierto<SPAN lang="fr">je ne sais quoi</SPAN>. que confundirían aun más al usuario. que habitualmente ocupa seis celdas (una para cada letra) puede contraerse en dos. en una sola celda. mediante el uso del atributo lang: Ejemplo. 3. Es importante identificar los cambios de idioma por varias razones: 1. los sintetizadores de voz que "hablan" varios idiomas.</Q> respondió él en impecable italiano. asegúrese de cualquier cambio de idioma esté claramente identificado. Estos códigos de control previenen también que se generen contracciones braille. [Prioridad 3] 103 técnicas HTML . 2. "voiture".1 Señalar los cambios de idioma Puntos de verificación en esta sección: 4. serán capaces de generar el texto con el acento y la pronunciación adecuados. Por ejemplo. leyendas). será pronunciada "voiture". cerrando la puerta. Los usuarios que no saben idiomas.. Los usuarios que leen el documento en braille podrán insertar los códigos de control adecuados (etiquetas) donde ocurren los cambios de idioma.2 Señalar el idioma principal Puntos de verificación en esta sección: 4. que usualmente aparecen en celdas múltiples.3 Identifique el idioma principal de un documento.

2 Acrónimos y abreviaturas Puntos de verificación en esta sección: 4.. tal y como se describe en Tablas de datos. utilice los elementos HTML apropiados: EM y STRONG..2 Especifique la expansión de cada abreviatura o acrónimo cuando aparezcan por primera vez en el documento. </HTML> 3 Etiquetado de texto Las secciones siguientes tratan los modos de agregar estructura a trozos de texto. que puede ser plasmado en varios modos (cambios de estilo de fuente. [Prioridad 3] Marque las abreviaturas y acrónimos con ABBR y ACRONYM y utilice "title" para indicar la expansión: Ejemplo <P>¡Bienvenido a la <ACRONYM title="World Wide Web">WWW</ACRONYM>! Esto también es aplicable a las frases recortadas que se emplean para los encabezados de filas o columnas de tablas. ya que se usan para crear un efecto visual de presentación. así mismo.1 Énfasis Puntos de verificación en esta sección: 3. Si el texto es largo. 3. No deberían usarse los elementos B e I. [Prioridad 2] Para remarcar el énfasis. Si el texto de encabezado ya está abreviado. bien con una etiqueta (como se muestra abajo) o bien a través de encabezamientos HTTP.. cambios de inflexión del discurso. etc..3 Utilice hojas de estilo para controlar la maquetación y la presentación. 3. No utilice el marcador de citas para efectos de formato tales como sangrías.resto de un documento HTML escrito en francés.7 Marque las citas. Los elementos EM y STRONG fueron diseñados para indicar un énfasis estructural.Es. 3. una buena práctica identificar el idioma principal de un documento.). proporcione una expansión con ABBR.3 Citas Puntos de verificación en esta sección: 3..[Prioridad 2] 104 técnicas HTML . Ejemplo <HTML lang="fr"> . puede proporcionar una abreviatura.

los responsables del contenido deberían en consecuencia: 1. Nota. donde sea posible. use marcadores en vez de imágenes para transmitir la información. Estas herramientas funcionan con el idioma inglés.Ejemplo. utilizan etiquetas desaconsejadas y utilizan tablas para maquetar. 2. Este ejemplo marca una cita larga con BLOCKQUOTE: <BLOCKQUOTE cite="http://www. 105 técnicas HTML . en una ecuación matemática). por ejemplo. --. Proporcione una sola descripción de la ecuación (mejor que texto "alt" de cada imagen generada. • Los mecanismos de búsqueda pueden usar la información del texto.m = masa y a = aceleración. Nota: MathML puede ser usado para crear documentos muy accesibles. considere estas técnicas para presentar matemáticas en la Web: • Asegúrese de que el usuario sabe lo que representan las variables. use entidades HTML para crear símbolos matemáticos.William Shakespeare (Trabajos de amor perdido). También IBM proporciona un plug-in para Nestcape e Internet Explorer que lee documentos TeX/LaTeX y parte de MathML (consulte [HYPERMEDIA]). • Para ecuaciones simples utilice caracteres. Hacer el documento original TeX (o LaTeX) disponible en la Web. puesto que puede haber pequeñas imágenes para partes y trozos de la ecuación). Puesto que los convertidores tienden a generar imágenes. • Para ecuaciones más complejas. promueve la accesibilidad por las siguientes razones: • El texto puede ser ampliado o interpretado como habla o braille. márquelas con MathML ([MATHML]) o TeX. TeX se usa habitualmente para crear documentación técnica que después se convierte a HTML para su publicación en la Web.ejemplo. Asegúrese de que el HTML creado en el proceso de conversión es accesible. en la ecuación "F = m * a".1 Cuando exista un marcador apropiado. como en "x + y = z". Como ejemplo. indique que F = fuerza. mejor que imágenes (por ejemplo. </P> </BLOCKQUOTE> 3.Debe proporcionarse un texto equivalente si la ecuación está representada por una o más imágenes.4 Etiquetas y hojas de estilo mejor que imágenes: el ejemplo de las matemáticas Puntos de verificación en esta sección: 3.com/trabajosamorperdido"> <P>¡Recompensa! ¡Oh! Esa es la palabra latina para tres peniques. [Prioridad 2] El uso de etiquetas (y hojas de estilo) donde sea posible. • Proporcione una descripción de texto de la ecuación y. y puede que no funcionen adecuadamente con sintetizadores de habla cuyo idioma primario no sea inglés. Existe un sistema denominado "AsTeR" ([ASTER]) que puede crear una representación auditiva de documentos TeX y LaTeX. pero en la actualidad no es tan ampliamente soportado y usado como TeX.

Consulte la información sobre CSS y tablas para disposición de página en el documento sobre Técnicas CSS [WCAG10CSS-TECHNIQUES]. VAR..6 Marque correctamente las listas y los ítems de las listas. ." proporciona más contexto que la misma lista sin números compuestos. 2. UL y OL deberían ser usados únicamente para crear listas. Designa una muestra de datos de salida de un programa. 1. y otros) La especificación HTML 4. Contiene una cita o referencia a otras fuentes. DFN. Designa un fragmento de código informático. script. los desarrolladores de contenido deberían incluir pistas contextuales en sus listas. Así. soportando el pseudo-elemento “:before” en CSS2). una lista numerada "1. 1.1. KBD.5 Otros ocho elementos estructurales (para identificar citas. no para formatear efectos tales como sangría.3. DEL. CODE. SAMP. la cual se formatearía así: 106 técnicas HTML .1. texto eliminado.3. Indica el texto que debe introducir el usuario.2. Indica un texto insertado en un documento. especialmente en las anidadas y aquellas que no especifican el nivel de anidamiento para cada ítem de la lista. Indica un texto suprimido de un documento. fragmentos de código. 1. 1. Las listas ordenadas ayudan a navegar a los usuarios no videntes. los números compuestos son más informativos que los simples. INS. 2.1. Para listas numeradas. Los usuarios no visuales pueden “sentirse perdidos” en las listas. Indica una instancia de una variable o argumento de un programa.. [Prioridad 2] Los elementos de listado HTML DL. 4 Listas Puntos de verificación en esta sección: 3.01 define los siguientes elementos estructurales para diversas necesidades de etiquetado: CITE. Hasta que las aplicaciones de usuario proporcionen un medio para identificar claramente el contexto dentro de una lista (por ejemplo. etc.2. Indica que es la definición del término que contiene.

y sería narrada como "1.1. utilice hojas de estilo. 1. Por ejemplo. etc. 107 técnicas HTML . 2. 1. 4. En CSS. OL { counter-reset: item } LI { display: block } LI:before { content: counters(item. 1. 2. Los ítems están numerados como "1". <STYLE type="text/css"> UL. sin aportar información sobre la profundidad dentro de la lista. 3. 2. 1. [CSS1] y [CSS2] permiten a los usuarios controlar los estilos de números (para todos los tipos de lista. counter-increment: item } </STYLE> Hasta que CSS2 sea ampliamente soportado o las aplicaciones de usuario permitan al usuario controlar la interpretación de las listas a través de otros medios. puede parecer ser dos ítems separados en la lista. 2.1". 1. 3. ". 'disc') si no se encuentra la imagen especificada para la viñeta. .1. es posible especificar un estilo de viñeta por defecto (por ejemplo. no sólo las ordenadas) mediante las hojas de estilo del usuario. 1". "1."). si un apartado de la lista envuelve a la siguiente línea en la pantalla. Ejemplo La siguiente hoja de estilo CSS2 muestra cómo especificar números compuestos para listas anidadas creadas tanto con elementos UL como OL.1 Uso de hojas de estilo para cambiar las viñetas de una lista Para cambiar el estilo de viñeta de una lista de ítem sin ordenar creada con el elemento LI. "1. los autores deberían considerar el proporcionar pistas contextuales en las listas anidadas no numeradas.1". Esto puede suponer un problema para los lectores de pantalla de anteriores generaciones. Los usuarios no videntes pueden tener dificultades para saber dónde está el comienzo y el fin de una lista y dónde comienza cada ítem de la misma.

estilo de fuente (negrita) y el color (viñeta amarilla. background-color: yellow } .gif) disc } </STYLE> </HEAD> <BODY> <LI class="balanuevo">Fondo de pensiones Roth <SPAN class="txtnuevo">Nuevo</SPAN></LI> <LI> 401(k)</LI> </BODY> 108 técnicas HTML . texto rojo sobre fondo amarillo). color: red. la nueva información es comunicada a través del texto ("Nuevo").gif) disc } </STYLE> </HEAD> <BODY> <LI>Audrey <LI>Laura <LI>Alicia </UL> Para asegurar más aún que los usuarios comprenden las diferencias entre los ítems de la lista indicados visualmente.Ejemplo <HEAD> <TITLE>Uso de hojas de estilo para cambiar viñetas</TITLE> <STYLE type="text/css"> UL { list-style: url(estrella.balanuevo { list-style : url(amarillo. los desarrolladores de contenido deberían proporcionar una etiqueta de texto antes o después de la frase del ítem de la lista: Ejemplo En este ejemplo.txtnuevo { font-weight: bold. <HEAD> <TITLE>Ejemplo de estilo de viñetas</TITLE> <STYLE type="text/css"> .

4.1.1 Imágenes utilizadas como viñetas Puntos de verificación en esta sección: 1.1 Proporcione un texto equivalente para todo elemento no textual (por ejemplo, a través de "alt", "longdesc" o en el contenido del elemento). Esto incluye: imágenes, representaciones gráficas del texto, mapas de imagen, animaciones (por ejemplo, GIFs animados), "applets" y objetos programados, "ascii art", marcos, scripts, imágenes usadas como viñetas en las listas, espaciadores, botones gráficos, sonidos (ejecutados con o sin interacción del usuario), archivos exclusivamente auditivos, banda sonora del vídeo y vídeos. [Prioridad 1] Evite el uso de imágenes como viñetas de listados de definiciones creadas con DL, DT, and DD. No obstante si usa este método, asegúrese de proporcionar un texto equivalente para las imágenes. Ejemplo desaconsejado <HEAD> <TITLE>Ejemplo desaconsejado que usa imágenes en listas DL</TITLE> </HEAD> <BODY> <DD><IMG src="estrella.gif" alt="* ">Audrey <DD><IMG src="estrella.gif" alt="* ">Laura <DD><IMG src="estrella.gif" alt="* ">Alicia </DL> Los desarrolladores de contenido deberían evitar los estilos de lista donde las viñetas proporcionen información (visual) adicional. No obstante, si se hace, asegúrese de proporcionar un texto equivalente que describa el significado de la viñeta: Ejemplo desaconsejado <DL> <DD><IMG src="rojo.gif" alt="Nuevo:">Fondo de pensiones <DD><IMG src="amarillo.gif" alt="Antiguo:">Fondo 401(k)</DD> </DL> Roth</DD>

5 Tablas
Esta sección trata la accesibilidad de las tablas y elementos que se pueden poner en un elemento TABLE. Se tratan dos tipos de tablas: tablas usadas para organizar datos y tablas usadas para crear una disposición visual de la página.

109

técnicas HTML

5.1 Tablas de datos
Los desarrolladores de contenidos pueden hacer las tablas de datos HTML 4.01 más accesibles de varias maneras: • Proporcionar información de resumen • Identificar la información en filas y columnas 5.1.1 Proporcionar información de resumen Puntos de verificación en esta sección: 5.5 Proporcione resúmenes de las tablas. [Prioridad 3] 5.6 Proporcione abreviaturas para las etiquetas de encabezamiento. [Prioridad 3] • Proporcione un título mediante el elemento CAPTION. El título de una tabla describe la naturaleza de la tabla en unas tres frases. Dos ejemplos: 1.“Tazas de café consumidas por cada senador.” 2. “¿Quién invierte más en la limpieza de la contaminación?” No es siempre necesario un título. • Si no se proporciona un título mediante CAPTION, utilice el atributo “title” del elemento TABLE para describir la naturaleza de la tabla en pocas palabras. • Proporcione un resumen a través del atributo “summary”. Los resúmenes son especialmente útiles para los lectores no videntes. Un resumen de las relaciones entre las celdas es especialmente importante para las tablas con encabezamientos anidados, celdas que ocupan varias columnas o filas, u otras relaciones que no sean evidentes en un análisis de la estructura de la tabla, pero que sí se aprecian cuando la tabla se muestra visualmente. Un resumen también puede describir como una tabla encaja en el contexto del documento actual. Si no se proporciona ningún título es mas importante aún proporcionar un resumen. Dos ejemplos: 1. "Esta tabla esquematiza el número de tazas de café consumidas por cada senador, el tipo de café (descafeinado o normal) y si se ha tomado con azúcar." 2. "Total exigido por las normas de control de la contaminación a 1 de enero 1971. La categoría Comercial incluye almacenes, compañías de seguros y bancos. La tabla se divide en dos columnas. La columna izquierda es 'Inversión total necesaria en billones de dólares'. La columna derecha es 'Inversión' y se divide en tres subcolumnas. La primera columna se titula '1970 real en millones de dólares', la segunda es '1971 previsto en millones de dólares', y la tercera es 'Variación porcentaje, 1970 sobre 1971.' Las filas representan las industrias." [NBA, 1996]. • Proporcione subtítulos breves para las etiquetas de encabezamiento con el atributo "abbr" de TH. Estas serán particularmente útiles para las futuras tecnologías con habla que puedan leer las etiquetas de fila y columna para cada celda. Las abreviaturas reducen la repetición y el tiempo de lectura.

110

técnicas HTML

5.1.2 Identificar información de filas y columnas Puntos de verificación en esta sección: 5.1 En las tablas de datos, identifique los encabezamientos de fila y columna. [Prioridad 1] 5.2 Para las tablas de datos que tienen dos o más niveles lógicos de encabezamientos de fila o columna, utilice marcadores para asociar las celdas de encabezamiento y las celdas de datos. [Prioridad 1] • Identifique grupos estructurales de filas (THEAD para encabezamientos de tabla que se repiten, TFOOT para pies de tabla que se repiten y TBODY para otros grupos de fila) y grupos de columnas (COLGROUP y COL). • Etiquete los elementos de tabla con los atributos "scope", "headers", y "axis " de forma que los futuros navegadores y ayudas técnicas sean capaces de seleccionar datos de una tabla filtrando por categorías. • No utilice PRE para crear una disposición tabular de texto (utilice el elemento TABLE de forma que las ayudas técnicas puedan reconocer que es una tabla). • Para información sobre los encabezamientos de tabla, consulte el algoritmo encabezamiento de tablas y el debate sobre la Recomendación HTML 4.01 ([HTML4], sección 11.4.3). Ejemplo. Este ejemplo muestra cómo asociar celdas de datos (creadas con TD) con sus correspondientes encabezamientos a través del atributo "headers". El atributo "headers" especifica una lista de celdas de encabezamiento (etiquetas de fila y columna) asociadas con la celda de datos actual. Esto requiere que cada encabezamiento de celda tenga un atributo "id" que lo identifique. <TABLE border="1" summary="Esta tabla esquematiza el número de tazas de café consumidas por cada senador, el tipo de café (descafeinado o normal) y si se ha tomado con azúcar."> <CAPTION>Tazas de café consumidas por cada senador</CAPTION> <TR> <TH id="header1">Nombre</TH> <TH id="header2">Tazas</TH> <TH id="header3" abbr="Tipo">Tipo de café</TH> <TH id="header4">¿Azúcar?</TH> <TR> <TD headers="header1">T. Sexton</TD> <TD headers="header2">10</TD> <TD headers="header3">Expreso</TD> <TD headers="header4">No</TD> <TR> <TD headers="header1">J. Dinnen</TD> <TD headers="header2">5</TD> <TD headers="header3">Descaf</TD> <TD headers="header4">Si</TD> </TABLE>

111

técnicas HTML

Dinnen</TD> <TD>5</TD> <TD>Descaf</TD> <TD>si</TD> </TABLE> 112 técnicas HTML .. Este método es particularmente útil para tablas simples. "Scope" debe tener uno de los siguientes valores: "row". Ejemplo. "Scope" especifica la batería de celdas de datos que han de asociarse con la celda de encabezamiento correspondiente. La elección entre los atributos "headers" y "scope" depende de la complejidad de la tabla.. Nombre: T. Azúcar: Si Una aplicación de usuario visual podría mostrar la tabla como sigue: NOMBRE T. No afecta al resultado en la medida en que en la etiqueta haya quedado clara la relación entre el encabezamiento y las celdas de datos."> <CAPTION>Tazas de café consumidas por cada senador</CAPTION> <TR> <TH scope="col">Nombre</TH> <TH scope="col">Tazas</TH> <TH scope="col" abbr="Tipo">Tipo de Café</TH> <TH scope="col">¿Azúcar?</TH> <TR> <TD>T. SEXTON J. "rowgroup" o "colgroup". pero esta vez utiliza el atributo "scope" en lugar de "headers". Tazas: 10. Tipo: Expreso. el tipo de café (descafeinado o normal) y si se ha tomado con azúcar. Dinnen. Tazas: 5. "col". Azúcar: No Nombre: J. Debería tenerse en cuenta que la versión hablada de esta tabla podría ser idéntica a la del ejemplo anterior. Tipo: Descaf. Sexton.Un sintetizador de voz podría leer esta tabla como sigue: Título: Tazas de café consumidas por cada senador Resumen: Esta tabla esquematiza el número de tazas de café consumidas por cada senador. DINNEN TAZAS 10 5 TIPO DE CAFE EXPRESO DESCAFEINADO AZUCAR NO SI El siguiente ejemplo asocia las mismas celdas de encabezamiento (TH) y datos (TD) como antes. <TABLE border="1" summary="Esta tabla esquematiza . Sexton</TD> <TD>10</TD> <TD>Expreso</TD> <TD>No</TD> <TR> <TD>J.

<TABLE border="1"> <CAPTION>Liquidación de gastos de viaje</CAPTION> <TR> <TH></TH> <TH id="header2" axis="gastos">Comidas <TH id="header3" axis="gastos">Hotel <TH id="header4" axis="gastos">Transportes <TD>subtotales</TD> <TR> <TH id="header6" axis="lugar">San Jose <TH> <TH> <TH> <TD> <TR> <TD id="header7" axis="fecha">25-ago-97 <TD headers="header6 header7 header2">37.02 <TD>224.00 <TD> <TR> <TD>subtotales <TD>65.00 <TD>90.02 <TR> <TH id="header10" axis="lugar">Seattle <TH> <TH> <TH> <TD> <TR> 113 técnicas HTML .00 <TD headers="header6 header8 header4">45.00 <TD> <TR> <TD id="header8" axis="fecha">26-ago-97 <TD headers="header6 header8 header2">27. Ejemplo.00 <TD>379.28 <TD headers="header6 header8 header3">112.00 <TD headers="header6 header7 header4">45.El siguiente ejemplo muestra cómo crear categorías en una tabla usando el atributo "axis" (eje).74 <TD headers="header6 header7 header3">112.

00 <TD>162.25 <TR> <TH>Totales <TD>196.00 72.00 <TD headers="header10 header12 header3">109.00 109.25 35.02 421.25 <TD>218.00 <TD>421.00 <TD headers="header10 header11 header4">36.02 96.00 SUBTOTALES 379. hoteles y transporte).00 <TD headers="header10 header12 header4">36.00 <TD>72.00 45.00 109.00 90.74 27.25 <TD headers="header10 header11 header3">109. COMIDAS San Jose 25-08-97 26-08-97 subtotales Seattle 27-08-97 28-08-97 subtotales TOTALES 37.27 114 técnicas HTML .<TD id="header11" axis="fecha">27-ago-97 <TD headers="header10 header11 header2">96.00 TRANSPORTE 45.27 HOTELES 112.00 196.00 36.27 </TABLE> Esta tabla lista los gastos de viaje en dos lugares.00 <TD> <TR> <TD id="header12" axis="date">28-ago-97 <TD headers="header10 header12 header2">35. La siguiente imagen muestra cómo la mostraría una aplicación de usuario visual.00 224.00 442.00 112. San José y Seattle.28 65.27 <TD>442. por fecha y categoría (comidas.00 162.00 218.00 <TD> <TR> <TD>subtotales <TD>131.00 <TD>800.25 800.00 36.

no utilice etiquetas estructurales para crear formatos visuales. cuando es necesario usar una tabla para maquetar. pero debería parar antes del fin de semana. Las celdas deben tener sentido cuando se leen en orden horizontal y deben incluir elementos estructurales (que creen párrafos. Igualmente. Por ejemplo. proporcione una alternativa equivalente (la cual debe ser una versión linearizada). si una tabla aparece así en la pantalla:: Hay un 30% de posibilidades de que llueva esta mañana. el orden de la información en la tabla debe ser comprensible después de transformarse en forma lineal. utilice hojas de estilo o atributos de formateo del elemento. no utilice marcadores estructurales para realizar un efecto visual. columnas envoltorio de palabras. proporcione un texto lineal alternativo (en la página actual o en alguna otra) para todas las tablas que maquetan texto en paralelo. Cuando se alinea una tabla. leyendo las frases de toda una línea pero de cada columna como si fueran una sola frase.3 Alineación de las Tablas Puntos de verificación en esta sección: 10. De cualquier modo. 5.5.4 Si se utiliza una tabla para maquetar. El lector de pantalla la leería como: Las clases de la Universidad de Wisconsin se reanudarán el 3 de septiembre. 115 técnicas HTML . Si una celda no es realmente el encabezamiento de una fila o columna de datos. Estos lectores de pantalla leerán la página por líneas completas. si la tabla no tiene sentido.) de modo que la página tenga sentido al ser alineada. de arriba hacia abajo) uno tras otro. listas.3 Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) interpreten correctamente los textos contiguos. encabezamientos. [Prioridad 2] Los autores deberían utilizar hojas de estilo para maquetar y posicionar. [Prioridad 2] 5. plantean problemas para los lectores de pantalla antiguos.3 No utilice tablas para maquetar. [Prioridad 3] Las tablas utilizadas para maquetar páginas y en lo que una celda el texto se extiende a través de más de una línea. que no interpretan el código fuente HTML o para los navegadores que no permiten la navegación por celdas individuales de tablas. los contenidos de las celdas se convierten en series de párrafos (es decir.2 Tablas para maquetar Puntos de verificación en esta sección: 5. el elemento TH se muestra visualmente centrado y en negrita. etc. cuando se utilicen tablas para maquetar. a menos que la tabla tenga sentido cuando se transcriba línea a línea. Por ejemplo. Por otro lado.

y cada vez más los lectores de pantalla y algunos navegadores alinean las tablas. Se puede crear una versión lineal basada en filas empezando con el encabezado de la fila. Existen varias herramientas para realizar esta tarea. coloque un trozo de papel sobre la página y lea la tabla línea a línea. la información sobre las relaciones entre ellas proporcionada visualmente debe ser trasladada a la tabla alineada. las filas de un elemento TFOOT aparecerán antes que el cuerpo de la tabla.Hay un 30% de posibilidades de que las clases de la Universidad de Wisconsin se llueva esta mañana. ¡Test rápido! Para entender mejor cómo un lector de pantalla leería una tabla. El grupo de trabajo de la WAI sobre la Evaluación y Reparación está siguiendo el progreso de las herramientas y desarrolla sus propias herramientas que permitirán que los usuarios alineen o que naveguen las tablas celda por celda.4 Cuestiones de compatibilidad con versiones anteriores para tablas Con los navegadores diseñados para HTML 3. para especificar la orden de la disposición de las columnas. La dirección de escritura del idioma puede afectar la disposición de las columnas y por lo tanto el orden de la tabla alineada.2. Los navegadores y las ayudas técnicas futuras podrán traducir automáticamente las tablas a secuencias lineales o navegar por la tabla celda por celda si los datos se etiquetan adecuadamente. Este etiquetado también ayudará a los navegadores a alinear las tablas (también llamado "serialización" de tablas). Por ejemplo. dir=“rtl” especifica una disposición de derecha a izquierda). O. Sin embargo. Puesto que las celdas de datos dependen de la información proporcionada por las celdas que las rodean y las de encabezado. pero reanudarán el 3 de septiembre. 5. Véase [WAI-ER] . El atributo “dir” especifica la secuencia de la disposición de las columnas (por ejemplo. y también precediendo cada celda con el encabezado de columna de la celda. Normalmente es fácil ver el texto lineal de una tabla empleada para maquetar la página .simplemente se quitan las etiquetas de tabla. debería parar antes del fin de semana. la alineación de las tablas de datos requiere una estrategia diferente. 116 técnicas HTML . la alineación puede basarse en la columna.

para este último caso (y otros documentos con formato o idioma específicos). de forma que los usuarios que prefieran las versiones de texto las obtengan automáticamente. incluya información introductoria en el primer vínculo e información distintiva en los vínculos siguientes. se insta a los desarrolladores de contenido a usar la negociación del contenido como alternativa.html">Mi documento está disponible en HTML</A>.no pueden revisar rápidamente una página de un vistazo. Para tener una visión rápida de la página o encontrar rápidamente un vínculo. Los "usuarios auditivos" -.6 Vínculos 6. Además de textos claros en los vínculos. el texto del vínculo debería indicar la naturaleza del objetivo del vínculo.1 Identifique claramente el objetivo de cada vínculo. <A href="my-doc. con dificultades de visión o que utilizan mecanismos con pantallas pequeñas o sin pantalla -. todos estos vínculos deben remitir al mismo recurso. distinga los vínculos especificando un valor diferente para el atributo "title" de cada elemento A. Tenga en cuenta que. [Prioridad 2] Un buen texto para un vínculo de no debería ser demasiado general. Ejemplo. Ello proporcionará información contextual para los usuarios que los leen en orden secuencial.pdf" title="Mi documento en PDF">PDF</A>.txt" title="Mi documento en formato texto">texto</A> 117 técnicas HTML .personas ciegas. Si hay más de un vínculo en una página con el mismo texto. estos usuarios a menudo saltarán de un vínculo a otro con la tecla tabulador o revisarán una lista de vínculos disponibles en una página. no utilice frases como “pinche aquí”. Así pues. En lugar de "pinche aquí". los desarrolladores de contenido pueden especificar un valor del atributo “title” que clara y concisamente describa el objetivo del vínculo. <A href="my-doc.1Texto de los vínculos Puntos de verificación en esta sección: 13. para una serie de vínculos relacionados. Esta frase no sólo es específica a un dispositivo (implica un dispositivo de apuntamiento) sino que no indica nada acerca de lo que se encontrará si se sigue el vínculo. <A href="my-doc. como en “más información sobre los leones marinos” o “versión sólo-texto de esta página”. Esta coherencia ayudará al diseño de la página tanto como a la accesibilidad. Si dos o más vínculos van referidos a objetivos diferentes pero comparten el mismo texto.

6 Agrupe los vínculos relacionados. deberían estar etiquetados como una unidad. espaciadores. animaciones (por ejemplo. a través de "alt". imágenes usadas como viñetas en las listas. mapas de imagen. "longdesc" o en el contenido del elemento). incluya caracteres imprimibles (rodeados de espacios). [Prioridad 3] Cuando los vínculos se agrupan en conjuntos lógicos (por ejemplo.html" alt=" "> Rutas actuales en Gimnasio de escalada Boulders </A> 6. que no sirvan como vínculo. scripts.6.5 Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) interpreten claramente los vínculos contiguos. [Prioridad 3].1. en una barra de navegación que aparezca en todas las páginas de un sitio).html"> <IMG src="topo. Esto incluye: imágenes. ello implica tener que escuchar una serie de vínculos en todas las páginas 118 técnicas HTML . entre los vínculos contiguos. "ascii art". identifique el grupo (para las aplicaciones de usuario) y. Tenga en cuenta que este texto aparecerá en la página junto a la imagen.html" alt="Rutas actuales en Gimnasio de escalada Boulders"> </A> O. Ejemplo. hasta que las aplicaciones de usuario lo hagan.1 Proporcione un texto equivalente para todo elemento no textual (por ejemplo. representaciones gráficas del texto. especifique un texto equivalente para la imagen. 10. Las barras de navegación son normalmente lo primero que uno encuentra en una página. Para los usuarios con sintetizador de voz. marcos.html"> <IMG src="topo. proporcione una manera de evitar el grupo. <A href="rutas. banda sonora del vídeo y vídeos.1 Texto para imágenes utilizadas como vínculos Puntos de verificación en esta sección: 1. <A href="rutas. "applets" y objetos programados. sonidos (ejecutados con o sin interacción del usuario). GIFs animados). botones gráficos. si proporciona un texto para el vínculo.2 Agrupar y saltar vínculos Puntos de verificación en esta sección: 13. archivos exclusivamente auditivos. Ejemplo. use un espacio como el valor del atributo "alt" del elemento IMG. [Prioridad 1] Cuando se use una imagen como contenido de un vínculo.

• Proporcione una hoja de estilo que permita a los usuarios ocultar el conjunto de vínculos de navegación.html">Mapa del sitio</A>] </P> </MAP> <H1><A name="como">Como utilizar nuestro sitio</A></H1> <!-.contenido de la página --> </BODY> 6.01 para agrupar los vínculos.html">Buscar</A>] [<A href="new. Hay varias maneras para permitir a los usuarios saltar un grupo de vínculos (tal y como hacen los usuarios videntes cuando ven el mismo comienzo en cada página): • Incluya un vínculo que permita al usuario saltar sobre el conjunto de vínculos de navegación. En el futuro. y un vínculo al principio del grupo sirve de vínculo a un marcador después del grupo. que no forman parte parte de un vínculo (rodeados de espacios).3 Acceso desde el teclado Puntos de verificación en esta sección: 9. Observe que los vínculos se separan con caracteres imprimibles. • Use el elemento MAP de HTML 4. En este ejemplo. el elemento MAP agrupa un conjunto de vínculos. las aplicaciones de usuario podrán permitir a los usuarios saltar sobre elementos como barras de navegación.4 Cree un orden lógico para navegar con el tabulador a través de vínculos.html">Novedades y destacados</A>] [<A href="mapasitio. <BODY> <MAP title="Barra de navegación"> <P> [<A href="#como">Salta barra de navegación</A>] [<A href="home. e identifique el grupo con el atributo "title". [Prioridad 3] El acceso a los elementos activos de una página es importante para los muchos usuarios que no pueden manejar un dispositivo de apuntamiento. controles de formulario y objetos. Las aplicaciones de usuario pueden incorporar características que permitan a los usuarios asignar acciones de teclado 119 técnicas HTML . El atributo "title" lo identifica como barra de navegación.antes de llegar a los contenidos interesantes de una página.html">Página principal</A>] [<A href="search.5 Proporcione atajos de teclado para los vínculos más importantes (incluidos los de los mapas de imagen de cliente). [Prioridad 3] 9. los controles de formulario y los grupos de controles de formulario. Ejemplo.

espaciadores. [Prioridad 2] 7 Imágenes y mapas de imagen Los apartados siguientes tratan de la accesibilidad de las imágenes (incluyendo animaciones sencillas tales como animaciones GIF) y mapas de imagen. 7. En este ejemplo. sonidos (ejecutados con o sin interacción del usuario). archivos exclusivamente auditivos. botones gráficos. a través de "alt".1 Equivalentes textuales breves para imágenes ("texto alt") Puntos de verificación en esta sección: 1. <A accesskey="C" href="doc.1 Proporcione un texto equivalente para todo elemento no textual (por ejemplo. imágenes usadas como viñetas en las listas.01 permite a los desarrolladores de contenidos especificar atajos de teclado en sus documentos mediante el atributo "accesskey". "ascii art". "longdesc" o en el contenido del elemento).1 Hasta que las aplicaciones de usuario permitan desconectar la apertura de nuevas ventanas. Esto incluye: imágenes.html" hreflang="en" title="Página de la empresa XYZ"> Página de la empresa XYZ</A> Nota: Hasta que las aplicaciones de usuario proporcionen un resumen de las asignaciones de teclas disponibles. se seguirá el vínculo. Para información sobre las matemáticas presentadas en forma de imágenes. proporcione información sobre las asignaciones de teclas. "applets" y objetos programados. scripts. consulte la sección sobre cómo usar etiquetas con texto y hojas de estilo en vez de imágenes. Ejemplo. marcos. representaciones gráficas del texto. mapas de imagen.4 Vínculos y objetivos Puntos de verificación en esta sección: 10. GIFs animados). banda sonora del vídeo y vídeos. HTML 4. no provoque apariciones repentinas de nuevas ventanas y no cambie la ventana actual sin informar al usuario. 6. animaciones (por ejemplo. [Prioridad 1] 120 técnicas HTML . si el usuario activa la tecla "C".a ciertas acciones.

Es un gráfico de barras que muestra el aumento de las ventas por meses en porcentaje. El valor de este atributo es denominado texto alt”. .gif" type="image/gif"> Buscar </OBJECT> 7. scripts. mapas de imagen. botones gráficos.. animaciones (por ejemplo. proporcione un breve equivalente textual con el atributo "alt". Para las aplicaciones de usuario que no soportan "longdesc". sonidos (ejecutados con o sin interacción del usuario). <OBJECT data="lupa.html"> En ventas97. marcos. <IMG src="lupa.gif" alt="Buscar"> Cuando utilice OBJECT. proporcione información adicional en un archivo designado por el atributo "longdesc": Ejemplo. "applets" y objetos programados.html: Un gráfico muestra cómo evolucionaron las ventas en 1997. representaciones gráficas del texto. En febrero las ventas cayeron en un 3%. proporcione un equivalente textual en el contenido del elemento OBJECT: Ejemplo. Ejemplo. archivos exclusivamente auditivos. 121 técnicas HTML . a través de "alt". banda sonora del vídeo y vídeos. <IMG src="ventas97. Nota. imágenes usadas como viñetas en las listas. "ascii art". espaciadores.gif" alt="Ventas en 1997" longdesc="ventas97. GIFs animados). proporcione también un vínculo a una descripción al lado del gráfico: Ejemplo. "longdesc" o en el contenido del elemento).1 Proporcione un texto equivalente para todo elemento no textual (por ejemplo.2 Descripciones largas de imágenes Puntos de verificación en esta sección: 1. Esto incluye: imágenes.Cuando utilice IMG. [Prioridad 1] Cuando un breve texto equivalente no es suficiente para transmitir adecuadamente la función o propósito de una imagen. Las ventas en enero aumentaron un 10% sobre las de diciembre 1996.

especifique un texto equivalente más extenso en el contenido del elemento: Ejemplo.gif" type="image/gif"> Gráfico de nuestras ventas en 1997.1 Vínculos D invisibles Nota. apunta a un equivalente textual de la imagen asociada.html">descripción textual</A>.<IMG src="97sales. Los vínculos D invisibles están desaconsejados. No obstante. Al igual que otros vínculos-D. </OBJECT> 7. Se debe de utilizar el atributo "longdesc".3 Dibujos con caracteres (ASCII art) Puntos de verificación en esta sección: 13. puesto que es más fácil proporcionar texto equivalente para imágenes..html">compra anticipada</A> . los vínculos-d invisibles proporcionan una solución (temporal) para los diseñadores que desean evitar los vínculos “D” visibles por motivos de estética. Así pues. Está disponible una <A href="desc.2. puede incluir etiquetas.gif" type="image/gif"> Las ventas en 1997 bajaron como consecuencia de nuestra <A href="anticipado. 7. proporcione un vínculo para saltar sobre el dibujo.gif" alt="Ventas en 1997" longdesc="ventas. <OBJECT data="97sales. los desarrolladores de contenido pueden proporcionar un vínculo hacia información adicional desde el elemento OBJECT: Ejemplo. a diferencia del texto en "alt".html" title="Descripción de las cifras de ventas en 1997">[D]</A> Cuando utilice OBJECT. [Prioridad 3] No utilice dibujos con caracteres. el usuario puede desplazarse a él con la tecla tabulador.. <OBJECT data="97ventas. De esta manera. </OBJECT> Observe que el contenido de OBJECT. si tiene que utilizar dibujos con caracteres. y utilice en su lugar imágenes reales.10 Proporcione un medio para saltar sobre un dibujo ASCII art de varias líneas.html"> <A href="ventas. Un vínculo-d invisible es una imagen pequeña (1 píxel) o transparente cuyo valor del atributo "alt" es “vinculo-D” o “D” y que forma parte del contenido de un elemento A. tal y como se muestra a continuación: 122 técnicas HTML . Al igual que otros vínculos.

etc.Ejemplo. 7.4 Mapas de imagen Un mapa de imagen es una imagen que tiene "zonas activas".se puede activar un vínculo. los desarrolladores de contenidos deben asegurarse de que cada acción asociada con una zona visual pueda ser activada sin ningún dispositivo de puntero. <guiño> pude servir para sustituir una sonrisa con guiño .Dibujo aquí --> <a name="después">Título del dibujo</a> Los dibujos con caracteres se pueden etiquetar como sigue: Ejemplo. asegúrese de que el equivalente textual lo describe adecuadamente. Cuando el usuario selecciona una de las regiones. y la palabra "dados" para la poco común abreviatura "da2". se pueden enviar datos al servidor. Ejemplo.-). O las palabras "por tanto" pueden sustituir a las flechas realizadas con guiones y el signo "mayor que" (por ejemplo: --->). HTML permite dos tipos de mapa de imagen: lado-cliente (el navegador del 123 técnicas HTML . Otra manera de sustituir los dibujos con caracteres es emplear sustitutos de idioma. Por ejemplo. Para hacer accesible un mapa de imagen. ocurre una acción -. <P> <a href="#despues">Saltar dibujo</a> <!-. 100 90 80 70 60 50 40 30 20 10 0 5 10 15 20 25 30 35 40 45 50 55 60 65 70 Frecuencia de parpadeo (hercios) Otra opción para los dibujos más pequeños con caracteres es emplear un elemento ABBR con un "title". <P><ABBR title="carita con sonrisa en caracteres">:-)</ABBR> Si el dibujo es complejo. Los mapas de imagen se crean con el elemento MAP.

los autores deben proporcionar la misma funcionalidad o información en una forma alternativa.1 Equivalentes textuales para mapas de imagen de cliente Puntos de verificación en esta sección: 1. espaciadores. pero emplea OBJECT en vez de IMG para insertar la imagen para proporcionar más información sobre la imagen: 124 técnicas HTML . Si emplea AREA para crear el mapa. mapas de imagen. Para todos los mapas de imagen. [Prioridad 1] Proporcione equivalentes textuales para los mapas de imagen si transmiten información visual. use el atributo "alt": Ejemplo. porque la geometría de la zona no se puede representar mediante valores del atributo shape). marcos.34. accesible. Los desarrolladores deben crear mapas de imagen de cliente (con "usemap") y no mapas de servidor (con ismap). Igual que otros vínculos.100.30. Una manera de proporcionar esta alternativa es facilitar un vínculo de texto para cada zona activa para permitir acceder a cada vínculo mediante el teclado. véase la sección sobre mapas de imagen de servidor. Esto incluye: imágenes. Los usuarios pueden desear teclas de acceso rápido para vínculos de uso frecuente. "longdesc" o en el contenido del elemento). a través de "alt". scripts. 7. Véase la sección sobre el texto de los vínculos para información sobre cómo redactar buen texto para vínculos. "applets" y objetos programados. representaciones gráficas del texto.1 Proporcione un texto equivalente para todo elemento no textual (por ejemplo.30" href="consulta. "ascii art".gif" alt="Mapa de imagen de las zonas de la biblioteca" usemap="#map1"> <MAP name="map1"> <AREA shape="rect" coords="0. banda sonora del vídeo y vídeos. <IMG src="bienvenido. los desarrolladores de contenidos deben proporcionar un equivalente textual. imágenes usadas como viñetas en las listas. el texto debe tener sentido cuando se lee fuera de su contexto.html" alt="Consulta"> <AREA shape="rect" coords="34. sonidos (ejecutados con o sin interacción del usuario).100" href="medios. Si resulta imprescindible emplear un mapa de imagen de servidor.0. Véase la sección sobre el acceso a los vínculos mediante teclado. GIFs animados).4. porque los mapas de servidor precisan un dispositivo de entrada específico. animaciones (por ejemplo. Si resulta imprescindible utilizar un mapa de servidor (por ejemplo. archivos exclusivamente auditivos.html" alt="Laboratorio audiovisual"> </MAP> El siguiente ejemplo ilustra la misma idea. botones gráficos.usuario procesa un URI) y lado-servidor (el servidor procesa las coordinadas del punto seleccionado).

Además de un equivalente textual.0.html" alt="Consulta"> <AREA shape="rect" coords="34.118.html">Sección de Consulta</A> y el <A href="medios.0.html" shape="circle" coords="184.184.60">Buscar</A>] [<A href="top10.50.100.0"> Diez principales</A>] </MAP> </OBJECT> 125 técnicas HTML .34.50.html" shape="rect" coords="0.gif" type="image/gif" usemap="#map1"> <MAP name="map1"> <P>Navegar por el sitio.30.276. [<A href="guia.4.100.html" shape="poly" coords="276. proporcione vínculos textuales redundantes. </OBJECT> <MAP name="map1"> <AREA shape="rect" coords="0.28">Ir</A>] [<A href="buscar. <OBJECT data="bienvenido.28.Ejemplo. el diseñador puede describir las regiones activas y proporcionar vínculos redundantes al mismo tiempo: Ejemplo. Si emplea el elemento A en vez de AREA.html" shape="rect" coords="118.0. [Prioridad 3].0.2 Vínculos redundantes de texto para mapas de imágen de cliente Puntos de verificación en esta sección: 1.100" href="medios.html" alt="Laboratorio Audiovisual"> </MAP> 7.30" href="consulta. <OBJECT data="barranav1. entre los cuales la <A href="consulta.html">Laboratorio Audiovisual</A>.276. proporcione vínculos en formato texto redundantes para cada zona activa del mapa de imagen de cliente.gif" type="image/gif" usemap="#map1"> La biblioteca tiene varias zonas.200.28">Guía de acceso</A>] [<A href="atajos.5 Hasta que las aplicaciones de usuario interpreten el texto equivalente para los vínculos de los mapas de imagen de cliente.200.

proporcione una lista alternativa de vínculos después de la imagen.1 Proporcione mapas de imagen controlados por el cliente en lugar de por el servidor. de forma que los vínculos alternativos sólo son visibles si el mapa de imagen (barranav1.4.Observe que en el ejemplo anterior. con el atributo "alt"). El problema no ocurre si los vínculos son imágenes. Hay tres técnicas: • Incluya los vínculos alternativos en el cuerpo de un elemento OBJECT (consulte el ejemplo anterior que muestra cómo incluir vínculos en el elemento OBJECT).4 Mapas de imagen de servidor Puntos de verificación en esta sección: 1.2 Proporcione vínculos redundantes en formato texto para cada zona activa de un mapa de imagen del servidor. excepto donde las zonas sensibles no puedan ser definidas con una forma geométrica.com/cgi-bin/imagemap/mi-mapa"> <IMG src="bienvenido. véase la sección sobre Agrupación y salto de vínculos. [Prioridad 1] Cuando es necesario utilizar un mapa imagen lado servidor. e indique la existencia y ubicación de la lista alternativa (por ejemplo. Observe también que los vínculos están separados por corchetes ([]). Para mayor información.html">Consulta</A>] [<A href="medios. 7.3 Mapas de imagen de cliente y de servidor Puntos de verificación en esta sección: 9. así como para ayudar a los usuarios videntes a distinguir visualmente los diferentes vínculos. el elemento MAP es el contenido del elemento OBJECT. los desarrolladores de contenido deben proporcionar una lista alternativa de las opciones del mapa de imagen. Esto se hace para impedir que los lectores de pantalla antiguos lean vínculos adyacentes como si fueran un solo vínculo.ejemplo. El texto alternativo no se lee como un vínculo único debido a las imágenes de marcación de emplazamiento empleadas por los navegadores gráficos cuando no se muestran las imágenes.4. Ejemplo. • Si se utiliza IMG para insertar la imagen.html">Laboratorio Audiovisual</A>] 126 técnicas HTML . Los desarrolladores de contenidos deberían asegurarse de incluir caracteres imprimibles (tales como corchetes o una barra vertical (|) separados por espacios en blanco entre los vínculos textuales adyacentes.gif" alt="Bienvenido! (Vínculos textuales mas abajo)" ismap> </A> <P>[<A href="consulta. <A href="http://www. [Prioridad 1] 7.gif) no lo es.

representaciones gráficas del texto. applets u otros objetos programados. Para más información consulte la sección sobre botones gráficos. 7.2 Asegúrese de que las combinaciones de los colores de fondo y primer plano tengan suficiente contraste para que sean percibidas por personas con deficiencias de percepción de color o en pantallas en blanco y negro. botones gráficos. [Prioridad 1] 6. a través de "alt". evite los movimientos en las páginas. Si esto no es posible. "longdesc" o en el contenido del elemento). "ascii art". [Prioridad 1] 127 técnicas HTML . cree una página alternativa que sí es accesible. marcos. OBJECT es el método preferido. Esto incluye: imágenes.3 Asegúrese de que las páginas sigan siendo utilizables cuando se desconecten o no se soporten los scripts.2 Asegúrese de que los equivalentes de un contenido dinámico son actualizados cuando cambia el contenido dinámico. archivos exclusivamente auditivos.1 Proporcione un texto equivalente para todo elemento no textual (por ejemplo.• Si no hay otra manera de hacer el mapa de imagen accesible. banda sonora del vídeo y vídeos. sonidos (ejecutados con o sin interacción del usuario). [Prioridad 1] 6.5 Color en las imágenes Puntos de verificación en esta sección: 2.3 Hasta que las aplicaciones de usuario permitan congelar el movimiento de los contenidos. scripts.1 Equivalentes textuales y no textuales para applets y otros objetos programados Puntos de verificación en esta sección: 1. proporcione información equivalente en una página alternativa accesible.6 Imágenes animadas Puntos de verificación en esta sección: 7. espaciadores. "applets" y objetos programados. imágenes usadas como viñetas en las listas. Los mapas de imagen de servidor y de cliente pueden ser usados como botones de envío en formularios. GIFs animados). [Prioridad 2] 8 Applets y otros objetos programados Aunque los applets pueden incluirse en un documento tanto con el elemento APPLET como con OBJECT. animaciones (por ejemplo. 7. Prioridad 3 para el texto]. [Prioridad 2 para las imágenes. mapas de imagen. 8.

[Prioridad 1 si la funcionalidad es importante y no aparece en otro lugar.. proporcione un texto equivalente en el contenido del elemento: Ejemplo. se debe hacer el applet accesible directamente.1 Haga los elementos de programación. las moléculas del globo.Si se utiliza OBJECT. las moléculas del globo.class" width="500" height="500" alt="Applet Java: como la temperature affecta a la presión"> A medida que la temperatura aumenta.. la capacidad de manipular un experimento físico) que no se puede reproducir en un formato alternativo.gif" type="image/gif"> A medida que la temperatura aumenta... </OBJECT> Un ejemplo más complejo aprovecha el hecho de que los elementos OBJECT pueden ser anidados para proporcionar representaciones alternativas de la información: Ejemplo.mpeg" type="video/mpeg"> <OBJECT data="Presion. </APPLET> 8. directamente accesibles o compatibles con las ayudas técnicas. Ejemplo desaconsejado. proporcione un equivalente textual con el atributo "alt" y dentro del contenido del elemento APPLET.2 Applets accesibles directamente Puntos de verificación en esta sección: 8. <OBJECT classid="java:Press. tales como scripts y applets. <APPLET code="Press. <OBJECT classid="java:Press. sino Prioridad 2] Si un applet (creado con OBJECT o con APPLET) precisa una interacción con el usuario (por ejemplo. </OBJECT> </OBJECT> </OBJECT> Si utiliza APPLET.class" width="500" height="500"> A medida que la temperatura aumenta..class" width="500" height="500"> <OBJECT data="Presion.. 128 técnicas HTML . las moléculas del globo. Esto permite una transformación satisfactoria del contenido para aquellas aplicaciones de usuario que sólo soportan uno de los dos mecanismos ("alt" o contenido).

T. 7. [Prioridad 2].1 Hasta que las aplicaciones de usuario permitan controlarlo. consulte [JAVAACCESS] y [IBMJAVA].4 Para los scripts y applets. evite los movimientos en las páginas. evite el parpadeo del contenido (por ejemplo.Si un applet causa movimiento. véase [TRACE]). [Prioridad 1]. 10. una película o animación) sincronice alternativas equivalentes (por ejemplo. evite provocar destellos en la pantalla. 7. 6.3 Hasta que las aplicaciones de usuario permitan congelar el movimiento de los contenidos.1 Hasta que las aplicaciones de usuario permitan desconectar la apertura de nuevas ventanas.4 Utilice unidades relativas en lugar de absolutas al especificar los valores en los atributos de los marcadores de lenguaje y en los valores de las propiedades de las hojas de estilo. asegúrese de que los manejadores de evento sean independientes del dispositivo de entrada. 7.1 Información sonora Sin contenido (*) * N. Puntos de verificación relacionados: 3. [Prioridad 2]. [Prioridad 2]. [Prioridad 2]. 6.:Por respeto al documento original mantenemos la numeración de las mismas 129 técnicas HTML .4 Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener las actualizaciones. cambio de presentación en periodos regulares.4 Para toda presentación multimedia tempodependiente (por ejemplo. el diseñador debe proporcionar un mecanismo para parar este movimiento (por ejemplo. no cree páginas que se actualicen automáticamente de forma periódica. 1. [Prioridad 1] 9 Audio y vídeo 9. consúltese el apartado siguiente para aprender cómo hacer accesibles las presentaciones de audio y vídeo. [Prioridad 2]. no provoque apariciones repentinas de nuevas ventanas y no cambie la ventana actual sin informar al usuario. subtítulos o descripciones de la banda de visual) con la presentación. así como el encendido y apagado). Para mayor información sobre el desarrollo de applets accesibles.2 Asegúrese de que cualquier elemento que tiene su propia interfaz pueda manejarse de forma independiente del dispositivo. También. [Prioridad 2].5 Asegúrese de que los contenidos dinámicos son accesibles o proporcione una página o presentación alternativa. [Prioridad 2]. 7. 9.2 Hasta que las aplicaciones de usuario permitan controlarlo. [Prioridad 2]. Estas empresas están desarrollando un API para la accesibilidad así como haciendo accesibles las clases de Java Swing.

también deben incrustarse mediante el elemento OBJECT. mapas de imagen. si la animación se emplea en un contexto pedagógico.gif" width=100 height=80> </NOEMBED> </OBJECT> Para mayor información. animaciones (por ejemplo. se debe emplear el elemento propietario EMBED anidado dentro del elemento OBJECT como sigue: Ejemplo desaconsejado. se puede considerar la inclusión de una animación repetitiva que muestra la nubosidad y la precipitación como parte de un boletín meteorológico. Esto incluye: imágenes. banda sonora del vídeo y vídeos. GIFs animados). Puesto que la animación complementa el resto del boletín (que se presenta hablado. Por ejemplo.1 Proporcione un texto equivalente para todo elemento no textual (por ejemplo. "longdesc" o en el contenido del elemento).2 Equivalentes textuales para multimedia Puntos de verificación esta sección: 1. para asegurar la compatibilidad con versiones anteriores de navegadores Netscape. palabras).com/content.3 Objetos multimedia incrustados Otros objetos. 9. marcos.cab" width=100 height=80> <PARAM name="Película" value="nombrepeli.9. a través de "alt". se debe proporcionar un equivalente textual de la información visual para permitir la comprensión de la página. por ejemplo los que precisan un plug-in. espaciadores. scripts. 130 técnicas HTML . una descripción breve es suficiente. No obstante. <OBJECT classid="clsid:A12BCD3F-GH4I-56JK-xyz" codebase="http://ejemplo. [Prioridad 1] Cuando sea necesario. "ascii art". No obstante. pero igualmente desean aprender la lección. botones gráficos. sonidos (ejecutados con o sin interacción del usuario).swf"> <EMBED src="nombrepeli.com/shockwave/download/"> </EMBED> <NOEMBED> <IMG alt="Imagen estática de la película" src="nombrepeli. en donde los alumnos aprenden acerca de la formación de las nubes en relación con la masa terrestre. "applets" y objetos programados. archivos exclusivamente auditivos. imágenes usadas como viñetas en las listas. véase [MACROMEDIA]. representaciones gráficas del texto. entonces la animación precisa una descripción para los que no pueden verla. es decir.swf" width=100 height=80 pluginspage="http://ejemplo.

1 Titule cada marco para facilitar su identificación y navegación de los mismos. [Prioridad 1] Ejemplo.10 Marcos (frames) Para los usuarios videntes. • Es imposible hacer referencia al "estado actual" de un conjunto de marcos con URI. También proponemos algunas alternativas a los marcos que emplean el HTML 4. 10. los marcos tienden a degradar la funcionalidad del botón "página anterior" del navegador.01 y CSS e intentamos superar las limitaciones de las implementaciones actuales de los marcos. FRAME.html" title="Barra de navegación"> <FRAME src="doc. los marcos sirven para organizar la página en zonas diferentes. las relaciones entre los contenidos en los distintos marcos (por ejemplo. una vez que cambien los contenidos de un conjunto de marcos.html" title="Vínculo a biblioteca"> Seleccionar para ir a la biblioteca electrónica</A> </NOFRAMES> </FRAMESET> 131 técnicas HTML . tratamos cómo hacer los marcos más accesibles. Emplear el atributo "title" para dar nombre a los marcos. Los marcos tal y como se implementan en la actualidad (con los elementos FRAMESET. En las secciones siguientes.1 Proporcionar un título para cada marco Puntos de verificación en esta sección: 12. Para los usuarios invidentes.html" title="Documentos"> <NOFRAMES> <A href="lib. y IFRAME) son problemáticos por varios motivos: • Sin scripts. 90%" title="Nuestra biblioteca de documentos electrónicos"> <FRAME src="nav.01 Frameset//EN"> <HTML> <HEAD> <TITLE>Documento con un conjunto de marcos sencillo</TITLE> </HEAD> <FRAMESET cols="10%. • Al abrir el contenido de un marco en una ventana nueva puede desorientar al usuario o simplemente molestarle. cuando un marco contiene el índice y otro el contenido principal) debe transmitirse de otra manera. el URI original ya no es válido. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.

html" name="noticia" title="Noticia seleccionada .html" name="espacioanuncio" title="Publicidad"> </FRAMESET> 132 técnicas HTML . "applets" y objetos programados.2 Describir las relaciones entre marcos Puntos de verificación en esta sección: 1.1 Proporcione un texto equivalente para todo elemento no textual (por ejemplo.10%"> <FRAMESET rows="20%. si no resulta obvio solamente con el título del marco. marcos.html" name="promo" title="promociones"> <FRAME src="barranavega. animaciones (por ejemplo. scripts.contenido principal" longdesc="frameset-desc. imágenes usadas como viñetas en las listas.html" name="barranavega" title="Barra de navegación global del sitio" longdesc="frameset-desc. mapas de imagen. [Prioridad 2] Ejemplo.10. [Prioridad 1] 12. GIFs animados).2 Describa el propósito de los marcos y como éstos se relacionan entre sí. botones gráficos. "ascii art". sonidos (ejecutados con o sin interacción del usuario).html#barranavega"> </FRAMESET> <FRAME src="historia. "longdesc" o en el contenido del elemento).html#titulares"> <FRAME src="anuncio.20%"> <FRAME src="titulares. banda sonora del vídeo y vídeos. Esto incluye: imágenes.html#noticia"> <FRAMESET rows="*. archivos exclusivamente auditivos.*.*"> <FRAME src="promo. a través de "alt".html" name="indice" title="Índice de otros titulares nacionales" longdesc="frameset-desc.01 Frameset//EN"> <HTML> <HEAD> <TITLE>Las noticias de hoy</TITLE> </HEAD> <FRAMESET cols="10%. representaciones gráficas del texto. espaciadores. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.

este marco contiene vínculos a las noticias principales de hoy dentro de esta sección. espaciadores. [Prioridad 1] 6. 10. "longdesc" o en el contenido del elemento). "ascii art".html">Versión sin marcos</a></p> <p><a href="frameset-desc.1 Proporcione un texto equivalente para todo elemento no textual (por ejemplo.este marco contiene vínculos a las secciones más importantes de este sitio: Noticias del mundo.html puede ser algo como: #barranavega . imágenes usadas como viñetas en las listas.html": 133 técnicas HTML . y Noticias del ocio. representaciones gráficas del texto. los vínculos a las descripciones de los marcos deben incluirse junto con otro contenido alternativo en el elemento NOFRAMES del FRAMESET. Noticias nacionales. marcos. si el usuario lee "arriba. mapas de imagen. Noticias tecnología. En este ejemplo. . archivos exclusivamente auditivos. Observe que si el contenido de un marco cambia. sonidos (ejecutados con o sin interacción del usuario). Esto incluye: imágenes. animaciones (por ejemplo. [Prioridad 2] Ejemplo. #noticia #indice . el equivalente textual ya no será aplicable. Noticias locales. scripts.5 Asegúrese de que los contenidos dinámicos son accesibles o proporcione una página o presentación alternativa. GIFs animados). "applets" y objetos programados. Además.<NOFRAMES> <p><a href="noframes.html">Descripciones de los marcos.</a></p> </NOFRAMES> </FRAMESET> </HTML> El texto de la página frameset-desc. botones gráficos.3 Crear páginas para navegadores que no soportan FRAME Puntos de verificación en esta sección: 1. a través de "alt". banda sonora del vídeo y vídeos.este marco contiene la historia actualmente seleccionada.

</A> <!-. Las imágenes se pueden insertar en el archivo HTML y sus alternativas textuales cambiarán correctamente. Observe que cuando cambia el contenido del marco.html" title="Tabla de contenidos"> <NOFRAMES> <A href="tabla_de_contenido. entonces debe cambiar la descripción también. Ejemplo. Esto no es posible si se inserta una IMG directamente dentro del marco.html también son visibles aquí. [Prioridad 1] Los diseñadores de contenidos deben proporcionar un equivalente textual de los marcos para asegurar que los contenidos de los mismos y las relaciones entre los marcos tienen sentido.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.4 Contenidos fuente para marcos Puntos de verificación en esta sección: 6.html</TITLE> </HEAD> <FRAMESET cols="50%. 50%" title="Nuestro documento largo"> <FRAME src="principal.otros vínculos de navegación visibles en principal.html" title="Donde se muestra el contenido"> <FRAME src="tabla_de_contenido.01 Frameset//EN"> <HTML> <HEAD> <TITLE>Este es arriba.01 Frameset//EN"> <HTML> <HEAD> <TITLE>Un documento de marcos correcto</TITLE> </HEAD> 134 técnicas HTML . Por este motivo.html">Tabla de contenidos. 10. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. el diseñador de contenidos siempre debe hacer que el origen ("src") del marco sea un archivo HTML.2 Asegúrese de que los equivalentes de un contenido dinámico son actualizados cuando cambia el contenido dinámico. --> </NOFRAMES> </FRAMESET> </HTML> y la aplicación de usuario no muestra los marcos. el usuario podrá acceder (mediante un vínculo) a una versión sin marcos de la misma información.

10.html --> <P><IMG src="manzanos. por ejemplo.html" title="Manzanos"> </FRAMESET> </HTML> <!-.<FRAMESET cols="100%" title="Conjunto de marcos que evoluciona"> <FRAME name="marcobueno" src="manzanos.01 Frameset//EN"> documento de marcos incorrecto</TITLE> cols="100%" title="conjunto de marcos estático"> name="marcomalo" src="manzanos. no provoque apariciones repentinas de nuevas ventanas y no cambie la ventana actual sin informar al usuario. un vínculo causa la inserción de una nueva imagen en el marco: <P>Visite un huerto de <A target="marcomalo" href="naranjos. <!DOCTYPE <HTML> <HEAD> <TITLE>Un </HEAD> <FRAMESET <FRAME HTML PUBLIC "-//W3C//DTD HTML 4. [Prioridad 2] Los diseñadores de contenidos deben evitar de especificar una ventana nueva como objetivo (target) de un marco con target="_blank".gif" title="Manzanos"> </FRAMESET> </HTML> Observe que si.gif" alt="Manzanos"> El siguiente ejemplo desaconsejado no debe emplearse puesto que inserta una IMG en un marco directamente: Ejemplo desaconsejado.5 Usar objetivos (target) para FRAME Puntos de verificación en esta sección: 10.1 Hasta que las aplicaciones de usuario permitan desconectar la apertura de nuevas ventanas.En manzanos. 135 técnicas HTML .gif" title="Naranjos">naranjos</A> el título inicial del marco ("Manzanos") ya no corresponderá con el contenido actual del marco ("Naranjos").

se recomienda probar lo siguiente: 1. left: 0. con la siguiente regla CSS la barra de navegación se coloca en el lateral izquierdo de la página y ocupa 25% del espacio horizontal disponible: OBJECT { float: left. width: 25% } Con la siguiente regla CSS se fija el mecanismo de navegación al final de la página a la izquierda y lo mantiene en posición aunque el usuario se desplace hacía abajo en la página: OBJECT { position: fixed. [Prioridad 2] En los ejemplos anteriores. bottom: 0 } Nota. 10. acceso a la información más importante en primer lugar. Por ejemplo. <P> <OBJECT data="nav. 136 técnicas HTML . incluirlo al final del documento con el código siguiente (o similar) de OBJECT: Ejemplo. Como alternativa a los marcos. Un documento separado permite compartir el mecanismo de navegación entre múltiples documentos.html"> Ir al <A href="nav. Use hojas de estilo para colocar el mecanismo de navegación en la posición deseada dentro de la ventana.6 Alternativas a los marcos Uno de los usos más comunes de los marcos es para dividir la ventana del navegador en dos partes: una ventana de navegación y una de contenidos.4 Utilice unidades relativas en lugar de absolutas al especificar los valores en los atributos de los marcadores de lenguaje y en los valores de las propiedades de las hojas de estilo. observe que los tamaños de los marcos se especifican como porcentajes. 2. 3.6.1 Fijar el tamaño de los marcos con unidades relativas Puntos de verificación en esta sección: 3. En cada documento que requiere un mecanismo de navegación. Los mecanismos de navegación y otro contenidos se pueden insertar en el documento mediante 'includes' en el servidor.html">índice de contenidos</A> </OBJECT> Se incluye el mecanismo de navegación al final del documento para dar al usuario con hojas de estilo desactivadas.html"). Crear un documento para el mecanismo de navegación (que llamamos "nav.10. Cuando el usuario cambia el tamaño de la ventana los marcos se ajustan también y siguen siendo legibles.

1 Acceso a los formularios mediante el teclado Puntos de verificación en esta sección: 9. <FORM action="submit" method="post"> <P> <LABEL for="usuario" accesskey="U">nombre</LABEL> <INPUT type="text" id="usuario"> </FORM> 11. especificamos una secuencia de navegación con la tecla TAB entre elementos (en secuencia. Cuando los controles de formulario se pueden agrupar en unidades lógicas.3 Divida los bloques largos de información en grupos más manejables cuando sea natural y apropiado. [Prioridad 2] Los diseñadores de contenidos deben agrupar la información donde esto sea natural y apropiado. Al teclear "U" el enfoque pasa a la etiqueta.11 Formularios Esta sección trata de la accesibilidad de los formularios y los controles que se pueden poner dentro de un elemento FORM. 11. para permitir al usuario teclear el texto. que a su vez pasa el enfoque al control de entrada de texto. "enviar") con "tabindex": Ejemplo. "campo2". [Prioridad 3] 9. <FORM action="submit" method="post"> <P> <INPUT tabindex="2" type="text" name="campo1"> <INPUT tabindex="1" type="text" name="campo2"> <INPUT tabindex="3" type="submit" name="enviar"> </FORM> Este ejemplo asigna la letra "U" como tecla de acceso (con "accesskey"). "campo1". Ejemplo. [Prioridad 3] En el ejemplo siguiente.4 Cree un orden lógico para navegar con el tabulador a través de vínculos. los controles de formulario y los grupos de controles de formulario. utilice el elemento FIELDSET y aplique una etiqueta a esas unidades con el elemento LEGEND: Ejemplo 137 técnicas HTML .2 Agrupar los controles dentro del formulario Puntos de verificación en esta sección: 12.5 Proporcione atajos de teclado para los vínculos más importantes (incluidos los de los mapas de imagen de cliente). controles de formulario y objetos.

..5" value="pm2_3.5 </OPTGROUP> <OPTGROUP label="PortMaster 2"> <OPTION label="3.5">PortMaster 2 con ComOS 3.mas datos personales.1">PortMaster 3 con ComOS 3..7.. </FIELDSET> <FIELDSET> <LEGEND>Historial médico</LEGEND> ..1" value="pm3_3.7">PortMaster 2 con ComOS 3.com/nuevousuario" method="post"> <FIELDSET> <LEGEND>Datos personales</LEGEND> <LABEL for="nombre">Nombre: </LABEL> <INPUT type="text" id="nombre" tabindex="1"> <LABEL for="apellidos">Apellidos: </LABEL> <INPUT type="text" id="apellidos" tabindex="2"> .5">PortMaster 3 con ComOS 3.5" value="pm3_3.7">PortMaster 3 con ComOS 3. <FORM action="http://ejemplo. Especifique una etiqueta para el grupo de opciones con el atributo label en el OPTGROUP.7 <OPTION label="3. </FIELDSET> </FORM> 11.7" value="pm2_3.7 <OPTION label="3.<FORM action="http://ejemplo.datos del historial médico. Para las listas largas de selecciones en los menús (en las cuales puede resultar difícil orientarse).7. los desarrolladores de contenidos deben agrupar los elementos SELECT (definidos con OPTION) en una jerarquía con el elemento OPTGROUP.7...1 Agrupar las opciones de menú Los diseñadores de contenido deben agrupar la información donde esto sea natural y apropiado.5 </OPTGROUP> <OPTGROUP label="IRX"> 138 técnicas HTML .1 <OPTION label="3.2.. Ejemplo.7" value="pm3_3.com/prog/algunprog" method="post"> <P> <SELECT name="ComOS"> <OPTGROUP label="PortMaster 3"> <OPTION label="3.

imágenes usadas como viñetas en las listas. "longdesc" o en el contenido del elemento). espaciadores. El ejemplo siguiente muestra cómo una etiqueta y un control de formulario pueden asociarse implícitamente mediante marcadores.7R">IRX con ComOS 3. marcos. [Prioridad 1] El uso de las imágenes para decorar los botones permite a los diseñadores hacer sus formularios diferentes y mas fáciles de comprender. archivos exclusivamente auditivos. [Prioridad 2] 10. con los elementos INPUT o BUTTON) no es en sí inaccesible . GIFs animados). asegúrese de que la etiqueta está colocada adecuadamente.<OPTION label="3. representaciones gráficas del texto. [Prioridad 2] La sección anterior muestra un ejemplo de una etiqueta (LABEL) con "for" en HTML 4.5R" value="IRX_3.4 Botones gráficos Puntos de verificación en esta sección: 1. <LABEL for="nombre">Nombre: <INPUT type="text" id="nombre" tabindex="1"> </LABEL> 11. sonidos (ejecutados con o sin interacción del usuario). "ascii art".01.2 Hasta que las aplicaciones de usuario soporten explícitamente la asociación entre control de formulario y etiqueta.5R">IRX con ComOS 3. Ejemplo. Esto incluye: imágenes. mapas de imagen.siempre que se proporcione un equivalente textual para la imagen. animaciones (por ejemplo.7R <OPTION label="3. scripts. El uso de una imagen para un botón (por ejemplo.7R" value="IRX_3. botones gráficos.1 Proporcione un texto equivalente para todo elemento no textual (por ejemplo. 139 técnicas HTML . "applets" y objetos programados. a través de "alt".5R </OPTGROUP> </SELECT> </FORM> 11.3 Etiquetas para los controles de formulario Puntos de verificación en esta sección: 12. Una etiqueta se asocia implícitamente con su control de formulario bien mediante las marcas o por su posición en la página. para todos los controles de formularios con etiquetas asociadas implícitamente. banda sonora del vídeo y vídeos.4 Asocie explícitamente las etiquetas con sus controles.

No obstante, un botón de envío de formulario que emplea INPUT, type="image" crea un especie de mapa de imagen lado servidor. Cuando se pincha con el ratón, las coordinadas x e y se transmiten al servidor con los datos de formulario. La sección sobre Imágenes y mapas de imagen trata de por qué se deben de evitar las imágenes lado-servidor, y sugiere el uso de mapas de imagen lado-cliente como alternativa. En HTML 4.01, los botones gráficos ahora pueden ser mapas de imagen lado-cliente. Para conservar la funcionalidad proporcionada por el servidor, los autores tienen las siguientes opciones, tal y como se describe en la Recomendación HTML 4.01 ([HTML4], sección 17.4.1): Si el servidor ejecuta acciones diferentes según la zona seleccionada con el ratón, los usuarios con navegadores no gráficos serán discriminados. Por este motivo, los creadores de contenidos deben considerar otras técnicas: • El uso de botones de envío (submit) múltiples (cada uno con su propia imagen) en vez de un solo botón de envío (submit) gráfico. Los creadores de contenido pueden emplear hojas de estilo para controlar el posicionamiento de estos botones. • Emplear un mapa de imagen lado cliente conjuntamente con scripts.

11.5 Técnicas para controles de formulario específicos
Puntos de verificación en esta sección: 10.4 Hasta que las aplicaciones de usuario manejen correctamente los controles vacíos, incluya caracteres por defecto en los cuadros de edición y áreas de texto. [Prioridad 3] Ejemplo. Algunas ayudas técnicas antiguas requieren un texto inicial en los controles de formulario tales como TEXTAREA para funcionar correctamente. <FORM action="http://ejemplo.com/prog/text-read" method="post"> <P> <TEXTAREA name=tunombre rows="20" cols="80"> Teclee su nombre aquí. </TEXTAREA> <INPUT type="submit" value="Enviar"><INPUT type="reset"> </P> </FORM> Proporcione un equivalente textual para las imágenes empleadas como botones “enviar”: Ejemplo.

140

técnicas HTML

<FORM action="http://ejemplo.com/prog/text-read" method="post"> <P> <INPUT type="image" name=submit src="button.gif" alt="Enviar"> </FORM> Consulte también la sección sobre acceso con teclado puesto que es también de aplicación para controles de formulario.

11.6 Compatibilidad con versiones anteriores para formularios
En algunos navegadores HTML 3.2, • El elemento BUTTON no aparece • INPUT con type="button" se muestra como un campo de entrada de texto

12

Scripts
Esta sección trata sobre la accesibilidad de los scripts incluidos en un documento mediante el elemento SCRIPT.

12.1 Transformación correcta de los scripts
Puntos de verificación en esta sección: 6.5 Asegúrese de que los contenidos dinámicos son accesibles o proporcione una página o presentación alternativa. [Prioridad 2] Los diseñadores de contenido deben asegurarse de que las páginas sean accesibles con soporte para scripts desactivado o con navegadores que no soporten scripts. • Evite la creación de contenido sobre la marcha (on the fly) en el lado del cliente. Si el navegador del usuario no ejecuta scripts, el contenido no se generará o no se mostrará. Esto es distinto que mostrar o ocultar contenido ya existente mediante una combinación de scripts y hojas de estilo; si no se ejecuta el script, siempre se mostrará el contenido. Esto tampoco excluye la generación de páginas en el servidor para enviarlas al cliente. • Evite crear vínculos que emplean "JavaScript" como URI. Si el usuario no ejecuta scripts, entonces no funcionarán los vínculos, puesto que el navegador no podrá crear el contenido del vínculo. Ejemplo de uso desaconsejado. Este vínculo no llega a ningún sitio para un cliente que no ejecuta scripts o no los carga. <A href="javascript:">...</A>

141

técnicas HTML

12.2 Scripts que causan destello
Puntos de verificación en esta sección: 7.1 Hasta que las aplicaciones de usuario permitan controlarlo, evite provocar destellos en la pantalla. [Prioridad 1]

12.3 Scripts que causan movimiento y parpadeo
Puntos de verificación en esta sección: 7.2 Hasta que las aplicaciones de usuario permitan controlarlo, evite el parpadeo del contenido (por ejemplo, cambio de presentación en periodos regulares, así como el encendido y apagado). [Prioridad 2] 7.3 Hasta que las aplicaciones de usuario permitan congelar el movimiento de los contenidos, evite los movimientos en las páginas. [Prioridad 2]

12.4 Scripts directamente accesibles
Puntos de verificación en esta sección: 6.4 Para los scripts y applets, asegúrese de que los manejadores de evento sean independientes del dispositivo de entrada. [Prioridad 2] 6.3 Asegúrese de que las páginas sigan siendo utilizables cuando se desconecten o no se soporten los scripts, applets u otros objetos programados. Si esto no es posible, proporcione información equivalente en una página alternativa accesible. [Prioridad 1] 8.1 Haga los elementos de programación, tales como scripts y applets, directamente accesibles o compatibles con las ayudas técnicas. [Prioridad 1 si la funcionalidad es importante y no aparece en otro lugar, sino Prioridad 2] 9.3 Para los "scripts", especifique manejadores de evento lógicos en vez de manejadores de evento dependientes de dispositivos. [Prioridad 2] Un manejador de eventos es un script que se invoca cuando ocurre un evento concreto (por ejemplo, se mueve el ratón, se aprieta una tecla, se carga el documento, etc.). En HTML 4.01, los manejadores de eventos se asocian a los elementos mediante los atributos de manejador de evento (los atributos que comienzan con "on", por ejemplo en "onkeyup"). Algunos manejadores de eventos, cuando se invocan, causan efectos puramente decorativos tales como resaltar una imagen o cambiar el color del texto de un elemento. Otros manejadores de eventos causan efectos más importantes, tales como realizar un cálculo, proporcionar información importante al usuario, o enviar un formulario. Para manejadores de eventos que hacen más que cambiar la apariencia de un elemento, los desarrolladores de contenidos deben hacer lo siguiente:

142

técnicas HTML

representaciones gráficas del texto...01. Emplear disparadores al nivel de aplicación en vez de disparadores de nivel de interacción con el usuario. Ejemplo. "longdesc" o en el contenido del elemento). "applets" y objetos programados. pero en los navegadores actuales se implementan como eventos específicos del teclado. o Utilice "onmouseup" con "onkeyup" o Utilice "onclick" con "onkeypress" Observe que en HTML 4. los atributos al nivel de aplicación son "onfocus". [Prioridad 1] Una manera para conseguirlo es con el elemento NOSCRIPT. animaciones (por ejemplo. imágenes usadas como viñetas en las listas. No emplee manejadores de eventos que dependan de las coordenadas de ratón porque esto impide la interacción independiente de dispositivo.1 Proporcione un texto equivalente para todo elemento no textual (por ejemplo. espaciadores. </SCRIPT> <NOSCRIPT> <P>Resultados de los partidos de ayer:</P> <DL> 143 técnicas HTML . proporcione mecanismos redundantes de interacción (es decir.2 Asegúrese de que los equivalentes de un contenido dinámico son actualizados cuando cambia el contenido dinámico. El contenido de este elemento se muestra cuando los scripts no están habilitados.1. <SCRIPT type="text/tcl"> .. [Prioridad 1] 6. 12.01 no existe equivalente de teclado para doble-click ("ondblclick"). En HTML 4. mapas de imagen. y "onselect". botones gráficos..un script Tcl para mostrar un resumen de resultados deportivos. a través de "alt". "ascii art". 2. "onblur" (lo opuesto a "onfocus"). Esto incluye: imágenes.5 Presentación alternativa de scripts Puntos de verificación en esta sección: 1. banda sonora del vídeo y vídeos. scripts. Note que estos atributos son diseñados para ser independiente del dispositivo. sonidos (ejecutados con o sin interacción del usuario). Si tiene que emplear atributos específicos de un dispositivo. especifique dos manejadores para un mismo elemento): o Utilice "onmousedown" con "onkeydown". GIFs animados). archivos exclusivamente auditivos. marcos. 3.

Sonics resumen del partido</A> . [Prioridad 2] 13 Índice de elementos y atributos HTML Puntos de verificación en esta sección: 11.0. [Prioridad 2] 10. La tercera columna indica la función del elemento.. 4.2.4 Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener las actualizaciones. <DD><A href="bullsonic.1 Hasta que las aplicaciones de usuario permitan desconectar la apertura de nuevas ventanas. La última columna lista las secciones del presente documento en las que se trata el elemento.mas resultados. En su lugar.. No aparecen en esta tabla los elementos que están obsoletos para HTML 4. [Prioridad 2] 7.01 van seguidos de un asterisco (*). configure el servidor para que ejecute esta posibilidad.html">Bulls vs. no provoque apariciones repentinas de nuevas ventanas y no cambie la ventana actual sin informar al usuario. La entrada "N/A" significa que el elemento no se trata en este documento.01. La primera columna de esta tabla vincula a la definición del elemento en la especificación HTML 4.01).5 Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener el redireccionamiento automático.01 o no existen en una especificación W3C de HTML (2.6 Actualizaciones de la página y ventanas nuevas Puntos de verificación en esta sección: 7. </DL> </NOSCRIPT> 12.. Sonics 80. 3. 144 técnicas HTML .01 ([HTML4] ( *) . no utilice marcadores para redirigir las páginas automáticamente.<DT>Bulls 91.. La segunda columna indica otras especificaciones W3C de HTML que incluyen cada elemento. Los elementos que están desaconsejados en HTML 4.2 Evite características desaconsejadas por las tecnologías W3C. no cree páginas que se actualicen automáticamente de forma periódica. [Prioridad 2] Elementos Este índice lista todos los elementos de HTML 4.

2 2.2 3.0.2 2.2 3.0.0. 3. 3.0. 3. 3. 3.0. 3.2 2.2 2. 3.2 2.0.2 Estructura Presentación Estructura Estructura 145 técnicas HTML .2 2.Nombre del elemento A ABBR ACRONYM ADDRESS APPLET* AREA B BASE BASEFONT* BDO BIG BLOCKQUOTE BODY BR BUTTON CAPTION CENTER* CITE CODE Definido tambien en 2.0.2 3. 3.2 2.2 Función Estructura Estructura Estructura Técnicas N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A 2. 3.2 Metadato Remplazado Estructura Presentación Procesamiento Presentación Procesamiento 3.0.2 Presentación Estructura Estructura Presentación Estructura 3.0.2 3.

0.0.2 2.2 2.0.0.0. 3.0. 3. 3.2 2.2 2.2 3. 3.2 2. 3. 3.0. 3.0.2 Estructura Estructura Presentación Estructura 146 técnicas HTML . 3.2 2. 3.2 2.0.2 Presentación Estructura Remplazado Presentación 2. 3.Nombre del elemento COL COLGROUP DD DEL DFN DIR* DIV DL DT EM FIELDSET FONT* FORM FRAME FRAMESET H1 HEAD HR HTML Definido tambien en Función Estructura Estructura Técnicas N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A 2.2 Estructura Metadato Estructura 2.2 Estructura Estructura Estructura Estructura Estructura Estructura 3.0.

2 Estructura Estructura Estructura Estructura 2. 3.0. 3.0. 3. 3.0.2 2.2 Función Presentación Remplazado Técnicas N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A 2.0.2 Remplazado Estructura Metadato 2. 3.2 3.2 2.Nombre del elemento I* IFRAME IMG INPUT INS ISINDEX* KBD LABEL LEGEND LI LINK MAP MENU* META NOFRAMES NOSCRIPT OBJECT OL OPTGROUP Definido tambien en 2. 3. 3.2 2.2 Estructura Metadato Estructura Estructura Metadato Alternativa Alternativa Remplazado 2.0.0. 3.0.0. 3.0.2 2. 3.2 2.2 Estructura Estructura 147 técnicas HTML .0.

2 3.2 (DTD) 2.2 3.0.2 (DTD) 3.0.2 2. 3.Nombre del elemento OPTION P PARAM PRE Q S* SAMP SCRIPT SELECT SMALL SPAN STRIKE* STRONG STYLE SUB SUP TABLE TBODY TD Definido tambien en 2.2 3.0.2 Presentación Estructura Procesamiento Presentación Presentación Estructura Estructura 3.0. 3. 3.2 2.2 3.2 3.2 Estructura 148 técnicas HTML .2 Función Estructura Estructura Procesamiento Presentación Estructura Presentación Técnicas N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A 2.0. 3. 3.0. 3.2 Estructura Procesamiento Estructura Presentación Estructura 3.2 2.

2 3. La segunda columna indica otras especificaciones de HTML que incluyen cada atributo.2 3.0.2 2.01 o no existen en una especificación HTML de la W3C (2. La entrada "N/A" significa que el elemento no se trata en este documento.0.01) no aparecen en esta tabla. 4.2 Metadato Estructura Presentación Presentación Estructura Estructura Atributos Este índice lista algunos atributos de HTML 4. Los atributos y elementos desaconsejados en HTML 4. La última columna lista las secciones en el presente documento donde se trata el atributo.2 2.0. 149 técnicas HTML .2. Los atributos y elementos que están obsoletos para HTML 4. La tercera columna indica los elementos que toman este atributo. Los atributos que se aplican a la mayoría de los elementos de HTML 4.01 ([HTML4]). consulte la especificación HTML 4. 3. 3.2 2. 3.0. 3. La cuarta columna indica la función del atributo.0.01 para la relación exacta de elementos con este atributo.2 Estructura Estructura 2.2 Función Estructura Estructura Técnicas N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A 3.01 se indican como tales. 3.01 ([HTML4]) van seguidos de un asterisco (*). La primera columna de esta tabla vincula a la definición del atributo en la especificación HTML 4.0. 3.01 que afectan a la accesibilidad y los elementos a los que se aplican.Nombre del elemento TEXTAREA TFOOT TH THEAD TITLE TR TT U* UL VAR Definido tambien en 2.

AREA. LABEL. AREA.Nombre del atributo abbr acceskey Aplicable a los elementos TD. TH A. LINK Mayoria de elementos OPTION Mayoria de elementos IMG. LEGEND. INPUT TD. IMG. TEXTAREA APPLET. INPUT. TH Mayoria de elementos TABLE IMG. IFRAME TD. OBJECT Función Alternativa Interfaz usuario Técnicas N/A N/A alt axis class dir for headers hreflang id label lang longdesc scope style summary tabindex Alternativa Estructura Estructura Procesamiento Estructura Estructura Metadato Estructura Alternativa Metadato Alternativa Estructura Procesamiento Alternativa Interfaz usuario N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A 150 técnicas HTML . TH A. FRAME. INPUT. BUTTON. TH Mayoria de elementos Mayoria de elementos LABEL TD.

vlink*. OBJECT Función Metadato Procesamiento Técnicas N/A N/A La siguiente es una lista de atributos HTML 4. face*. charoff. datetime Atributos de los manejadores de eventos: onblur. marginheight. scrolling. coords. char. onsubmit. INPUT. cellspacing. cite. color*. rules. alink*. frame. noshade*. Los desarrolladores de contenido deberían usar hojas de estilo en lugar de atributos de presentación. onkeypress. border. onclick.Nombre del atributo title usemap Aplicable a los elementos Mayoria de elementos IMG. background*. onunload 151 técnicas HTML . onchange. Otros atributos estructurales: start*. shape Otros atributos de la interfaz de usuario: target. onmousemove. size (deprecated according to element). colspan. span Otros atributos de presentación: align*. link*. consulte la sección “manejadores de eventos independientes del dispositivo” para más detalles. rowspan. text*. size*. hspace*.01 no relacionados directamente con la accesibilidad. onmousedown. onselect. Para los atributos de manejadores de eventos. nowrap*. onkeydown. valign*. clear*. marginwidth. onmouseout. noresize Otros atributos de metadatos: type. cellpadding. onload. value*. bgcolor*. ondblclick. onreset. onfocus. vspace*. onmouseup. rows. onmouseover. onkeyup. frameborder. compact*. onload. cols Otros atributos del proceso de instrucción: ismap.

H. Esta Recomendación CSS2 es http://www. A.org/TR/WCAG10-TECHS/. level 2 Recommendation".w3. Jacobs. B. [CSS2] "CSS.org/TR/1998/REC-MathML-19990707/. El ultimo borrador de las Técnicas está disponible en http://www. La última versión de este documento está disponible en http://www.w3. H. 24 de diciembre de 1999.0". [CSS1] "CSS.0". level 1 Recommendation".org/TR/REC-MathML. editores. La útlima versión de MathML 1.w3.0". 5 de mayo de 1999.org/TR/1999/REC-CSS1-19990111. Chisholm. W. W.w3. and I.0 es http://www.w3.org/TR/WCAG10-CSS-TECHS/. Le Hors. consulte la lista de Informes Técnicos de W3C en at http://www. 17 de Diciembre de 1996. Vanderheiden. [WCAG10-CSS-TECHNIQUES] "CSS Techniques for Web Content Accessibility Guidelines 1.0". G. and I. Jacobs.w3. Vanderheiden. Lilley. [MATHML] "Mathematical Markup Language".w3.org/TR/1999/WAI-WEBCONTENT-19990505/. revisada el 11 enero de 1999. Esta Recomendación MathML 1. Chisholm. Vanderheiden.w3.org/TR/1998/REC-CSS2-19980512/. 7 de abril de 1998.0 está disponible en http://www. y I. Bos. Bos. Esta Recomendación WCAG 1. [HTML4] "HTML 4. G.0 es http://www. Ion and R.01 Recommendation". [WCAG10] "Web Content Accessibility Guidelines 1. editores.org/TR/REC-CSS2. editores.Referencias Para ver la última versión de cualquier especificación W3C. Jacobs. La última versión de CSS2 está disponible en http://www.w3.w3. 152 técnicas HTML . G.01 es http://www. Wium Lie. edirtores. Esta Recomendación CSS1 es http://www. D. y I. 12 de mayo de 1998. Wium Lie. editores. Jacobs. editores. B.org/TR/1999/REC-html401-19991224/. Esta Recomendación HTML 4.w3. La última versión de CSS1 está disponible en http://www. Miner. [WCAG10-TECHS] "Techniques for Web Content Accessibility Guidelines 1. C. W.org/TR/REC-CSS1. Chisholm.org/TR. P. Este documento explica como implementar los puntos de verificación definidos en las "Pautas de Accesibilidad al Contenido en la Web 1. I. Jacobs. Raggett. revisada 7 de julio de 1999. editores.

Cualquier referencia a un producto no es una recomendación de ese producto. Raman. [WAI-ER] El Grupo de trabajo sobre Evaluación y Reparación de WAI 153 técnicas HTML . Chisholm. G.1 Otras pautas [IBMJAVA] IBM Guidelines for Writing accesible Applications Using 100% Pure Java proporcionadas por IBM Special Needs Systems. [JAVAACCESS] Información sobre Java Accessibility and Usability. 15. V. [ASTER] Para información sobre ASTER. Estas referencias se incluyen para su comodidad.3 Recursos de accesibilidad [TRACE] El Centro de I+D de Trace. que están ajenas a su control. que incluye un applet Java con barras de desplazamiento que pueden ser inmovilizadas por el usuario. Consulte este sitio para obtener una variada información sobre la accesibilidad. editores. 15. [MACROMEDIA] Flash OBJECT and EMBED Tag Syntax de Macromedia. Vanderheiden. 15. consulte la página de T. del Departamento de Educación de los Estados Unidos. un "Sistema Sonoro para Lecturas Técnicas". Estas Pautas Unificadas de Accesibilidad para Sitios Web han sido compiladas por el Trace R & D Center de la Universidad de Wisconsin con fondos del National Institute on Disability and Rehabilitation Research (NIDRR). [HYPERMEDIA] El navegador de hipermedios Techexplorer de IBM.2 Las aplicaciones de usuario y otras herramientas El sitio web de la WAI mantiene una lista de navegadores Web alternativos (ayudas técnicas y otras aplicaciones de usuario diseñadas para la accesibilidad).Recursos Nota: W3C no garantiza la estabilidad de cualquiera de las siguientes referencias. [UWSAG] "The Unified Web Site Accessibility Guidelines". proporcionada por Trace R&D Center. W.

Larry Goldberg. Charles McCathieNevile. Liam Quinn. Phill Jenkins. Chetz Colwell. Kevin Carey. Raman. Chuck Letourneau. Trace Research and Development Persona de contacto del equipo W3C: Wendy Chisholm Nuestro agradecimiento a las siguientes personas que han contribuido con su tiempo y sus valiosos comentarios a dar forma a estas pautas: Harvey Bingham. Jutta Treviranus. Universidad de Melbourne Gregg Vanderheiden.V. Mark Novak. David Pawson. George Kerscher. Robert Savellis. and Jaap van Lelieveld 154 técnicas HTML . Michael Pieper. MegaZone (Livingston Enterprises). Steve Tyler. Marja-Riitta Koivunen. Scott Luebking. William Loughborough. Neal Ewers.Agradecimientos Co-directores del Grupo de Trabajo de las Pautas de Contenido en la Web: Jason White. Al Gilman. Charles Oppermann. Greg Rosmaita. Leonard Kasday. Murray Maloney. Josh Krieger. T. Masafumi Nakane. Mike Paciello. Jon Gunderson. Dave Raggett. Geoff Freed. Eric Hansen.

técnicas CSS para las pautas de accesibilidad al contenido en la web 1.0 .

Para información sobre otros documentos de la serie. se espera que esta serie de documentos específicos evolucione según cambian las tecnologías y los desarrolladores de contenidos descubran técnicas más efectivas para el diseño de contenidos Web accesibles. Los ejemplos desaconsejados están resaltados y los lectores los deben leer con precaución puesto que se incluyen únicamente a título de ilustrativo.org. consulte las "Técnicas para las Pautas de Accesibilidad al Contenido en la Web 1. University of Wisconsin -.org. producida y suscrita por el Grupo de Trabajo de las Pautas de Accesibilidad al Contenido en la Web (WCAG WG). W3C Resumen técnicas CSS para las pautas de accesibilidad Este documento describe unas técnicas para la creación de hojas de estilo en cascada (CSS) accesibles.0" [WCAG10] es un documento estable. al contenido en la web 1. W3C. Estos documentos.Madison. Aunque las técnicas descritas en este documento ayudarán a crear CSS conforme a las "Pautas de Accesibilidad al Contenido en la Web 1. estas técnicas no garantizan la conformidad y no son la única manera posible de crear contenidos conformes a ellas. La versión en inglés de esta especificación es la única versión normativa.0". Ian Jacobs. 156 técnicas CSS . El propósito de este documento es ayudar a los creadores de contenidos Web que desean manifestar su cumplimiento de las "Pautas de Accesibilidad al Contenido en la Web 1. Es de consulta pública el archivo de mensajes. que pueden evolucionar de forma independiente. Está disponible en la web de W3C. envíe los comentarios detallados sobre este documento al Grupo de Trabajo a w3c-wai-gl@w3. pueden existir traducciones en otros idiomas. uno para cada tecnología específica. Las hojas de estilo CSS son definidas por las recomendaciones del W3C "CSS Level 1" [CSS1] y "CSS Level 2" [CSS2].0" [WCAG10-TECHS].Nota de 6 noviembre de 2000 de W3C Editores: Wendy Chisholm. La versión de 6 de noviembre de 2000 de este documento es una Nota. La serie de documentos sustituye al documento ("Nota de 5 de mayo de 1999. perteneciente a una serie. Este documento es parte de una serie de documentos sobre técnicas para crear contenidos Web accesibles. Esta Nota no ha sido revisada ni suscrita por los Miembros de W3C. el acceso al “histórico de cambios en la serie de documentos”.0" ([WCAG10]). específicos para cada tecnología facilitan a los autores centrarse en una tecnología concreta. Los temas del documento anterior se han dividido en documentos separados. Mientras que la Recomendación "Pautas de Accesibilidad al Contenido en la Web 1.0 Estatus de este documento Esta versión se publica para corregir algunos enlaces desfasados de la versión anterior. así como la” lista de temas abiertos y cerrados” . Animamos a los lectores a comentar el documento y proponer soluciones a los temas abiertos.0)". La lista de errores conocidos de este documento está disponible en "Errores en las Pautas de Accesibilidad al Contenido en la Web". Nota: Este documento contiene algunos ejemplos que ilustran soluciones accesibles en CSS pero también ejemplos desaconsejados que ilustran lo que los desarrolladores de contenidos no deben hacer. Por favor. Técnicas para las Pautas de Accesibilidad al Contenido en la Web 1. Trace R & D Center. Gregg Vanderheiden. Se ruega informen sobre los errores encontrados en este documento a wai-wcag-editor@w3. No obstante.

[Prioridad 2]. las siguientes reglas de estilo fijan el color de fondo a blanco y el de primer plano a negro para todos los elementos. [Prioridad 3].que está disponible para cualquier propiedad . etc. Técnicas: • Use un número mínimo de hojas de estilo en su sitio web. use el mismo nombre de clase ("class") para el mismo concepto en todas las hojas de estilo. Por ejemplo.3 Cree un estilo de presentación que sea coherente en todas las páginas. Por ejemplo. Las Pautas de Accesibilidad WAI son producidas como parte de la Actividad Técnica de la WAI.WAI del Consorcio World Wide Web (W3C) proporciona una variedad de recursos sobre accesibilidad en la Web. Con CSS2. 1 Reducir el mantenimiento y aumentar la coherencia Puntos de verificación en esta sección: 14. CSS2 modifica la semántica del operador "!important" definido por CSS1. el autor siempre tenía la última palabra sobre los estilos. 2 Permitir al usuario redefinir los estilos Punto de verificación en esta sección: 11. Esta es una característica importante para los usuarios que necesitan o que tienen que evitar ciertas combinaciones o contrastes de colores. • Si tiene más de una. P { font-size: 24pt ! important } El valor de CSS2 "inherit" . • Use hojas de estilo vinculadas en vez de estilos incrustados y evite hojas de estilo incrustadas (“inline”). Con CSS1. si la hoja de estilo del usuario contiene "!important". esto tiene prioridad sobre cualquier regla aplicable en la hoja de estilo del autor.: 157 técnicas CSS . Técnicas: Para asegurar que los usuarios puedan controlar los estilos.2 Evite características desaconsejadas por las tecnologías W3C.La Iniciativa de Accesibilidad en la Web . usuarios que necesitan letra grande. Está disponible una lista de las actuales Recomendaciones y otros documentos técnicos de W3C.da lugar a reglas de estilo "!important" compactas que definen gran parte o todo el documento. Los objetivos del Grupo de Trabajo de las Pautas de Accesibilidad al Contenido en la Web están descritos en los estatutos. la regla siguiente especifica una letra grande para el texto de párrafo y tendría prioridad para redefinir sobre una regla de autor con el mismo peso: Ejemplo.

y una línea roja gruesa cuando esté activo. "border-color". Por ejemplo. Note que esta característica puede ser redefinida por otros estilos mas específicos. */ BODY { color: black ! important . :focus { outline: thick solid black } :active { outline: thick solid red } 158 técnicas CSS .Ejemplo. los usuarios con baja visión) crear bordes alrededor de los contenidos que no afecten a la maquetación pero sí destacan la información. y fuentes de sistema (para "font") permiten a los usuarios aplicar sus preferencias de colores y fuentes de sistema a los documentos Web. background: inherit ! important } CSS2 también también incluye estas características para permitir el control por parte del usuario de: • Colores de sistema (para "color". se pueden emplear las siguientes reglas: Ejemplo. "background-color". background: white ! important } /* Tiene el efecto de que los valores de "color" y "background" son heredados por todos los otros elementos que tienen mas fuerza debido a !important. */ * { color: inherit ! important . para dibujar una línea negra gruesa alrededor de un elemento cuando sea el foco. • Bordes dinámicos de contorno (la propiedad "outline") permiten a ciertos usuarios (por ejemplo. /* Fija el color del texto en negro y el color de fondo en blanco para todo el "body" del documento. y "outline-color").

CSS permite utilizar unidades relativas incluso en posicionamiento absoluto. • Utilice medidas absolutas de longitud sólo cuando las características físicas del medio de salida sean conocidas. [Prioridad 2].4 Utilice unidades relativas en lugar de absolutas al especificar los valores en los atributos de los marcadores de lenguaje y en los valores de las propiedades de las hojas de estilo. Ejemplo. Por tanto. con lo cual se escalará adecuadamente.3 Unidades de medida Puntos de verificación en esta sección: 3. como en: h1 { font-size: 2em } mejor que: h1 { font-size: 12pt } Ejemplo. Es una distancia fija. pero relativa al tamaño de letra actual. body { margin-left: 15%. puede colocar una imagen que será alejada por "3em" desde el comienzo del elemento que la contenga. Utilice "em" para establecer los tamaños de letra. Técnicas: • Use la unidad "em" para el tamaño de letra. por ejemplo con imágenes de mapa de bits. margin-right: 10%} Ejemplo. /* tarjeta de visita */ . • Utilice unidades de medida relativas y porcentajes. Utilice unidades de longitud relativas y porcentajes.businesscard { font-size: 8pt } 159 técnicas CSS . Utilice unidades absolutas de longitud sólo cuando sean conocidas las características físicas del medio de salida.

1 Organice el documento de forma que pueda ser leído sin hoja de estilo. "cue-before". mediante las propiedades "background-image". cuando un documento HTML es interpretado sin asociarlo a una hoja de estilo. glifos. 6. El contenido generado puede servir como marcador para ayudar a los usuarios a navegar por el documento y orientarse cuando no pueden acceder a las pistas visuales tales como barras de desplazamiento proporcionales. Por ejemplo. que pueden ser números. • Asegúrese de que todo contenido importante aparezca dentro del objeto del documento. y "cue-after". Por ejemplo. númerar los párrafos para localizar su posición durante la lectura del documento: Ejemplo 160 técnicas CSS . use marcadores en vez de imágenes para transmitir la información. marcos con índice de contenidos. El texto generado por las hojas de estilo no forma parte del código fuente del documento y no estará disponible para las ayudas técnicas que acceden al Modelo de Objeto del Documento Nivel 1 ([DOM1]).4 Contenidos generados Puntos de verificación en esta sección: 3. contadores y cadenas constantes tal como "Fin Ejemplo" en los ejemplos siguientes) antes o después del contenido del elemento. etc. Estas propiedades permiten a los usuarios reproducir un sonido antes o después del contenido de un elemento.1 Cuando exista un marcador apropiado. permiten la inserción de marcadores (por ejemplo. CSS2 añade estilos de lista internacionales a los definidos en CSS1. por ejemplo. CSS2 incluye diferentes mecanismos que permiten generar contenido desde la hoja de estilo: • Los seudo-elementos :before y :after y la propiedad "content". tiene que ser posible leerlo. • Las propiedades "cue". • Estilos de lista. la siguiente hoja de estilo de usuario causaría la generación de las palabras "Fin Ejemplo" después de cada ejemplo marcado con un valor de clase especial en el documento: Ejemplo div. "list-style".example:after { content: Fin Ejemplo } El usuario también puede. Cuando éstos se emplean conjuntamente. o imágenes (normalmente asociados con el elemento LI en HTML). [Prioridad 1] Técnicas: • Proporcione un equivalente textual para cualquier imagen o textos importantes generado por la hoja de estilo (por ejemplo. Véanse las propiedades "list-style-type" y "content". [Prioridad 2] . o "content").

• En lugar de utilizar elementos y atributos de presentación desfasados. "font-variant". en lugar de los siguientes elementos y atributos de tipo de letra desaconsejados en HTML: FONT. [Prioridad 2]. "font-size". "font-size-adjust". "font-variant". "face". "font-stretch". "font-size". BASEFONT. sans-serif } Ejemplo <style type="text/css"> p. counter-increment: paragraph } 5 Tipos de letra Puntos de verificación en esta sección: 11. font-size: smaller } h2. que no están desaconsejados. y "size".p:before { content: counter(paragraph) ".important { font-weight: bold } p. "font-size-adjust".2 Evite características desaconsejadas por las tecnologías W3C. "font-family".less-important { font-weight: lighter. "font-style". utilice las múltiples propiedades CSS para controlar las características de los tipos de letra: "font-family". "font-stretch". y "font-weight". y "fontweight". Ejemplo Especifique siempre un tipo de letra genérico por defecto en caso de que no esté disponible el deseado: body { font-family: "Gill Sans". "font-style". • Si tiene que usar elementos HTML para controlar la información sobre el tipo de letra. • Use las siguientes propiedades CSS2 para controlar la información de la fuente: "font". sans-serif } </style> 6 Efectos de estilo del texto Puntos de verificación en esta sección: 161 técnicas CSS . utilice BIG y SMALL.subsection { font-family: Helvetica. Técnicas: • Especifique siempre un tipo de letra genérico por defecto. ".

</p> 162 técnicas CSS . Usar texto en lugar de imágenes significa que la información estará disponible para un mayor número de usuarios (con sintetizadores de voz. Ejemplo En este ejemplo. un titular que aparece y desaparece a intervalos regulares). sombras. 7 Texto en vez de imágenes Puntos de verificación en esta sección: 3.7. mejor que representar el texto con imágenes. Técnicas: Las siguientes propiedades CSS2 se pueden emplear para dar estilo al texto: • Mayúsculas/minúsculas: "text-transform" (para mayúsculas. cambio de presentación en periodos regulares. dispositivos gráficos.3 Utilice hojas de estilo para controlar la maquetación y la presentación. • Efectos de sombra: "text-shadow" • Subrayado.gif" alt="ejemplo"> de lo que queremos decir. etc. <p>Esto es un <img src="BigRedExample. La utilización de hojas de estilo también permitirá a los usuarios redefinir los estilos del autor y cambiar los colores o los tamaños de letra más fácilmente. y se refleja en el valor del atributo "alt". son elementos no estándares). Nota. evite el parpadeo del contenido (por ejemplo. Si se emplea contenido parpadeante (por ejemplo.2 Hasta que las aplicaciones de usuario permitan controlarlo. [Prioridad 2]. la imagen insertada muestra en caracteres rojos grandes "Ejemplo". etc. [Prioridad 2]. transformación. Estos elementos no aparecen en ninguna especificación W3C para HTML (es decir. suprarayado. proporcione un mecanismo para detener el parpadeo. Si es necesario utilizar un mapa de bits para crear un efecto de texto (letra especial. parpadeo: "text-decoration". Con CSS.). "text-decoration: blink" producirá el efecto de parpadeo y además permitirá al usuario detener el efecto desactivando las hojas de estilo o redefiniendo la regla en una hoja de estilo de usuario. Técnicas: Los diseñadores de contenido deberían utilizar hojas de estilo para dar estilo al texto. No use los elementos BLINK o MARQUEE. dispositivos braille. así como el encendido y apagado). minúsculas y primera letra mayúscula).) el mapa de bits debe ser accesible (vea las secciones sobre equivalentes textuales y páginas alternativas).

No utilice BLOCKQUOTE o cualquier otro elemento estructural para hacer sangrías en el texto..3 Utilice hojas de estilo para controlar la maquetación y la presentación. en lugar de escribir "H O L A" (que los usuarios generalmente reconocen como la palabra "hola". El siguiente ejemplo muestra como utilizar hojas de estilo para crear un efecto de letra capital. pero que un lector de pantalla leería como letras independientes) los autores pueden crear el mismo efecto visual aplicando a "HOLA" la propiedad "word-spacing". Por ejemplo.1 Contraste de colores 163 técnicas CSS . Los textos sin espacios serán transformados en discurso más fácilmente. 9 Colores 9.8 Formateo y posición del texto Puntos de verificación en esta sección: 3.dropcap { font-size : 120%. En la fecha de redacción de este documento. </body> Nota. • Dirección del texto: "direction".. Ejemplo <head> <title>Primera letra mayúscula</title> <style type="text/css"> . [Prioridad 2]. "word-spacing". • Espaciado de letras o palabras: "letter-spacing". que permite a los desarrolladores de contenido remitir a la primera letra de una parte del texto no está lo suficientemente extendido. Técnicas: Las siguientes propiedades CSS2 pueden ser usadas para controlar el formateo y posición del texto: • Sangría: "text-indent". font-family : Helvetica } </style> </head> <body> <p><span class="dropcap">E</span>rase una vez. Esta propiedad controla la interpretación del espacio en blanco del contenido de un elemento. • Espacio en blanco: "white-space". • Los pseudoelementos :first-letter y :first-line permiten a los autores hacer referencia a la primera letra o línea de un párrafo del texto. el soporte del seudo-elemento CSS :first-letter. "unicode-bidi".

seleccione uno de los ítems indicados en verde".0%)} Ejemplo desaconsejado h1 {color: red} Use estas propiedades CSS para especificar colores: • "color". cuando pida intervención de los usuarios. para el color de primer plano del texto.Puntos de verificación en esta sección: 2. para colores: h1 {color: #808000} h1 {color: rgb(50%. Técnicas: • Use números en vez de nombres.2 Asegurarse de que la información no se transmite sólo por el color Puntos de verificación en esta sección: 2. Prioridad 3 para texto]. para el color de fondo. para especificar colores. Por ejemplo. "outline-color" para colores de bordes. Asegúrese de que los colores de primer plano y de fondo tienen buen contraste. 9. y :active. :visited. Por ejemplo. [Prioridad 1] Asegúrese de que la información no se transmite sólo a través del color.1 Asegúrese que toda la información transmitida a través de los colores también esté disponible sin color. en la versión electrónica de este documento se ha dado estilo a los ejemplos por defecto (a través de hojas de estilo) de la siguiente manera: 164 técnicas CSS . asegúrese de que la información está disponible a través de otros efectos de estilo (por ejemplo un efecto de fuente) y a través del contexto (por ejemplo.50%. • Para colores de vínculos. En su lugar. • "border-color".2 Asegúrese de que las combinaciones de los colores de fondo y primer plano tengan suficiente contraste para que sean percibidas por personas con deficiencias de percepción de color o en pantallas en blanco y negro. Si especifica el color de primer plano. [Prioridad 2 para imágenes. no escriba "por favor. Ejemplo Use números en vez de nombres. vínculos de texto detallados). • "background-color". por ejemplo mediante el contexto o por marcadores. haga referencia a las pseudo-clases :link. siempre debe especificar también el color de fondo (y viceversa).

negro y los cuatro tonos de gris básico de la paleta del navegador y compruebe como se presenta la página. ". • Comienzan por la palabra "Ejemplo" (o "Ejemplo desaconsejado"). imprima las páginas en una impresora en blanco y negro (con los fondos y colores en escala de grises). • Utilizan un color de fondo diferente. este texto ayuda a delimitar el fin de un ejemplo a los lectores que no sean capaces de ver el borde que rodea el ejemplo.2 Proporcione metadatos para añadir información semántica a las páginas y sitios. consulte [LIGHTHOUSE]. o si las señales son demasiado pequeñas o indistintas para mostrarse bien. counter-increment: item. utilizar marcadores de forma apropiada) conjuntamente con CSS para proporcionar indicaciones contextuales.1. [Prioridad 2] Los diseñadores de contenidos deben emplear UL para listas sin ordenar y OL para las ordenadas (por ejemplo.• Están rodeados por un borde. Test rápido: Para verificar si el contraste de color es suficiente para ser distinguido por personas con deficiencias en la percepción del color.1".6 Marque correctamente las listas y los ítems de las listas. Para mayor información sobre colores y contrastes. Igualmente. "1. Intente también fotocopiar lo impreso dos o tres veces para ver cómo se deteriora. pero esta frase está escondida por defecto con "display: none". etc. Test rápido: Para verificar si su documento funciona aun sin colores. 10 Proporcionar pistas de contexto en las listas HTML Puntos de verificación en esta sección: 3. [Prioridad 2] 13."). Ello le mostrará dónde necesita añadir señales redundantes (ejemplo: los hipervínculos están normalmente subrayados en las páginas Web). •También terminan con la frase "fin del ejemplo". } </style> 165 técnicas CSS .1". La siguiente hoja de estilo CSS2 muestra cómo especificar números compuestos para listas anidadas creadas tanto con elementos UL como OL. "1. examínelo con un monitor en blanco y negro o con el color desactivado en el navegador. Para las aplicaciones de usuario que no soportan hojas de estilo o cuando se desconectan las hojas de estilo. o por aquellos con monitores de baja resolución. Los ítems están numerados como "1". intente configurar su navegador con un esquema de colores que sólo utilice blanco. Ejemplo <style type="text/css"> ul. ol { counter-reset: item } li { display: block } li:before { content: counters(item.

cuando la hoja de estilo del usuario predomina sobre el mecanismo de ocultación o cuando no se soportan hojas de estilo. <span class="findelista">(Fin de sujetapapeles)</span> </UL> <span class="findelista">(Fin de suministros de oficina)</span> </ul> Nota: Este ejemplo no resuelve el problema de ítems de lista que se ajustan al principio de la línea siguiente.findelista { display: none } </style> <ul> <li>Papelería: <ul> <li>Sobres <li>Blocs de notas <li>Papel con membrete <li>Papel carteles <span class="findelista">(Fin de papelería)</span> </ul> <li>Lápices: <ul> <li>Bolígrafos azules <li>Rotuladores pizarra blanca <span class="findelista">(Final de lápices)</span> </ul> <li>Sujetapapeles: <ul> <li>clips <li>grapas <li>cuerda. El siguiente mecanismo CSS1 muestra cómo ocultar el final de una lista cuando estén activadas las hojas de estilo. el autor podría incluir etiquetas parecidas al final de cada ítem de la lista. Ejemplo <style type="text/css"> . los autores deberían considerar el proporcionar pistas contextuales en las listas anidadas no numeradas. Con un poco más de esfuerzo. 166 técnicas CSS .Hasta que CSS2 sea ampliamente utilizada por las aplicaciones de usuario o éstas permitan al usuario controlar la interpretación de las listas a través de otros medios. y mostrarlo cuando las hojas de estilo estén desactivadas.

el documento debería escribirse en un orden “lógico”) y entonces aplicar hojas de estilo para lograr efectos visuales. Si los diseñadores de contenido no pueden usar hojas de estilo y deben utilizar imágenes invisibles o transparentes (por ejemplo.3 No utilice tablas para maquetar. Los autores deberían diseñar siempre documentos que tengan sentido sin hojas de estilo (por ejemplo. no debería ser llenada con un espacio en blanco o un espacio "non-breaking" sólo para lograr un efecto visual. Ejemplo desaconsejado Los autores no deben utilizar espacios para el valor de "alt". Una celda de datos que debe estar vacía. [Prioridad 2] 5. “bottom” y “left”.&nbsp. con IMG) para diseñar con imágenes en las páginas. • Con las propiedades “float”. “position”. a menos que la tabla tenga sentido cuando se transcriba línea a línea. colocación en capas. encabezamientos y pies simples y otras más. 11. permiten a los usuarios controlar el espaciado sin añadir espacios adicionales.gif" alt="&nbsp. en lugar de añadir espacios de no separación (&nbsp. y alineación Puntos de verificación en esta sección: 3. Por otro lado.">aquí En el siguiente ejemplo. • Con las propiedades “margin” “margin-top”. “text-align”. proporcione una alternativa equivalente (la cual debe ser una versión linearizada). “margin-right”. se utiliza una imagen para forzar que un gráfico aparezca en cierta posición 167 técnicas CSS . deberían especificar alt="" para ellas. ubicados. Las propiedades de ubicación pueden ser usadas para crear notas marginales (que se numerarán automáticamente). si la tabla no tiene sentido. con el fin de prevenir que las palabras se desplacen juntas cuando la imagen no está cargada: mi poema necesita un gran espacio<IMG src="10pttab. “margin-bottom” y “margin-left”. colocados en capas y alineados mediante hojas de estilo (sobre todo mediante las propiedades CSS de float y colocación absoluta): • Las propiedades “text-indent”.11 Maquetación. efectos similares a los marcos. el usuario puede controlar la posición visual de casi cualquier elemento con independencia de donde aparezca el elemento en el documento. Utilice “text-align:center” en lugar del elemento CENTER. • La propiedad “empty-cells” permite a los usuarios dejar vacías celdas de tablas y poder proporcionarles bordes en la pantalla o en papel.1 Si no tiene más remedio que emplear imágenes como espaciadores Proporcione textos equivalentes para todas las imágenes. [Prioridad 2] . ubicación. incluyendo las imágenes invisibles o transparentes. Los contenidos deben ser maquetados. los autores pueden crear espacios en los cuatro lados del contenido de un elemento.). barras laterales.3 Utilice hojas de estilo para controlar la maquetación y la presentación.&nbsp. “top”. “right”. “word-spacing” y “font-stretch”.

cuando un documento HTML es interpretado sin asociarlo a una hoja de estilo.gif" alt="espaciador"> <IMG src="ruedacoloreada. "outline-color". [Prioridad 1]. tiene que ser posible leerlo.gif" alt="La Rueda de la Fortuna"> 12 Líneas y bordes Puntos de verificación en esta sección: 6. Por ejemplo. "border-spacing" y "border-collapse". Los autores deberían usar hojas de estilo para crear líneas y bordes. "outline".1 Organice el documento de forma que pueda ser leído sin hoja de estilo. utilizando marcadores estructurales). pero este sentido no puede ser deducido fuera de un contexto visual. Las líneas y bordes pueden transmitir la noción de "separación" a los usuarios que pueden ver. color rojo y estará separado del contenido por 1em: <head> <title>Línea roja con hoja de estilo</title> <style type="text/css"> h1 { padding-top: 1em. • Para las tablas. "border-color".. "border-width". • Para contornos dinámicos.Dispositivos auditivos y táctiles</H1> </body> Si una línea (por ejemplo. el elemento HR) se usa para indicar la estructura. border-top: 2px red } </style> </head> <body> <h1>Capítulo 8. Ejemplo En este ejemplo. 168 técnicas CSS . asegúrese de que se refiere a la estructura también de una forma no visual (por ejemplo.<IMG src="espaciador. el elemento H1 tendrá un borde superior de dos píxeles de grosor. "outline-style" y "outline-width". "border-style". Utilice las propiedades CSS para especificar los estilos de los bordes: • "border".

menu2 { position: absolute. font-family: sans-serif.item2 { position: absolute.htm">[Página siguiente]</A> <a rel="previous" href="anterior.menu1 { position: absolute. La ubicación CSS se puede emplear para crear efectos de tabla. El uso de "class" puede sustituirse con "id" en estos ejemplos. top: 8em.1 Organice el documento de forma que pueda ser leído sin hoja de estilo. top: 7em. los objetos son réplicas y por lo tanto no son únicos. tiene que ser posible leerlo. margin: 0px } } } } 169 técnicas CSS . [Prioridad 1] Mediante las propiedades de ubicación de CSS2. El ejemplo siguiente muestra algunos principios: 1. El texto aparece visualmente en el navegador en un orden distinto al del código fuente. background-color: white . color: red.Ejemplo En este ejemplo. 2.item1 { position: absolute. <div class="barra-de-navegacion"> <hr> <a rel="next" href="siguiente. top: 3em. El orden en que los elementos aparecen en pantalla puede ser distinto al orden en que aparecen en el documento fuente.htm">[Página anterior]</A> <a rel="first" href="primera. margin: 0px. background-color: white . color: red. Se ha empleado "class" porque en el ejemplo real. margin: 0px . left: 0em. cuando un documento HTML es interpretado sin asociarlo a una hoja de estilo. <head><style type="text/css"> . Por ejemplo. left: 0em. left: 0em. font-size: 120%. Ejemplo desaconsejado. margin: 0px. left: 10em. el elemento DIV se usa para crear una barra de navegación que incluye un separador horizontal.htm">[Primera página]</a> </div> 13 Ubicación por CSS y marcado para una transformación correcta Puntos de verificación en esta sección: 6. font-size: 120%. el diseñador puede mostrar los contenidos en cualquier posición en la ventana del navegador del usuario. Un elemento TABLE se puede emplear para crear el mismo efecto. Observe que se define una clase para cada objeto que se desea ubicar. top: 3em. font-family: sans-serif.

top: 9em." como se muestra en la siguiente captura de pantalla: Cuando no se aplican las hojas de estilo. left: 14em. top: 8em. Teléfonos. todo el texto aparece en una línea de palabras "Productos. Ordenadores. margin: 0px } .item3 { position: absolute. margin: 0px } . Madrid. Reproductores MP3 portátiles. "Teléfonos". left: 14em. top: 5em. Ubicaciones. Aparecen en el orden en que está escritas en el código fuente. "Ordenadores" y "Reproductores MP3 portátiles" aparecen en la lista debajo de "Productos".item5 { position: absolute. el texto aparece en dos columnas. debido a que se definen en primer lugar en el código fuente.item4 { position: absolute. Los elementos de clase "menu1" (Productos) y "menu2" (Ubicaciones) aparecen como encabezados de columna. top: 7em. Por eso. Esto se ve en la siguiente imagen: 170 técnicas CSS . Oviedo". el texto que aparece como encabezado de columna cuando se aplican hojas de estilo aparece como la primera frase. left: 5em } </style></head> <body> <div class="box"> <span class="menu1">Productos</span> <span class="menu2">Ubicaciones</span> <span class="item1">Teléfonos</span> <span class="item2">Ordenadores</span> <span class="item3">Reproductores MP3 portátiles</span> <span class="item5">Madrid</span> <span class="item4">Oviedo</span> </div> </body> Al aplicar las hojas de estilo.. margin: 0px } #box { position: absolute. y "Madrid" y "Oviedo" aparecen en lista debajo de "Ubicaciones. left: 0em.

top: 8em. font-size: 120%. margin: 0px. margin: 0px.menu2 { position: absolute. font-family: sans-serif. color: red. font-family: sans-serif. top: 9em. left: 5em } </style></head> <body> <div class="box"> <dl> 171 técnicas CSS .El siguiente ejemplo muestra que la misma apariencia visual se puede conseguir en un navegador que soporta hojas de estilo y además crear una presentación más comprensible cuando no se aplican hojas de estilo. top: 8em.item3 { position: absolute. las listas de definiciones se muestra con margen fijo para el elemento DD. top: 5em. font-size: 120%.item1 { position: absolute. top: 3em. margin: 0px } . left: 14em. left: 10em. margin: 0px } .item4 { position: absolute. Ejemplo. Observe que los márgenes se fijan en cero puesto que en navegadores HTML. left: 0em. left: 14em. background-color: white } . left: 0em. margin: 0px } . margin: 0px } #box { position: absolute. left: 0em. margin: 0px } .item2 { position: absolute. left: 0em. background-color: white } . top: 7em. top: 3em.item5 { position: absolute. top: 7em. Se ha aplicado el etiquetado estructural (listas de definiciones) a los contenidos. <head><style type="text/css"> . color: red.menu1 { position: absolute.

Sin embargo.<dt class="menu1">Productos</dt> <dd class="item1">Teléfonos</dd> <dd class="item2">Ordenadores</dd> <dd class="item3">Reproductores MP3 portátiles</dd> <dt class="menu2">Ubicaciones</dt> <dd class="item4">Madrid</span> <dd class="item5">Oviedo</span> </dt> </dl> </div> </body> Cuando aplicamos hojas de estilo. • Cambiar la presentación (movimiento y colores) 172 técnicas CSS . El texto que con hojas de estilo aparece como encabezado de columna. el texto aparece como una lista de definiciones en vez de una serie de palabras. cuando no se aplican hojas de estilo. como se puede comprobar en la siguiente imagen de pantalla. evite los movimientos en las páginas. ahora.3 Hasta que las aplicaciones de usuario permitan congelar el movimiento de los contenidos. ahora aparece como términos definidos cuando no se aplican hojas de estilo. 14 Crear movimiento con hojas de estilo y scripts Puntos de verificación en esta sección: 7. [Prioridad 2] Técnicas • Mostrar/ocultar los contenidos. la apariencia es la misma que con el ejemplo anterior.

• “pause”. /* Riqueza */ richness: 90.15 Hojas de estilo en cascada auditivas Puntos de verificación en esta sección: 11. pueden indicar al usuario que el contenido hablado es un encabezado: Ejemplo. tipo de contenido. /* Énfasis */ stress: 20. etc. /* Señal anterior */ cue-before: url("ping. y “pause-after” controla las pausas antes y después de anunciar el contenido. idioma. por ejemplo. en caso afirmativo. 173 técnicas CSS . “pitch”. H1 { /* Familia de voces*/ voice-family: pedro. y “richness” controlan las cualidades de los contenidos hablados. y “cue-after” especifican un sonido que se reproducirá antes y después del contenido. • “azimuth” y “elevation” proporcionan una dimensión al sonido. lo que permite a los usuarios distinguir las voces. • “volume” controla el volumen del texto hablado. • “play-during” controla los sonidos de fondo durante la presentación del elemento (parecido a un imagen de fondo). “pause-before”.) [Prioridad 3] Las propiedades auditivas de CSS2 proporcionan información para usuarios invidentes y usuarios de navegadores de voz de manera parecida a como el tipo de letra proporciona información visual. Permite a los usuarios Separar los contenidos para mejorar la comprensión. • “speech-rate”. “pitch-range”.au") } Las siguientes propiedades forman parte de hojas de estilo en cascada de CSS2. Cambiando estas propiedades para diferentes elementos. lo que puede ser valioso para la orientación (parecido a una imagen visual). algo parecido a un tipo de letra auditivo). “voice-family”. • “cue”. “stress”. El ejemplo siguiente muestra cómo distintas cualidades de sonido (incluida una familia de voz “voice-family”. “cue-before”. si se debe deletrear o leer como palabras. los usuarios pueden ajustar con detalle la presentación sonora-auditiva de los contenidos.3 Proporcione la información de modo que los usuarios puedan recibir los documentos según sus preferencias (Por ejemplo. • “speak” determina si el contenido se anunciará y.

lo que afecta la calidad de la experiencia para la navegación por voz. 16 Acceso a representaciones alternativas de los contenidos Puntos de verificación en esta sección: 11. auditiva. el valor del atributo “alt” del elemento IMG se representa después de la imagen (de forma visual.• “speak-punctuation” y “speak-numeral” controlan la forma de decir los números y la puntuación. cuando el usuario ha desactivado las imágenes en su navegador). 174 técnicas CSS . • la función attr() y la propiedad "content" • los seudo-elementos :before (antes) y :after (después) En el siguiente ejemplo.) [Prioridad 3] CSS2 permite a los usuarios acceder a representaciones alternativas de los contenidos especificadas en valores de los atributos cuando se emplean juntos los siguientes: • selectores de atributos. la propiedad “speak-header” describe cómo se debe decir la información sobre los encabezados antes de una celda de tabla. etc): Ejemplo. idioma. Además.3 Proporcione la información de modo que los usuarios puedan recibir los documentos según sus preferencias (Por ejemplo. etc. tipo de contenido. /* Después */ IMG:after { /* contenido: atributo(alt)*/ content: attr(alt) } Observe que se muestra el valor del atributo aún cuando no se muestre la imagen (por ejemplo.

level 1 Recommendation". B. I.w3.T E C H S / . Wium Lie. Vanderheiden. Esta Recomendación CSS2 es http://www. o dispositivos TTY. [CSS1] "CSS.17 Tipos de medios Puntos de verificación en esta sección: 11.org/TR/1999/REC-CSS1-19990111. 5 mayo 1999. Estas hojas de estilo pueden adaptar la presentación del documento para dispositivos Braille. etc. Wium Lie.org/TR/1998/REC-CSS2-19980512/. idioma. Jacobs. Esta Recomendación CSS1 es http://www.0 está http://www.w3. Chisholm.) [Prioridad 3] Con los “tipos de medios” de CSS2 (empleados con las reglas @media) los creadores de páginas y los usuarios pueden diseñar hojas de estilo que permiten mostrar los documentos de forma más adecuada en ciertos dispositivos. W. e I. Esta Recomendación WCAG 1. w 3 . La version más reciente de CSS2 está disponible en http://www. Este documento explica como implementar los puntos de verificación definidos en las "Pautas de Accesibilidad al Contenido en la Web 1. 12 mayo 1998. B. W. Bos. Jacobs. [WCAG10-TECHS] "Techniques for Web Content Accessibility Guidelines 1.0".w3. tipo de contenido.org/TR.org/TR/REC-CSS2. editores. revisado 11 enero 1999. 175 técnicas CSS . 17 diciembre 1996.w3. Chisholm.org/TR/REC-CSS1. sintetizadores de voz. G. eds. La version más reciente de CSS1 está disponible en http://www. editores.0". Vanderheiden.w3. 18 Referencias Para la última versión de cualquier especificación W3C. level 2 Recommendation". editores. Lilley.w3. Las reglas “@media” también pueden reducir los tiempos de descarga porque permiten a las aplicaciones de usuario ignorar reglas inapropiadas. G. C. e I. Bos. o r g / T R / W C A G 1 0 .3 Proporcione la información de modo que los usuarios puedan recibir los documentos según sus preferencias (Por ejemplo. H. por favor. Jacobs.org/TR/1999/WAI-WEBCONTENT-19990505/. [CSS2] "CSS. consulte la lista de Informes Técnicos W3C de W3C en http://www. [WCAG10] "Web Content Accessibility Guidelines 1.0". E l ú l t i m o b o r r a d o r d e l a s t é c n i c a s e s t á d i s p o n i b l e e n h t t p : / / w w w. H.

Vanderheiden y W. William Loughborough. Trace Research and Development Contacto con el Equipo W3C: Wendy Chisholm Nuestro agradecimiento a las siguientes personas que han contribuido con su tiempo y sus valiosos comentarios a dar forma a estas pautas: Harvey Bingham. Josh Krieger.19 Recursos Nota: W3C no puede garantizar la estabilidad de cualquiera de las siguientes referencias. of Education. Charles Oppermann. The Unified Web Site Guidelines fue compilado por Trace R & D Center en la Universidad de Wisconsin con financiación del National Institute on Disability and Rehabilitation Research (NIDRR). MegaZone (Livingston Enterprises). Neal Ewers. Geoff Freed. Jutta Treviranus. Estas referencias están incluidas por conveniencia. T. Phill Jenkins. Charles McCathieNevile. 20 Agradecimientos Co-directores del Grupo de Trabajo para las Pautas de Contenido: Jason White. Leonard Kasday. Mike Paciello. Dept. y Jaap van Lelieveld 176 técnicas CSS . Liam Quinn. Eric Hansen. Mark Novak. Robert Savellis. Dave Raggett.S. David Pawson. George Kerscher. Greg Rosmaita. Editores: G. Las referencias a productos no suponen la recomendación de los mismos. Murray Maloney. 19. Chetz Colwell. que se encuentran fuera de su control.V. Scott Luebking. Masafumi Nakane. Steve Tyler.1 Otras pautas [UWSAG] "The Unified Web Site Accessibility Guidelines". Raman. Universidad de Melbourne. Marja-Riitta Koivunen.2 Recursos sobre la accesibilidad [LIGHTHOUSE] The Lighthouse proporciona información sobre colores y contrastes accesibles. Michael Pieper. Kevin Carey. U. Chuck Letourneau. Larry Goldberg. Chisholm. Jon Gunderson. Australia Gregg Vanderheiden. 19. Al Gilman.

0 .tablas de puntos de revisión para las pautas de accesibilidad al contenido en la web 1.

Prioridades Cada punto de verificación tiene un nivel de prioridad asignado por el Grupo de Trabajo fundamentado en su impacto sobre la accesibilidad.w3. De otra forma. Por favor. Trace R & D Center. Gregg Vanderheiden. Estatus del documento Este documento es un apéndice de un documento que ha sido revisado por los Miembros del W3C y otras partes interesadas y ha sido suscrito por el Director como una Recomendación W3C. Está disponible una versión de este documento en formato de lista de puntos de verificación.WAI). Ian Jacobs. [Prioridad 1] Un desarrollador de contenidos de páginas Web tiene que satisfacer este punto de verificación.Editores: Wendy Chisholm. Este documento ha sido producido como parte de la Iniciativa de Accesibilidad a la Red. Satisfacer este punto de verificación es un requerimiento básico para que algunos grupos puedan usar estos documentos Web. para que los desarrolladores de contenidos puedan usarla en la revisión de sus Web.org/TR. University of Wisconsin -. no lo ha sido o no es aplicable. El rol de la W3C en la elaboración de la Recomendación es intensificar la atención sobre la especificación y promover su utilización generalizada. Para cada punto de verificación. Este documento ha sido realizado como parte de la Iniciativa de Accesibilidad a la Web (Web Accessibility Initiative .org. Por favor consulte el documento de Pautas para una información introductoria. W3C. El objetivo del Grupo de Trabajo de las Pautas de Accesibilidad al Contenido en la Web se expone en los Estatutos del Grupo de Trabajo. información sobre documentos relacionados. organizados por conceptos. W3C Resumen tablas de puntos de revisión para las pautas de accesibilidad al contenido en la web 1. indica qué punto de verificación ha sido satisfecho. Una lista de las actuales Recomendaciones de la W3C y otros documentos técnicos puede encontrarse en: http://www. uno o más grupos de usuarios encontrarán imposible acceder a la información del documento.0 Este documento es un apéndice de las "Pautas de Accesibilidad al Contenido en la Web 1. Proporciona una lista de todos los puntos de revisión de las citadas pautas. Esta lista debe ser usada para revisar la accesibilidad de una página o un sitio en la Web. Es un documento estable y debe ser usado como material de referencia o citado como referencia normativa desde otro documento. 178 tablas de puntos de verificación .0" de la W3C. glosario de términos y demás. remita comentarios sobre este documento a: wai-wcag-editor@w3. Ello mejorará la funcionalidad y universalidad de la Web.Madison. El objetivo del Grupo de Trabajo de las Pautas de Accesibilidad al Contenido en la Web está expuesto en la Escritura Constitutiva del Grupo de Trabajo.

1 Organice el documento de forma que pueda ser leído sin hoja de estilo. banda sonora del vídeo y vídeos 2. 7. a través de "alt".1 Identifique claramente los cambios en el idioma del texto del documento y en cualquier texto equivalente (Por ejemplo. "longdesc" o en el contenido del elemento). mapas de imagen. "ascii art".1 Hasta que las aplicaciones de usuario permitan controlarlo. 6.1 Proporcione un texto equivalente para todo elemento no textual (por ejemplo. De otra forma. sonidos (ejecutados con o sin interacción del usuario). evite provocar destellos en la pantalla. Algunos puntos de verificación tienen especificado un nivel de prioridad que puede variar bajo ciertas condiciones (indicadas). tiene que ser posible leerlo. uno o más grupos encontrarán dificultades en el acceso a la información del documento. scripts. SI NO N/A 179 tablas de puntos de verificación . animaciones (por ejemplo. Puntos de verificación Prioridad 1 En general (Prioridad 1) 1. archivos exclusivamente auditivos. Esto incluye: imágenes.[Prioridad 2] Un desarrollador de contenidos de páginas Web debe satisfacer este punto de verificación.1 Asegúrese que toda la información transmitida a través de los colores también esté disponible sin color. Satisfacer este punto de verificación mejorará la accesibilidad de los documentos Web. cuando un documento HTML es interpretado sin asociarlo a una hoja de estilo. "applets" y objetos programados. marcos. espaciadores. De otra forma. Satisfacer este punto de verificación eliminará importantes barreras de acceso a los documentos Web. [Prioridad 3] Un desarrollador de contenidos de páginas Web puede satisfacer este punto de verificación. 6. Por ejemplo. uno o más grupos de usuarios encontrarán alguna dificultad para acceder a la información del documento. por ejemplo mediante el contexto o por marcadores. leyendas). imágenes usadas como viñetas en las listas.2 Asegúrese de que los equivalentes de un contenido dinámico son actualizados cuando cambia el contenido dinámico. representaciones gráficas del texto. botones gráficos. GIFs animados). 4.

Si esto no es posible. Y si utiliza tablas (Prioridad 1) 5.3 Asegúrese de que las páginas sigan siendo utilizables cuando se desconecten o no se soporten los scripts. 1. Y si utiliza "applets" y "scripts" (Prioridad 1) 6. una película o animación) sincronice alternativas equivalentes (por ejemplo.2 Para las tablas de datos que tienen dos o más niveles lógicos de encabezamientos de fila o columna. subtítulos o descripciones de la banda de visual) con la presentación.1 Utilice el lenguaje apropiado más claro y simple para el contenido de un sitio.4 Para toda presentación multimedia tempodependiente (por ejemplo. 9. Y si utiliza imágenes y mapas de imagen (Prioridad 1) 1. excepto donde las zonas sensibles no puedan ser definidas con una forma geométrica.1 Titule cada marco para facilitar su identificación y navegación de los mismos. SI NO N/A SI NO N/A SI NO N/A SI NO N/A SI NO N/A 180 tablas de puntos de verificación . identifique los encabezamientos de fila y columna. proporcione información equivalente en una página alternativa accesible. Y si utiliza multimedia (Prioridad 1) 1. utilice marcadores para asociar las celdas de encabezamiento y las celdas de datos. applets u otros objetos programados.1 En las tablas de datos.14. Y si utiliza marcos ("frames") (Prioridad 1) 12.1 Proporcione mapas de imagen controlados por el cliente en lugar de por el servidor. proporcione una descripción auditiva de la información importante de la banda visual de una presentación multimedia. 5.2 Proporcione vínculos redundantes en formato texto para cada zona activa de un mapa de imagen del servidor.3 Hasta que las aplicaciones de usuario puedan leer automáticamente el texto equivalente de la banda visual.

4 Utilice unidades relativas en lugar de absolutas al especificar los valores en los atributos de los marcadores de lenguaje y en los valores de las propiedades de las hojas de estilo. use marcadores en vez de imágenes para transmitir la información.1 Cuando exista un marcador apropiado.5 Asegúrese de que los contenidos dinámicos son accesibles o proporcione una página o presentación alternativa.2 Cree documentos que estén validados por las gramáticas formales publicadas.2 Asegúrese de que las combinaciones de los colores de fondo y primer plano tengan suficiente contraste para que sean percibidas por personas con deficiencias de percepción de color o en pantallas en blanco y negro. 3. tenga información (o funcionalidad) equivalente y sea actualizada tan a menudo como la página (original) inaccesible.Y si todo lo demás falla (Prioridad 1) 11. SI NO N/A 181 tablas de puntos de verificación . 6.4 Si.5 Utilice elementos de encabezado para transmitir la estructura lógica y utilícelos de acuerdo con la especificación.7 Marque las citas. 3. no puede crear una página accesible. No utilice el marcador de citas para efectos de formato tales como sangrías. sea accesible. 3. después de los mayores esfuerzos. SI NO N/A Puntos de verificación Prioridad 2 En general (Prioridad 2) 2.6 Marque correctamente las listas y los ítems de las listas. 3. [Prioridad 2 para las imágenes. Prioridad 3 para los textos]. proporcione un vínculo a una página alternativa que use tecnologías W3C. 3.3 Utilice hojas de estilo para controlar la maquetación y la presentación. 3. 3.

En su lugar.1 Utilice tecnologías W3C cuando estén disponibles y sean apropiadas para la tarea y use las últimas versiones que sean soportadas. no cree páginas que se actualicen automáticamente de forma periódica.1 Hasta que las aplicaciones de usuario permitan desconectar la apertura de nuevas ventanas.3 Proporcione información sobre la maquetación general de un sitio (por ejemplo.2 Asegúrese de que las combinaciones de los colores de fondo y primer plano tengan suficiente 7.5 Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener el redireccionamiento automático. 13. 12.2 Hasta que las aplicaciones de usuario permitan controlarlo. configure el servidor para que ejecute esta posibilidad. 13.4 Utilice los mecanismos de navegación de forma coherente. así como el encendido y apagado).4 Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener las actualizaciones. 11. Y si utiliza tablas (Prioridad 2) SI NO N/A 182 tablas de puntos de verificación .3 Divida los bloques largos de información en grupos más manejables cuando sea natural y apropiado. 13. 11. cambio de presentación en periodos regulares. no provoque apariciones repentinas de nuevas ventanas y no cambie la ventana actual sin informar al usuario. evite el parpadeo del contenido (por ejemplo. mapa del sitio o tabla de contenidos). 7.1 Identifique claramente el objetivo de cada vínculo. 13. no utilice marcadores para redirigir las páginas automáticamente. 7.2 Evite características desaconsejadas por las tecnologías W3C.2.2 Proporcione metadatos para añadir información semántica a las páginas y sitios. 10.

3 Hasta que las aplicaciones de usuario permitan congelar el movimiento de los contenidos. Y si utiliza formularios (Prioridad 2) 10. Prioridad 2]. directamente accesibles o compatibles con las ayudas técnicas. [Prioridad 1 si la funcionalidad es importante y no se presenta en otro lugar. 8.4 Asocie explícitamente las etiquetas con sus controles. 7. proporcione una alternativa equivalente (la cual debe ser una versión linearizada). Y si utiliza "applets" y "scripts" (Prioridad 2) 6. tales como scripts y applets. si no resulta obvio solamente con el título del marco.1 Haga los elementos de programación.2 Hasta que las aplicaciones de usuario soporten explícitamente la asociación entre control de formulario y etiqueta. no utilice marcadores estructurales para realizar un efecto visual. 12. 9. especifique manejadores de evento lógicos en vez de manejadores de evento dependientes de dispositivos. SI NO N/A SI NO N/A SI NO N/A 183 tablas de puntos de verificación . 9.4 Para los scripts y applets. Por otro lado. asegúrese de que los manejadores de evento sean independientes del dispositivo de entrada. 5.3 Para los "scripts".4 Si se utiliza una tabla para maquetar. para todos los controles de formularios con etiquetas asociadas implícitamente. de otra manera. Y si utiliza marcos ("frames") (Prioridad 2) 12.2 Asegúrese de que cualquier elemento que tiene su propia interfaz pueda manejarse de forma independiente del dispositivo.5. a menos que la tabla tenga sentido cuando se transcriba línea a línea. evite los movimientos en las páginas.3 No utilice tablas para maquetar.2 Describa el propósito de los marcos y como éstos se relacionan entre sí. si la tabla no tiene sentido. asegúrese de que la etiqueta está colocada adecuadamente.

la información que los diferencie. etc. los documentos que comprendan múltiples páginas).2 Especifique la expansión de cada abreviatura o acrónimo cuando aparezcan por primera vez en el documento. identifique el grupo (para las aplicaciones de usuario) y. 13. entre los vínculos contiguos.6 Agrupe los vínculos relacionados.) 13. SI NO N/A 184 tablas de puntos de verificación . 10.5 Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) interpreten claramente los vínculos contiguos. tipo de contenido. 9. hasta que las aplicaciones de usuario lo hagan. etc.4 Cree un orden lógico para navegar con el tabulador a través de vínculos.3 Identifique el idioma principal de un documento. controles de formulario y objetos. 13.3 Proporcione la información de modo que los usuarios puedan recibir los documentos según sus preferencias (Por ejemplo. 11.8 Localice al principio de los encabezamientos. que no sirvan como vínculo. 9. proporcione una manera de evitar el grupo. los controles de formulario y los grupos de controles de formulario.5 Proporcione atajos de teclado para los vínculos más importantes (incluidos los de los mapas de imagen de cliente). 13. párrafos.5 Proporcione barras de navegación para destacar y dar acceso al mecanismo de navegación. 13.7 Si proporciona funciones de búsqueda. listas.Puntos de verificación Prioridad 3 En general (Prioridad 3) 4. incluya caracteres imprimibles (rodeados de espacios). 4.9 Proporcione información sobre las colecciones de documentos (por ejemplo. idioma. permita diferentes tipos de búsquedas para diversos niveles de habilidad y preferencias.

Y si utiliza formularios (Prioridad 3) 10.5 Proporcione resúmenes de las tablas.4 Hasta que las aplicaciones de usuario manejen correctamente los controles vacíos.13.10 Proporcione un medio para saltar sobre un dibujo ASCII art de varias líneas. incluya caracteres por defecto en los cuadros de edición y áreas de texto. 14.2 Complemente el texto con presentaciones gráficas o auditivas cuando ello facilite la comprensión de la página.5 Hasta que las aplicaciones de usuario interpreten el texto equivalente para los vínculos de los mapas de imagen de cliente. proporcione un texto lineal alternativo (en la página actual o en alguna otra) para todas las tablas que maquetan texto en paralelo. columnas envoltorio de palabras.3 Cree un estilo de presentación que sea coherente en todas las páginas.3 Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) interpreten correctamente los textos contiguos. proporcione vínculos en formato texto redundantes para cada zona activa del mapa de imagen de cliente. SI NO N/A SI NO N/A SI NO N/A 185 tablas de puntos de verificación . 14.6 Proporcione abreviaturas para las etiquetas de encabezamiento. 10. Y si utiliza imágenes o mapas de imagen (Prioridad 3) 1. 5. Y si utiliza tablas (Prioridad 3) 5.