Accesibilidad: ¿Qué te está diciendo tu código?

Hoy vamos a hablar sobre la accesibilidad y semántica. Empecemos con una pregunta: ¿Has usado alguna vez un lector de pantalla? Si la respuesta es no, deberías probarlo – quizá cambie para siempre la manera en la que afrontas la creación de tu código HTML.

Durante este artículo vamos a ver la estructura de una página web, la forma en la que los lectores de pantalla interpretan esa estructura, y las mejoras que podemos incluir en nuestro propio código para mejorar la accesibilidad.

Unas breves palabras sobre la demo

He creado una página de ejemplo para mostrar cómo procesan los lectores de pantalla un código concreto. También quería mostrar algo de código HTML5 semántico en su forma más básica – algo que espero te sea útil. Por último, cómo sé cuánto os gustan las descargas de archivos con el código fuente que acompañan los tutoriales, ¡también tenéis el archivo correspondiente a este tutorial!

La demo es una sencilla página formada por una sencilla columna flexible. No es responsiva, pero está preparada para serlo en caso de que así lo desees: usa unidades horizontales relativas (%), y también unidades relativas para las fuentes (em). Las imágenes son flexibles y modifican su tamaño según las dimensiones de su elemento contenedor. También usa un par de simpáticas fuentes de Google. Es ligero y limpio.

El modelo de estándares web

Si eres un asiduo visitante de Tuts+, habrás escuchado una y otra vez que al construir un sitio web es importante separar los distintos aspectos que intervienen. Todo esto forma parte de lo que conocemos como el modelo de estándares web; la estructura, la presentación y el comportamiento.

Construimos la estructura mediante nuestro código HTML, definimos la presentación con nuestros estilos (la manera en la que se muestra el contenido en un determinado agente de usuario), a través de CSS, y el comportamiento de una página web, la interactividad del front-end, normalmente la generamos usando javascript.

Desde el punto de vista práctico, es mejor para nosotros tener estos tres aspectos del diseño web separados – de esta forma el mantenimiento del contenido será mucho más fácil, ya que será independiente de la estructura del sitio.

La separación también beneficia la comprensión. Nosotros, los humanos, procesamos las páginas web gracias a la manera en la que nos la sirven los navegadores. Pero existen otras posibles formas para acceder a una página web, y además, los robots de los motores de búsqueda rastrean la estructura desnuda de las páginas para categorizar y posicionar adecuadamente el contenido.

Tenemos a nuestra disposición las Tecnologías de Asistencia (AT, Assistive Technologies) como, por ejemplo, lectores de pantalla. Estos interpretan las interfaces del ordenador y leen lo que ven, ayudando a que las usen aquellas personas con discapacidades visuales. Las páginas web son un ejemplo de ese tipo de interfaces cuyo contenido es interpretado por los lectores de pantalla, y las interpretan tal y como los desarrolladores se las presentemos mediante código. Un código confuso y mal estructurado desde el punto de vista de la lógica dará como resultado problemas de accesibilidad, con independencia de que la apariencia visual de la página en el navegador sea impecable.

Nota: Es importante recordar que, aunque este tutorial se centre en las discapacidades visuales, optimizar la accesibilidad beneficia también a los usuarios que sufran otro tipo de discapacidades (motoras, auditivas, cognitivas, etc.)

Semántica

Es posible que no entiendas aún a qué nos referimos al hablar de Semántica, pero seguro que has escuchado este término muchas veces. La semántica en el diseño web hace referencia a los significados atribuidos al código HTML. Tras dejar atrás las maquetaciones basadas en tablas, el valor semántico del código (X)HTML ha mejorado increíblemente, las celdas de las tablas han dado paso a etiquetas <div>(divisiones), las listas sin orden (<ul>) son ahora habituales, y hemos empezado a usar cosas como <em> (para enfatizar semánticamente) en lugar de <i> (estilo en cursiva, aunque sin significado) para aumentar la distancia entre el código y la presentación.

Logo HTML5 de W3C

La comunidad del diseño web ha adoptado el código HTML5, y gracias a la amplia gama de nuevos elementos que pone a nuestra disposición, podemos describir nuestro código con mayor precisión que nunca. La navegación principal normalmente todavía usa listas no ordenadas, pero ahora puede descansar dentro de etiquetas <nav>, lo cual describe perfectamente su función.

Para ayudarte a usar adecuadamente HTML5 semántico, consulta lo que tienen preparado los chicos de HTML5Doctor.com.

¿Has usado alguna vez un lector de pantallas?

