Accesibilidad-en-el-contenido-de-la-WEB

•

Humanas / Sociais

Contenido de Estudio

30/9/2022

¡Este material tiene más páginas!

Entonces, ¿te gustó este material?

Ayude a animar a otros estudiantes a mejorar el contenido

¿Te gustó este material? ¡Compartir! 🧡

Ciencias Sociales

84.088 Materiales compartidos

Descarga la aplicación para disfrutar aún más

Lea materiales sin conexión, sin usar Internet. Además de muchas otras características!

Vista previa del material en texto

UNIVERSIDAD NACIONAL AUTÓNOMA
DE MÉXICO

FACULTAD DE ESTUDIOS SUPERIORES
ARAGÓN

“ACCESIBILIDAD EN EL CONTENIDO
DE LA WEB”

BAJO LA MODALIDAD DE
ALTO NIVEL ACADÉMICO
PARA OBTENER EL TÍTULO DE:
INGENIERO EN COMPUTACIÓN
P R E S E N T A:
SORAYN RODRÍGUEZ SAAVEDRA

ASESOR:
ING. HUGO PORTILLA VÁZQUEZ

FES Aragón

UNAM – Dirección General de Bibliotecas
Tesis Digitales
Restricciones de uso

DERECHOS RESERVADOS ©
PROHIBIDA SU REPRODUCCIÓN TOTAL O PARCIAL

Todo el material contenido en esta tesis esta protegido por la Ley Federal
del Derecho de Autor (LFDA) de los Estados Unidos Mexicanos (México).
El uso de imágenes, fragmentos de videos, y demás material que sea
objeto de protección de los derechos de autor, será exclusivamente para
fines educativos e informativos y deberá citar la fuente donde la obtuvo
mencionando el autor o autores. Cualquier uso distinto como el lucro,
reproducción, edición o modificación, será perseguido y sancionado por el
respectivo titular de los Derechos de Autor.

Agradezco ante todo a mi madre y a mi padre
Que han hecho todo lo que estuvo en sus manos para sacarnos adelante.
Siempre he pensado que soy hija de dos personas muy grandes
Por lo que solo había una forma de responderles: la excelencia.

Agradezco a todos los cuates que vivieron toda la experiencia
Junto conmigo por que definitivamente sin sus grandes
O pequeñas aportaciones hicieron de este paso por la Universidad un grato recuerdo.
Ruth, Jonas, Miguel, Vic, Gerardo, Fer y Yalkin, muchas gracias por su amistad

Agradezco a los profes que hicieron su esfuerzo para enseñarnos.
Ing. Hugo Portilla muchas gracias por aceptar ser mi tutor.

Y agradezco especialmente al extranjero que me ha acompañado y apoyado
Durante los momentos de luz pero también en los de oscuridad.

Índice

Página
Introducción 5
Objetivos 6

Capítulo1. HTML (Hyper Text Markup Language) 7

1.1. Antecedentes 7
1.2. Sintaxis usada en HTML 8
1.3. Estructura básica de un documento HTML 9
1.4. Recomendaciones en cuanto el uso de etiquetas 9

Capítulo 2. CSS (Cascading Style Sheets) 10

2.1. Antecedentes 10
2.2. Sintaxis básica de CSS 11
2.3. Asociación de CSS y HTML 12

Capítulo 3. Discapacidades, Accesibilidad y organizaciones involucradas 13

3.1. Discapacidades que dificultan el uso de la Web 13
3.1.1 Discapacidades Visuales 13
3.1.2 Discapacidades Auditivas 13
3.1.3 Discapacidades Físicas 13
3.1.4 Deficiencias en el habla 13
3.1.5 Discapacidades cognitivas y neurológicas 14
3.2 Concepto de Accesibilidad 14
3.3 W3C (World Wide Web Consortium) y WAI (Web Accessibility Initiative) 15

Capítulo 4. Pautas para la accesibilidad al contenido de la Web (WCAG) 16

4.1. Proporcione alternativas equivalentes para el contenido visual y auditivo 17
4.2. No se base sólo en el color 17
4.3. Utilice marcadores y hojas de estilo apropiadamente 18
4.4. Identifique el idioma utilizado en el documento 18
4.5. Cree tablas accesibles 19
4.6. Asegure la transformación correcta de páginas que
incorporan nuevas tecnologías 20
4.7. Permita al usuario tener el control sobre los cambios de los
contenidos tempo-dependientes 20
4.8. Asegure la accesibilidad directa de las interfaces de usuario incrustadas 21
4.9. Diseñe pensando en la independencia del dispositivo 21
4.10. Utilice soluciones provisionales 22
4.11. Utilice las tecnologías recomendadas y pautas del
Consorcio W3C 22
4.12. Proporcione información de contexto y orientación 23
4.13. Diseñe mecanismos claros de navegación 23
4.14. Asegúrese de que los documentos sean claros y simples 24

Capítulo 5. Técnicas para las Pautas de accesibilidad al contenido en la Web 25

5.1. Generalidades sobre el documento 25
5.1.1. Declaración del tipo de documento 25
5.1.2. Datos acerca de los datos 25
5.1.3. Todo documento llevará un título 26
5.1.4. Relaciones entre documentos 26
5.1.5. Idioma del documento 27

5.2. Etiquetas comunes para el contenido 27
5.2.1. Encabezados 27
5.2.2. Enfatizar la información 28
5.2.3. Expandir abreviaturas y acrónimos 28
5.2.4. Citas 29
5.2.5. Definiciones 29
5.2.6. Listas 30
5.2.6.1. Listas numeradas 30
5.2.6.2. Listas no ordenadas 32
5.2.7. Tablas 34
5.2.7.1. Información sobre la tabla 34
5.2.7.2. Relaciones entre filas y columnas 34
5.2.8. Elementos de navegación 36
5.2.8.1. Vínculos 36
5.2.8.2. Barras de navegación 37
5.2.8.3. Mapas de Imagen 38

5.3. Etiquetado para contenidos no textuales 40
5.3.1. Imágenes 40
5.3.2. Scripts 41
5.3.3. Applets y otros objetos programados 42
5.3.4. Marcos (frames) 42
5.3.5. Formularios 44

5.4. Uso de hojas de estilo para la presentación del contenido 47
5.4.1. Formato al texto 47
5.4.1.1. Tipos de letra 47
5.4.1.2. Estilos de la fuente 47
5.4.1.3. Efectos de estilo del texto 47
5.4.2. Unidades de medida del texto 49
5.4.3. Uso de colores 49
5.4.4. Permitir el control sobre los estilos 51
5.4.5. Contenidos generados a partir de CSS 52
5.4.6. Alineación del texto 53
5.4.7. Capas, maquetación y ubicación 54
5.4.8. Líneas y bordes 55
5.5. Afinando detalles 57

Conclusiones 58
Bibliografía 59

Introducción

Actualmente un sin numero de personas interactúan en la Web día con día para cumplir distintos
objetivos, sea entretenimiento, socialización, investigación, etc. Son precisamente los usuarios
quienes han hecho de la Web lo que es hoy en día, un recurso casi indispensable para la vida
cotidiana.

Como se suele decir “cada cabeza es un mundo” y es completamente cierto, sea por naturaleza o
simplemente por genética somos diferentes. Las diferencias pueden ir desde la apariencia física,
la personalidad, el intelecto e incluso somos diferentes en capacidades. Cada individuo realiza
sus actividades de diferentes maneras según las herramientas que tiene a la mano,
afortunadamente para todos el hombre tiene la capacidad de adaptarse al medio ambiente que lo
rodea.

A pesar de las diferencias somos capaces de comunicarnos, convivir e interactuar entre nosotros a
través de diversos medios uno de ellos es la Web. Sin embargo en la actualidad hay que decirlo
muchas páginas Web no fueron diseñadas pensando en la gran variedad de usuarios que las
utilizan, el problema posiblemente sea que estos diseñadores están trabajando bajo el supuesto
de que todos los usuarios somos iguales, es decir, que tenemos las mismas capacidades, recursos
y herramientas que ellos.

Existe en particular un grupo de usuarios cuyas capacidades no están siendo consideradas
completamente en la Web, me refiero específicamente a las personas que poseen alguna
discapacidad. Tal como lo cita la ONU “se estima que más de 500 millones de personas en el
mundo tienen algún impedimento físico, mental o sensorial y alrededor del 80% de estas personas
viven en los países en desarrollos”.1 En México al año 2000 el INEGI determino que en el país hay
“1 millón 795 mil, lo que representa 1.8% de la población total”2 que posee algún tipo de
discapacidad.

Cualquiera podría pensar usuarios tan especiales no cuentan con las herramientas para usar la
Web pero afortunadamente esto no es completamente cierto, se han creado herramientas
especiales para ellos que se adaptan a sus necesidades como son los sintetizadores de voz,
navegadores de texto, teclados especiales y apuntadores de cabeza por mencionar algunos. Ahora
lo que falta es que los diseñadores de contenidos de la Web faciliten que ellos puedan utilizar sus
herramientas para que estén en igualdad de condiciones que los demás usuarios.

Todo esto implica que sise quiere que la Web siga creciendo no queda mas que aportar a la
gente las facilidades que así requiera para su acceso, es decir, promover el diseño para todos.

