Accesibilidad Contenidos Web

8/6/2019 Accesibilidad Contenidos Web

1/90

ACCESIBILIDAD DECONTENIDOS WEB

Curso de formacin en accesibilidad de contenidos Webpara el portal de iberia.com

JUAN TUONPAULINO DE LA GUA


2/90

1

Acce

sibilidaddecontenidosWeb/V.1.0

Programa de formacin en Accesibilidad deContenidos Web

Qu es la Accesibilidad Web?Significado de Accesibilidad Web y Diseo Universal ypor qu son importantes: incremento de visitas ymejor indexacin de las pginas en los motores debsqueda.La accesibilidad Web significa que personas con algn tipo dediscapacidad van a poder hacer uso de la Web.En concreto, al hablar de accesibilidad Web se est haciendo referencia a un diseo Webque va a permitir que las personas puedan percibir, entender, navegar e interactuar con la

Web, aportando a su vez contenidos.Las limitaciones en la accesibilidad de los sitios Web pueden ser:

1 Discapacidad visual: son personas invidentes que utilizan navegadores de vozo tienen problemas de daltonismo, cataratas, contraste reducido, baja visin etc.En la web les afectan los grficos sin etiquetar, videos sin descripcin, tablas yframes pobremente marcados, imposibilidad de aumentar el tamao de letra delos textos.

2 Discapacidad auditiva: personas sordas o con problemas de audicin. En laweb les afecta la ausencia de etiquetas en el audio: subttulos de los videos,transcripciones de archivos de audio.

3 Discapacidad fsica: personas que tienen parkinson, lesiones en brazos,temblor de manos, movimiento involuntario, parlisis, etc.En la web les afecta que la pgina no soporte la alternativa del tecladoofreciendo mens a travs de comandos, formularios sin orden en los campos deinsercin de datos, restriccin de tiempo en la insercin de informacin.

4 Discapacidad cognitiva: personas con dficit de atencin, dislexia, falta dememoria.En la web encuentran dificultades con elementos visuales o sonoros que no sepueden desactivar, falta de grficos que apoyen el lenguaje escrito, falta de

organizacin en la estructura del contenido, tamao de letra fijo.

5 Discapacidad tecnolgica: personas que navegan con MODEM u ordenadoresantiguos, conexiones lentas, navegadores anticuados o que no interpretan bienel contenido. Les afecta que el diseo no se adapte a sus pantallas de bajaresolucin, que la pgina no se pueda ver sin hoja de estilos y sin imgenes,pantalla que slo presenta texto.

Cuando hablamos de personas con alguna discapacidad, no solo engloban aquellasrepresentadas por discapacidades fsicas, sino tambin otras como pueden ser el

idioma, conocimientos o experiencia.


3/90

2

Acce


Adems, la accesibilidad no slo implica la necesidad de facilitar acceso, sino tambin la defacilitar el uso. La distincin entre usabilidad facilidad de uso y accesibilidad, no solo esdifcil, sino en muchos casos es innecesaria.

Estadsticas de gente con algn tipo de discapacidad en Espaa y en Europa.

Grfica de edad para navegantes web sin barreras para la poblacin menos experta

Personas con conexiones menos rpidas.


4/90

3

Acce


Fuente de los grficos http://www.accesibilidadparatodos.com/estadisticas.jsp

o Mejorar la accesibilidad de un sitio web hace que los buscadores listen los resultados enmejores posiciones.

1 Contenido ms claro, ms comprensible.Usar palabras, frases y gramtica de uso y comprensin comunes, incrementarla probabilidad de que personas que usan criterios de bsqueda sencillosencuentren su sitio.

2 Alternativas de texto

1. Texto alternativo.Una imagen sin texto alternativo slo puede ser encontrada porsu nombre de archivo. En muchos casos el nombre de archivoes una cadena de ninguna ayuda. Aadir breves frases

descriptivas va texto alternativo significa que los motores debsqueda pueden encontrar una imagen en particular porque sudescripcin ha sido indexada. El texto alternativo de lasimgenes que tienen que ver con el contenido de su sitio puedeayudar a elevar su posicin en los listados de los buscadores.

2. Enlaces "D" y el atributo "longdesc" - contenido muyimportante de su sitio puede estar encerrado en complejasimgenes como grficos o diagramas. Describirlos con mayorprofundidad usando enlaces "D" y el atributo "longdesc" poneeste contenido a disposicin de los motores de bsqueda. Se

explicarn mas abajo.


5/90

4

Acce


3. Descripciones textuales para los archivos multimediaUna descripcin basada en texto de la accin, o contenido deuna web basada en video har disponible para los motores debsqueda la importante informacin contenida en ese medio. Deotro modo, slo el nombre del archivo estar disponible para ser

referenciado y localizado por los buscadores.

4. Subtitulacin.Los formatos de fichero de audio son explorables nicamentepor su nombre de archivo, que cmo se ha mencionado, puedeser de poca ayuda. Proporcionar una subtitulacin del textocompleto (incluso sincronizada con la pista de audio usandoSMIL, o como una transcripcin separada) permite al contenido,especialmente archivos que contienen dilogos o discursos, serindexados y explorados.Enlace de accesibilidad de vdeos en smil

5. Resmenes de tablas.Resmenes claros que describen el propsito de una tabla sernindexados por un motor de bsqueda, mientras que el contenidode la tabla puede ser, de hecho, menos comprensible al serindexado celda por celda.Adems, la titulacin de la tabla, mediante la provisin de unencabezado para la tabla por medio de la etiqueta, tambin ser indexada por los principalesmotores de bsqueda.

6. Estructurar los Documentos con el Marcado.Los motores de bsqueda utilizan, de hecho, los textos incluidosen sus etiquetas de encabezado, e.g. , etc., paraclasificar las pginas Web y otorgan mayor relevancia a estetexto.

Resumiendo; la web es un recurso muy importante para diferentes aspectos de lavida: educacin, empleo, gobierno, comercio, sanidad, entretenimiento y muchosotros.Es muy importante que la Web sea accesible para as proporcionar un accesoequitativo e igualdad de oportunidadesa las personas con discapacidad. Unapgina Web accesible puede ayudar a personas con discapacidad a que participenms activamente en la sociedad.

Referencias:

http://www.w3c.es/Traducciones/es/WAI/intro/accessibility

Las Pautas de Accesibilidad al Contenido en la Web1.0 (WCAG).Qu son las WCAG y su organizacin, la declaracin

de conformidad (simple A, doble A, triple A) y


6/90

5

Acce