Es sorprendente el hecho de que pocos diseñadores web hayan usado realmente lectores de pantalla. Comprobar tu trabajo desde la perspectiva de alguien con una discapacidad visual puede resultar tan reconfortante como frustrante, pero te recomiendo que lo hagas al menos una vez. Los lectores de pantalla pueden resultar difíciles de entender, así que asegúrate de comprender la diferencia entre una accesibilidad pobre y la simple incapacidad para utilizar el software…

Los lectores de pantalla usan funciones de navegación alternativas (a través del teclado) para destacar, procesar, e interactuar con los distintos elementos de una pantalla. Saltar entre los controles de tu navegador y los controles dentro de una página web puede parecer complicado al principio. Sin embargo, una vez te hayas acostumbrado a usar las herramientas, la (in)accesibilidad de tu código te resultará más clara.

Existen varias herramientas que se usan habitualmente, aquí tienes unas cuantas como referencia:

Nota: Curiosamente, según el estudio demográfico llevado a cabo por webaim.org, la mayor parte de los usuarios de lectores de pantalla citan a Internet Explorer como el navegador que usan normalmente cuando leen las páginas. Creo que Microsoft todavía no interpreta adecuadamente la especificación CSS…

Código de ejemplo

Normalmente recibo tutoriales sobre creación de páginas web que, aunque se ven perfectamente en el navegador, y hacen uso del doctype correcto, con frecuencia no usan código HTML5. Eso es muy embarazoso, no cuesta mucho implementar algo de HTML5 semántico.

Empecemos con un documento a modo de ejemplo. Para empezar, huye de cualquier tipo de documento que tenga un aspecto similar a este:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Para usar HTML5 válido solo necesitamos algo tan sencillo como esto:

<!DOCTYPE html>

1	<!DOCTYPE html>

Destripemos ahora el resto de nuestra básica página web:

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8" />
    <title>What's Your Markup Saying to You?</title>   
    <link rel="shortcut icon" href="favicon.ico">
    
    <!--css-->
    <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Vast+Shadow' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/styles.css" type="text/css" />

    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<body class="home">
    
    <div class="wrapper">
    
        <div class="header">
    
            <h1>What's Your Markup Saying to You?</h1>
            
            <ul class="navigation">
                <li><a class="selected" href="#">Home</a></li>
                <li><a href="#">More Cheese</a></li>
                <li><a href="#">More Baboons</a></li>
            </ul>
    
        </div><!-- end .header -->
                
        <div class="home-main">
        
            <div class="article">        
                            
            </div><!--end .article-->
        
            <div class="article">
                                        
            </div><!--end .article-->
        
        </div><!-- end .home-main -->
        
        <div class="footer">
        
            <p>Copyright &copy; <a href="http://www.snaptin.com">Ian Yates</a> 2011</p>
    
        </div><!-- end .footer -->
    
    </div><!-- end .wrapper-->
    
</body>

</html>

<!DOCTYPE html>

<head>

<title>What's Your Markup Saying to You?</title>

<!--[if IE]>

<![endif]-->

</head>

<h1>What's Your Markup Saying to You?</h1>

<li><a href="#">More Cheese</a></li>

<li><a href="#">More Baboons</a></li>

</ul>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Esto es un ejemplo típico de cómo podríamos haber estructurado una página antes de la existencia de los elementos HTML5. Es perfectamente correcto, y puedes aplicarle estilo sin problemas.

