Siguenos en:
Siguenos en:
Lo principal de este punto es el agregado del atributo alt en todos los tags img en caso de que la explicación sea un texto corto, para otros casos que haga falta una descripción más extensa, por ejemplo en gráficos, es recomendable la utilización adicional del atributo longdesc donde se especifica una url que apunta a un documento con la información completa.
Por ejemplo:
<img src="ave.jpg" width="50" heigth="100" alt="foto de un ave volando en el cielo">
<img src="navbarra.jpg" width="500" heigth="80" alt="Barra de Navegación" longdesc="navbarra_desc.html">
Toda la información no textual (imágenes, sonidos, applets, presentaciones multimedia, etc.) deben contener información alternativa que transmita el contenido equivalente en formato textual (mediante alt y longdesc).
En caso de incluir en una página un mapa de imagen client-side, también deberemos proporcionar esa información en modo textual, incorporando links redundantes de texto para cada parte del mapa. Esto lo hacemos mediante el tag object que se mostraría cuando no fuera posible mostrar el mapa de imagen.
Por ejemplo:
<object data="imagen1.jpg" type="image/gif" usemap="#map1">
<map name="map1">
[<a href="index.html" shape="rect"
coords="0,10,16,25">Índice</a>]
[<a href="pagina1.html" shape="rect"
coords="10,20,26,35">Página 1 </a>]
[<a href="pagina2.html" shape="rect"
coords="24,30,50,60">Página 2 </a>]
</map>
</object>
Se ha comprobado que es conveniente acompañar cierta clase de información, como procesos o procedimientos, con gráficos e infografías, sonidos o animaciones que complementen el concepto porque sería mejor comprendida.
Por ejemplo:
Esta pauta se refiere a dos premisas: en primer lugar, cuando transmitimos información a través del color, debemos tener en cuenta que cuando el mismo está deshabilitado la información debe seguir estando disponible; la segunda premisa tiene que ver con generar una combinación de colores de texto y de fondo con suficiente contraste como para ser leído por personas con deficiencias de percepción de color o en pantallas en blanco y negro.
En este sitio ofrecen un validador de color: AccessColor.
Esta es una extensión para Firefox, que analiza el contraste de color: Colour Contrast Analyser.
No es recomendable el uso de imágenes para representar texto, debemos resolver el diseño con CSS. Para los casos en que existiera un lenguaje acorde para transmitir la información (como el caso de MathML para fórmulas matemáticas) se debe emplear éste para que no pierda su formato.
El DOCTYPE del documento es la primera línea de texto del código e identifica y valida la estructura del archivo contra estándares prefijados. Es imprescindible que esté para que el documento sea válido. Si la declaración del DOCTYPE es correcta el navegador del usuario podrá conocer e interpretar la estructura del documento.
Por ejemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
En este caso estamos indicando que el contenido del documento está hacho conforme a los estándares de HTML 4.01 que se valida contra la DTD loose.dtd, la cual contiene la semántica de la especificación y de encuentra hosteada en el W3C.
Es aconsejable diseñar los contenidos con CSS en vez de usar imágenes, tablas o definir el formato en el HTML, porque los contenidos estarán disponibles para más usuarios, especialmente para los que no utilizan dispositivos estándares para acceder a la web. Con CSS podemos manejar sangrías, espaciados entre palabras y letras, alineación del texto; podemos controlar la posición visual de los elementos en una página independientemente del lugar en que se encuentren dentro del documento, donde el orden debe responder al lugar que ocuparían sin hoja de estilos, con ella se puede hacer cualquier tipo de diseño visual.
Además, el uso de hojas de estilo permite a los usuarios definir la propia por intermedio de facilidades que ofrecen los navegadores de imponerlas por sobre las del autor, y así tener control total sobre contrastes o tamaños para navegar los sitios con comodidad de acuerdo a sus necesidades.
Un ejemplo de la diferencia de dar el formato en el HTML:
<div align="center"><h1>Titulo 1</h1></div>
Y con hojas de estilo:
h1 { text-align: center;}
Para mayor información sobre el uso de hojas de estilo visite nuestro manual de CSS
Otro ítem importante es el uso de medidas relativas (em o %) en lugar de absolutas (px o cm) para definir los elementos y posiciones, así el usuario pueda modificar el tamaño de la página sin que pierda su formato.
Por ejemplo, en vez de utilizar:
h1 { font-size: 11px; }
Usamos:
h1 { font-size: 0.69em; }
Aquí hay un conversor de píxeles a ems online: Em Calculator.
Para usuarios de Mac, este es un widget muy útil, que, entre otras bondades útiles e interesantes, tiene un conversor de medidas para web: Designers Toolbox.
Debemos utilizar los tags de manera que cumplan la función para la que fueron creados y no para dar formato al documento porque dificultaremos la comprensión del contenido a las personas que no puedan verlo. El formato del documento se lo daremos con las hojas de estilo.
Lo más común es utilizar los tag h1, h2, etc. para resaltar una palabra cuando deberían usarse para marcar título, subtítulos, etc. o marcar citas (q o blockquote) para generar sangrías.
Ejemplo erróneo:
<h4>El río más ancho del mundo es el Río de la Plata </h4>
Ejemplo correcto:
<strong>El río más ancho del mundo es el Río de la Plata</strong>
Específicamente los elementos de encabezado, deben guardar un orden lógico (primero h1, después h2, luego h3, y así sucesivamente), no debemos saltar ninguno de los niveles ni poner más de un h1 por página. Recuerda que no está bien utilizar los encabezados para crear efectos de diseño.
Un buen uso de las etiquetas para encabezamientos sería:
<h1>Título del libro</h1>
<h2>Título del capítulo</h2>
<h3>Título de la sección</h3>
Respecto a los tags para citas, q se utiliza para citas cortas y es un elemento inline y blockquote anida las citas en bloque y diferencia un párrafo común de uno que contiene citas, indentando los textos que contiene, efecto que puede controlarse con CSS.
Los elementos estructurales tales como títulos, subtítulos, párrafos y citas deben estar marcados correctamente para que las personas que utilizan lectores de voz puedan ir saltando de marcador en marcador a través de la página.
Es importante estructurar correctamente los elementos de listado (dl, ul y ol) y obviamente, no utilizarlos para generar efectos de diseño, sino para crear listas.
Las personas ciegas podrían desorientarse con listas que no especifican el nivel de anidamiento de cada ítem (lo ideal es hacerlo con números compuestos: 1, 1.1, 1.1.1), también les es más fácil navegar por listas ordenadas que por aquellas no numeradas, especialmente si están anidadas, para estos casos los desarrolladores deberían implementar algún tipo de pista contextual.
Con hojas de estilo podemos modificar totalmente la manera en que se muestran, y controlar el estilo de números o viñetas.
Volver a Manuales de diseño - Identificar el idioma >
Servicios Adicionales
Creación y diseño de páginas web con las mejores calidades y tarifas de diseño web desde 49€ en sólo 12 pagos.
Plan de alojamiento web desde sólo 2,9€/mes.
Registro de dominios desde sólo 6,95€/año.
Posicionamiento de páginas web en las primeras posiciones desde 35€ mensuales.
Diseño de logotipos profesional para su empresa desde 19€ en sólo 12 pagos.
Suscríbete al boletín
Teléfonos de Atención al Cliente: 902 006 005 / 968 950 604 - E-mail: info@serviweb.es
*Los precios no incluyen IVA - Copyright Consultoría y Desarrollo Serviweb S.L.
Especializados en Diseño Web y Posicionamiento Web
CONTRATAR