presentacin de las 14 pautas.

El objetivo del W3C es guiar la Web hacia su mximo potencial a travs del desarrollo deprotocolos y pautas que aseguren el crecimiento futuro de la Web.Fue fundada por Tim Berners-Lee en 1994.La w3c en 7 puntos:

o Acceso Universal.

o Web Semntica.

o Confianza.

o Interoperabilidad.

o Capacidad de evolucin.

o Descentralizacin.

o Multimedia ms atractiva.

El valor social que aporta la Web, es que sta hace posible la comunicacin humana, elcomercio y las oportunidades para compartir conocimiento. Uno de los objetivos principalesdel W3C es hacer que estos beneficios estn disponibles para todo el mundo,independientemente del hardware, software, infraestructura de red, idioma, cultura,localizacin geogrfica, o habilidad fsica o mental.

Los documentos tcnicos de las WCAG son desarrollados por el Grupo de Trabajo de lasPautas de Accesibilidad al Contenido en la Web (WCAG WG), el cual es parte de la

Iniciativa de Accesibilidad Web (WAI) del Consorcio World Wide Web (W3C). Paraobtener ms informacin sobre el grupo de trabajo, visite la pgina principal de WCAG.

Para hacer el contenido Web accesible, se han desarrollado las denominadas Pautas deAccesibilidad al Contenido en la Web (WCAG), cuya funcin principal es guiar el diseo depginas Web hacia un diseo accesible, reduciendo de esta forma barreras a la informacin.

Las Pautas de Accesibilidad al Contenido en la Web 1.0 fueron aprobadas en mayo de 1999y es todava una versin estable y de referencia.Las WCAG 2.0 han sido desarrolladas para aplicarse a diferentes tecnologas y, a su vez,para que su utilizacin y compresin sea sencilla, y para que su comprobacin sea msprecisa, como se menciona en Requisitos para las WCAG 2.0.WAI anticipa que las WCAG 2.0 estaran finalizadas para el 2006. Pero no poda especificar

con certeza el momento en el que las WCAG 2.0 estaran disponibles a consecuencia delproceso de desarrollo de especificaciones que tena establecido el W3C.Las WCAG 1.0 seguirn siendo la ltima versin aprobada hasta que la 2.0 est finalizada.

WCAG 1.0 consiste en 14 pautas que proporcionan soluciones de diseo y que utilizancomo ejemplo situaciones comunes en las que el diseo de una pgina puede producirproblemas de acceso a la informacin. Las Pautas contienen adems una serie de puntos deverificacin que ayudan a detectar posibles errores.

Cada punto de verificacin est asignado a uno de los tres niveles de prioridad establecidospor las pautas.

Prioridad 1: son aquellos puntos que un desarrollador Web tiene que cumplir ya que, de otra

manera, ciertos grupos de usuarios no podran acceder a la informacin del sitio Web.Prioridad 2: son aquellos puntos que un desarrollador Web debera cumplir ya que, si no


7/90

6

Acce


fuese as, sera muy difcil acceder a la informacin para ciertos grupos de usuarios.

Prioridad 3: son aquellos puntos que un desarrollador Web debera cumplir ya que, de otraforma, algunos usuarios experimentaran ciertas dificultades para acceder a lainformacin.

En funcin a estos puntos de verificacin se establecen los niveles de conformidad:Nivel de Conformidad "A": todos los puntos de verificacin de prioridad 1 se satisfacen.

Nivel de Conformidad "Doble A": todos los puntos de verificacin de prioridad 1 y 2 sesatisfacen.

Nivel de Conformidad "Triple A": todos los puntos de verificacin de prioridad 1,2 y 3 sesatisfacen.

Tabla de Puntos de Verificacin para las WCAG 1.0.Presentacin de la tabla de evaluacin y su organizacin,y la diferencia entre una revisin manual y una revisinautomtica.

Las siguientes imgenes que corresponden con las pautas de accesibilidad del W3C han sidoelaboradas por la fundacin SIDARhttp://www.sidar.org/acti/cursos/cursotener/manual/ejem/index.html

1.1 Proporcione texto equivalente para todo elemento no textual


8/90

7

Acce



9/90

8

Acce



10/90


11/90

10

Acce


1.3 Proporcionar descripcin sonora de pista visual


12/90

11

Acce


1.4 Proporcionar alternativas equivalentes sincronizadas con laspresentaciones multimedia


13/90

12

Acce


1.5 Proporcionar enlaces redundantes para cada zona activa delmapa de imagen de tipo cliente


14/90

13

Acce


2.1 Toda la informacin transmitida a travs del color debe estartambin disponible sin color


15/90


16/90

15

Acce



17/90

16

Acce


3.1 Utilizar lenguajes de marcas en vez de imgenes paratransmitir la informacin


18/90

17

Acce


3.2 Crear documentos que se cian a las gramticas formalespublicadas


19/90

18

Acce


3.3 Utilizar hojas de estilo para controlar la maquetacin y lapresentacin


20/90

19

Acce


3.4 Usar unidades relativas en vez de absolutas

Unidades relativas: http://riddle.pl/emcalc/La mejor opcin es em. De todas estas unidades la que yo les recomiendo son las relativasen especial em anteriormente la unidad em era el equivalente a la altura de la M mayscula.Sin embargo actualmente es igual a la altura de la letra del elemento en el que se usa. Coneste tipo de medidas el autor mantiene un control relativo ya que, en relacin con el tamaode fuente por defecto del usuario, puede especificar cuanto mas grande o mas pequea seha de visualizar la letra de la pgina. Adems la unidad em puede utilizarse para cualquierpropiedad CSS que admita medidas (mrgenes, sangras) lo que permite un diseoproporcionado al sistema del usuario.


21/90

20

Acce


3.5 Usar elementos de encabezado para sugerir la estructura deldocumento


22/90

21

Acce


3.6 Marcar correctamente las listas y los tem de lista


23/90


24/90

23

Acce


4.3 Identificar el lenguaje natural principal del documento

En la legislacin espaola, es de prioridad 1


25/90

24

Acce


5.1 Identificar los encabezados de fila y columna en las tablas dedatos


26/90

25

Acce


5.2 Utilizar marcadores para asociar las celdas de datos con lasceldas de encabezado


27/90

26

Acce


5.2 Utilizar marcadores para asociar las celdas de datos... (2)


28/90

27

Acce


5.3 No usar tablas para maquetar

5.4 No utilizar marcado estructural para conseguir un efecto visual


29/90

28

Acce


5.5 Proporcionar resmenes de las tablas

