PDF de programación - Páginas WEB Accesibles - Guideline 3. Use markup and style sheets and do so properly

Páginas WEB Accesibles

Guideline 3. Use markup and style sheets and do so properly

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y Computación

Universidad Complutense de Madrid

17 de diciembre de 2008

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Respetar los estándares

Facilita la creación de software específico. Si se usan
correctamennte las etiquetas h1,...,h6 se podría hacer un
índice de contenidos de forma automática.

Separación entre

contenido lo que quiero comunicar,
estructura cómo se estructura dicho contenido,
presentación como se presenta en un dispositivo.

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Checkpoints

3.1 When an appropriate markup language exists, use markup

rather than images to convey information. [Prioridad 2]

3.2 Create documents that validate to published formal

grammars. [Prioridad 2]

3.3 Use style sheets to control layout and presentation. [Prioridad

2]

3.4 Use relative rather than absolute units in markup language

attribute values and style sheet property values. [Prioridad 2]

3.5 Use header elements to convey document structure and use

them according to specification. [Prioridad 2]

3.6 Mark up lists and list items properly. [Prioridad 2]

3.7 Mark up quotations. Do not use quotation markup for

formatting effects such as indentation. [Prioridad 2]

Luis Fernando Llana Díaz

Páginas WEB Accesibles

HTML+CSS vs Flash

Flash

http://antares.sip.ucm.es/~luis/accesibilidadWEB08-09/ejemplos/markup/menu.css.html

Tamaño: 30207 bytes
No se transforma de forma sencilla.
Formato propietario.

W3C

http://antares.sip.ucm.es/~luis/accesibilidadWEB08-09/ejemplos/markup/menu.css.html

Tamaño: 2554 bytes.
Se transforma de forma sencilla.
Formato público.

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Gramáticas formales I

Authors should use the Strict DTD when possible, but may use the
Transitional DTD when support for presentation attribute and
elements is required.

Estricto

<! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01// EN " >

1

This is HTML 4.01 Strict DTD, which excludes the
presentation attributes and elements that W3C
expects to phase out as support for style sheets
matures.

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Gramáticas formales II

Trasnsición

Marcos

<! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01 T r a n s i t i o n a l // EN " >

1

This is the HTML 4.01 Transitional DTD, which
includes presentation attributes and elements that
W3C expects to phase out as support for style sheets
matures.

<! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01 F r a m e s e t // EN " >

1

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Uso correcto de marcado I

El marcado sive para denotar estructura

em énfasis. Indicates emphasis.
strong mayor énfasis
cite cita o referencia
dfn definición
code fragmento de programa
samp salida de un programa
kbd algo que se debe teclear
var una variable de un programa
abbr abreviatura, con title la 1a vez.
acronym abreviatura, con title la 1a vez.

blockquote, q.

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Uso correcto de marcado II

< B L O C K Q U O T E cite = " http :// www . mycom . com / tolkien / t w o t o w e r s . html " >
<P > They went in single file , running like hounds on a strong scent ,
and an eager light was in their eyes . Nearly due west the broad
swath of the m a r c h i n g Orcs tramped its ugly slot ; the sweet grass
of Rohan had been bruised and b l a c k e n e d as they passed . </ P >
</ BLOCKQUOTE >

1
2
3
4
5
6

ol, ul, dl listas

h1,..h6 Uso adcuado de encabezamientos

table no usar tablas para maquetación.

Luis Fernando Llana Díaz

Páginas WEB Accesibles