Usabilidad y accesibilidad: 10 errores que nunca debes cometer

Con el tiempo, algunas convenciones y las mejores prácticas han sido desarrolladas para ayudar a mejorar la usabilidad general de los sitios web en su diseño y construcción.

Aquí les dejamos diez delitos de usabilidad y algunos de los errores más comunes o áreas pasadas por alto en el diseño web. También una solución alternativa para ayudar a mejorar la usabilidad de tu sitio.

Crimen 1: Etiquetas de formulario que no están asociados a los campos de formulario de entrada

Utilizar el atributo ‘for’ le permite al usuario hacer clic en la etiqueta para seleccionar el campo de entrada apropiado dentro de un formulario. Esto es especialmente importante para los checkboxes y campos de radio para dar un área de “cliqueo” más grande; es una buena práctica.

Crimen 2: un logotipo que no está asociado a la página principal

Vincular el logo de un sitio web a la página principal se ha convertido en una práctica común y la mayoría de los que navegan la web están acostumbrados a hacer clic en el logo para volver al inicio. También vale la pena mencionar que el logo debe aparecer en la parte superior izquierda.

Crimen 3: No especificar un estado de vínculo visitado

Los Estados de vínculos visitados hacen exactamente lo que su nombre indica. No es el selector CSS más avanzado, pero es uno que a menudo se pasa por alto. Dar a los usuarios una pista visual, para que sepan qué enlaces ya han sido visitados.

Crimen 4: No indicar un campo de formulario activo

Puedes utilizar el selector “Focus”en muchos de los elementos, pero es muy útil cuando se utiliza en las entradas y áreas de texto para indicar que el campo está activo. Añadan estilo CSS, como los bordes resaltados, o un sutil cambio en el color de fondo..

Crimen 5: Una imagen sin una descripción alt

Esta es alejarse un poco del ámbito de la accesibilidad, pero sigue siendo una consideración importante. Recuerden que siempre debe añadir un atributo “alt” descriptivo a sus imágenes, a menos que, por supuesto, se utilicen para fines decorativos, en estos casos el atributo ALT se puede dejar vacío (pero aún debe existir). Al utilizar una imagen como un vínculo, escriba una descripción del lugar donde va el enlace.

Crimen 6: Una imagen de fondo, sin un color de fondo

Es común el uso de imágenes de fondo detrás de los pasajes de texto, pero vale la pena recordar que si las imágenes de fondo son deshabilitadas por el usuario, tiene que haber un tono similar en el color de fondo del formulario para evitar que el texto sea ilegible.

Crimen 7: Uso de largos pasajes aburridos de contenido

No hay nada más desalentador que caer en una página web que está prevista como un paso continúo de texto. Dividan su contenido con imágenes, títulos y secciones claras para hacer más fácil de buscar, leer y digerir.

Crimen 8: Cosas subrayadas que no son enlaces

Todo el mundo sabe que el texto que está subrayado o es de un color diferente, es probable que sea un enlace. No confundan a la gente poniendo texto subrayado en otra parte! Para llamar la atención sobre una determinada palabra, intenten utilizar la negrita o usen la etiqueta em para dar énfasis.

Crimen 9: Decirle a la gente que “haga clic aquí”

Las palabras, “hagan clic aquí” han existido desde los inicios de Internet, pero han sido rechazadas en favor de opciones más útiles. El uso de las palabras, “haga clic aquí” requiere que el usuario lea la frase completa para saber qué va a suceder. En su lugar, describan lo que va a suceder en el texto verdadero del link.

Crimen 10: La utilización de texto justificado

Este es otro consejo que va un poco más allá de la accesibilidad, pero también es un punto importante a considerar. El texto justificado puede lucir limpio a la vista, pero puede generar algunos problemas de legibilidad real, especialmente para los usuarios disléxicos que pueden encontrarlo molesto para identificar palabras debido a la separación desigual de los párrafos justificados.

Fuente: Line 25


0 comentarios to "Usabilidad y accesibilidad: 10 errores que nunca debes cometer"

Publicar un comentario en la entrada

Blog Archivo

Subscribete via E-Mail

Subscribete via RSS!

Ingresa tu email para:
Recibe actualizaciones del Blog.

Etiquetas