Esta pauta es de prioridad 2 en la legislacin espaola sobre accesibilidad.


30/90

29

Acce


5.6 Proporcionar abreviaturas para las etiquetas de losencabezamientos


31/90

30

Acce


6.1 Organizar los documentos de forma que puedan ser ledos sinhojas de estilo

6.2 Asegurarse de que los equivalentes para el contenidodinmico se actualizan cuando cambia el contenido


32/90

31

Acce


dinmico


33/90


34/90

33

Acce


6.4 Para los scripts y applets, asegurarse de que la ejecucin delos manejadores de evento sea independiente del tipo dedispositivo


35/90

34

Acce


6.5 Asegurarse de que los contenidos dinmicos sean accesibleso proporcionar una pgina o presentacin alternativas

7.1 Evitar provocar el parpadeo de la pantalla

7.2 Evitar que el contenido destelle


36/90

35

Acce


7.3 Evitar el movimiento en las pginas

7.4 No crear pginas que peridicamente se auto-refresquen


37/90

36

Acce


7.5 No utilizar marcadores para redirigir las pginasautomticamente


38/90

37

Acce


8.1 Crear los elementos de programacin de manera que seandirectamente accesibles o compatibles con las ayudas tcnicas


39/90


40/90

39

Acce


9.3 Para los scripts, especifique manejadores de evento lgicos envez de manejadores de evento dependientes del dispositivo


41/90

40

Acce


9.4 Crear un orden lgico de tabulacin a travs de los enlaces,controles de formulario y objetos

Pasa a ser en la legislacin espaola de prioridad 2


42/90

41

Acce


9.5 Proporcionar atajos de teclado


43/90

42

Acce


10.1 No provocar que aparezcan llamadas emergentes u otrasventanas sin informar antes al usuario

10.2 Asegurarse de que la etiqueta para todos los controles deformulario est colocada adecuadamente


44/90

43

Acce


10.3 Proporcionar un texto alternativo lineal para todas las tablasque presenten el texto en columnas paralelas

10.4 Incluir caracteres por omisin en los campos de edicin yreas de texto


45/90

44

Acce


10.5 Incluir caracteres imprimibles no enlazados (rodeados deespacios) entre los enlaces adyacentes

11.1 Utilizar las tecnologas del W3C cuando estn disponibles ysean apropiadas para la tarea


46/90

45

Acce


11.2 Evitar el uso de elementos obsoletos de las tecnologas delW3C


47/90

46

Acce


11.3 Proporcionar informacin de manera que los usuarios puedanrecibir los documentos segn sus preferencias


48/90


49/90

48

Acce


12.2 Describir el propsito de los marcos y cmo se relacionanentre s

12.3 Dividir los bloques de informacin largos en grupos msmanejables


50/90

49

Acce


12.4 Asociar etiquetas explcitamente con sus controles


51/90

50

Acce


13.1 Identificar claramente el objetivo de cada enlace

En la legislacin espaola, esta pauta pasa a ser de prioridad 1

13.2 Proporcionar metadatos para aadir informacin semntica alas pginas


52/90


53/90

52

Acce


13.5 Proporcionar barras de navegacin para resaltar y dar accesoal mecanismo de navegacin

13.6 Agrupar los enlaces relacionados, identificando el grupo yproporcionar una manera de saltarse el grupo


54/90


55/90

54

Acce


13.8 Colocar informacin distintiva al comienzo de encabezados,prrafos, listas, etc.

13.9 Proporcionar informacin sobre las colecciones dedocumentos


56/90

55

Acce


14.1 Utilizar el lenguaje ms claro y sencillo que sea apropiadopara el contenido de un sitio


57/90

56

Acce


14.2 Complementar el texto con presentaciones grficas o sonoras


58/90

57

Acce


14.3 Crear un estilo de presentacin que sea consistente en todaslas pginas

Enlaces de referencia

o http://www.discapnet.es/web_accesible/wcag10/full-checklist.html

o http://www.sidar.org/acti/cursos/cursotener/manual/ejem/index.html

La normativa espaola acerca la Accesibilidad Web:UNE 139803:2004.

Presentacin de la normativa espaola que rene losrequisitos de accesibilidad para contenidos de la Web.o Ley 51/2003 de 2 de diciembre de Igualdad de Oportunidades, No Discriminacin y

Accesibilidad Universal con discapacidad.

o Real Decreto 366/2003 de 16 de marzo, de accesibilidad y no discriminacin de laspersonas con discapacidad en sus relaciones con la Administracin General del Estado.

o Ley 27/2007, de 23 de octubre, por la que se reconocen las lenguas de signos espaolasy se regulan los medios de apoyo a la comunicacin oral de las personas sordas, con

discapacidad auditiva y sordociegas.


59/90

58

Acce


o Real Decreto 1494/2007, de 12 de noviembre, por el que se aprueba el Reglamentosobre las condiciones bsicas para el acceso de las personas con discapacidad a lasociedad de la informacin.

o Ley 49/2007, de 26 de diciembre, por la que se establece el rgimen de infracciones y

sanciones en materia de igualdad de oportunidades, no discriminacin y accesibilidaduniversal de las personas con discapacidad.

Normativa UNE 139803:2004Llamada Aplicaciones informticas para personas con discapacidad. Requisitos deaccesibilidad para contenidos en la Web, proporciona soluciones accesibles para losdesarrolladores Web, creando un listado de recursos que permiten definir lascaractersticas que han de cumplirse en materia de los contenidos Web en Internet,Intranets y en cualquier otro tipo de redes informticas, para que stos puedan serutilizados por el mayor nmero de personas, incluyendo las personas con discapacidad ylas personas de edad avanzada.Descargar la normativa u.n.e.

Est basada prcticamente en su integridad en las Pautas W.A.I.

Las diferencias entre las Pautas W.A.I. y la normativa U.N.E. son:

1 Requisito de la UNE 4.4.4 equivalente al punto de control 4.3 de las WCAG("Identifique el idioma principal del documento").Este punto de control era de prioridad 3 en WCAG y pasa a ser prioridad 1 enUNE

2 Requisito de la UNE 4.5.1 equivalente al punto de control 13.1 de las WCAG("Identifique claramente el objetivo de cada vnculo")

Este punto de control era de prioridad 2 en WCAG y pasa a ser prioridad 1 enUNE

3 Requisito de la UNE 4.3.9 equivalente al punto de control 5.5 de las WCAG("Proporcione resmenes de las tablas").Este punto de control era de prioridad 3 en WCAG y pasa a ser prioridad 2 enUNE