El diseño para todos o diseño accesible es el tema a desarrollar en este documento como una
posibilidad real de aplicación en el contenido de la Web, entendiéndose por contenido todo aquel
elemento que conforme una página Web. Para ello nos valdremos de un conjunto de guías
conocidas como Pautas de Accesibilidad al Contenido de la Web que proveen de toda clase de
recomendaciones sobre el diseño de páginas Web, mismas que se llevaran a la practica mediante
el uso del lenguaje HTML y las hojas de estilo (CSS).

El desarrollo de este documento inicia con los antecedentes, estructura básica y uso tanto de
HTML como de CSS por tratarse de dos elementos clave para la puesta en practica de las Pautas
de Accesibilidad al Contenido de la Web. Continua con el listado y descripción de ciertas
discapacidades que impiden el uso de la Web para dar un panorama general de su realidad y
necesidades. Más adelante se enuncian las recomendaciones de las Pautas y se concluye con la
ejecución de estas.

1 ONU. Personas con discapacidad. Nota [en línea].
http://www.cinu.org.mx/temas/desarrollo/dessocial/integracion/p_dis.htm
2 INEGI. Discapacidad en México. [en línea]
http://cuentame.inegi.gob.mx/impresion/poblacion/discapacidad.asp
Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web
6

Objetivos

Objetivo General

Concientizar a los desarrolladores de contenidos de páginas Web sobre las necesidades de los
usuarios con capacidades diferentes.

Objetivos específicos

Demostrar la implementación de las Pautas de Accesibilidad al Contenido de la Web por medio de
ejemplos sencillos.

Proveer a los diseñadores de páginas Web o sitios Web guías para el diseño.

Promover el desarrollo de una Web sensible a las necesidades y capacidades de la gente.
Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web
7

Capítulo 1. HTML (Hyper Text Markup Language)

1.1 Antecedentes

Cuando Tim Bernes – Lee comienza a idear en 1980 lo que ahora se conoce como la Web
identifica tres aspectos básicos para poder concretar este proyecto3:

• Un esquema uniforme de nombres para localizar recursos.
• Protocolos para acceder a los recursos.
• Hipertexto para navegar entre los recursos.

Este ultimo punto concretado en 1991 como HTML o Hyper Text Markup Language especifica los
lineamientos que habría de utilizarse para la publicación de documentos en la Web. Es decir, a
través del uso de este lenguaje el programa cliente o navegador se dará a la tarea de interpretar
las etiquetas del documento y presentarlo en la pantalla del usuario. En su primera versión HTML
definía únicamente aspectos generales sobre la estructura de los documentos como son:
encabezados, textos, imágenes y formularios simples.

Con la expansión de la Web, HTML comenzó a ser utilizado por distintas empresas e inició una
comercialización de programas, que eran capaces de interpretar el código y encontrar páginas a
través de la Web. Pero hubo un inconveniente, HTML con su estructura básica les resulto
insuficiente a los desarrolladores de aplicaciones así que comenzaron a diseñar sus propias
interpretaciones de HTML, las cuales lógicamente solo interpretaban sus navegadores. Por ello se
creo el Consorcio de la World Wide Web (W3C) quien se encarga de especificar estándares para la
Web y por supuesto de HTML.

El primer estándar fue HTML 2.0 el cual fue auspiciado por la Internet Engineering Task Force
(IETF) en noviembre de 1995. Este estándar pretendía ser la unificación de los criterios e
indudablemente incorporar mejoras a la versión inicial. Sin embargo no cumplió con las
expectativas, y se reinició la adición de nuevas etiquetas fuera del estándar.

Fue entonces cuando W3C publico HTML 3.0 que incluyo algunas de las adiciones hechas por los
creadores de navegadores para frenar de alguna manera la adición de etiquetas y por tanto los
problemas de interpretación que ya padecían los distintos navegadores y por consecuencia los
usuarios de la Web. A pesar de ello su uso fue limitado y se dio a conocer la revisión de este
estándar bajo el nombre de HTML 3.2 que incluía:

• Nuevos elementos para introducir en la cabecera como: script para Java Script o VBScript
y otros como <style>, <meta>, <base> y <link>.
• Nuevos atributos para BODY que modifican el color de los enlaces, del texto, del fondo y
también agregan imágenes en el fondo.
• Atributos para la mayoría de las etiquetas.
• La posibilidad de cambiar el tamaño y color del texto usando la etiqueta <font>.
• Además de la posibilidad de usar tablas.

Posteriormente para diciembre de 1997 el W3C aprobó el estándar HTML 4.0 y se consigue
además que las compañías más importantes se apeguen a él. Con este nuevo estándar se
ampliaron las posibilidades del diseño de páginas Web a través de los mecanismos de hojas de

3 Raggett, Dave, Arnaud Le Hors, et al. Especificación HTML 4.01. Recomendación del W3C. 24 de diciembre
de 1999. http://www.w3.org/TR/html401/

Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web
8
estilo, la ejecución de scripts, marcos, objetos incluidos, soporte mejorado para texto de
derecha a izquierda, tablas más complejas, mejoras en los formularios, y también para la
accesibilidad.

Más adelante se realizó una revisión de HTML 4.0 conocida como HTML 4.01 la cual solo corrige
errores e introduce algunos cambios.

Es bien sabido que es imposible complacer a todo el mundo, pero el estándar HTML 4.0 se ideó lo
más completo posible para dar por terminado el descontento de las versiones anteriores y por
supuesto la adición de otros elementos fuera del estándar, tan es así que hoy en día todos los
navegadores del mercado lo soportan.

A partir de los problemas que se presentaron en el pasado y con la creación de W3C se ha dado
mayor importancia a los estándares como un medio para llegar a la mayor cantidad de personas
posibles que se acceden a la Web dejando de lado las extensiones propietarias.

En la actualidad la Web cuenta con herramientas que complementan la tarea inicial de HTML
como son JavaScript, CSS, Flash, entre otras. Todas ellas encaminadas a hacer de la Web una
experiencia dinámica. Por el momento es seguro decir que HTML continuará evolucionando y
seguirá siendo la base de infinidad de páginas Web.4

1.2 Sintaxis usada en HTML

HTML está basado en la implementación de etiquetas o tags las cuales cumplen funciones muy
especificas con respecto a la estructura del documento.

Las etiquetas por lo general tiene una sintaxis como la que se muestra:

<etiqueta_inicio> ... </eiqueta_fin>

donde se indica el principio así como el final y entre ellas se agrega aquello a lo que se le
aplicará la acción asociada a la etiqueta. Cada etiqueta se complementa con atributos los cuales
al asociase con ciertos valores específicos proveen de información adicional al navegador sobre la
tarea que debe realizar.5

<nombre_etiqueta atributo=”valor“> ... </nombre_etiqueta>

Cuando en una etiqueta se utilicen más de un atributo estos irán divididos con comas.

<nombre_etiqueta atributo1=” ”,atributo2=” “,... atributoN=” “>

Teniendo en mente la manera en que se visualizan las etiquetas se inicia con la estructura.

4 Hoy en día el Consorcio W3C tiene listo el borrador de lo que será HTML 5. Si se quiere consultarlo esta
disponible en línea en el siguiente enlace. http://www.w3.org/html/wg/html5/
5 Cada etiqueta de HTML viene acompañada de atributos y sus valores validos paraejecutar cierta tarea por
lo que es importante que al trabajar con ellas se consulte la especificación de HTML.
Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web
9

1.3 Estructura básica de un documento HTML

Basándose en la especificación un documento de HTML está constituido por 3 partes:

1. La primera línea del documento inicia con la etiqueta <!DOCTYPE> seguida de la
especificación de la versión de HTML utilizado de tal forma que el navegador pueda
interpretar el documento, tal como se muestra:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

2. Una cabecera (HEAD) en la cual es posible definir: titulo del documento, palabras clave,
información sobre el autor entre otras cosas.

<HTML> <HEAD> <TITLE>Mi primer documento HTML</TITLE> </HEAD>
3. El cuerpo del documento (BODY) que contendrá la información en texto, en tablas o en
imágenes que verá el usuario en pantalla.6
<BODY>
<P>Anotaciones del curso ... </P>
</BODY>
</HTML>

Como se pudo observar tanto la cabecera y el cuerpo del documento estarán dentro del elemento
<HTMLl> </HTML>

1.4 Recomendaciones en cuanto el uso de etiquetas

La mayor recomendación que se hace respecto al uso de los marcadores o elementos propios de
un documento HTML, es cumplir con las Especificaciones así como con las Pautas de Accesibilidad
al Contenido Web publicados por la WAI (Iniciativa de Accesibilidad Web). Adicional a lo anterior
es recomendable que el diseño se inicie por la organización y etiquetado de la estructura lógica
del documento y finalice con el diseño de la presentación. El por qué es muy simple, si se piensa
de esta manera se tomará cierto tiempo para armar las bases del documento y se elegirán los
marcadores adecuados para cada parte del documento, y al finalizar la presentación se aplicara
fácilmente a cada parte de la estructura del documento por las hojas de estilo (CSS).

6 La etiqueta BODY solo podrá ser sustituida por frameset cuando el documento maneje formularios.
Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web
10

