Este documento proporciona consejos sobre cómo hacer contenido web accesible. Explica la importancia de incluir texto alternativo en las imágenes, usar encabezados de forma semántica, resaltar texto de forma adecuada con énfasis e importancia, y citar fuentes correctamente. También cubre cómo crear listas, tablas, enlaces y abreviaturas de forma accesible para todos los usuarios.

1. Accesibilidad y HTML
para Editores de contenido
Agosto 2013

2. Imágenes
• Texto alternativo: texto que transmite la
misma información que la imagen
• Descripción larga: si la imagen es compleja,
por ejemplo una gráfica y necesita una
descripción demasiado larga para un
alternativo
Obligatorio!
Solo si
necesario
Imágenes

3. Vemos la matrix
<img
src=“dirección de la imagen”
alt=“texto alternativo”
>
Imágenes >> lo que no habría que ver

4. El ejemplo
<img style="margin: 6px; float: left;"
src="http://www.agesic.gub.uy/innovaportal/file/2845/1/ogp_2013.jpg"
alt=""
width="346" height="217" />
Imágenes >> el ejemplo
Fuente:
http://www.agesic.gub.uy/innovaportal/v/2845/1/agesic/se_extiende_el_plazo:_presenta_tu_propuesta_para_el_plan_de_accion_nacional_de_gobierno_abierto.html

5. El ejemplo correcto
<img
src="http://www.agesic.gub.uy/innovaportal/file/2845/1/ogp_2013.jpg"
alt=“Gobierno Abierto. Plan de Acción
Uruguay 2013“
width="346" height="217"
/>
Imágenes >> el ejemplo correcto

6. Casos particulares de imágenes
• Decorativa y no aporta información (Ej.
miniaturas o iconos decorativos)
– Texto alternativo vacío
• Enlace
– Describir a dónde dirige, en vez de la imagen
– No es necesario decir “enlace a..” (el lector avisa)
• Imagen de texto
– Escribir lo que dice el texto
Imágenes >> casos particulares

7. Encabezados
• <h1> Encabezado 1</h1>
– <h2> Encabezado 2 </h2>
– <h3> Encabezado 3 </h3>
» <h4> Encabezado 4 </h4>
• <h5> Encabezado 6 </h5>
• <h6> Encabezado 6 </h6>
Encabezados

8. Algunos consejos
• No simular encabezados
– ej. cambiando sólo el tipo, tamaño y/o color de la letra
• Mantener una consistencia reflejando la organización lógica del
documento.
– Encabezados del mismo nivel para secciones con el mismo nivel de
importancia.
• No crear secciones vacías
– Después de todo encabezado debe existir cierto contenido entre éste
y el siguiente encabezado de igual nivel o superior.
• No usar encabezados sólo para conseguir efectos de formato
– Por ejemplo, para aumentar el tamaño de la letra y poner en negrita
un determinado texto.
• No saltar niveles intermedios al disminuir los niveles de
encabezado.
– Después de un encabezado de segundo nivel sólo se puede bajar a
uno de tercer nivel pero no a uno de cuarto o inferior.
Encabezados >> Algunos consejos

9. Énfasis
• Itálica: <em> </em>
• "Las motos son peligrosas"
– Enfatiza que las motos son peligrosas (quizá otra
persona está diciendo que no lo son).
• "Las motos son peligrosas"
– Enfatiza que lo que son peligrosas son las motos
(quizá otra persona está diciendo que lo que son
peligrosos son los coches).
Semántica del contenido >> Énfasis

10. Importancia
• Negrita: <strong> </strong>
• Estas propiedades se deben usar con prudencia sólo
cuando queremos enfatizar el texto o darle
importancia. No debemos usarlos sólo con fines
estilísticos, de presentación, porque queramos
simplemente usar un estilo de letra en itálica o
negrita.
Semántica del contenido >> Importancia

11. Citas
• Existen tres tipos de citas:
– Referencias (cite)
• nombres o títulos de documentos o información
relacionada
– Citas cortas (q) o citas en línea
• fragmentos o extractos de un contenido externo que lo
incluimos en el contenido actual
– Citas largas (blockquote)
• citas que ocupan uno o más bloques completos de
texto. Por ejemplo, uno o varios párrafos.
Semántica del contenido >> Citas

12. Referencias
<p>
<cite>Escrito en la ventanilla</cite> , por
Carolina Bello en 2010.
</p>
Semántica del contenido >> Citas >> Referencias

