{"id":341,"date":"2007-01-26T16:57:07","date_gmt":"2007-01-26T15:57:07","guid":{"rendered":"http:\/\/www.webposible.com\/blog\/?p=341"},"modified":"2020-02-06T16:12:22","modified_gmt":"2020-02-06T15:12:22","slug":"consejos-practicos-de-accesibilidad-web","status":"publish","type":"post","link":"http:\/\/www.webposible.com\/blog\/2007\/consejos-practicos-de-accesibilidad-web\/","title":{"rendered":"Consejos pr\u00e1cticos de accesibilidad web"},"content":{"rendered":"<p>Uno de esos art\u00edculos que me gustar\u00eda escribir pero nunca empiezo, ya sea por falta de tiempo, de una correcta planificaci\u00f3n de la estructura y el contenido, o porque existen art\u00edculos fant\u00e1sticos en internet, es uno sobre accesibilidad web. Mi idea se basa en un texto que parte desde un punto de vista pr\u00e1ctico, empleando las pautas, pero sin ser una lista. El problema es que ya hay mucho escrito y muy bueno. Aqu\u00ed os dejo un ejemplo <ins datetime=\"2017-12-11\">extra\u00eddo en origen del siguiente art\u00edculo: <em xml:lang=\"en\">Practical, Entry-Level Web Accessibility<\/em><em> de <\/em><em xml:lang=\"en\">Mike Cherim<\/em>, aunque ya no est\u00e1 disponible<\/ins>. <del datetime=\"2017-12-11\"><a lang=\"en\" hreflang=\"en\" href=\"https:\/\/www.mavenecommerce.com\/blog\/\">Practical, Entry-Level Web Accessibility<\/a>, de <a lang=\"en\" hreflang=\"en\" href=\"https:\/\/www.mavenecommerce.com\/blog\/#mike\">Mike Cherim<\/a><\/del><\/p>\n<p>Es un art\u00edculo bastante completo, y os recomiendo su lectura. pero me gustar\u00eda destacar el apartado del uso apropiado de los v\u00ednculos. Sus consejos son los siguientes (no se trata de una traducci\u00f3n literal, e incluyo opiniones y explicaciones m\u00edas):<\/p>\n<ul>\n<li>No usar el mismo texto para v\u00ednculos que tienen diferentes destinos (del tipo leer m\u00e1s, m\u00e1s informaci\u00f3n,&#8230;). \u00bfMotivos? Existen navegadores que muestran un listado con todos los v\u00ednculos de una p\u00e1gina. \u00bfTiene sentido que nos encontremos con diez v\u00ednculos con el mismo texto y diferentes destinos? Evidentemente no. Y en el punto siguiente hay m\u00e1s que a\u00f1adir.<\/li>\n<li>Usar un texto para el v\u00ednculo que sea descriptivo con su destino. Los v\u00ednculos suelen ser \u00abfocos de atenci\u00f3n\u00bb, y en el caso de que no se haga una lectura completa, puede que al ojear uno de ellos nos llame la atenci\u00f3n, pero no sepamos a donde nos lleva. Esto nos obliga a leer el contexto para ver de qu\u00e9 se trata. El tan mencionado \u00abno uses <em>haga click aqu\u00ed<\/em>\u00bb que aparece en las pautas de accesibilidad web es por algo. Suele ser una costumbre en los bloggers el usar en una frase (como por ejemplo: \u00abcomo ya han dicho otros\u00bb), un v\u00ednculo para cada palabra. Esos textos de v\u00ednculos \u00abcomo\u00bb, \u00abya\u00bb, \u00abhan\u00bb, \u00abdicho\u00bb y \u00abotros\u00bb, le\u00eddos de forma individual no nos dice nada sobre su destino. S\u00ed podemos usar la barra de estado para ver su destino, pero no es correcto (aunque a veces queda muy gracioso, je je \ud83d\ude42 )<\/li>\n<li>Separa los v\u00ednculos para que no aparezcan de forma consecutiva. \u00bfPor qu\u00e9? Porque a veces cuesta distinguir donde empieza un v\u00ednculo y donde termina otro. En el caso de que incluyas varios v\u00ednculos en una frase, intenta redactarla de forma que haya separaci\u00f3n entre los v\u00ednculos, ya sea una coma, o alguna palabra. En el caso concreto de los men\u00fas horizontales (ya sea utilizando listas o como una serie de v\u00ednculos separados por m\u00e1s o menos espacios), conviene tambi\u00e9n utilizar al menos un car\u00e1cter imprimible de separaci\u00f3n. El problema es cu\u00e1l utilizar&#8230; s\u00edmbolos como \u00ab|\u00bb, \u00ab\u00b7\u00bb, \u00ab#\u00bb, podr\u00edan ser v\u00e1lidos, pero al usar un lector de pantalla puede resultar bastante molesto. Pero utilizando estilos, podemos indicar que no los oculte a los lectores de pantalla (luego falta que hagan caso, y aqu\u00ed hay un problema).<\/li>\n<li>Identifica los v\u00ednculos, para distinguirlos adecuadamente. No tiene porqu\u00e9 ser el subrayado azul por defecto, pero no es mala idea subrayarlos (s\u00f3lo los v\u00ednculos) y\/o utilizar un color distinto (atenci\u00f3n a los problemas que puedan tener las personas con daltonismo).<\/li>\n<li>Por \u00faltimo tambi\u00e9n recomiendan un cambio en el aspecto del v\u00ednculo cuando tiene el foco (ya sea con el tabulador, o al pasar el rat\u00f3n por encima). Nada mejor que usar las pseudo-clases active y hover para cambiar el color, el fondo, el subrayado&#8230;<\/li>\n<\/ul>\n<p>Mucho m\u00e1s, y sobre todo mucho mejor, <ins datetime=\"2017-12-11\">estaba disponible en <em xml:lang=\"en\">Practical, Entry-Level Web Accessibility<\/em><em><\/em><\/ins>. <del datetime=\"2017-12-11\"><a lang=\"en\" hreflang=\"en\" href=\"https:\/\/www.mavenecommerce.com\/blog\/\">Practical, Entry-Level Web Accessibility<\/a>.<\/del><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Uno de esos art\u00edculos que me gustar\u00eda escribir pero nunca empiezo, ya sea por falta de tiempo, de una correcta planificaci\u00f3n de la estructura y el contenido, o porque existen art\u00edculos fant\u00e1sticos en internet, es uno sobre accesibilidad web. Mi idea se basa en un texto que parte desde un punto de vista pr\u00e1ctico, empleando [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-341","post","type-post","status-publish","format-standard","hentry","category-accesibilidad"],"_links":{"self":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts\/341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/comments?post=341"}],"version-history":[{"count":4,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts\/341\/revisions"}],"predecessor-version":[{"id":1155,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts\/341\/revisions\/1155"}],"wp:attachment":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/media?parent=341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/categories?post=341"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/tags?post=341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}