4 Requisito de la UNE 4.5.9 equivalente al punto de control 9.4 de las WCAG("Cree un orden lgico para navegar con el tabulador a travs de vnculos,controles de formulario y objetos").

Este punto de control era de prioridad 3 en WCAG y pasa a ser prioridad 2 enUNE.

Las herramientas de evaluacin automtica.Presentacin de algunas de las herramientasdisponibles para la revisin automtica (TAW, Hera,Color Contrast Analyzer, Validador de GIF animados).

Valide la accesibilidad con herramientas automticas y revisin humana. Los mtodos

automticos son generalmente rpidos y oportunos, pero pueden no identificar todoslos problemas de accesibilidad. La revisin humana puede ayudar a asegurar laclaridad del lenguaje y facilidad de navegacin.


60/90

59

Acce


A continuacin se exponen los mtodos de validacin, expuestos con ms detalle en laseccin de validacin del Documento Tcnicas del W3C.

1. Utilice una herramienta de accesibilidad automtica y una herramienta de validacin delnavegador

2. Valide la sintaxis (HTML, xhtml,)

3. Valide las hojas de estilo.

4. Utilice un navegador slo-texto o un emulador.El primer navegador textual ( slo texto, sin imgenes ) fue el Lynx

Otra opcin sera emplear las herramientas que complementan los navegadores actualesy que nos permiten desactivar las hojas de estilo.

5. Utilice varios navegadores grficos con:

a. Sonidos y grficos cargados

b. Grficos no cargados

c. Sonidos no cargados.

d. Sin ratn.

6. Utilice varios navegadores, antiguos y nuevos.

7. Utilice un navegador por voz, un lector de pantalla, un software de magnificacin, unvisualizador pequeo, etc.El lector de pantalla empleado por los invidentes en Espaa es el JAWS.


61/90

60

Acce


8. Utilice verificadores de ortografa y gramtica. Quien lea la pgina con un sintetizador devoz puede no ser capaz de descifrar lo que reproduce el sintetizador por un errorortogrfico.

9. Invite a personas con discapacidad a revisar los documentos. Usuarios discapacitados

expertos y noveles proporcionarn una retroalimentacin valiosa sobre la accesibilidad olos problemas de uso y su gravedad.

Para la parte automtica de la validacin, se recomienda emplear software sugerido por elw3

o

o

o Color contrast analyser

o Herramienta online, disponible en espaol, que valida GIF animados, bien indicando laURL para que verifique todos sus GIF o bien indicando la url del GIF.


62/90

61

Acce


http://tools.webaccessibile.org/test/check.aspx

o Lector de pantalla JAWS que es el que utilizan los invidentes en Espaa al ser elrecomendado por la O.N.C.E.Una versin demo del mismo se puede obtener enftp://ftp.freedomscientific.com/users/hj/private/WebFiles/JAWS/J10.0.512.exe

Practicando la revisin manual.

Con algunos ejemplos se practica la revisin manual


63/90


64/90

63

Acce



65/90


66/90

65

Acce


Contenido, Estructura, Presentacin yComportamientos: cuatro trminos que forman labase de los Estndares Web.Se evidencia el significado de cada trmino con laintencin de concienciar los participantes de laimportancia del uso de los estndares Web.

Contenido: Toda aquella informacin que se transmite al usuario-a, bien como texto,imgenes, vdeos, sonidos, etc.

Estructura: Organizacin lgica del documento. Algunos ejemplos de elementosestructurales en HTML son las listas (OL, UL, DL, LI, DT, DD) o los encabezados (H1, H2,H3... H6).

Presentacin: forma visual de mostrar el contenido: hojas de estilo y otros elementos HTML.

Cuando crees una pginas Web, antes de aplicar estilos y definir su presentacin, define suestructura y sus contenidos.La utilizacin de hojas de estilo, especialmente las externas, que permiten separar elcontenido de la presentacin, proporciona importantes ventajas:


67/90

66

Acce


1. Mayor facilidad para modificar el estilo de un sitio Web: si existe una buenaseparacin entre el contenido y la presentacin, puedes cambiar el estilo visualde un portal Web slo con modificar sus hojas de estilo.

2. Cdigo ms claro y sencillo: en el cdigo HTML slo estara presente la parte de

contenido y estructura del documento, dejando toda la presentacin para lashojas de estilo.

3. Reduccin de los tiempos de carga de las pginas: como el cdigo es muchoms compacto, reduces los tiempos de carga de las pginas, facilitando a los-asvisitantes el acceso a las mismas.

4. Cdigo ms fcil de mantener: el mantenimiento de las pginas que presentanseparacin de contenido y presentacin es ms sencillo y productivo, al tener uncdigo ms compacto.

5. Personalizacin de estilo: algunos usuarios-as, por eleccin o necesidad,requieren cambiar la presentacin de las pginas. Si usas las hojas de estilofacilitas a los usuarios-as la aplicacin de sus propias hojas prediseadas.

6. Mayor compatibilidad con diferentes dispositivos: separar el contenido y laestructura de la presentacin facilita el acceso desde una amplia variedad dedispositivos (pantallas pequeas, PDA, mviles de ltima generacin...). Asevitaras crear diferentes versiones de las pginas en funcin del dispositivo, conel consiguiente ahorro de tiempo y dinero.

Nueva estructura de los documentos en Iberia.com

Presentacin de la nueva estructura de losdocumentos (de tablas a divisiones -> DIV) y de lanueva organizacin de los estilos (CSS).

Pgina home de iberia con la estructura de contenedores principales


68/90

67

Acce



69/90

68

Acce


Pgina subhome con men izquierdo.

(X)HTML: uso correcto de los marcadores y susatributos.La importancia en definir la gramtica del documento(DTD) y el uso correcto de los marcadores (tags) a finde obtener la validacin de la pgina (W3C MarkupValidation Service). Ejemplos prcticos de creacin deuna estructura lgica de una pgina ygramaticalmente correcta, y validacin de la misma.

No existe un nico tipo de HTML, en realidad son varios: HTML 4.01 Strict (Estricto), HTML4.01 Transitional (Transicional), XHTML 1.0 Strict, y varios ms. Todos estos tipos de HTMLse encuentran definidos en sus respectivas especificaciones W3C, pero tambin estndefinidos en un lenguaje comprensible por las mquinas que especifica la estructuracorrecta, elementos y atributos de un tipo de HTML.Tal definicin se denomina "Document Type Definition" (Definicin del Tipo de Documento),


70/90


71/90

70

Acce