Capítulo 2. CSS (Cascading Style Sheets)

2.1 Antecedentes

Es bien sabido que la división de tareas es la mejor manera de conseguir buenos resultados y la
Web no es la excepción. Desde los principios del desarrollo de HTML se identificó la necesidad de
definir la división de tareas en cuanto a formato o estilos de los documentos HTML y la
estructura, así surge CSS.

De forma general las Hojas de Estilo o CSS (Cascading Style Sheets) es un lenguaje que se encarga
a través de sus sentencias de especificar el estilo o presentación que un navegador deberá
ejecutar sobre el elemento del documento de HTML que se indique.

Aún cuando se había identificado la necesidad de manejar de manera independiente la estructura
y la presentación, fue hasta finales de 1994 que el W3C (Consorcio de la World Wide Web)
propuso la creación de un lenguaje que se encargara de esto. De entre las nueve propuestas que
surgieron, dos se tomaron realmente en cuenta, una desarrollada por Hakon Wium Lie (CHSS
Cascading HTML Style Sheets) y otra de Bert Bos (SSP Stream.based Style Sheet Proposal). Sin
embargo entre finales 1994 y 1995 ambos autores definieron un nuevo lenguaje que contendría lo
mejor de cada una de sus propuestas y le pusieron por nombre CSS. Más adelante solo para
concretar los trabajos de estos personajes a finales de 1996 el W3C publicaría la recomendación
oficial denominada CSS nivel 1.

Tal como sucedió con HTML el W3C definiría un grupo de trabajo de CSS que se encargaría de
continuar con las mejoras y publicación de estándares posteriores y así lo han hecho, para Mayo
de 1998 publicaron la segunda recomendación oficial conocida como CSS nivel 2 y desde 1998 se
trabaja en la recomendación CSS nivel 3.

A diferencia de lo ocurrido con HTML, CSS no fue adoptado inmediatamente por el mercado de
los navegadores, ello implico que aunque ya existía la recomendación de CSS nivel 1 realmente
pocos navegadores lo soportaban, a la fecha existen algunas reglas de CSS 2 que los navegadores
más populares no interpretan adecuadamente lo que impide explotar al máximo el alcance de
este lenguaje y orilla a los diseñadores de páginas Web a hacer tantas pruebas como sea
necesario en distintos navegadores para asegurar que haga una interpretación adecuada o en su
defecto que no afecte la presentación de la página que se este diseñando.

Las ventajas de usar CSS son considerables por ello las pruebas a las que se tienen que someter
los documentos HTML son casi despreciables. Por una parte el uso de las hojas de estilo centraliza
los trabajos, es decir, que en lugar de usar para cada elemento cierta propiedad para su formato
es posible hacer una agrupación de estilos a aplicar sobre grupos de elementos, de tal manera
que las modificaciones se realizan de manera más rápida y el mantenimiento en el futuro
constará solo en la actualización de uno o dos valores que serán aplicados a todos los documentos
que componga el sitio Web. También constituye un ahorro de recursos, si el sitio utiliza hojas de
estilo externas para su presentación, al cargarse la primera página se cargará la hoja de estilo y
para las siguientes páginas que utilicen esas hojas estarán disponibles en memoria cache por lo
que la carga se agiliza. Otro punto importante es que al usar CSS los lectores de pantalla pueden
concentrarse en el contenido de la página haciendo más fácil su tarea.

Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web

2.2. Sintaxis básica de CSS

CSS se encarga de definir los distintos estilos que se aplicarán a cada uno de los elementos que
conforman el documento HTML. Todo esto lo realiza por medio de reglas.

Una regla de CSS está formada por dos partes:

• Un selector, es decir el nombre del elemento HTML al cual se aplicará la regla
• Una declaración, la cual define el aspecto del selector.

De manera particular la declaración la conforman:

• Una propiedad que indica concretamente el estilo a aplicar.
• Un valor.

La forma general de una regla es la siguiente:

Selector { propiedad: valor }

Declaración

Como se ve todas aquellas propiedades que modificarán al selector irán delimitadas por llaves { }.
En lo que se refiere al valor estará asociado inmediatamente después de dos puntos (:).

Un ejemplo sencillo de una regla:
H1 { color: blue }

Con la regla anterior se le indica al navegador que el encabezado especificado con la etiqueta H1
deberá presentarlo en color azul.

CSS permite que sus reglas sean aplicadas a más de un selector cuando se requiere que varios
elementos sean modificados con las mismas propiedades. La manera de hacerlo es separar cada
uno de los selectores por comas. De forma similar sucede con las declaraciones, se puede definir
más de una declaración solo que para este caso el separador es el punto y coma (;) Tal como se
ve en los ejemplos:

H1, H2, H3 { font-family: helvetica }
H1 { font-weight: bold; font-size: 12pt; font-family: helvetica; font-style: normal }

De esta forma CSS permite definir individualmente pero también grupalmente el formato que ha
de aplicarse a los elementos que conforman la estructura del documento HTML.

Pero para hacer efectivas las reglas de CSS es indispensable asociarlas al documento HTML. Como
se verá a continuación la aplicación de una hoja de estilo puede hacerse de dos formas.

11
Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web
12

2.3 Asociación de CSS y HTML

Para hacer uso de las hojas de estiloprimero se debe asociar las sentencias al documento al cual
deben aplicarse, esto se realiza directamente en el documento HTML dentro de su cabecera por
medio de la etiqueta <STYLE> o por medio de un archivo externo.

La especificación del estilo dentro de la misma estructura del documento se hace de la siguiente
manera:

<HEAD> <STYLE type="text/css"> H1 { color: blue } </STYLE> </HEAD>

La asociación anterior se tomar en cuenta preferentemente cuando se aplique un número
limitado de estilos, en caso contrario conviene optar por incluir una hoja de estilo externa que
contenga todas las sentencia a aplicar para reducir el mantenimiento y dar coherencia al sitio.

Para realizar la asociación entre el archivo externo se hará como se muestra:

Para este caso todas las sentencias que se apliquen al documento deberán almacenarse en un
archivo con extensión .css y asociarse al o los documentos que lo requieran. 7

La ventaja de manejar los estilos a través de un archivo externo, es decir, de manera
independiente es que centraliza la tarea facilitando el mantenimiento y sobre todo la
reutilización de ellos para mas documentos o futuros proyectos.

En este trabajo no entrará en muchos detalles respecto a las sentencias que existen en CSS para
cada uno de los marcadores de HTML, solamente se citaran algunos ejemplos para resaltar el uso
de CSS como una buena práctica para la Accesibilidad y si se desea profundizar en el tema se
recomienda consultar las especificaciones CSS 1 y CSS 2 de la Iniciativa de la Accesibilidad Web.

7 Similar a la creación de una página HTML, la creación de una Hoja de Estilo no requiere de una aplicación
especializada basta con usar un editor de texto y una vez terminado guardarlo indicando la extensión .css.

Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web
13

Capítulo 3. Discapacidades, Accesibilidad y Organizaciones involucradas.

3.1 Discapacidades que dificultan el uso de la Web.

En este capítulo se enumeran las diferentes clases de discapacidades que afectan el uso de la
Web, la idea de exponerlas es obtener un panorama general de las dificultades que enfrentan las
personas que poseen alguna limitación ya sea sensorial, física, neurológica o cognitiva.

3.1.1 Discapacidades Visuales
De entre las limitaciones en la visión se pueden mencionar la pérdida total como es la ceguera o
parcial como la visión túnel, la visión borrosa o la pérdida de campo central, además de la
deficiencia en la percepción de algún color (daltonismo o ceguera cromática).
Las personas con ceguera se valdrán de aplicaciones como los lectores de pantalla para recibir la
información vía un sintetizador de voz o línea braille, navegadores de texto como Lynx o de voz,
así como ciertas estrategias de navegación rápida entre cabeceras y enlaces mediante
tabuladores.
Las personas que posean una visión limitada verán la manera de ajustar la salida del navegador
para no tener problemas, ellos pueden por ejemplo usar pantallas grandes, aumentar el tamaño o
el tipo de letra que se presenta en pantalla.
Para personas daltónicas o ceguera cromática necesitaran usar hojas de estilo con combinaciones
de colores que se adecuen a ellos.
3.1.2 Discapacidades auditivas
Las personas con este tipo de discapacidad total o parcial tendrán dificultades con el material
auditivo que se presente en las páginas Web, por lo que recurren a alternativas en texto como
son los subtítulos, en los casos que la discapacidad no sea severa se valen de controles para el
ajuste de la reproducción.
3.1.3 Discapacidades Físicas
Cuando una persona tiene una limitante física para usar los dispositivos convencionales con los
que se interactúa con una computadora recurre a dispositivos adecuados a sus capacidades como:
un ratón especial; teclado con una disposición de teclas que convenga a su rango de movimiento
manual; ratón de cabeza, o apuntador de boca, también puede hacer uso de software de
reconocimiento de voz.
3.1.4 Deficiencias en el habla
La deficiencia en el habla podrá repercutir sólo cuando se presenten aplicaciones de
reconocimiento de voz para esos casos se requiere de un método alternativo para el ingreso de
información por ejemplo el texto o alguna combinación de teclas que ejecute la acción.

Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web
14

