Como hago mi web accesible para daltonicos

Gracias a una pregunta de forosdelweb, llegue a esta inquietud que me recordó la asignatura de Orietación Gráfica en mi época universitaria.


¿Como diseñar para todas las personas? Incluyendo en este caso a los daltonicos, pero en la web. Esta fue mi respuesta:

Una web accesible e incluyente debes 100pre de probarla con altos niveles de contraste
, no hay una herramienta que te permita transformar automaticamente de lo actual a lo accesible, debiste de hacerla desde un principio teniendo esto en mente
, ahora no es que no haya una solución, pero no es fácil ya que prácticamente tendrás que hacer cambios fáciles y sutiles, pero puede que sean muchos. El procedimiento sería:

1. Puedes usar filtros css y colocarle una clase al body: -webkit-filter: grayscale(1);, esto coloca tu website en blanco y negro (incluyendo imágenes) lo que te permite evaluar el contraste entre textos y fondo e imágenes. También puedes
   hacerlo con photoshop si quieres.
2. Haz los cambios que fortalezcan los contrastes y fíjate mucho en las imágenes, también podrías mirar los contrastes usando : -webkit-filter: contrast(3) comienza desde el valor 0 y ves subiendo desde el 3.
3. Eso es todo, son cambios manuales, pero también puedes crear un boton que configure esas cosas, como por ejemplo cambios en los colores principales y secundarios.

Otras cuestiones son en cuanto a diseño, es decir, los siguientes consejos y recomendaciones:

1. No usar imágenes de fondo en cajas de texto, úsalas si son fondos planos o imagenes muy desenfocadas, pero es mejor que no.
2. Usa fondos blancos (o escalas de grises muy claros) para elementos donde prime la lectura (ej: articulos) y los enlaces inline o en parrafos debes resaltarlos con algo más que el color. (negrita, bordes, mayuscula,
   otra fuente, etc)
3. Los botones (enlaces, submit, buttons) con fondo oscuro y letras blancas.
4. No uses negro 100% puro en las letras, pero sí un gris oscuro, no uses texto de colores en párrafos largos.
5. No uses más de 2 colores en la paleta cromática, usa uno con versiones tonales (EJ: verde, verde claro, verde oscuro) y un color complementario al principal, para resaltar cosas (como los enlaces).

Como te digo, debiste pensar en esto desde el principio, porque si no es prácticamente rehacer todo, otra opción es añadir un boton de "activar alto contraste"
, daltonic friendly
 o "Ayuda para Daltonicos"
, en la cual solo cuando se haga clic en el botón se vean los cambios que recomiendo. Espero te ayude, Éxitos.

Este es el link para ir al foro:
http://www.forosdelweb.com/f91/usabilidad-para-personas-con-daltonismo-1146109/

Cambios en el paradigma de diseño web

Esta presentación si desarrollas web, te cambiara la vida

https://docs.google.com/presentation/d/1CNQLbqC0krocy_fZrM5fZ-YmQ2JgEADRh3qR6RbOOGk/preview#slide=id.g3336a6aae_0304

Como crear un Menu Arbol G3K o Tree Menu solo con CSS3 y nada de Javascript

Resumen: Uso de la etiqueta :checked y una sola linea de CSS3 para crear una estructura de Menu Arbol solida sin una pizca de javascript (no tan retrocompatible) para la web y dispositivos móviles. Using tag :checked and one line of code CSS3 to build a tree menu structure without js (but not usefull in ie8 or less) for the web and movile. 

Ver Demo 

CROSS-BROWSING

Para hacer pruebas de diseño y responsive design, nada mejor que emular los distintos navegadores y sus versiones, para ello, utilizo las siguientes 2 herramientas online.

http://spoon.net/browsers/ <-- No posee internet explorer, pero es para testeos rapidos
http://browsershots.org/ <-- Sirve para linux y es muy completo.

Efectos de intercambio de imágenes por acciones del click con solo HMTL

Hace poco descubrí que existía una manera con solo atributos HTML para hacer efectos para las imágenes, no puedo decir que sean anticuados, pero no esta más conocerlos:

onmouseover="this.src='01.png';" Cuando uno se posa encima de la imagen

onmouseout="this.src='00.png';" Cuando se Aleja el mouse  

Con esta simple estructura que se agregara a la etiqueta <img> se logra el tan querido efecto hover, no olvidemos 2 cosas: 

1. Después del evento debe ir la sintaxis: this.src='URL'

2. La idea es volver al estado inicial y esto no lo hace automaticamente por lo que es bueno agregar el evento onmouseout

No quiere decir que sean los únicos atributos que se puede usar ya que hay bastantes como experimentar.

ondblclick="this.src='04.png';" Cuando se hace doble clic a la imagen
onclick="this.src='03.png';" Cuando se hace clic
onmousedown="this.src='02.png';" Cuando se hace click a la imagen


Para poder ver un ejemplo en funcionamiento les regalo el código, que utilice para emplear este evento.

<img src="http://midominio.co/imagenes/imagen-boton.png" 
onmouseover="this.src='http://midominio.co/imagenes/imagen-boton-hover.png';" onmouseout="this.src='http://midominio.co/imagenes/imagen-boton.png';" 
height="120" width="160" style="display: block; margin-left: auto; margin-right: auto; padding-top: 10px;"/>

Este tipo de sustitución de imágenes, lograrlas con css o algún lenguaje frontend (jquery en mi caso) es la mejor opción, ya que el cambio lo podemos hacer dinamicamente, sin embargo, en caso de que estemos limitados a no poder hacer uso de archivos externos o scripts, puede ser la mejor opción. Un ejemplo concreto puede ser en Aulas Virtuales como Moodle, donde los docentes editores estan limitados, de esta forma con solo estudiar un poco el código anterior, en la opción de edición "html" pueden crear efectos "hover" muy sencillos.

Scrollbar

De esta forma se puede cambiar el estilo a la barra de desplazamiento.

Inspiración y fuente:

http://cssdeck.com/labs/css3-webkit-vertical-scrollbars

Formularios

Aplicando estilos a los placeholder en los input:

chrome	input::-webkit-input-placeholder{    color:red; }
mozzila	input:-moz-input-placeholder{    color: red; }
Microsoft	input:-ms-input-placeholder{    color: red; }

Este dato me fue revelado por: http://www.csslab.cl/2013/10/23/dando-estilos-a-placeholder/