{"id":116,"date":"2011-07-27T21:50:01","date_gmt":"2011-07-27T20:50:01","guid":{"rendered":"http:\/\/www.tyflosaccessiblesoftware.com\/programaraciegas\/2011\/07\/27\/conceptos-basicos-de-accesibilidad-en-interfaces\/"},"modified":"2011-07-27T21:50:01","modified_gmt":"2011-07-27T20:50:01","slug":"conceptos-basicos-de-accesibilidad-en-interfaces","status":"publish","type":"post","link":"https:\/\/programaraciegas.net\/?p=116","title":{"rendered":"Conceptos b\u00e1sicos de accesibilidad en interfaces"},"content":{"rendered":"<p>Cualquier aplicaci\u00f3n, independientemente del lenguaje de programaci\u00f3n utilizado o plataforma para la que se destina la aplicaci\u00f3n, posee un interfaz gr\u00e1fico para el usuario. Este interfaz emplea una serie de controles que le permiten al usuario interactuar con la aplicaci\u00f3n, los datos gestionados por la misma y las diversas funciones que ofrece la aplicaci\u00f3n.<\/p>\n<p>En el dise\u00f1o de interfaces gr\u00e1ficas de usuario hay multitud de gu\u00edas, conceptos y tendencias. El problema es que la accesibilidad a\u00fan no es una norma obligatoria en ellas aunque existen leyes en pa\u00edses y regiones que solicitan que las interfaces de las aplicaciones incorporen caracter\u00edsticas de accesibilidad.<\/p>\n<p>En este art\u00edculo hablaremos de algunos conceptos b\u00e1sicos que podemos incorporar en nuestras interfaces gr\u00e1ficas para incrementar el nivel de accesibilidad de las mismas.<\/p>\n<h2>Identificaci\u00f3n de controles<\/h2>\n<p>Las interfaces gr\u00e1ficas, en su mayor\u00eda, presentan controles que permiten al usuario introducir, seleccionar o modificar informaci\u00f3n as\u00ed como activar funciones de la aplicaci\u00f3n. Estos controles son botones, cuadros de edici\u00f3n, listas de selecci\u00f3n, casillas de verificaci\u00f3n, etc.<\/p>\n<p>Un usuario necesita identificar para qu\u00e9 sirve cada control de la interfaz y qu\u00e9 informaci\u00f3n hay que introducir o seleccionar en cada caso. Para ello debemos proporcionar una etiqueta que, de forma visual, identifique la funcionalidad del control o la informaci\u00f3n que el usuario debe introducir. Esta identificaci\u00f3n debe hacerse, preferentemente, a trav\u00e9s de un texto ya que si utilizamos im\u00e1genes, estas pueden resultar confusas para el usuario (no todo el mundo interpreta de la misma manera los pictogramas) o resultar inaccesibles (no todos los usuarios pueden acceder a la informaci\u00f3n visual).<\/p>\n<p>La etiqueta debe estar en un sitio coherente con respecto al control. Lo m\u00e1s habitual, para los idiomas occidentales, es situar la etiqueta a la izquierda del control o arriba de este. De esta forma, el usuario puede asociar la etiqueta a su control.<\/p>\n<h2>Distribuci\u00f3n de los controles<\/h2>\n<p>Un interfaz gr\u00e1fico, al igual que un escrito o cualquier estructura de informaci\u00f3n, debe ofrecer una estructura o distribuci\u00f3n de los controles que resulte comprensible para el usuario. Por ejemplo, lo m\u00e1s habitual es presentar, por ejemplo, los datos de un contacto siguiendo el orden de nombre, apellidos, n\u00famero de tel\u00e9fono, correo electr\u00f3nico y direcci\u00f3n postal. Esta estructura es comprensible para la mayor\u00eda de usuarios y el orden de los campos es predecible para \u00e9l por lo que el usuario se siente c\u00f3mo a la hora de utilizar la aplicaci\u00f3n. Esto repercute en la <strong>experiencia de usuario<\/strong> de nuestra aplicaci\u00f3n.<\/p>\n<p>A la hora de dise\u00f1ar cada ventana o formulario de nuestra aplicaci\u00f3n debemos estudiar  la distribuci\u00f3n de los controles de forma global y relacional prestando especial atenci\u00f3n a que la presentaci\u00f3n resulte comprensible y conocida para el usuario final de nuestra aplicaci\u00f3n.<\/p>\n<h2>Sencillez de interfaz<\/h2>\n<p>Las interfaces gr\u00e1ficas m\u00e1s modernas persiguen la sencillez debido a varias razones: pantallas m\u00e1s peque\u00f1as, mejora de la <em>usabilidad<\/em> y <em>experiencia de usuario<\/em> y divisi\u00f3n de subinterfaces por funcionalidad. Para ello se han creado m\u00e9todos para mostar distintos niveles de informaci\u00f3n en una misma superficie. Para ello se utilizan pesta\u00f1as que nos permiten cambiar entre vistas de informaci\u00f3n o botones que muestran una nueva ventana de la aplicaci\u00f3n.<\/p>\n<p>Esta posibilidad de mostrar varias subinterfaces en nuestra aplicaci\u00f3n nos permite dise\u00f1ar nuestra interfaz general de forma que podamos definir subgrupos seg\u00fan funcionalidades o secciones de informaci\u00f3n. Todo esto persigue mostrar <strong>el m\u00ednimo n\u00famero de controles necesario por pantalla<\/strong>. Un usuario, sobre todo si es un nuevo usuario de una aplicaci\u00f3n, se mostrar\u00e1 confuso y desconfiado ante una interfaz con demasiados controles en pantalla. Una sensaci\u00f3n similar podemos experimentarla al observar el tablero de mandos de un helic\u00f3ptero o un avi\u00f3n antiguo, los cuales podemos observar en muchas pel\u00edculas de cine b\u00e9lico o de acci\u00f3n. Esas interfaces de veh\u00edculos complejos muestran, en poco espacio, multitud de relojes, botones, conmutadores y niveles que resultan incomprensible para alguien que no sepa pilotar dicho artilugio.<\/p>\n<p>Debemos vigilar no mostrar demasiados botones o campos de informaci\u00f3n en cada una de las ventanas de nuestra aplicaci\u00f3n. Dependiendo de la complejidad de la misma y el perfil de usuario a la que vaya dedicada nuestra aplicaci\u00f3n este n\u00famero m\u00e1ximo de controles oscilar\u00e1 entre 3 y 15 controles. Estos valores son orientativos, por supuesto.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cualquier aplicaci\u00f3n, independientemente del lenguaje de programaci\u00f3n utilizado o plataforma para la que se destina la aplicaci\u00f3n, posee un interfaz gr\u00e1fico para el usuario. Este interfaz emplea una serie de controles que le permiten al usuario interactuar con la aplicaci\u00f3n, los datos gestionados por la misma y las diversas funciones que ofrece la aplicaci\u00f3n. En &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/programaraciegas.net\/?p=116\" class=\"more-link\">Continuar leyendo<span class=\"screen-reader-text\"> \u00abConceptos b\u00e1sicos de accesibilidad en interfaces\u00bb<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-116","post","type-post","status-publish","format-standard","hentry","category-sin-categoria"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=116"}],"version-history":[{"count":0,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/116\/revisions"}],"wp:attachment":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}