3.1.5 Discapacidades cognitivas y neurológicas
Las discapacidades cognitivas son aquellas dificultades que tienen las personas para aprender
algo, dichas dificultades usualmente se ven reflejadas como falta de comprensión de textos
(dislexia), imágenes o números (discalculia) mediante la escritura o lectura, la falta de atención,
la falta de memoria a corto o largo plazo o el lento aprendizaje. De las discapacidades
neurológicas se puede considerar la sensibilidad ante destellos o sonidos de ciertas frecuencias.
Como es notorio para cualquiera de las discapacidades cognitivas son imprescindibles alternativas
que ayuden a su proceso de aprendizaje. Por ejemplo, una persona con dificultad para leer puede
utilizar un lector de pantalla con síntesis de voz que le facilite la comprensión, mientras una
persona con discapacidad para procesar lo escuchado puede usar subtítulos para ayudarle a
comprender un contenido sonoro.
Para una persona con discalculia o dislexia se necesita una variedad de maneras para obtener la
información, esto aplica también para las personas con déficit de atención aunque de manera
adicional se debe limitar las distracciones.
Las personas que tengan problemas de memoria se ayudan de la estructura lógica de las páginas o
de la información para recordar lo que están haciendo.
Quienes son sensibles a destellos visuales o sonoros a ciertas frecuencias, requieren del control
de animaciones, del texto parpadeante o del sonido que se presente.
Como puede verse, las discapacidades implican ajustes y por supuesto nuevas consideraciones. La
clave principal está en pensar y diseñar considerando posibles contextos de los usuarios que
acceden a la Web, si bien es casi imposible cubrirlo todo al menos se debe de disminuir tantos
obstáculos como sea posible.

3.2 Concepto de Accesibilidad

Desde el surgimiento de la Web se hizo énfasis en la necesidad de asegurar el acceso a los
recursos que la conforman, por lo que se crearon estándares que garantizan esta tarea
independientemente del navegador que utilice el usuario y gracias a esto la comunidad sigue
creciendo, sin embargo conforme ha pasado el tiempo se ha dejado ver que la diversidad de
usuarios es demasiada por ello hoy se apuesta por un diseño universal o diseño para todos, es
decir, la accesibilidad Web.

La accesibilidad Web debe entenderse como la cualidad que posee una página o un sitio Web
cuyo diseño permite que sus contenidos y servicios están disponibles para cualquier persona, con
independencia de su contexto de navegación.

Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web
15

3.3. W3C (World Wide Web Consortium) y WAI (Web Accessibility Initiative)
El Consorcio World Wide Web (W3C) fundado en octubre de 1994, es una organización dirigida
por Tim Berners-Lee creador de la World Wide Web, y por Jean-François Abramatic, como
Presidente.
El W3C está constituido por Organizaciones Miembro, sin ánimo de lucro, que trabajan con la
comunidad internacional para desarrollar especificaciones y programas informáticos de
referencia, que se distribuyen gratuitamente, bajo el compromiso de encaminar a la Web a su
máximo potencial, promoviendo un alto grado de accesibilidad para todas las personas.El W3C a través de su grupo permanente de trabajo Iniciativa de Accesibilidad Web (WAI) y en
coordinación con organizaciones al rededor de todo el mundo, persigue la accesibilidad de la Web
a través de cinco áreas de trabajo principales:

• Tecnología
• Directrices
• Herramientas
• Formación y difusión, e
• Investigación y desarrollo.

Estas áreas de trabajo abarcan los diferentes componentes involucrados en el desarrollo Web y su
interacción. Para WAI la única forma de alcanzar su objetivo está en el trabajo conjunto entre el
software Web (herramientas) y desarrolladores Web (personas), de aquí se desprenden sus
trabajos como son las directrices de Accesibilidad para:

o El Contenido de la Web (WCAG)
o XML (Extensible Markup Language)
o las Herramientas de Autor y
o los Navegadores

Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web

Capítulo 4. Pautas de Accesibilidad al contenido de la Web (WCAG)

Las Pautas de Accesibilidad al contenido de la Web son una especificación del consorcio W3C
desarrollada por la Iniciativa de Accesibilidad Web (WAI), con la cual se busca solventar aspectos
específicos del diseño que de cierta manera dificultan que la Web sea accesible, operable, de
contenido comprensible y navegable para cualquier usuario. Dichas pautas están pensadas para
todos los desarrolladores de contenidos de la Web (creadores de páginas y diseñadores de sitios) y
desarrolladores de herramientas de creación.

En cuanto a su organización cada pauta viene acompañada de una descripción, incluye también
una lista de puntos de verificación cuyo objetivo es explicar su ejecución, a su vez cada punto de
verificación cuenta con técnicas las cuales aportan tanto información como ejemplos. Dichas
técnicas están divididas en 3 grupos: 1) Técnicas Fundamentales; 2) Técnicas HTML; 3) Técnicas
CSS.

PAUTA
Descripción
Lista de Puntos de Verificación
Prioridad
Técnicas:
Fundamentales /HTML /CSS

Como es de esperarse la aplicación de los puntos de verificación de cada pauta repercute en la
accesibilidad del contenido, por esa razón el grupo de trabajo WAI estableció 3 niveles de
prioridad según su impacto.

Prioridad 1
Aquellos puntos de verificación que el desarrollador de contenidos tienen que satisfacer.

Prioridad 2
Los puntos de verificación de prioridad 2 deben satisfacerse por el desarrollador.

Prioridad 3
Los puntos de verificación de prioridad 3 pueden satisfacerse.

En este trabajo se respetará la estructura de las pautas mencionada anteriormente. Siendo así se
enlistan las pautas, su descripción de igual manera los puntos de verificación para cada una de
ellas. Respecto a las Técnicas estas serán explicadas de manera general para proporcionar una
ayuda a la ejecución de las pautas.

16
Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web
17

4.1 Proporcione alternativas equivalentes para el contenido visual y auditivo

La idea de esta pauta es enfatizar la aportación de equivalentes textuales para todo elemento no
textual como son: imágenes, sonido pregrabado, vídeo, etc. Por la sencilla razón de que el texto
es lo más accesible que existe debido a su flexibilidad para ser manipulado, modificado, leído,
impreso e interpretado por tecnologías de las que hacen uso las personas con discapacidad. La
única condición que debe satisfacer el equivalente textual es cumplir con la misma función que el
contenido original.

Al agregar equivalentes textuales adecuados no se limita el acceso de la información que
proporcionan los elementos no textuales utilizados en las páginas y se garantiza que los usuarios
estarán en igualdad de circunstancias.

Existen diversas formas de llevar acabo esta tarea. Por ejemplo, algunos elementos de HTML
poseen atributos como alt, longdesc a los que se les puede asignar concretas o amplias
descripciones, o en caso del elemento OBJECT el equivalente puede ir entre las etiquetas de
dicho elemento. Para el contenido multimedia se puede recurrir a SMIL (Lenguaje de Integración
Multimedia Sincronizada) para sincronizar clips con texto o en su defecto es valido incluir una
trascripción textual completa del material.

Puntos de Verificación:

• Proporcione un texto equivalente para todo elemento no textual. [Prioridad 1]

• Al usar un mapa de imagen proporcione enlaces redundantes en formato texto para cada
zona. [Prioridad 1]

• Hasta que las aplicaciones de usuario puedan leer automáticamente el texto equivalente
de la banda visual, proporcione una descripción auditiva de la información importante de
la pista visual de una presentación multimedia [Prioridad 1]

• Para toda presentación multimedia tempo dependiente por ejemplo, una película o
animación sincronice alternativas equivalentes como: subtítulos o descripciones de la
banda visual, con la presentación. [Prioridad 1]

4.2. No se base sólo en el color

A la mayoría de las personas que frecuentan la Web les es agradable el manejo que hacen los
diseñadores de los colores en sus páginas o sitios Web. Sin embargo los colores no solo sirven para
hacer de las páginas algo vistoso también se utilizan para indicar cierta información como por
ejemplo: dar énfasis a cierta parte del contenido, señalar que un texto es en realidad un link,
etc. Pero si una persona no percibe esos detalles se convierte en una limitante por ello no es
suficiente basarse solo en el color, existen otras maneras de destacar cierta información como
son: el subrayado, el sombreado, las negritas, borde alrededor del texto o algún otro estilo.

Puntos de verificación:

• Asegúrese de que toda la información transmitida a través de los colores también esté
disponible sin color, por ejemplo mediante el contexto o por marcadores [Prioridad 1]

Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web
18
• Asegúrese de que las combinaciones de los colores de fondo y primer plano tengan
suficiente contraste para que sean percibidas sin mayor dificultad [Prioridad 2 para las
imágenes. Prioridad 3 para texto].

4.3 Utilice marcadores y hojas de estilo apropiadamente.

Es indudable que esta pauta parte con la idea preconcebida de usar los elementos o marcadores
de HTML solo para armar la estructura del documento y las hojas de estilo para la parte estética
y seguramente es el sentido que la WAI quería dar en primera instancia.