Tenemos un div «home-main», anidado dentro de un div «wrapper». Dentro de «home-main» encontramos un par de divs para los artículos, y vamos a complicar aún más las cosas en unos segundos introduciendo algunos divs más… mira esto…

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8" />
    <title>What's Your Markup Saying to You?</title>   
    <link rel="shortcut icon" href="favicon.ico">
    
    <!--css-->
    <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Vast+Shadow' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/styles.css" type="text/css" />

    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<body class="home">
    
    <div class="wrapper">
    
        <div class="header">
    
            <h1>What's Your Markup Saying to You?</h1>
            
            <ul class="navigation">
                <li><a class="selected" href="#">Home</a></li>
                <li><a href="#">More Cheese</a></li>
                <li><a href="#">More Baboons</a></li>
            </ul>
    
        </div><!-- end .header -->
                
        <div class="home-main">
        
            <div class="article">        
                
                <h1>Wisconsin Cheese History</h1>
                
                <div class="img_container"> 
                
                    <img src="img/cheese.jpg" /> 
                    <p>"Cheeses" courtesy of <a href="http://www.flickr.com/photos/gee01/4090407169/">Graeme Maclean</a> on Flickr</p> 
                                
                </div>
                
                <p>The story of Wisconsin's dairy industry has roots in prehistoric times. Nature set the stage for America's Dairyland during the last Ice Age, when glaciers cut through what is now Wisconsin. As they receded, the <em>massive</em> mountains of ice left behind a countryside of rolling hills and lush pastureland.</p>
                
                <p>Millions of years later, when European immigrants migrated west, they found the nation's heartland, which reminded many of their homelands. Climatic conditions suited farming well, and initially, farmers grew wheat, hops, and other grains. Dairy farming followed naturally, and dairy farmers soon produced an abundance of top-quality milk. To preserve excess milk, farmers made cheese. The move from producing cheese for family use to making cheese to sell was a short step. However, commercial production of cheese in Wisconsin began on a small scale.</p>
                                
                <div class="article_footer">
                
                    <p>Taken from <a href="http://www.eatwisconsincheese.com/wisconsin/history_of_wisconsin_cheese.aspx">www.eatwisconsincheese.com</a>
                
                </div><!--end .article_footer-->
            
            </div><!--end .article-->
        
            <div class="article">
            
                <h1>Social Systems Within a Baboon Troop</h1>
                
                    <div class="img_container">  
                    
                        <img src="img/Baboon_buttocks.jpg" /> 
                        <p>"Baboon buttocks" courtesy of <a href="http://www.flickr.com/photos/prakhar/975160147">Prakhar Amba</a> on Flickr</p> 
                                                
                    </div>
                
                <p>Most baboons live in hierarchical troops. Group sizes vary between 5 to 250 animals (often about 50 or so), depending on specific circumstances, especially species and time of year. The structure within the troop varies considerably between hamadryas baboons and the remaining species, sometimes collectively referred to as savanna baboons.</p>
                
                <p>The hamadryas baboon often appear in very large groups composed of many smaller harems (one male with four or so females), to which females from elsewhere in the troop are recruited while they're still too young to breed. Other baboon species have a more promiscuous structure with a strict dominance hierarchy based on the matriline. The hamadryas baboon group will typically include a younger male, but he will not attempt to mate with the females unless the older male is removed.</p>
                
                <div class="article_footer">
                
                    <p>Taken from <a href="http://en.wikipedia.org/wiki/Baboon">wikipedia.com</a>
                
                </div><!--end .article_footer-->
            
            </div><!--end .article-->
        
        </div><!-- end .home-main -->
        
        <div class="footer">
        
            <p>Copyright &copy; <a href="http://www.snaptin.com">Ian Yates</a> 2011</p>
    
        </div><!-- end .footer -->
    
    </div><!-- end .wrapper-->
    
</body>

</html>

<!DOCTYPE html>

<head>

<title>What's Your Markup Saying to You?</title>

<!--[if IE]>

<![endif]-->

</head>

<h1>What's Your Markup Saying to You?</h1>

<li><a href="#">More Cheese</a></li>

<li><a href="#">More Baboons</a></li>

</ul>

</div>

<h1>Wisconsin Cheese History</h1>

<p>"Cheeses" courtesy of <a href="http://www.flickr.com/photos/gee01/4090407169/">Graeme Maclean</a> on Flickr</p>

</div>

<p>The story of Wisconsin's dairy industry has roots in prehistoric times. Nature set the stage for America's Dairyland during the last Ice Age, when glaciers cut through what is now Wisconsin. As they receded, the <em>massive</em> mountains of ice left behind a countryside of rolling hills and lush pastureland.</p>

<p>Millions of years later, when European immigrants migrated west, they found the nation's heartland, which reminded many of their homelands. Climatic conditions suited farming well, and initially, farmers grew wheat, hops, and other grains. Dairy farming followed naturally, and dairy farmers soon produced an abundance of top-quality milk. To preserve excess milk, farmers made cheese. The move from producing cheese for family use to making cheese to sell was a short step. However, commercial production of cheese in Wisconsin began on a small scale.</p>

<p>Taken from <a href="http://www.eatwisconsincheese.com/wisconsin/history_of_wisconsin_cheese.aspx">www.eatwisconsincheese.com</a>

</div>

</div>

<h1>Social Systems Within a Baboon Troop</h1>

<p>"Baboon buttocks" courtesy of <a href="http://www.flickr.com/photos/prakhar/975160147">Prakhar Amba</a> on Flickr</p>

</div>