4 Todos los elementos XHTML deben estar cerrados adecuadamente.No se podr dejar etiquetas abiertas. Si utilizamos la etiqueta

, deberemoscerrarla
.Otra de las diferencias con el html es que las etiquetas que no tengan etiquetade cierre, como por ejemplo
, , en xhtml debern cerrarse dejando un
espacio y con la barra inclinada.En nuestro ejemplo
o .

5 Los valores de los atributos deben siempre ir encerrados entre comillas (simpleso dobles).Ejemplos: o seran correctos.sera incorrecto en xhtml

6 No est permitida la minimizacin de atributos (se usa el nombre del atributocomo valor).

Solo-lectura estara mal.Solo-lectura sera

correcto.

Atributos html

Las etiquetas html sirven para estructurar el contenido de todo el documento e indican alnavegador cmo debera presentarse el sitio web (por ejemplo,
informa al navegadorpara que introduzca un salto de lnea).En algunos elementos se puede aadir ms informacin. Esa informacin extra insertamediante atributos.

Los atributos se incluyen siempre dentro de la etiqueta correspondiente y llevaninmediatamente detrs el signo de igual ("=") con los valores de dichos atributos entrecomillas dobles ("") o simples ().El W3C desaconseja el empleo de estos atributos para dar estilo a las etiquetas; estascaractersticas de estilo debern ser sustituidas con las hojas de estilo (css).

Otros atributos se hacen imprescindibles para accesibilizar los contenidos.

o Entre estos atributos podemos encontrar los que nos indican el cambio de idioma en undocumento.: lang,

o Otros nos servirn para dar resmenes a las tablas:summary,

o Para especificar el texto alternativo a las imgenes:alt

o Para especificar el destino de un enlace:href.

o Para especificar que un enlace cargar en una nueva ventana:title

o Para establecer un orden entre los campos del formulario:tabindex,

o Para crea atajos de teclado:acceskey.

o Para marcar que una etiqueta es nica:id.

o Para aplicar una clase a una etiqueta: class


72/90

71

Acce


o Para especificar las distintas clases de formulario; es decir si es un checkbox, untextarea, o un campo de texto input.type

Introduccin a las CSSExisten 3 formas para implementar CSS en una pgina web:

o En lnea (dentro de la misma etiqueta).Un ejemplo de este tipo de estilos sera :

o Incrustado (uno para cada pgina web). Un ejemplo de esta forma de utilizar estilossera:

H1 { color: blue }

o Externo (llamado desde todas las pginas que conforman un sitio).De esta forma un nico fichero css puede vincularse con todas las pginas de iberia.Cambiando o modificando los valores podemos cambiar la presencia de todo el site.Esta es la forma recomendada y la que en la actualidad usa Iberia.As en todas las pginas de iberia podremos encontrar el siguiente cdigo:

IBERIA.COM en Espaa. Los Mejores Precios en vuelos de Iberia

Presentacin de los dos tipos de elementos: de bloque y en lnea.

Los documentos HTML son archivos de texto que contienen elementos HTML. Definimosestos elementos con etiquetas.


73/90

72

Acce


Por ejemplo, la etiqueta

sirve para definir un elemento que debe ser visualizado como unprrafo.De acuerdo con la W3C, hay dos tipos de elementos HTML:

1 inline;(en-lnea): Los elementos in-line son aquellos que no interrumpen el flujo

del documento. Por ejemplo, aquellos elementos que hacen visualizar una letra oconjunto de letras en negrita o en cursiva.Ejemplos de etiquetas inline:, , , .

2 block;(bloque): son elementos que trabajan al nivel de bloques de texto. Porejemplo, aquellos elementos que hacen visualizar una oracin o conjunto deoraciones como un prrafo o una lista.Ejemplos de etiquetas de bloque mas importantes:, , , , , , , , , , , .

.

Existen varias diferencias entre uno y otro:1 Los elementos de bloque pueden contener tanto elementos en-lnea como otros

elementos de bloque. Sin embargo, los elementos en-lnea solo pueden contenerotros elementos en-lnea.El validador de xhtml del W3 dar error si encuentra que dentro de una etiquetaexiste un elemento de bloque como un por ejemplo.

2 Los elementos de bloque comienzan en una lnea nueva. Los elementos en-lnease mantienen en la misma lnea.Esta diferencia puede modificarse mediante css con la propiedad display: inlineodisplay: blockasignadas a cualquier etiqueta de xhtml.

Sintaxis correcta para escribir una regla de estilo.Las hojas de estilo se basan en fijar unas determinadas instrucciones de presentacin a loselementos existentes en un documento HTML.Para ello, debemos indicar por un lado qu instrucciones queremos aplicar, y por otro a quelementos queremos aplicarlas.

Los selectores

Todo esto lo hacemos con las reglas CSS, que tienen la siguiente estructura:selector {propiedad: valor;}


74/90

73

Acce


En esta imagen vemos cmo se anidaran los diferentes elementos dentro del documento, yen el esquema de abajo vemos una representacin de la estructura jerrquica del mismo.Entre los distintos componentes de un documento se establecen relaciones, y de este modo,casi siempre nos podremos referir a los elementos de distintas formas, segn el contexto enque se encuentren dentro del documento.

Podemos decir: que todos los prrafos tengan fondo de color rojo, de esta forma:p { background-color: red}


75/90

74

Acce


Pero tambin podemos querer especificar que slo los prrafos que estn dentro de laetiqueta div aparezcan en rojo.div p { background-color: red}

IdentificadoresCon un selector de id, nos referiremos al nico elemento dentro del documento que tiene esaid. Por tanto siempre nos estamos refiriendo a un nico.No podr haber en un documento mas de un elemento con el mismo nombre de id.Se identifican y se crean con el carcter # delante del nombre.#primero { background-color: red}


76/90

75

Acce


Las clasesCon un selector de clase, lo que estamos haciendo es algo ms genrico. Decimos que va ahaber un tipo de elemento al que vamos a dar una serie de caractersticas especiales.Por ejemplo, digamos que creamos una clase destaca a la que damos un fondo rojo. Apartir de entonces, podremos asignar esa clase a cualquier elemento de nuestro HTML, deforma que se muestre con ese color de fondo..destaca {background-color: red;}

Esto se aplicara a un prrafo de la siguiente manera:

Las pseudoclasesCon css se pueden establecer relaciones ms complejos entre los elementos.En la actualidad el navegador Explorer en su versin 6 no las tiene implementadas por lo quea da de hoy no podemos utilizarlas.Desde el siguiente enlace se puede ver la compatibilidad de los diferentes navegadores conlas distintas versiones de css; css1, css2 y css3http://www.quirksmode.org/css/contents.html