Lo importante del diseño de páginas Web y para cualquier cosa en general es la planeación.
Cuando se diseña una página primero se piensa en el tema, después en la estructura con la que se
representara, en consecuencia se usaran los marcadores apropiados del lenguaje para dicha
estructura y de esta forma conseguir un buen diseño. Inclusive la tarea de las hojas de estilo se
facilita por que se tendrán definidos los elementos a los que se aplicaran las reglas de CSS. Por si
fuera poco esta practica disminuye los obstáculos al software especializado y favorece la calidad
del contenido que se presentara al usuario.

Cada elemento o etiqueta de HTML fue creada para un propósito definido por lo que es apropiado
usarlo de esa manera, esto implica que los marcadores no deberán utilizarse para efectos de
presentación si se quiere garantizar la accesibilidad.

Puntos de verificación:

• Cuando exista un marcador apropiado, use marcadores en vez de imágenes para
transmitir la información. [Prioridad 2]

• Cree documentos que estén validados por las gramáticas formales publicadas [Prioridad
2]

• Utilice dentro de lo posible una mínima cantidad de hojas de estilo para controlar la
maquetación y la presentación del sitio. Si esto no es factible use el mismo nombre de
clase para el mismo concepto en todas las hojas de estilo. [Prioridad2]

• 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,
para dar la facilidad de modificarse por los usuarios. [Prioridad 2]

• Utilice elementos de encabezado para transmitir la estructura lógica y utilícelos de
acuerdo con la especificación. [Prioridad 2]

• Marque correctamente las listas y los elementos que las conforman. [Prioridad 2]

• Use la etiqueta <CITE> solo cuando marque las citas y no para efectos de formato tales
como sangrías. [Prioridad 2]

4.4 Identifique el idioma utilizado en el documento

Un aspecto básico para tener una comunicación efectiva es conocer el idioma con el que se habla
o escribe lo mismo sucede en la Web. Al definir el idioma usado en el documento los lectores de
pantalla pronuncian adecuadamente el contenido en lugar de adivinar incorrectamente, en
general el software especializado realiza los ajustes necesarios para la correcta interpretación
del documento ya sea para su lectura o para su impresión en braille, de igual manera cuando se
Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web
19
solicita una traducción del documento el programa de traducción no tendrá problema en entregar
la solicitud hecha e incluso Google se beneficia pues no se ve en la necesidad de recurrir a
algoritmos para detectar el idioma cuando se le solicita hacer búsqueda en un idioma especifico.

Para especificar el idioma basta con asignar al atributo lang el código de idioma apropiado, este
puede ser: es para español, en para ingles, fr para francés o de para alemán.

Puntos de verificación:

• Indique el idioma principal de un documento. [Prioridad 3]
• Identifique claramente los cambios en el idioma original del texto del documento y en
cualquier texto equivalente (Por ejemplo, leyendas) [Prioridad 1]

4.5. Cree tablas accesibles.

Como todo el mundo sabe las tablas son una manera de presentar datos que por lo general
guardan una relación entre sí. Pero en las páginas Web las tablas no solo se utilizan para
presentar información de manera tabular, se han usado para maquetar, es decir, posicionar
ciertos elementos en un lugar especifico del navegador por ejemplo acomodar los enlaces en una
columna y el texto en otra. Esto definitivamente es una practica desaconsejada pero en su
momento fue una forma de dar presentación al documento.8

Hoy CSS se encarga de la maquetación lo único que se necesita es conocer las sentencias
apropiadas para ubicar elementos como: barra de navegación, imágenes decorativas, contenidos
y enlaces en posiciones especificas de la pantalla. Con las opciones que ofrecen las hojas de
estilo ahora las tablas se usan para presentar datos únicamente.

De manera general la estructura de una tabla esta compuesta por encabezados de fila y/o
columna, pero también por celdas de datos, todo ello debe etiquetarse apropiadamente para
hacerlas accesibles a los usuarios y asegurar que el navegador no tenga problemas con la
interpretación de la estructura, de las relaciones y de los niveles.

Puntos de verificación:

• En las tablas de datos, identifique los encabezamientos de fila y columna. [Prioridad 1]

• 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]

• Proporcione resúmenes de las tablas para proporcionar una visión general. [Prioridad 3]

• Si utiliza abreviaturas para los encabezados en la tabla proporcione su expansión.
[Prioridad 3]

8 El problema por así decirlo al usar las tablas para la maquetación de un sitio esta en que las aplicaciones lo
interpretan linealmente, quiere decir que leen de manera continua el contenido sin considerar las divisiones
entre celdas. Considerando el ejemplo dado en el cual de un lado se tendrían los enlaces y de otro lado los
contenidos, al leerse resultaría realmente confuso es por ello que este tipo de practica es desaconsejada.
Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web
20

4.6. Asegure la transformación correcta de páginas que incorporan nuevas
tecnologías.

Es un hecho que los usuarios de la Web no poseen o utilizan las ultimas versiones en navegadores,
en software y en hardware lo cual repercute en cierta medida la interacción, siendo así es
importante confirmar que toda aquella nueva tecnología incluida en el diseño o contenido
funcione en versiones anteriores de navegadores por ejemplo.

Seguramente se habrá notado que ciertas páginas recomiendan el tipo de programas o
navegadores que interpretan mejor sus contenidos lo cual es completamente valido ya que por un
lado previene al usuario que no posea el software sobre la posibilidad de tener ciertas
restricciones en la visualización de la página y por otro lado le da la opción de decidir sobre la
instalación de dicho requerimiento o en su defecto descartar la página y recurrir a otra
alternativa.

Puntos de verificación:

• Organice el documento de forma que pueda ser leído y comprensible sin hoja de estilo.
[Prioridad 1]

• 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]

• Asegúrese de que los contenidos dinámicos son accesibles o proporcione una página o
presentación alternativa. [Prioridad 2]

4.7 Permita al usuario tener el control sobre los cambios de los contenidos tempo-
dependientes.

Antes que nada se llama contenido tempo-dependiente a aquel objeto o página que cambia
después de cierto periodo de tiempo sea por que se mueve, parpadea o se actualiza.9 El
inconveniente con este tipo de contenidos es que existen personas son sensibles a sus acciones
por esa razón la pauta recomienda proveer al usuario de cierto control respecto a dichos
cambios. Por ejemplo, la actualización automática de una página no es una practica
recomendada debido a que algunos usuarios no suelen leer rápidamente o les cuesta trabajo
concentrarse incluso para usuarios inexpertos en el uso del teclado el hecho de llenar un
formulario puede ser complicado.

En pocas palabras se debe dar la opción al usuario si desea o no estas características.

Puntos de verificación:

• Evite provocar destellos en la pantalla que no puedan ser detenidos o controlados por las
aplicaciones de usuario. [Prioridad 1]

• Evite el parpadeo del contenido cuando este no pueda ser controlado por alguna
aplicación de usuario (por ejemplo, cambio de presentación en periodos regulares, así
como el encendido y apagado) [Prioridad 2]

9 Ejemplos sencillos de elementos tempo- dependientes son las presentaciones multimedia, las películas o
animaciones.
Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web
21

• De preferencia evite los movimientos en las página o en su defecto permita congelar el
movimiento de los contenidos. [Prioridad 2]

• En la medida de lo posible evite crear páginas que se actualicen automáticamente de
forma periódica o de la posibilidad de detener la actualización.. [Prioridad 2]

4.8 Asegure la accesibilidad directa de las interfaces de usuario incrustadas.

Buscando la interactividad de la Web hoy en día las páginas incorporan el uso de applets, scripts,
etc. Como es de suponerse las interfaces además de cumplir su objetivo deben ser accesibles. Un
primer paso para conseguirlo es diseñar la interface pensando en el accesoindependiente del
dispositivo.

Puntos de verificación:

• Cree los elementos de programación, tales como scripts y applets, de manera que sean
directamente accesibles o compatibles con las ayudas técnicas [Prioridad 1 sí la
funcionalidad es importante y no se presenta en otro lugar; de otra manera, Prioridad 2.]

4.9. Diseñe pensando en la independencia del dispositivo.

Tal como sucede con las tecnologías no es correcto suponer que todos los usuarios poseen y usan
los mismos recursos. Actualmente la mayoría de las páginas Web están enfocadas al uso de
dispositivos para apuntar (por ejemplo el ratón) para navegar por los vínculos, llenar formularios,
activar acciones mediante una interface, etc. Esta restricción implica que cierto grupo de
personas que emplean otros dispositivos encontraran un tanto conflictiva la interacción con la
página. Entonces la única opción es facilitar alternativas en el diseño que permitan al usuario
emplear el dispositivo de su preferencia o aquel que cubra sus necesidades.

Por ejemplo es posible asociar a vínculos y a campos de formularios atajos de teclado, es decir,
combinaciones de teclas que al presionarse activan el vinculo haciendo que el navegador lo siga y
al usarse en formularios el navegador enfocara el campo asociado. La forma de indicar al
navegador los atajos es mediante el atributo accesskey de HTML. Un atributo adicional es
tabindex el cual permite definir un orden de tabulación para navegar por los vínculos o por los
campos de los formularios con solo pulsar la tecla tabulador o tab.

Puntos de verificación:

