Download - Accesibilidad y HTML para editores
![Page 1: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/1.jpg)
Accesibilidad y HTML para Editores de contenido
Agosto 2013
![Page 2: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/2.jpg)
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
![Page 3: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/3.jpg)
Vemos la matrix
<img src=“dirección de la imagen” alt=“texto alternativo”>
Imágenes >> lo que no habría que ver
![Page 4: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/4.jpg)
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
![Page 5: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/5.jpg)
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
![Page 6: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/6.jpg)
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
![Page 7: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/7.jpg)
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
![Page 8: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/8.jpg)
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
![Page 9: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/9.jpg)
É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
![Page 10: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/10.jpg)
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
![Page 11: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/11.jpg)
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
![Page 12: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/12.jpg)
Referencias
<p><cite>Escrito en la ventanilla</cite> , por
Carolina Bello en 2010.</p>
Semántica del contenido >> Citas >> Referencias
![Page 13: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/13.jpg)
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
![Page 14: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/14.jpg)
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
![Page 15: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/15.jpg)
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
![Page 16: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/16.jpg)
Listas• Enumeraciones de elementos relacionados
entre sí1. Ordenadas2. No Ordenadas3. de Definición
Listas
![Page 17: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/17.jpg)
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
![Page 18: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/18.jpg)
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
![Page 19: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/19.jpg)
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
AccesibilidadPosibilidad 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ónPrograma 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 ListDefinition Term
Definition Description
![Page 20: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/20.jpg)
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
![Page 21: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/21.jpg)
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
![Page 22: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/22.jpg)
Tablas
• Con lector de pantalla, Sin accesibilidad:
No existe un resumen para esta tabla.Ciudad Máxima Mínima PrevisiónMontevideo 26º 18º CubiertoBuenos Aires 20º 6º NubladoBogotá 19º 9º LluviaLima 19º 13º SoleadoSantiago 22º 16º Chubascos
Tablas>> Sin accesibilidad
![Page 23: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/23.jpg)
Tablas
• Con lector de pantalla, con accesibilidad:
Título: Previsión meteorológica. Ciudades del mundoResumen: 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
![Page 24: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/24.jpg)
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
![Page 25: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/25.jpg)
<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 mundoResumen: 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
![Page 26: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/26.jpg)
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 mundoResumen: 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.
![Page 27: Accesibilidad y HTML para editores](https://reader036.vdocumento.com/reader036/viewer/2022062319/557b9f52d8b42a631d8b4eb2/html5/thumbnails/27.jpg)
<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 mundoResumen: 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