Accesibilidad y HTML
para Editores de contenido
Agosto 2013
Marcar estructura con elementos
semánticos
• Usar <h1> - <h6> para encabezados.
• Marcar los párrafos con <p>
• Usar <ul>,...
Encabezados
• <h1> Encabezado 1</h1>
– <h2> Encabezado 2 </h2>
– <h3> Encabezado 3 </h3>
» <h4> Encabezado 4 </h4>
• <h5> ...
Algunos consejos
• No simular encabezados
– ej. cambiando sólo el tipo, tamaño y/o color de la letra
• Mantener una consis...
Énfasis
• Itálica: <em> </em>
• "Las motos son peligrosas"
– Enfatiza que las motos son peligrosas (quizá otra
persona est...
Importancia
• Negrita: <strong> </strong>
• Estas propiedades se deben usar con prudencia sólo
cuando queremos enfatizar e...
Citas
• Existen tres tipos de citas:
– Referencias (cite)
• nombres o títulos de documentos o información
relacionada
– Ci...
Referencias
<p>
<cite>Escrito en la ventanilla</cite> , por
Carolina Bello en 2010.
</p>
Semántica del contenido >> Citas ...
Citas Cortas
Semántica del contenido >> Citas >> Citas Cortas
En su discurso, Tabárez recordó que el éxito “no son
sólo lo...
Citas Largas
Semántica del contenido >> Citas >> Citas Largas
Extracto del libro El Quijote de Miguel de Cervantes:
En un ...
Abreviaturas y acrónimos
• <abbr title="Telefono">Tel</abbr>
• Este es un proyecto de <acronym title=“Agencia de
Gobierno ...
Listas
• Enumeraciones de elementos relacionados
entre sí
1. Ordenadas
2. No Ordenadas
3. de Definición
Listas
Listas No Ordenadas
• El orden No es relevante
• Ejemplo: los ingredientes en una receta de cocina:
Listas >> Listas No Or...
Listas Ordenadas
• El orden es importante
• Ejemplo: el proceso en una receta de cocina:
Listas >> Listas Ordenadas
1. Mez...
Listas de Definición
• Proporcionar definiciones para diferentes palabras y términos
– Aunque pueden tener otras aplicacio...
Ejemplo de elementos semánticos
Recetas de cocina
Pascualina
Ingredientes
•Masa
•Acelga
Preparación
1. Poner la masa en la...
Ejemplo de elementos semánticos
<h1>Recetas de cocina</h1>
<h2>Pascualina</h2>
<h3>Ingredientes</h3>
<ul>
<li>Masa</li>
<l...
Algunos consejos
• Si no puedo usar listas de definición: listas no ordenadas con el
término en negrita (strong)
• Accesib...
Enlaces
• Para ver los resultados de los partidos, pulse aquí.
• Puede ver los resultados de los partidos.
• Los resultado...
Enlaces
• Para ver los resultados de los partidos, pulse aquí.
• Puede ver los resultados de los partidos.
• Los resultado...
Enlaces
• Para ver los resultados de los partidos, pulse aquí. (Mal)
• Puede ver los resultados de los partidos. (Regular)...
Tablas
• Con lector de pantalla, Sin accesibilidad:
No existe un resumen para esta tabla.
Ciudad Máxima Mínima Previsión
M...
Tablas
• Con lector de pantalla, con accesibilidad:
Título: Previsión meteorológica. Ciudades del mundo
Resumen: Resumen d...
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>...
<table summary="Resumen de temperaturas máxima, mínima y
previsión del tiempo en distintas ciudades del mundo para el vier...
Tablas – otra opción
• Con accesibilidad:
– se han definido como encabezados la primera fila y la primera columna.
Tablas>...
<table summary="Resumen de temperaturas máxima,
mínima y previsión del tiempo en distintas ciudades
del mundo para el vier...
Próxima SlideShare
Cargando en…5
×

6 wcag2.0 para comunicadores - semantica

319 visualizaciones

Publicado el

Semantica

Publicado en: Educación
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
319
En SlideShare
0
De insertados
0
Número de insertados
4
Acciones
Compartido
0
Descargas
7
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.
  • 1
  • 2
  • 16
  • 17
  • 6 wcag2.0 para comunicadores - semantica

    1. 1. Accesibilidad y HTML para Editores de contenido Agosto 2013
    2. 2. Marcar estructura con elementos semánticos • Usar <h1> - <h6> para encabezados. • Marcar los párrafos con <p> • Usar <ul>, <ol> y <dl> para las listas • Marcar los encabezados en las tablas de datos (<th>) y relacionarlos con las celdas de datos (<td>) Y no usarlos solamente por su presentación visual! Perceptible | Operable | Comprensible | Robusto >> 1.3 Adaptable >> 1.3.1 Información y relaciones
    3. 3. 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
    4. 4. 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
    5. 5. É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
    6. 6. 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
    7. 7. 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
    8. 8. Referencias <p> <cite>Escrito en la ventanilla</cite> , por Carolina Bello en 2010. </p> Semántica del contenido >> Citas >> Referencias
    9. 9. Citas Cortas Semántica del contenido >> Citas >> Citas Cortas En su discurso, Tabárez recordó que el éxito “no son sólo los resultados sino las dificultades que se pasan para alcanzarlo”. <p> En su discurso, Tabárez recordó que el éxito <q>no son sólo los resultados sino las dificultades que se pasan para alcanzarlo</q>. </p>
    10. 10. Citas Largas Semántica del contenido >> Citas >> Citas Largas Extracto del libro El Quijote de Miguel de Cervantes: En un lugar de la mancha, de cuyo nombre no quiero acordarme… <p> Extracto del libro <cite>El Quijote</cite> de Miguel de Cervantes: </p> <blockquote cite="http://www.elquijote.com/cap1"> <p> En un lugar de la mancha, de cuyo nombre no quiero acordarme... </p> </blockquote>
    11. 11. 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
    12. 12. Listas • Enumeraciones de elementos relacionados entre sí 1. Ordenadas 2. No Ordenadas 3. de Definición Listas
    13. 13. 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
    14. 14. 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
    15. 15. 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
    16. 16. Ejemplo de elementos semánticos Recetas de cocina Pascualina Ingredientes •Masa •Acelga Preparación 1. Poner la masa en la asadera. 2. Poner la acelga. 3. Llevar al horno. Tarta de zapallitos Ingredientes Nuestro contenido En HTML
    17. 17. Ejemplo de elementos semánticos <h1>Recetas de cocina</h1> <h2>Pascualina</h2> <h3>Ingredientes</h3> <ul> <li>Masa</li> <li>Acelga</li> </ul> <h3>Preparación</h3> <ol> <li>Poner la masa en la asadera.</li> <li>Poner la <em>acelga</em>.</li> <li>Llevar al <strong>horno</strong>.</li> </ol> <h2>Tarta de zapallitos</h2> <h3>Ingredientes</h3> Recetas de cocina Pascualina Ingredientes •Masa •Acelga Preparación 1. Poner la masa en la asadera. 2. Poner la acelga. 3. Llevar al horno. Tarta de zapallitos Ingredientes Nuestro contenido En HTML
    18. 18. 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
    19. 19. Enlaces • Para ver los resultados de los partidos, pulse aquí. • Puede ver los resultados de los partidos. • Los resultados de los partidos de la jornada fueron sorprendentes. Enlaces
    20. 20. Enlaces • Para ver los resultados de los partidos, pulse aquí. • Puede ver los resultados de los partidos. • Los resultados de los partidos de la jornada fueron sorprendentes. Enlaces
    21. 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: “ver más", "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. 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. 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. 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. 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. 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. 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

    ×