• Diseñe mapas de imagen que sean controlados por el cliente no por el servidor, excepto
donde las zonas sensibles no puedan definirse con una forma geométrica. [Prioridad 1]

• Para los "scripts", especifique manejadores de evento lógicos en vez de manejadores de
evento dependientes de dispositivos. [Prioridad 2]

• Cree un orden lógico para navegar con el tabulador a través de vínculos, controles de
formulario u objetos. [Prioridad 3]

• 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]

Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web
22

4.10 Utilice soluciones provisionales.

El objeto de esta pauta es alentar a los diseñadores a proponer y ejecutar soluciones para toda
aquella situación que aún no sea soportada por las aplicaciones de usuario y que pueda
representar un impedimento para el uso de la Web.

Puntos de verificación:

• Procure no provoque apariciones repentinas de nuevas ventanas y no cambie la ventana
actual sin informar al usuario, de manera que este no se desoriente. [Prioridad 2]

• 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]

• Para evitar confusiones cuando se manejen vínculos contiguos, incluya caracteres
imprimibles (rodeados de espacios), entre ellos. [Prioridad 3]

4.11 Utilice las tecnologías recomendadas y pautas del consorcio W3C.

Las pautas y tecnologías recomendadas en conjunto son las alternativas que promueve el
Consorcio W3C ante los problemas de accesibilidad que han sido identificados en la Web, de
manera que sus observaciones y opciones permitan tanto a los desarrolladores de herramientas
como a los diseñadores de contenidos tener un panorama amplio de los contextos de cada usuario
encaminado a mejorar su experiencia.

De entre las tecnologías recomendadas se tienen las siguientes:

MathML para ecuaciones matemáticas.
HTML, XHTML, XML para documentos estructurados.
RDF para metadatos.
SMIL para crear presentaciones multimedia.
CSS y XSL para definir hojas de estilo.
XSLT para crear transformaciones de estilo.
PNG para gráficos (aunque algunos se presentan mejor en JPG, que no es una
especificación W3C).
Por ultimo independientemente de la tecnología a usar esta debe siempre apegarse a las
especificaciones establecidas de igual manera es necesario asegurarse que sean soportadas por la
mayoría de los navegadores para asegurar su efectividad y no comprometer el contenido.

Puntos de verificación:

Evite características desaconsejadas por las tecnologías W3C. [Prioridad 2]

Proporcione la información genérica sobre el documento para que los usuarios puedan
establecer sus preferencias (Por ejemplo, idioma, tipo de contenido, etc.) [Prioridad 3]

Si a pesar del esfuerzos no fue posible crear una página accesible, proporcione un vínculo
a una página alternativa que use tecnologías W3C que sea accesible, tenga información (o
Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web
23
funcionalidad) equivalente y sea actualizada tan a menudo como la página inaccesible.
[Prioridad 1]

4.12 Proporcione información de contexto y orientación.

Para quienes se dedican al diseño conocerán y probablemente habrán recurrido a los marcos
(frames) para la organización o distribución de la página Web. Al igual que las tablas, los marcos
pueden ser accesibles a los usuarios siempre y cuando se proporcione una idea general sobre cada
marco utilizado y de las relaciones que guardan entre sí para que personas que lo vean o lean
entiendan el sentido de su aplicación. Al llevar acabo estas consideraciones la calidad y la
coherencia del contenido evitara que una persona se desoriente y aproveche al máximo los
recursos disponibles.

Puntos de verificación:

Titule cada marco para facilitar su identificación y navegación. [Prioridad 1]

Describa el propósito de los marcos y como éstos se relacionan entre sí, si no resulta
obvio solamente con el título del marco. [Prioridad 2]

Asocie explícitamente las etiquetas con sus controles. [Prioridad 2]

4.13 Diseñe mecanismos claros de navegación.

Cuando uno como usuario se dispone a localizar una información especifica en la Web depende en
mucho de la estructura del documento, del contenido pero también de la claridad y la fácil
ubicación de los elementos de navegación definidos en la página sea en forma de vínculos, barras
de navegación, mapas de sitio o alguna otra. Cuando los mecanismos de navegación son claros y
coherentes se asegura el éxito de la búsqueda.

Puntos de verificación:

• Identifique claramente el objetivo de cada vínculo. [Prioridad 2]

• Proporcione información sobre la maquetación general de un sitio (por ejemplo, mapa del
sitio o tabla de contenidos) [Prioridad 2]

• Utilice los mecanismos de navegación de forma coherente. [Prioridad 2]

• Proporcione barras de navegación para destacar y dar acceso al mecanismo de
navegación. [Prioridad 3]

• Agrupe los vínculos relacionados, identifique el grupo y proporcione una manera de saltar
el grupo de vínculos. [Prioridad 3]

• Si proporciona funciones de búsqueda, permita diferentes tipos de búsquedas para
diversos niveles de habilidad y preferencias. [Prioridad 3]

• Proporcione información sobre las colecciones de documentos (por ejemplo, los
documentos que comprendan múltiples páginas) [Prioridad 3]

Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web
24

4.14 Asegúrese de que los documentos sean claros y simples.

Para cumplir con esta pauta es indispensable: dedicar un poco de tiempo a la redacción del
contenido, realizar una revisión de la ortografía así como la gramática pero sobre todo usar un
lenguaje claro lo cual incluye evitar en la manera de lo posible el uso de argot o jergas, en el
caso de los tecnicismos estos también deben aclararse dentro del mismo texto. Todo ello con la
finalidad de quien lo lea o escucheentienda el mensaje que se trata de trasmitir.

Puntos de verificación:

• Utilice un lenguaje apropiado, claro y simple para el contenido de un sitio. [Prioridad 1]

• Complemente el texto con presentaciones gráficas o auditivas cuando ello facilite la
comprensión de la página. [Prioridad 3]

• Cree un estilo de presentación que sea coherente para todas las páginas. [Prioridad 3]

• Coloque la información destacada al principio de los encabezamientos, párrafos, listas,
etc. Así una persona que da un vistazo al contenido podrá determinar si la información
contenida le es de utilidad. [Prioridad 3]

Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web
25
Capítulo 5. Técnicas para las Pautas de accesibilidad al contenido en la Web

Las técnicas para las pautas de accesibilidad al contenido de la Web constituyen un complemento
para las pautas citadas con anterioridad de modo que pueda apoyar a los desarrolladores con la
ejecución de cada punto de verificación.

De manera general cada técnica se ocupa de aspectos básicos del diseño, como son
recomendaciones en el uso de los tags o etiquetas según las necesidades del documento y uso de
las propiedades que dispone CSS para el diseño de la maquetación y presentación del contenido.

5.1 Generalidades sobre el documento.
5.1.1 Declaración del tipo de documento.
Como todo lenguaje HTML proviene de una gramática, es decir, de un conjunto de reglas y
principios que definen su sintaxis.

Cuando un documento se apega a cierta gramática garantiza que el código es correcto, confiable
y sobre todo su interpretación por aplicaciones de usuario. En dicho caso el siguiente paso es
realizar la declaración mediante la etiqueta DOCTYPE.

Con DOCTYPE se declara el tipo de documento en primera instancia la versión HTML, la gramática
contra la que se valida y adicionalmente un enlace que “permite a los agentes de usuario
descargar el DTD y los conjuntos de entidades que sean necesarios”10 para el proceso del código.
Un ejemplo de declaración !DOCTYPE es el siguiente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
http://www.w3.org/TR/html4/strict.dtd">

5.1.2 Datos acerca de los datos
En HTML existe un elemento denominado META que utilizados en conjunto “describen el tipo de
información que contiene una página Web”11. Quizás como usuario esto no sea sobresaliente sin
embargo como diseñador tiene implicaciones interesantes para los buscadores como Google, que
hacen uso de estas claves para llevar acabo búsquedas e identificar páginas dentro de sus bases
de datos. De entre la información que es posible difundir por los metadatos están los que se
muestran enseguida.

10 La estructura global de un documento HTML. [en línea] http://html.conclase.net/w3c/html401-
es/struct/global.html

11 Gamboa Comas, Anabell “Metadatos y sitios Web” [En línea]. Revista Digital Universitaria. 10 de octubre
2006 • Volumen 7 Número 10. http://www.revista.unam.mx/vol.7/num10/art88/oct_art88.pdf

http://html.conclase.net/w3c/html401-es/sgml/entities.html#entities
Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web
26
La sintaxis de esta etiqueta es sencilla cuenta con una propiedad y es seguida del valor
correspondiente, por ejemplo la propiedad "Author" y el valor "Sorayn Rodríguez".

5.1.3 Todo documento llevará un título
El titulo en un documento es importante por que es mediante este que una persona tiene el
primer vistazo sobre el contenido y adicionalmente lo identificará de entre una posible cantidad
de páginas que pueda estar consultando el usuario en cierto momento por lo que es necesario que
sea único y significativo.
En cuanto al etiquetado el título siempre deberá ir dentro de la cabecera del documento entre
sus respectivas etiquetas TITLE como se ve
<HEAD><TITLE>Lectores de pantalla</TITLE></HEAD>