13. Citas Cortas
<p>
La misión de la W3C es
<q> es guiar la Web hacia su máximo potencial. </q>
Deseamos que tengan éxito!.
</p>
Semántica del contenido >> Citas >> Citas Cortas

14. Citas Largas
<blockquote cite=" http://es.wikipedia.org/wiki/The_Big_Bang_Theory ">
El show se centra en un principio en cinco personajes:
los compañeros de piso Leonard Hofstadter y Sheldon
Cooper, el ingeniero aeroespacial Howard Wolowitz, el
astrofísico Raj Koothrappali y Penny, una camarera y
aspirante a actriz que vive en el piso de enfrente. El
geek y el intelecto de los cuatro chicos se contrasta por
el efecto cómico con las habilidades sociales de Penny
y el sentido común.
</blockquote>
Semántica del contenido >> Citas >> Citas Largas

15. Abreviaturas y acrónimos
• <abbr title="Telefono">Tel</abbr>
• Este es un proyecto de <acronym title=“Agencia de
Gobierno Electrónico y Sociedad de la
Información">AGESIC</acronym>
• Esta página se basa en estándares de
<acronym xml:lang="en" title="World Wide Web
Consortium">W3C</acronym>
Semántica del contenido >> Abreviaturas y acrónimos

16. Listas
• Enumeraciones de elementos relacionados
entre sí
1. Ordenadas
2. No Ordenadas
3. de Definición
Listas

17. Listas No Ordenadas
• El orden No es relevante
• Ejemplo: los ingredientes en una receta de cocina:
Listas >> Listas No Ordenadas
• 100 g de harina
• 10 g de azúcar
• 1 taza de agua
• 2 huevos
• sal, pimienta
<ul>
<li>100 g de harina</li>
<li>10 g de azúcar</li>
<li>1 taza de agua</li>
<li>2 huevos</li>
<li>sal, pimienta</li>
</ul>
Unordered List
List Item

18. Listas Ordenadas
• El orden es importante
• Ejemplo: el proceso en una receta de cocina:
Listas >> Listas Ordenadas
1. Mezcle los ingredientes secos.
2. Vierta los ingredientes líquidos.
3. Remueva durante 10 minutos.
4. Hornee durante una hora a 300
grados.
<ol>
<li>Mezcle los ingredientes secos. </li>
<li>Vierta los ingredientes líquidos.</li>
<li>Remueva durante 10 minutos. </li>
<li>Hornee durante una hora a 300
grados. </li>
</ol>
Ordered List

19. Listas de Definición
• Proporcionar definiciones para diferentes palabras y términos
– Aunque pueden tener otras aplicaciones.
– Tienen dos partes: término y definición.
Listas >> Listas de Definición
Accesibilidad
Posibilidad de que un sitio o servicio Web
pueda ser visitado y utilizado de forma
satisfactoria por el mayor número posible
de personas, independientemente de las
limitaciones que tenga la persona o de las
derivadas de su entorno.
Aplicación
Programa preparado para una utilización
específica, como el pago de
nóminas, formación de un banco de
términos léxicos, etc.
< dl >
<dt>Accesibilidad</dt>
<dd>Posibilidad de que un sitio o servicio
Web pueda ser visitado y utilizado de forma
satisfactoria por el mayor número posible de
personas, independientemente de las
limitaciones que tenga la persona o de las
derivadas de su entorno.</dd>
<dt>Aplicación</dt>
<dd>…dd>
</dl>
Definition List
Definition Term
Definition Description

20. Algunos consejos
• Si no puedo usar listas de definición: listas no ordenadas con el
término en negrita (strong)
• Accesibilidad. Posibilidad de que un sitio o servicio Web pueda ser
visitado y utilizado de forma satisfactoria por el mayor número posible
de personas, independientemente de las limitaciones que tenga la
persona o de las derivadas de su entorno.
• Aplicación. Programa preparado para una utilización específica, como
el pago de nóminas, formación de un banco de términos léxicos, etc.
• No usar imágenes para simular viñetas de listas.
• Evitar caracteres especiales (por ejemplo asteriscos o guiones) o
letras y números para simular las listas.
• No usar listas con fines únicamente de presentación, por ejemplo,
para dar sangría al texto.
• Todas las listas deben contener uno o más elementos.
Listas >> Algunos consejos

21. Enlaces
• Para ver los resultados de los partidos, pulse aquí. (Mal)
• Puede ver los resultados de los partidos. (Regular)
• Los resultados de los partidos de la jornada fueron sorprendentes. (Bien)
• Indicar en el texto claramente el destino del enlace.
– Evitar: "pinche aquí", "haga clic aquí", "siga este enlace“.
• No repetir el mismo texto para diferentes destinos.
– No repetir enlaces del estilo "Descargar documento" o "Ver más información"
con diferentes destinos.
– Los enlaces deben diferenciarse claramente entre sí mediante el texto.
Los <a href="link.html">resultados de los partidos</a> de la
jornada fueron sorprendentes.
Enlaces

22. Tablas
• Con lector de pantalla, Sin accesibilidad:
No existe un resumen para esta tabla.
Ciudad Máxima Mínima Previsión
Montevideo 26º 18º Cubierto
Buenos Aires 20º 6º Nublado
Bogotá 19º 9º Lluvia
Lima 19º 13º Soleado
Santiago 22º 16º Chubascos
Tablas>> Sin accesibilidad

23. Tablas
• Con lector de pantalla, con accesibilidad:
Título: Previsión meteorológica. Ciudades del mundo
Resumen: Resumen de temperaturas máxima, mínima y previsión del tiempo
en distintas ciudades del mundo para el viernes 22 de agosto de 2008.
Ciudad: Montevideo; Máxima: 26º; Mínima: 18º; Previsto: Cubierto.
Ciudad: Buenos Aires; Máxima: 20º; Mínima: 6º; Previsto: Nublado.
Tablas>> Con accesibilidad

24. Tabla básica<table>
<tr>
<td>Ciudad</td>
<td>Máxima</td>
<td>Mínima</td>
<td>Previsión</td>
</tr>
<tr>
<td>Montevideo</td>
<td>26°</td>
<td>18°</td>
<td>Cubierto</td>
</tr>
. . . . .
</table>
Data
Row

25. <table summary="Resumen de temperaturas máxima, mínima y
previsión del tiempo en distintas ciudades del mundo para el viernes
22 de agosto de 2008.">
<caption>Previsión metereológica. Ciudadades del mundo.</caption>
<thead>
<tr>
<th>Ciudad</th>
<th>Máxima</th>
<th>Mínima</th>
<th>Previsión</th>
</tr>
</thead>
<tbody>
<tr>
<td>Montevideo</td>
<td>26°</td>
<td>18°</td>
<td>Cubierto</td>
</tr> . . . . .
</tbody>
</table>
Título: Previsión meteorológica. Ciudades del mundo
Resumen: Resumen de temperaturas máxima, mínima y previsión del
tiempo en distintas ciudades del mundo para el viernes 22 de agosto de
2008.
Ciudad: Montevideo; Máxima: 26º; Mínima: 18º; Previsto: Cubierto.
Ciudad: Buenos Aires; Máxima: 20º; Mínima: 6º; Previsto: Nublado.
Tabla accesible

26. Tablas – otra opción
• Con accesibilidad:
– se han definido como encabezados la primera fila y la primera columna.
Tablas>> Con accesibilidad
Título: Previsión meteorológica. Ciudades del mundo
Resumen: Resumen de temperaturas máxima, mínima y previsión del tiempo en distintas
ciudades del mundo para el viernes 22 de agosto de 2008.
Máxima Montevideo: 26º; Mínima Montevideo: 18º; Previsión Montevideo: Cubierto.
Máxima Buenos Aires: 20º; Mínima Buenos Aires: 6º; Previsión Buenos Aires: Nublado.

27. <table summary="Resumen de temperaturas
máxima, mínima y previsión del tiempo en distintas
ciudades del mundo para el viernes 22 de agosto de
2008.">
<caption>Previsión metereológica. Ciudadades del
mundo.</caption>
<thead>
<tr>
<th scope="col" >Ciudad</th>
<th scope="col" > Máxima</th>
<th scope="col" > Mínima</th>
<th scope="col" > Previsión</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row”>Montevideo</td>
<td>26°</td>
<td>18°</td>
<td>Cubierto</td>
</tr> . . . . .
</tbody>
</table>
Título: Previsión meteorológica. Ciudades del mundo
Resumen: Resumen de temperaturas máxima, mínima
y previsión del tiempo en distintas ciudades del
mundo para el viernes 22 de agosto de 2008.
Máxima Montevideo: 26º;
Mínima Montevideo: 18º;
Previsión Montevideo: Cubierto.
Máxima Buenos Aires: 20º;
Mínima Buenos Aires: 6º;
Previsión Buenos Aires: Nublado.
Tabla
accesible
otra opción