Uso de márgenes CSS y reglas de padding en lugar de imágenes espaciadoras para el diseño de interfaz [Técnica C18 – WCAG 2.1] (Accesibilidad Web 67)


Esta técnica , denominada C18 hace referencia al uso de «noembed» con «embed».

Se aplica a

Todas las tecnologías que soportan CSS

Descripción

Los diseñadores a veces usan imágenes espaciadoras (comúnmente gifs transparentes de 1×1 pixel) en un intento por controlar el layout de un modo no líquido, por ejemplo en tablas o para indentar parrafos.

Sin embargo, las CSS (hojas de estilo en cascada) permiten suficiente control sobre la maquetación eliminando la necesidad de estas imágenes espaciadoras.

Las propiedades CSS que nos permiten hacer esto son margin y padding, las cuales pueden ser usadas solas o en combinación para controlar el layout.

Las propiedades del margen (‘margin-top’, ‘margin-right’, ‘margin-bottom’, ‘margin-left’ y el atajo ‘margin’) pueden usarse en cualquier elemento que sea mostrado como un bloque, añadiendo espacio en la parte exterior de dicho elemento.

Las propiedades de padding (‘padding-top’, ‘padding-right’, ‘padding-bottom’, ‘padding-left’ y el atajo ‘padding’) pueden ser usados en cualquier elemento, y añaden espacio en la parte interna del elemento.

Ejemplos

Ejemplo 1: 

El siguiente ejemplo consiste en dos partes:

  1. El código CSS que especifica un margen alrededor de la tabla, y un padding para las celdas de la misma.
  2. El código HTML de la tabla, que no contiene imágenes espaciadoras y no está aniadad dentro de otra tabla.
table { margin: .5em; border-collapse: collapse; } 
td, th { padding: .4em; border: 1px solid #000; }

...

<table summary="Titles, authors and publication dates of books in Web development category">
<caption>Books in the category 'Web development'</caption>
<thead>
    <tr>
    <th>Title</th>
    <th>Author</th>
    <th>Date</th>
    </tr>
</thead>
<tbody>
    <tr>
    <td>How to Think Straight About Web Standards</td>
    <td>Andrew Stanovich</td>
    <td>1 April 2007</td>
    </tr>
</tbody>
</table>

Otros Recursos

Los recursos son únicamente para fines de información.

Bibliografía


Quizá te interese leer más sobre WCAG 2.1 - Técnicas

Dejar una Respuesta

XHTML: Usted puede usar las siguientes etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>