diseño web en ciudad del carmen
4.1.1 Imágenes utilizadas como viñetas
Puntos de verificación en esta sección:
1.1 Proporcione un texto equivalente para todo elemento no textual (por ejemplo, a través de “alt”, “longdesc” o en el contenido del elemento). Esto incluye: imágenes, representaciones gráficas del texto, mapas de diseño web en ciudad del carmen imagen, animaciones (por ejemplo, GIFs animados), “applets” y objetos programados, “ascii art”, marcos, scripts, imágenes usadas como viñetas en las listas, espaciadores, botones gráficos, sonidos (ejecutados con o sin interacción del usuario), archivos exclusivamente auditivos, banda sonora del vídeo y vídeos. [Prioridad 1] Evite el uso de imágenes como viñetas de listados de definiciones creadas con DL, DT, and DD. No obstante si usa este método, asegúrese de proporcionar un texto equivalente para las imágenes. Ejemplo desaconsejado diseño web en ciudad del carmen
<HEAD>
TITLE>Ejemplo desaconsejado que usa imágenes en listas DL</TITLE>
</HEAD>
<BODY>
<DD>IMG src=”estrella.gif” alt=”* “>Audrey
<DD><IMG src=”estrella.gif” alt=”* “>Laura <DD>
<IMG src=”estrella.gif” alt=”* “>Alicia </DL>
Los desarrolladores de contenido deberían evitar los estilos de lista donde las viñetas proporcionen información (visual) adicional. No obstante, si se hace, asegúrese de proporcionar un texto equivalente que describa el significado de la viñeta: Ejemplo desaconsejado
<DL> <DD><IMG src=”rojo.gif” alt=”Nuevo:”>Fondo de pensiones Roth</DD> <DD><IMG src=”amarillo.gif” alt=”Antiguo:”>Fondo 401(k)</DD> </DL>
Ejemplo
<HEAD> <TITLE>Uso de hojas de estilo para cambiar viñetas</TITLE> <STYLE type=”text/css”> UL { list-style: url(estrella.gif) disc } </STYLE> </HEAD> <BODY> <LI>Audrey <LI>Laura <LI>Alicia </UL>
Para asegurar más aún que los usuarios comprenden las diferencias entre los ítems de la lista indicados visualmente, los desarrolladores de contenido deberían proporcionar una etiqueta de texto antes o después de la frase del ítem de la lista: Ejemplo En este ejemplo, la nueva información es comunicada a través del texto (“Nuevo”), estilo de fuente (negrita) y el color (viñeta amarilla, texto rojo sobre fondo amarillo).
<HEAD> <TITLE>Ejemplo de estilo de viñetas</TITLE> <STYLE type=”text/css”> .txtnuevo { font-weight: bold; color: red; background-color: yellow } .balanuevo { list-style : url(amarillo.gif) disc } </STYLE> </HEAD> <BODY> <LI class=”balanuevo”>Fondo de pensiones Roth <SPAN class=”txtnuevo”>Nuevo</SPAN></LI> <LI> 401(k)</LI> </BODY>diseño web en Campeche