77/90

76

Acce


GUA ACERCA EL DESARROLLO DE LAS CSS EN IBERIA.COM.METODOLOGA, NOMENCLATURA Y ESTRUCTURA

Con el intento de crear homogeneidad en la definicin de las reglas de estilo (CSS), se van aenumerar unas series de metodologas a seguir.

COMO ESTRUCTURA LOS FICHEROS CSS.

Los ficheros que van a constituir el look&feeldel site de iberia sern varios.Se ha pretendido repartirlos en diferentes archivos agrupndolos segn su funcionalidad(reglas de layout, reglas de presentacin, reglas de mdulos, etc.) y con el intento de obtenerun mantenimiento y futura ampliacin ms sencilla y lgica.

A continuacin se muestra la lista de dichos ficheros. No ser definitiva y pueden crecer y/ovariar en el tiempo segn necesidades de los diseos:

style.css: archivo cuyo cometido es importar los ficheros que dan el estilo general alsite. Se adopta este sistema para ocultar dichos estilos a los navegadores de vieja

generacin. layout.css: define la estructura principal del site.

Principalmente se van a definir los identificadores (ID) de cabecera, men denavegacin, contenidos, pi de pgina y todos aquellos de importante relevanciapara definir la estructura de cada plantilla.

presentation.css: todas las reglas comunes a la aplicacin.Por reglas comunes se entienden antes de todo la definicin de estilos de loselementos (TAGs) y luego aquellas CLASS o IDs de uso comn y frecuente.

module.css: en este fichero se van a definir las reglas de estilo de todos aquelloselementos que componen una determinada pgina y que llamaremos mdulos.Por mdulo se entiende un bloque de informacin que puede ser incluido encualquier pgina del site manteniendo el mismo estilo, como por ejemplo: logotipo,buscador, men de navegacin, rastro de migas, pie de pgina, etc

module-plant-unica.css: en este fichero se van a definir las reglas de estilo detodos aquellos elementos que componen las "plantillas nicas".

module-iberia.css: en este fichero se han trasladado algunos estilos provenientesde "iberia.css" de manera que los "contenidos no accesibles" se presentencorrectamente a pantalla hasta que se hagan "accesibles". Cuando todo seraccesible, ste CSS ser eliminado.

iberia_6_AA.css: hoja de estilo que rene estilos exclusivos para IE 6. Las letras"AA" contenidas en el nombre del archivo estn por "ACCESIBLE" y sirve paradiferenciar del antiguo "iberia_6.css"

iberia_7_AA.css: hoja de estilo que rene estilos exclusivos para IE 7. Las letras"AA" contenidas en el nombre del archivo estn por "ACCESIBLE" y sirve paradiferenciar del antiguo "iberia_7.css".

Puede surgir la necesidad de repartir module.css en diferentes ficheros de modo que no hayamucha carga en el mismo. Por ejemplo si se determina que la seccin Gestin de reservaslleva muchos mdulos que irn a sobrecargar module.css, entonces se podra crear otrorespetando una nomenclatura coherente, por ejemplo moduleReservas.css.

PAUTAS PARA ESCRIBIR LAS REGLAS

Las reglas de estilos deben ser claras, ordenadas y mantener siempre el mismo formato. Sedefinen por tanto unas pautas a seguir de forma rigurosa a fin de conseguir uniformidad:

1. Entre una regla y otra dejar una lnea vaca.

2. Escribir los elementos padres para que sea ms fcil su lectura.


78/90

77

Acce


3. Sangrar las reglas segn su profundidad.

4. Escribir una sola declaracin por fila.

5. Cuando es posible, optimizar las declaraciones con el mtodo shorthand (mtododonde las declaraciones de los valores de todas las propiedades de un selector se

agrupa en una regla nica.Ej.: { font: bold 1em/135% Arial, Verdana, sans-serif } ).

6. Todo va escrito en minscula.

7. Despus de los dos puntos que separa la propiedad del valor, dejar un espacio.

8. Cuando se declara un valor de color escribirlo en formato hexadecimal y enminscula.