5.1.4 Relaciones entre documentos
Por lo general cuando se diseña un sitio este suele desarrollar un tema en especifico o bien
cumple un objetivo particular de tal manera que los documentos que lo conforman guardan
forzosamente una relación entre sí. El tener en claro las relaciones entre documentos provee
organización en la navegación a través de ellos, tanto para los usuarios como para las
aplicaciones que ellos utilicen, claro, siempre y cuando se haga la declaración correspondiente
en este caso por la etiqueta LINK, tal y como se ve en el ejemplo.
<HEAD>
<TITLE>Capítulo 2</TITLE>
<LINK rel="Index" href="../indice.html">
<LINK rel="Next" href="Capítulo3.html">
<LINK rel="Prev" href="Capítulo1.html">
</HEAD>

En el caso de ejemplo el atributo rel de la etiqueta LINK indican el tipo de relación que guarda el
documento actual (Capítulo2.html) con respecto a otros por medio de los valores "Index", "Next" y
"Prev". La ventaja que implica este tipo de aclaración esta en que es factible que una aplicación
de usuario sea capaz de sintetizar herramientas de navegación o permitir la impresión ordenada
de un grupo de documentos basados en esta etiqueta.
Además de establecer un siguiente o un anterior LINK también se emplea para apuntar a
documentos alternativos de forma que el documento pueda adaptarse a las necesidades y
preferencias del usuario tal como se muestra enseguida.
<HEAD>
<TITLE>Bienvenidos al Centro Comercial Virtual!</TITLE>
<LINK title="Versión solo texto" rel="alternate" href="solo_texto"
media="aural, braille, tty">
</HEAD>

Idealmente se esperaría que el navegador cargará la página alternativa según el tipo de
navegadores que se identifique como uno de los que pueden mostrar páginas "aural", "braille", o
"tty".
Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web
27

5.1.5 Idioma del documento
El conocer un idioma permite a cualquier persona entender y expresar sus ideas sin mayor
dificultad pero cuando esto no es posible implica una barrera considerable. En la Web los
recursos provienen de distintas fuentes y por ende en varios idiomas. La manera en la que el
diseñador marca una diferencia y ayuda tanto a los usuarios como a las aplicaciones que ellos
utilizan, es indicando el idioma principal del documento y los cambios que se presenten. Para lo
cual recurrirá para ambas situaciones al atributo “lang” dentro de la etiqueta correspondiente
seguido del valor que corresponda al idioma.
<HTML lang="fr">
... todo el texto siguiente título y cuerpo en francés
</HTML>
Para indicar cambios de idioma dentro del mismo documento se especificara como sigue:
<P>y con un cierto<SPAN lang="fr">je ne sais quoi</SPAN>, ella entró tanto en la habitación como
en su vida para siempre.
<Q>Mi nombre es Natasha</Q>dijo ella.
<Q lang="it">Piacere,</Q> respondió él en impecable italiano, cerrando la puerta.

5.2. Etiquetas comunes para el contenido
5.2.1 Encabezados
La información suele dividirse para ser entendida de una mejor manera. Para los lectores los
encabezados son importantes ya que describen brevemente el tema de la sección que introduce.
Por ello siempre será recomendable iniciar un documento con un encabezado claro y
debidamente marcado con los elementos de encabezamiento de HTML (H1-H6).
El hecho de proporcionar encabezados facilita a los usuarios que ojean un documento determinar
si la información contenida es de su interés. Ahora bien respecto al marcado se espera que los
desarrolladores usen los elementos de encabezamiento de forma apropiada, es decir hacerlo
secuencialmente sin saltar nivelesy no emplearlos para crear efectos de fuentes.
Enseguida se muestra como se aplican los encabezados según la jerarquía de los temas.
<HEAD>
<TITLE>Modelo de Referencia OSI</TITLE>
</HEAD>
<BODY>
<H1>7 Capas del modelo de referencia OSI</H1>
... algún texto aquí ...
<H2>Capa de aplicación</H2>
... texto para esta sección ...
<H2>Capa de presentación</H2>
... texto para esta sección ...

Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web

Figura 1. Encabezados de un documento

5.2.2 Enfatizar la información
Anteriormente el remarcar cierta información se efectuaba usando etiquetas como B (negrita) e I
(cursivas) sin embargo solo resaltan el texto a nivel visual por lo que no son recomendables. Por
otro lado existen elementos mas adecuados como EM y STRONG que fueron diseñados para dar
énfasis estructural, es decir, un énfasis o peso al texto dentro del propio contenido de la página.

5.2.3 Expandir abreviaturas y acrónimos
En un texto es común encontrar tanto abreviaturas como acrónimos, en la Web este par de
elementos siempre irán acompañados de expansiones y etiquetados con ABBR y ACRONYM
respectivamente.
<P>¡Bienvenido a la <ACRONYM title="World Wide Web">WWW</ACRONYM>!

Figura 2. Expansión de un acrónimo
En las tablas es usual que por cuestiones de espacio se recurra al marcador <ABBR> para indicar
la abreviatura hecha a alguno de sus encabezados de filas o columnas y la expansión es
indispensable.
<TH>Nombre</TH>
<TH><ABBR title="Clave Única de Registro de Población ">CURP</ABBR> </TH>

28
Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web

Figura 3. Expansión para encabezados abreviados
La expansión de una abreviatura se percibe cuando un usuario se posiciona sobre ella (como se
muestra en la Figura 3) y cuando esta sea leída por alguna aplicación especializada.

5.2.4 Citas
En caso de que un documento por su naturaleza requiera citar algún fragmento de una página o
libro, HTML provee de dos elementos: Q y BLOCKQUOTE para marcar una cita corta (en línea) y
en bloque, respectivamente.
<BLOCKQUOTE cite="http://www.ucm.es/info/especulo/numero7/pitol.htm">
<P>Un novelista es alguien que oye voces a través de las voces (...) Con ellas va trazando el
mapa de su vida. Sabe que cuando ya no pueda hacerlo le llegará la muerte, no la definitiva,
sino la muerte en vida, la hibernación, la parálisis, lo que es infinitamente peor.
</P>
</BLOCKQUOTE>

Figura 4. Etiquetado de cita en bloque

Un aspecto interesante de emplear la etiqueta < BLOCKQUOTE> es que no solo especifica que el
texto marcado es una cita sino también provee una dirección que amplia la cita o da la pauta a
consultar la fuente.

5.2.5 Definiciones
Las definiciones también son parte de ciertos contenidos por lo que es preciso marcarlos de esa
manera para que sean reconocidos usando la etiqueta DFN.

29
Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web

<DFN title="Definición corta de redes LAN">Las redes LAN son redes en las que el entorno
geográfico suele limitarse a un edificio o complejo industrial. Los dispositivos que conforman la
red, comparten grandes anchos de banda y conectan dispositivos físicamente adyacentes.</DFN >

Figura 5. Resultado obtenido por etiquetado de definiciones
Además de usar la etiqueta <DFN>, el atributo “title” remarca que el texto que esta definido es
concepto de algo para nuestro ejemplo, una definición de red LAN.

5.2.6. Listas

Cuando se necesita crear listas en HTML se utilizan los elementos DL para listas de definiciones,
UL para listas no ordenadas (con viñetas) y OL para listas ordenadas o numeradas.

De las listas mencionadas anteriormente las listas de definiciones “difieren levemente de los
otros tipos de listas, en que los objetos de lista consisten en dos partes: un término y una
descripción”12. El etiquetado del termino listado se realiza con la etiqueta <DT> y la definición va
rodeada entre etiquetas <DD>.

Ahora bien nos centraremos en las listas ordenadas y las no ordenadas ya que presentan algunos
inconvenientes. Por un lado el elemento <OL> de las listas ordenadas anidadas no maneja una
referencia clara de los niveles. Y en las listas no ordenadas el utilizar imágenes como viñetas
pueden ser un problema si no se realiza adecuadamente.

5.2.6.1. Listas Numeradas
Las listas ordenadas tal como las maneja HTML e interpreta el navegador tienen la peculiaridad
de no numerar claramente los niveles tal como se ve en la Figura.
<OL><LI>Configuración básica</LI>
<OL> <LI>Enable</LI>
<LI>Configure terminal</LI>
<LI>Enable password</LI>
<LI>Show configure</LI>
<LI>Show ip address</LI>
<LI>Hostname</LI>
</OL> <LI>Configuración avanzada</LI> </OL>

12 Especificación HTML 4.0 Listas de definiciones: los elementos DL, DT y DD.
http://html.conclase.net/w3c/html401-es/struct/lists.html#h-10.3
30
Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web

Figura 6. Vista de una lista numerada

La numeración de estas listas se requiere un tanto más compleja, es decir, se deberían apreciar
los niveles a través de la propia numeración y no por sangrías. El sangrado dado por el etiquetado
es visualmente claro sin embargo para un software que narre el documento pasara desapercibido
y no existirá diferencia alguna entre un nivel y otro. Esto se soluciona empleando una hoja de
estilo en la cual se especifica al ordenador que cada vez que se presente un nivel anidado,
despliegue el nivel mas la posición que ocupe el elemento dentro de la sublista. De tal forma que
él formato a la numeración sea el requerido.
<STYLE type="text/css">
UL, OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }
</STYLE>

Figura 7. Uso de hojas de estilo para listas numeradas

31
Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web

5.2.6.2. Listas no ordenadas
Debido a que las listas no ordenadas no poseen alguna indicación del orden de sus elementos y
menos aun de sus niveles seria adecuado incluir pistas contextuales (antes o después del texto)
que eviten confusiones en la lectura. En el caso siguiente la nueva información es indicada a
través del texto ("Nuevo").
<HEAD>
<STYLE type="text/css">
.txtnuevo { font-weight: bold; color: red; background-color: yellow }
.bolonuevo { list-style : url(amarillo.gif) disc }
</STYLE>
</HEAD>
<BODY>
<UL>
<LI class="bolonuevo">Aprende a configurar el Pix Firewall desde cero<SPAN
class="txtnuevo"> Nuevo </SPAN></LI>
<LI> Documento para descarga formato PDF o DOC</LI>
</UL>

Figura 8. Uso de hojas de estilo en listas no ordenadas

Otra forma de dar una pista textual al usuario para que identifique el inicio o fin de una lista es
utilizando marcadores ocultos a la vista del navegador pero no para un software especializado.

<STYLE type="text/css"> .findelista { display: none } </ STYLE >
<UL>
<LI>Introducción a las redes</LI>
<UL>
<LI>Fundamentos de una PC</LI>
<LI>Configuración TCP/IP</LI>
<LI>... </LI> <span class="findelista">(Fin de Introducción a las redes)</span>
</UL>
<LI>Fundamentos de las redes</LI>
<UL>
<LI>Terminología de las redes</LI>
<LI>Topologías de red</LI>
<LI>...</LI> <span class=" findelista">(Fin de Fundamentos de las redes)</span>
</UL>
<LI>Medios de Red</LI>
<UL>
<LI>Medios de cobre</LI>
<LI>Medios ópticos</LI>
<LI> … </LI> <span class="findelista">(Fin de Medios de Red)</span>
</UL>
... <span class="findelista">(Finde Temario de Redes)</span>
</UL>
32
Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web

Figura 9 Marcadores ocultos para indicar el fin de sublistas
Como se habrá notado las viñetas predeterminadas no son variadas ni llamativas y es valido
modificar su estilo aprovechando las reglas de CSS de manera que no se agregue a la estructura
del documento más etiquetas que compliquen la interpretación de la lista. En el siguiente
ejemplo se muestra como se emplea CSS para agregar una imagen como viñeta y al mismo tiempo
se define un estilo de viñeta por defecto ('disc') en caso de no encontrarse disponible la imagen
especificada.
<STYLE type="text/css"> UL { list-style: url(araña.gif) disc } </STYLE>
</HEAD>
<BODY>
<H2>Amenazas a la seguridad de las redes</H2>
<UL>
<LI>Amenazas no estructuradas. Originadas por inexpertos.</ LI >
< LI >Amenazas estructuradas.</ LI >
< LI >Amenazas externas.</ LI >
< LI >Amenazas internas.</ LI >
</UL>

Figura 10 Uso de hojas de estilo para el cambio de viñetas
33
Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web
34

5.2.7. Tablas
Las tablas son una manera de presentar información por lo general resumida y concreta, por tal
motivo debe ser accesible.
5.2.7.1 Información sobre la tabla
En una tabla es importante contar con información aclaratoria sobre el sentido u objetivo que
cumplirá mediante alguno de los siguientes elementos13:
• Titulo. La función del titulo será describir la naturaleza de la tabla y se incorporara al
documento usando elemento CAPTION. Si por alguna razón el título es omitido es
conveniente proporcionar un resumen.
• Abreviaturas. Las abreviaturas reducen la repetición y el tiempo de lectura de los
encabezados. Para marcarlas se utiliza el atributo "abbr" de TH.
• Descripción corta. La forma de agregar una descripción a una tabla es asignándola como
valor al atributo "title" dentro del elemento TABLE.
• Resumen. Un resumen es útil principalmente para indicar las relaciones entre las celdas,
columnas y filas que conforman la tabla, de forma que se aprecie su estructura fuera del
enfoque visual. También justifica su uso dentro del contexto del documento. El resumen
se indica como un valor del atributo "summary" en el elemento TABLE.

5.2.7.2 Relaciones entre filas y columnas
El atributo summary no es el único medio por el cual se indican las relaciones en las tablas,
atributos como: "scope", "headers", y "axis " también consiguen ese objetivo.
El siguiente ejemplo14 muestra como se asocian las celdas que contienen los datos con sus
correspondientes encabezados. La clave de dicha relación se encuentra en la coincidencia entre
el valor asignado a id de los encabezados (TH) y el valor de headers en cada celda de datos (TD)
de la tabla.
<TABLE border="1"
summary="Esta tabla esquematiza el número de tazas de café consumidas por cada
profesor, el tipo de café (descafeinado o normal) y si se ha tomado con azúcar.">
<CAPTION>Tazas de café consumidas por cada profesor</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>

13 La implementación de los elementos: titulo (CAPTION), abreviaturas (abbr), descripción corta (title) y
resumen (summary) se mostrara mas adelante en un ejemplo completo.
14 La estructura del ejemplo citado fue tomada de las Técnicas HTML para las Pautas de Accesibilidad al
Contenido de la Web 1.0 de la WAI. Si se requiere consultar el uso de los atributos scope y axis es una buena
referencia remitirse a la documentación mencionada.
Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web
<TR>
<TD headers="header1">Octavio Mejia</TD>
<TD headers="header2">10</TD>
<TD headers="header3">Expreso</TD>
<TD headers="header4">No</TD>
<TR>
<TD headers="header1">Francisco Casaos</TD>
<TD headers="header2">5</TD>
<TD headers="header3">Descaf</TD>
<TD headers="header4">Si</TD>
<TR>
<TD headers="header1">Luis Ramirez</TD>
<TD headers="header2">15</TD>
<TD headers="header3">Expreso</TD>
<TD headers="header4">Si</TD>
</TABLE>
Una aplicación de usuario visual mostraría la tabla como sigue:

Figura 11 Asociación entre celdas de datos y encabezados mediante el atributo headers
Un sintetizador de voz podría leer esta tabla como sigue:
Título: Tazas de café consumidas por cada profesor
Resumen: Esta tabla esquematiza el número de tazas de café consumidas por cada profesor, el
tipo de café (descafeinado o normal) y si se ha tomado con azúcar.
Nombre: Octavio Mejia, Tazas: 10, Tipo: Expreso, Azúcar: No
Nombre: Francisco Casaos, Tazas: 5, Tipo: Descaf, Azúcar: Sí
Tal como se ve la razón de realizar la relación entre los encabezados y los datos es dar
coherencia a la tabla pero también facilitar la lectura de la misma.
35
Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web

5.2.8. Elementos de navegación.
5.2.8.1. Vínculos
Los vínculos o enlaces son los elementos más utilizados en la Web y una parte importante de la
misma ya que gracias a estos es posible relacionar los diversos recursos que existen en la red. El
enlace de los recursos se trate de imágenes, un archivo de sonido, un programa, un documento
HTML o algún otro, se verá reflejado por un texto normalmente en azul o a manera de imagen. Y
en ambos casos hay recomendaciones a considerar para conseguir que la navegación sea fácil y
accesible.
Por un lado el texto etiquetado como vínculo se diseñara pensando en que cualquier persona que
lo lea sea capaz de saber cual es la naturaleza del recurso que se encontrará si se sigue el
vínculo. Un atributo útil para este punto es "title".
<A href="my-doc.html">Documentación adicional disponible en HTML</A>,
<A href="my-doc.pdf" title="documento en formato PDF">PDF </A>,
<A href="my-doc.txt" title="documento en formato texto">texto plano</A>
Cuando se usa una imagen como contenido de un vínculo siempre es idóneo especificar un texto
equivalente, tal como se ve en el ejemplo.
<A href="hinduismo_ganesha.html">
<IMG src="ganesha.jpg" alt="Ganesha, Deidad hindú de la sabiduría, de los caminos y de las
letras"> </A>
O, si proporciona un texto para el vínculo, use un espacio como el valor del atributo "alt" del
elemento IMG. Tenga en cuenta que este texto aparecerá en la página junto a la imagen.
<A href="hinduismo_ganesha.html">
<IMG src="ganesha.jpg" alt=" "> Ganesha, Deidad hindú de la sabiduría, de los caminos y de las
letras </A>

Ganesha, Deidad hindú de la sabiduría, de los caminos y de las letras
Figura 12. Equivalente textual para una imagen usada como vinculo

36
Universidad Nacional Autónoma de México
Facultad de Estudios Superiores Aragón
Accesibilidad en el contenido de la Web
37

Una recomendación general sobre el diseño de la navegación de una página es conseguir una
coherencia, es decir, si existe más de un vínculo con el mismo texto, todos esos vínculos deben
remitir al mismo recurso. Si esto no se cumple será conveniente indicar la diferencia entre ellos
asignando un valor diferente al atributo "title" de cada elemento <A>.

La coherencia en el manejo de vínculos también se involucra cuando se asocian atajos o ciertas
combinaciones de teclas para su activación. Preferentemente la asignación tenderá a la
estandarización quiere decir que para todos los documentos que conformen un sitio se utilizaran
las mismas