16-bit 2.0 2012 256 colores 2d 3 404 5 8 acelerar Acer Aspire ActionScript ADD-ONS addon adobe adobe air Adsense aerogarden agilidad airbender AJAX alarma alien all your base alta definición Android angulacion answers API APIs aplicacion aplicaciones Apple apps archive Argentina ask atajo atajos de teclado ataque audio avance avatar aventura grafica back background backtweets balsamiq mockups banda bang banners barcelona barra lateral bases de datos Batacazo bateria bbcode bear bebé Biblioteca Virtual big bing BitDefender BitTorrent blekko Blog blogger bloggers blogósfera Blogs bocetos bollywood bordes botánica brickify brush buenos aires buscador búsqueda avanzada cache caja calendario calidad cámara web canciones Canvas carrusel catástrofe ceguera de banners celular CEO charla chpimunk chrome chrome web store chromium chuck norris cine Cisco cita cliente ftp cloud cluster Cms cocina codec código coleccion color colorotate columna comercio commodore 64 compatibilidad Competencia compositio Comscore comunicacion Comunidad comunidad online Conferencia configuración consejos contenido content copia correo correo electrónico cotidiano cpanel Creatividad criminal cross-browser cse CSS CSS3 cubo cuenta cuentos cultivo Curiosidades curso photoshop Cursos daisies date Debian degradé dell desaparecer desarrollo web descarga Descargas descomprimir desfragmentar despertador despertar deviantart DHTML Digg diseñador Diseño Diseño Grafico Diseño Gráfico diseño web Disney dispositivo dispositivos moviles dispositivos táctiles div dominio dramatic dropbox duck go e-book e-commerce e-commerce day e-mail EBE ecología editor educación a distancia educativo Educativos Niños efecto efectos ejemplo emblema emprendimiento emulador emuladores encabezados encuesta enlace episodios error escritura España estadística Estados Unidos estilo estudio etica evento Eventos Excel exportar extensión extensiones extraterrestre Facebook facebook connect garage fc64 feeds Fiberparty film Filosofía Firebug firefinder Firefox firmware fixes Flash flex 4 Flickr fondo fondos font font dragr form formularios foto Fotografía Framework freelance fuente fuentes future FXG g1 gadget gadgets games gaming gazelle geek gestion gestor de contenido gestos gestuales gesture ghajini gm730 Gmail Google google analytics google app Google Calendar Google Chrome Google Docs gradient gradiente gradientes gráfico gran torino gratis groupon guerra guia h.264 habla hack Hackers handle handler hardware herramientas gráficas hitchcock hollywood homepage horizontal hover HP html HTML válido HTML5 HTTP hub huerta IBM icono IE illustrator imagen Imagenes imágenes importar impress inclinacion indio infecciones info-box infografías iniciador Inkscape inspiracion interactivo interfaz Internet Internet Explorer interno invasión investigación iPhone iphone os iPod island istick IT iTunes U jackson JavaScript jerarquía jetpack jQuery jQuery TOOLS jsc64 juego Juegos lanzamiento laptop lego lenguaje Lenovo Lg libre librería libro limpieza Links Linux literatura lógica logo logos logotipo lolcat Lotería love luca lucasarts luces luminoso luz Mac mac book pro mac os x MacBook macro mago Malware manejo mantenimiento manual mapa mapeo maquetación marciano Marketing mascara mascota McBook medicion medio ambiente meme memoria mente menú metafilter metropolis michael microsoft Mobile Learning mockup monkey moonwalker mootools moousture motivacional motor de busqueda motores de búsqueda mouse mouseprobe mov movil mozilla Mozilla Firefox Mozilla Labs mp3 MS Office mujer maravilla multimedia MultiTouch música MXML MySpace MySql N97 napkee navegación Navegador navegadores networking New York nightly nihilogic no ser encontrado nodos Nokia notebook noticias Novedades ochentoso oferta offers oficial online Open Source Open SUSE OpenOffice opera operativo oportunidad optimización orden organizacion orgullo os oscurecer oscuridad oso Outlook oz page speed PageRank pagespeed pageviews panaderia Panda paneles pantalla pantallas táctiles parasitos PDF peekfeed película pencil peoplebrowsr perfil pestaña photoshop photoshop clase 2 PHP php 5 Picasa picker pinceles pingie piratas pirates plagio plantación plantar plantilla plastic logic Plugin plugins pocket yoga podcasts port portal portátil posicionamiento powerpoint ppc prejuicio preparacion presentación Productividad Programación programas promocion protofish prototype proyecto prueba PSD Psicología public Publicidad puerto QEMU quickoffice quicktime quote rafael jimenez rank Recursos Red red social reddit Redes sociales reloj remake reproductor reseña resolución respaldo resultado retro robo rojo RSS rubik Ruby rust Safari Salud sans-serif sclipo script sculpting sdk seleccionador SEO serie serif SERP server servidor servidor web set shadow share sherlock shortcodes shuffle sidebar sidepost simple simpson Sin clasificar sistema sistema operativo sistemas operativos sitios web slideshow smart smooth SMS snow leopard social sociedad Software Software educativo software libre sombra sonido soundmanager2 spam spreadsheet SQL Squeeze startup steps left store streaming subdominio success suckerfish sun microsystems tablas table tabs tactil Taller de Fotografía Digital Taller de Photoshop taller photoshop Talleres Tarjetas de Crédito teaser tecnica Tecnologia teddy telefono television telltale template templates textbox the theme Themes theora thumbnails tienda time tipografía tipografias tips titulares to touchscreen tower defense trailer transform transition tres Troyano Troyanos truco Trucos tutorial photoshop tutoriales TV tweet tweetstats Twitter unplugged Usabilidad USB usuarios Utilidades para PC Utilidades para tu web variables vector vegetales velocidad venta Ventas verde verdura version video videojuego videojuegos videos Videos de Música Peruana viernes Viernes Unplugged VirtualBox Virus Visas VMware voucher w3c wallpaper wallpapers web Web 2.0 web participativa webcam WebKit webm webmaker Wi-Fi widescreen Wikipedia Windows Windows 7 Windows Mobile wiz wizard wolfram wonder woman Word Wordpress WorldBuilder wwdc 09 XHTML yahoo Youtube yui zip