9. Cuando es posible, utilizar 3 dgitos para los valores de color.Ej: {color: #fff;}

10. Utilizar siempre "em" como unidad de medida para el texto, anchura y altura decajas (cuando es necesario) y en aquellas propiedades aptas a fin de cumplir elpunto 3.4 de las WCAG 1.0.

11. No utilizar hacks:Los hacks son declaraciones que permiten enviar determinadas instrucciones CSS adistintos navegadores. En su lugar utilizar los comentarios condicionales.

ORDEN DE ESCRITURA DE LAS REGLAS

Por orden de escritura se entiende en que orden lgico escribir las reglas dentro de cadaarchivo ".CSS".

Por lo general se sigue la siguiente pauta: las reglas van ordenada segn su aparicin en eldocumento HTML empezando por la parte inicial del mismo.

Solo por el archivo "presentation.css" se aplica un sistema de orden diferente.Hay dos partes: la primera parte est destinada a la definicin de los estilos de losmarcadores (TAGs) que a su vez tienen un orden alfabtico (excepto BODYque seencuentra en primera posicin), y la segunda parte est destinada a las Clases /CLASS.

Ejemplo:

/*------------------ MARCADORES ------------------*/

body { ...omissis... }abbr, acronym { ...omissis... }a:link { ...omissis... }form { ...omissis... }hr { ...omissis... }/*------------------ CLASSes ------------------*/.buttonFormImg { ...omissis... }.clr { ...omissis... }.hide { ...omissis... }.intro { ...omissis... }.noDisplay { ...omissis... }


79/90

78

Acce


COMO ESCRIBIR LOS COMENTARIOS

A principio (fila 1 columna 1) de cada fichero habr un comentario que define la funcionalidaddel mismo de una forma clara y concisa de manera que sea comprensible al desarrollador sinel auxilio de este mismo documento. Para evitar diferencias de codificacin entre editores,

evitar el uso de tildes.Dicho comentario se define de la siguiente manera:

/*============================================Este metodo oculta las hojas de estilosa los navegadores de vieja generacion.==============================================*/

Los comentarios que acompaan las reglas de estilo por tanto excluso el recin ilustrado sern de diferentes niveles:

1. Primer nivel

2. Segundo nivel

3. Tercer nivel

Los de segundo nivel estarn sangrados respecto el de primer nivel y el de tercer nivelrespecto el de segundo. De esta manera a simple vista son reconocibles. Adems de sersangrados, tendrn su propio formato. A continuacin se van a presentar un ejemplo decada:

Primer nivel/*-------------------- CONTENTS --------------------*/

Segundo nivel/*--- Barra de navegacion ---*/

Tercer nivel/* Listado enlaces */

En caso de un cuarto, quinto, etc... nivel se mantendr el mismo estilo del comentario detercer nivel y ser sangrando segn lgica.

NOMENCLATURA

Los nombres de las reglas sern en ingls.

No se debe empezar con un nmero.

Utilizar una nomenclatura que sea fcil de reconducir a la funcionalidad o utilidad de

la misma regla.


80/90

79

Acce


Todo va escrito en minscula.

En caso de nombres compuestos (Ej.: logoUtilitySearch) la primera letra de cadanombre va en mayscula.

Flotacin de elementos xhtml.Para tener un mayor control sobre los elementos y poder situarlos segn nuestrasnecesidades, tenemos la propiedad floatde css que nos permitir situar los elementos a laizquierda o a la derecha de otros contenedores.Cuando a un elemento de bloque ( div, table, p, li, etc) le aplicamos esta propiedad nospermite hacer flotar un elemento a una posicin relativa rompiendo el esquema normal de lapagina.Nos permitir con facilidad paginas con 2 o ms columnas, entre muchas otras cosas.Los posibles valores que admite este propiedad son left(flotar el elemento a la izquierda),right(flotar el elemento a la derecha) o none( no lo flotar).

Siempre que utilicemos este atributo tendremos que especificar tambin un ancho para el

elemento flotado.

Ejemplos:Para empezar crearemos 4 contenedores:

1234Que nos pintarn en el navegador la siguiente estructura:


81/90

80

Acce


Si la clase flotados la definimos con un float left.flotados{width:200px;height:200px;background:#999;float:left;border:1px solid 444;}Obtendremos en nuestro navegador:

Si definimos la clase y la propiedad float a rightobtendremos el siguiente resultado..flotados{width:200px;height:200px;background:#999;float:right;border:1px solid 444;}Fijarse en que cambia de orden:


82/90

81

Acce


Otra propiedad muy relacionada con la propiedad de css float en la propiedad clear.Clear es la propiedad que sirve para romper el esquema que estaba formando float.Como vimos por cada objeto que contenga la propiedad float se irn agrupando a su ladouno tras otro sin interrupcin al menos que el tamao de su contenedor sea menor.Al especificarse clear a un objeto le decimos que acte como si fuese el primero objeto entener la propiedad float pero en la siguiente lnea, y as el esquema anterior se rompe y

comienza uno nuevo de ah para abajo.Esta propiedad puede tomar los siguientes valores:

Presentacin del documento Listado de estilos a aplicar en laredaccin de los contenidosImportar el documento de Word con los estilos propios de iberia listado estilos IB.

Prcticas reales de maquetacin. Aplicacin de losconocimientos adquiridos.o Contenidos tipo texto

1 Mdulo banner

2 Mdulo Imagen Titulo Texto


83/90

82

Acce


o

Contenido tipo producto.

Tablas sencillas y complejas.No utilizar tablas para maquetar.

La etiqueta fue creada para contener datos tabulados.Cuando hablamos de datos tabulados nos estamos refiriendo a una serie de datos que estndistribuidos por filas y por columnas.Cada dato estar en la interseccin de una fila y una columna, a esta interseccin se laconoce como celda.En html, la estructura que alberga datos tabulados, se denomina tabla. Esta tabla tienediferentes elementos; los dos ms fundamentales son la fila y la columna.

Tablas complejas:

En las tablas de datos complejas, con dos o ms niveles de encabezamiento, debes asociar


84/90

83

Acce


las celdas de encabezamiento con las de datos y dividir estructuralmente la informacincuando sea necesario.Para ello dispones de los siguientes elementos o atributos:Para las tablas de datos que tienen dos o ms niveles lgicos de encabezamientos de fila ocolumna, utilice marcadores para asociar las celdas de encabezamiento y las celdas dedatos.

o THEAD identifica grupos de encabezamientos (TH).

o TFOOT identifica pies de tabla.

o TBODY identifica grupos de filas de datos.

o COLGROUP y COL identifican grupos de columnas.

o Los atributos scope, headers y axis sirven para etiquetar. Los elementos de tablapara que los futuros navegadores o ayudas tcnicas puedan seleccionar datos filtrandopor categoras.

A continuacin una profundizacin de cada elementos y atributos antes mencionados:

o THEAD: define un grupo de filas de encabezamiento de una tabla (TH). Slo puedesemplear un elemento THEAD por tabla y debes situarlo despus del elementoCAPTION y antes de TFOOT (si lo hubiese) o TBODY

o TFOOT: delimita un grupo de filas de pie de tabla. Slo puedes utilizar un elementoTFOOT por tabla y debes colocarlo despus de THEAD y antes de TBODY.

o TBODY: identifica grupos de filas de datos de una tabla. Este elemento divide las filas de

datos en varios grupos de filas que comparten ciertas caractersticas. su uso es opcional,pero si usas los elementos THEAD y TFOOT, entonces debes implementarloobligatoriamente.

THEAD, TBODY y TFOOT permiten que, al imprimir tablas largas, los navegadores puedanpresentar los encabezados y pies de pgina en todas las pginas.

Medallero OlmpicoMedallas de oro* Medallas pendientes de revisinEEUU22

...


85/90


86/90

85

Acce


Un sintetizador de voz podra leer esta tabla como sigue:Ttulo: Tazas de caf consumidas por cada senador.Resumen: Esta tabla esquematiza el nmero de tazas de caf consumidas por cadasenador, el tipo de caf (descafeinado o normal) y si se ha tomado con azcar.Nombre: T. Sexton, Tazas: 10, Tipo: Expreso, Azcar: NoNombre: J. Dinnen, Tazas: 5, Tipo: Descaf, Azcar: Si

Imgenes:Las imgenes que emplearemos en el site de iberia debern cerrarse de la siguiente forma:Es muy importante porque de otra forma no validara el cdigo el dejar un espacio en blancoy cerrar con la barra del 7.

El texto alternativo indica a los dispositivos de usuario qu es lo que deben hacer en casode no mostrar las imgenes y todo objeto multimedia (porque estn desactivadas, porque setrate de un navegador en modo de texto o un lector de pantalla, etc.). Para establecer el textoalternativo de las imgenes emplearemos el atributo alt

1 Imgenes sencillas:

Para imgenes sencillas usaremos el atributo alt con una breve descripcin delas mismas.

2 Imgenes decorativas:Las imgenes que se usan con fines decorativos y apenas aportan informacin,no necesitan de texto alternativo (ej.: imgenes usadas como espaciadores,invisibles o transparentes, lneas, bordes...).

Esto no quiere decir que se puede omitir el atributo alt. Existe pero concontenido nulo (vaco). Un texto alternativo vaco indica a los dispositivos deusuario que, si es imposible mostrar la imagen, no deben mostrar nada, ya que

carece de importancia.


87/90

86

Acce


Ejemplo:

3 Imgenes complejas:Si la informacin aportada por la imagen es importante y precisa de una

descripcin ms detallada debes usar el atributo longdesc.

4 Imgenes que son texto:Para las imgenes que contienen texto introduce en el atributo alt el mismotexto que aparece en la imagen.

5 Imgenes como botones de formularios:Las imgenes que funcionan como botones de formulario, aadidas mediante elelemento INPUT de tipo image, deben contener un texto alternativo siguiendolas mismas indicaciones que para el resto de imgenes.

6 Imgenes con animaciones:En las imgenes animadas, como en aquellas de tipo GIF animado, habra quedescribir escuetamente la imagen y la animacin.

7 Imgenes como enlaces:Si, adems de la imagen, el enlace dispone de un texto quefunciona como vnculo y el contenido de la misma es irrelevante, entonces evitaespecificar el destino del enlace en el texto alternativo, dejndolo vaco.As evitaras que los lectores de pantalla lean el mismo texto dos veces deseguida.

EnlacesIdentificar claramente el destino de los enlaces [13.1]El texto de los enlaces debe ser corto y lo suficientemente significativo como para tenersentido cuando se lea fuera de su contexto, es decir, cuando se lea slo el texto del enlace.Los enlaces del tipo pinche aqu o siga este enlace no son significativos ya que ocultanhaca dnde se dirigen.

El atributo title proporciona un ttulo al enlace que ampla la informacin sobre le destino delmismo si el texto no es lo suficientemente significativo. En caso contrario evita aadir el ttulo.Por otra parte, busca la consistencia en los enlaces, es decir, procura que aquellos quetengan el mismo texto hagan referencia a un mismo destino. En todo caso, si usas el mismotexto para hacer referencia a destinos distintos entonces diferencia uno enlaces de otros pormedio del atributo title.

Avisar de la apertura de nuevas ventanas [10.1]Una de las prcticas que debes evitar es abrir enlaces en nuevas ventanas por variasrazones:Al cambiar la ventana actual o aparecer inesperadamente nuevas ventanas, los usuario-as(independientemente de sus caractersticas) pueden sentirse desorientados.Adems, en las nuevas versiones de navegadores existen asistentes en los que el usuariopuede bloquear la aparicin de este tipo de ventanas. Al abrirse un nuevo navegador sepierde el historial de las pginas visitadas y se entorpece la navegacin.El botn atrs para volver a pginas visitadas anteriormente queda inactivo al no contar conun historial en el nuevo navegador abierto.

En algunos casos puede abrir ventanas emergentes. Por ejemplo, para abrir documentos no

HTML (PDF o Word) o para abrir imgenes de gran tamao, de esta forma el usuario-a


88/90

87

Acce


puede seguir navegando mientras en la nueva ventana se descarga el documentoseleccionado.Si usas enlaces que se abren en una nueva ventana informa al usuario-a previamente atravs del atributo title del elemento A o bien indicarlo en el texto del enlace:Ejemplo de enlace dentro de contenido en command center:

1.

2.

3.

Ejemplo de enlace en accin de command center:

goUrl('url=http://www.oneworld.com/ow/news/details?objectID=11166&popup=true&AAA=true')

Incluir caracteres entre enlacesLos caracteres imprimibles entre los enlaces posibilitan que los lectores de pantalla haganuna pausa, permitiendo que los usuarios-as diferencien dnde termina un enlace y comienzaotro.Separa los enlaces contiguos situados en la misma lnea con un carcter imprimible rodeadode espacios en blanco:[ Internet | Telefona | Televisin | Oferta combinada | Atencin al cliente | E-factura ].As mismo, en el navegador textual Lynx visualmente se confunden.

Etiqueta strongCuando queramos remarcar en un texto alguna palabra o coleccin de palabras, utilizaremosla etiqueta ;con esto aportaremos, a parte de la fuente negrita, unsignificado que las mquinas entendern. Una maquina tratar de igual forma un textoindependientemente de las distintas clases que pueda contener, sin embargo, con la etiquetastrong le estamos diciendo que esa palabra tiene mas importancia que el resto.

Etiquetas de encabezamiento (h1, h2, h3, h4, h5, h6)Para organizar la informacin de los documentos se los suelen dividir, por ejemplo, en varioscaptulos, cada captulo se divide en secciones, las secciones en temas y as sucesivamente.

Estos fragmentos de informacin conforman la estructura del documento.

Algunas aplicaciones de usuario utilizan los encabezados para extraer la estructura y ofrecermejores herramientas de consulta, por ejemplo, la posibilidad de examinar rpidamente laspginas navegando a travs de los ttulos.

Cada seccin de un documento debe ser presentada con el encabezado htmlcorrespondiente (h1-h6) segn el nivel que ocupe dentro de su estructura.

Por ejemplo, los encabezados h2 deben seguir a los elementos h1, los encabezados h3deben seguir a los h2 y as sucesivamente.No emplear estas etiquetas slo para conseguir un efecto visual.

En la aplicacin web de iberia y dentro del contenido #mainse deben emplear a partir delnivel 4 (h4).


89/90

88

Acce


Listaso Ordenadas

Atributo typepara especificar. El atributo TYPE podr tomar los valores 1, a, A, i, I.Por ejemplo:

o DesordenadasSon aquellas que muestran una serie de elementos uno encima de otro y destinadas apresentar colecciones de elementos.Podremos especificar en el atributo typelos siguientes valores: disc, squareo circle.Por ejemplo:

o De definicin.Las listas de definicin apenas se utilizan en la mayora de pginas HTML. Su

funcionamiento es similar al de un diccionario, ya que cada elemento de la lista estformado por trminos y definiciones.La etiqueta crea la lista de definicin y las etiquetas y definenrespectivamente el trmino y la descripcin de cada elemento de la lista.


90/90

Ejemplo:

Accesibilidad Contenidos Web

Documents

Transcript of Accesibilidad Contenidos Web