<p>Most baboons live in hierarchical troops. Group sizes vary between 5 to 250 animals (often about 50 or so), depending on specific circumstances, especially species and time of year. The structure within the troop varies considerably between hamadryas baboons and the remaining species, sometimes collectively referred to as savanna baboons.</p>

<p>The hamadryas baboon often appear in very large groups composed of many smaller harems (one male with four or so females), to which females from elsewhere in the troop are recruited while they're still too young to breed. Other baboon species have a more promiscuous structure with a strict dominance hierarchy based on the matriline. The hamadryas baboon group will typically include a younger male, but he will not attempt to mate with the females unless the older male is removed.</p>

<p>Taken from <a href="http://en.wikipedia.org/wiki/Baboon">wikipedia.com</a>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

¿Lo ves? En cada div para los artículos hemos añadido una imágen, anidada en un div con el fin de vincularla a su pie de foto, además de otro div que actúa como pie de página en la parte inferior.

Añadamos ahora algo de presentación; algunos estilos CSS. En primer lugar, algunos estilos de restablecimiento, tomados en su totalidad de Eric Meyer:

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

License: none (public domain)

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

Después añadimos nuestros propios estilos. Habrás observado algunas fuentes extrañas, procedentes de la API de Google Fonts e implementadas usando @font-face. El resto se explica por sí mismo, y el resultado demuestra que no hay grandes complicaciones.

/*our stuff*/

body,
html {
    background: #f8f7f5;
    font-family: Arial, san-serif;
    font-size: 100%;
    color: #424449;
    }

p {
    font-size: 1em;         /* 16px / 16*/
    line-height: 1.5em;     /* 24px / 16*/
    margin: 0 0 1.5em 0;
    font-family: 'Droid Serif', serif;
    }

a {
    color: #674251;
    }

a:hover {
    text-decoration: none;
    }

/*headings*/
h1 {
    font-size: 3em;         /* 48px / 16*/
    font-family: 'Vast Shadow', cursive;
    text-align: center;
    }
    

/*flexible width on the wrapper*/
.wrapper {
    width: 60%;
    margin: auto;
    padding: 50px 0;
    }  
    
/*navigation*/
ul.navigation {
    text-align: center;
    padding: 10px 0;
    margin: 40px 0 20px 0;
    }
    
ul.navigation li {
    display: inline;
    }
    
ul.navigation li a {
    padding: 5px 20px;
    margin: 10px 4px;
    display: inline-block;
    text-decoration: none;
    font-family: 'Droid Serif', serif;
    font-style: italic;
    font-size: 1em;     /* 16px / 16*/
    background: #ede2e6;
    white-space: nowrap;
    
    
    -moz-box-shadow: 2px 2px 0px #f8f7f5, 3px 3px 0px #f4ecef;
    -webkit-box-shadow: 2px 2px 0px #f8f7f5, 3px 3px 0px #f4ecef;
    box-shadow: 2px 2px 0px #f8f7f5, 3px 3px 0px #f4ecef;
    
    }  
    
ul.navigation li a:hover,
ul.navigation li a.selected {
    background: #674251;
    color: #ffffff;
    
    -moz-box-shadow: 2px 2px 0px #f8f7f5, 3px 3px 0px #ac8696;
    -webkit-box-shadow: 2px 2px 0px #f8f7f5, 3px 3px 0px #ac8696;
    box-shadow: 2px 2px 0px #f8f7f5, 3px 3px 0px #ac8696;


    }  

/*footer */
.footer {
    padding: 60px 0 20px 0;
    }
    
.footer p {
    font-family: Arial, sans-serif;
    font-size: 0.75em;      /* 12px / 16 */
    text-align: center;
    }
        
/*articles*/
.article {
    padding: 40px 0;
    border-bottom: 1px solid #e8e8e7;
    }

.article h1 {
    font-size: 1.5em;           /* 24px / 16 */
    padding: 0 0 30px 0;
    }
    
.article .img_container {
    float: right;
    width: 25%;
    background: #fcfcf9;
    padding: 15px;
    border: 1px solid #e8e8e7;
    margin: 0 0 20px 3%;
    text-align: center;
    
    -moz-box-shadow: 2px 2px 0px #f8f7f5, 3px 3px 0px #e8e8e7;
    -webkit-box-shadow: 2px 2px 0px #f8f7f5, 3px 3px 0px #e8e8e7;
    box-shadow: 2px 2px 0px #f8f7f5, 3px 3px 0px #e8e8e7;
    
    }  
    
.article .img_container img {
    max-width: 100%;
    margin: 0 0 10px 0;
    }  
    
.article .img_container p {
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 0.75em;      /* 12px / 16*/
    }

    
.article_footer p {
    font-family: Arial, sans-serif;
    font-size: 0.75em;      /* 12px / 16 */
    text-align: center;
    }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

/*our stuff*/

body,

html {

background: #f8f7f5;

font-family: Arial, san-serif;

font-size: 100%;

color: #424449;

}

p {

font-size: 1em; /* 16px / 16*/

line-height: 1.5em; /* 24px / 16*/

margin: 0 0 1.5em 0;

font-family: 'Droid Serif', serif;

}

a {

color: #674251;

}

a:hover {

text-decoration: none;

}

/*headings*/

h1 {

font-size: 3em; /* 48px / 16*/

font-family: 'Vast Shadow', cursive;

text-align: center;

}

/*flexible width on the wrapper*/

.wrapper {

width: 60%;

margin: auto;

padding: 50px 0;

}

/*navigation*/

ul.navigation {

text-align: center;

padding: 10px 0;

margin: 40px 0 20px 0;

}

ul.navigation li {

display: inline;

}

ul.navigation li a {

padding: 5px 20px;

margin: 10px 4px;

display: inline-block;

text-decoration: none;

font-family: 'Droid Serif', serif;

font-style: italic;

font-size: 1em; /* 16px / 16*/

background: #ede2e6;

white-space: nowrap;

-moz-box-shadow: 2px 2px 0px #f8f7f5, 3px 3px 0px #f4ecef;

-webkit-box-shadow: 2px 2px 0px #f8f7f5, 3px 3px 0px #f4ecef;

box-shadow: 2px 2px 0px #f8f7f5, 3px 3px 0px #f4ecef;

}

ul.navigation li a:hover,

ul.navigation li a.selected {

background: #674251;

color: #ffffff;

-moz-box-shadow: 2px 2px 0px #f8f7f5, 3px 3px 0px #ac8696;

-webkit-box-shadow: 2px 2px 0px #f8f7f5, 3px 3px 0px #ac8696;

box-shadow: 2px 2px 0px #f8f7f5, 3px 3px 0px #ac8696;

}

/*footer */

.footer {

padding: 60px 0 20px 0;

}

.footer p {

font-family: Arial, sans-serif;

font-size: 0.75em; /* 12px / 16 */

text-align: center;

}

/*articles*/

.article {

padding: 40px 0;

border-bottom: 1px solid #e8e8e7;

}

.article h1 {

font-size: 1.5em; /* 24px / 16 */

padding: 0 0 30px 0;

}

.article .img_container {

float: right;

width: 25%;

background: #fcfcf9;

padding: 15px;

border: 1px solid #e8e8e7;

margin: 0 0 20px 3%;

text-align: center;

-moz-box-shadow: 2px 2px 0px #f8f7f5, 3px 3px 0px #e8e8e7;

-webkit-box-shadow: 2px 2px 0px #f8f7f5, 3px 3px 0px #e8e8e7;

box-shadow: 2px 2px 0px #f8f7f5, 3px 3px 0px #e8e8e7;

}

.article .img_container img {

max-width: 100%;

margin: 0 0 10px 0;

}

.article .img_container p {

margin: 0;

font-family: Arial, sans-serif;

font-size: 0.75em; /* 12px / 16*/

}

.article_footer p {

font-family: Arial, sans-serif;

font-size: 0.75em; /* 12px / 16 */

text-align: center;

}

En menos de 200 líneas de CSS (sin condensar), hemos aplicado perfectamente estilo a nuestra página. Nada extraordinario – titulares centrados y elementos de menú, una gran y bonita fuente (al 100% del ajuste predeterminado del navegador, que suele ser igual a 16px), e imágenes cuyos contenedores flotan a la derecha. Los estilos más complicados son lógicamente las dos sombras de los elementos de menú y los contenedores de las imágenes. En cualquier caso, en este tutorial no nos ocupamos de la aplicación de estilos, pero toma nota si te apetece.

Lo que te queda por leer:

Mejorar la accesibilidad
¿Cómo lo verá un lector de pantalla?
Ayuda en forma de WIA-ARIA
Conclusión

seguir leyendo en Tuts+

Entradas relacionadas

Twittear

Pocket

Unas breves palabras sobre la demo

El modelo de estándares web

Semántica

¿Has usado alguna vez un lector de pantallas?

Código de ejemplo

Mejorar la accesibilidad

¿Cómo lo verá un lector de pantalla?

Ayuda en forma de WIA-ARIA

Conclusión

Entradas relacionadas

Acerca de Eva Collados Pascual

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta