{"id":1192,"date":"2024-07-12T00:00:00","date_gmt":"2024-07-11T22:00:00","guid":{"rendered":"https:\/\/programaraciegas.net\/?p=1192"},"modified":"2024-07-02T09:15:14","modified_gmt":"2024-07-02T07:15:14","slug":"uso-de-hints-en-las-interfaces-de-usuario","status":"publish","type":"post","link":"https:\/\/programaraciegas.net\/?p=1192","title":{"rendered":"Uso de hints en las interfaces de usuario"},"content":{"rendered":"

Al dise\u00f1ar una interfaz de usuario la mahyor parte del peso de comunicaci\u00f3n entre la interfaz y el usuario es a trav\u00e9s del canal visual. Mediante un vistazo a una pantalla se puede intuir c\u00f3mo utilizar ciertos elementos de la interfaz. Pero como no todas las personas tienen la misma capacidad de intuici\u00f3n ni la misma posibilidad de echar un vistazo a la pantalla debemos hacer uso de los distintos elementos de accesibilidad para hacer que la misma interfaz de usuario sea comprensible y usable para todas las personas.
A veces el uso de un control s\u00f3lo se puede entender de forma visual como puede ser un interruptor deslizante para seleccionar un elemento m\u00e1s a la izquierda o m\u00e1s a la derecha, un bot\u00f3n de 3 estados o un cuadro de edici\u00f3n auto completable que permite realizar ciertas operaciones mientras se edita ese campo. En todos esos casos las personas con discapacidad visual pueden encontrar problemas a la hora de entender c\u00f3mo utilizar dicho control. Para ayudar a este perfil de usuario la capa de accesibilidad permite incluir al control un texto de ayuda para entender c\u00f3mo utilizar el control. Es lo que se conoce como hint<\/strong> o pista.<\/p>\n

\u00bfQu\u00e9 son los Hints de Accesibilidad?<\/h2>\n

Los hints de accesibilidad son textos adicionales que proporcionan informaci\u00f3n contextual sobre un control de interfaz. Para los usuarios de lectores de pantalla. Estos hints pueden ser la diferencia entre una experiencia fluida y una frustrante. Por ejemplo, en una aplicaci\u00f3n de banca m\u00f3vil, un bot\u00f3n que simplemente dice \u00abEnviar\u00bb podr\u00eda no ser suficiente. Un hint podr\u00eda agregar: \u00abEnviar transferencia bancaria\u00bb, proporcionando un contexto claro y espec\u00edfico.
Otro ejemplo podr\u00eda ser un bot\u00f3n de tres estados cuyo hint podr\u00eda indicar \u00abpulse este bot\u00f3n para cambiar entre aceptado, pendiente y rechazado para actualizar el estado del pedido\u00bb.<\/p>\n

Implementaci\u00f3n de Hints en Diferentes Plataformas<\/h2>\n

iOS<\/h3>\n

En iOS, los hints de accesibilidad se implementan utilizando el atributo accessibilityHint<\/strong>. Este atributo permite a los desarrolladores definir una cadena de texto que ser\u00e1 le\u00edda por VoiceOver, el lector de pantallas de Apple, al final de toda la informaci\u00f3n del control.<\/p>\n

Por ejemplo, un bot\u00f3n que tiene un icono de l\u00e1piz para editar puede no ser claro para todos los usuarios, pero al a\u00f1adir un AccessibilitHint con el valor \u00abPulsa dos veces para modificar el valor de este campo\u00bb\u201d, se proporciona la informaci\u00f3n necesaria para el usuario.<\/p>\n

Android<\/h3>\n

En Android, los hints de accesibilidad se consiguen con el atributo android:hint en el fichero XML de la actividad. Este hint proporciona una descripci\u00f3n de lo que un control hace o lo que se espera que el usuario haga con \u00e9l. Por ejemplo, un campo de entrada de texto puede tener un hint como \u201cIntroduce tu nombre completo\u201d, lo cual es le\u00eddo por TalkBack (el lector de pantalla de Android) para guiar al usuario.<\/p>\n

HTML<\/h3>\n

En HTML, los hints se implementan con los atributos aria-description<\/strong> y aria-describedby<\/strong>.<\/p>\n

El atributo aria-description proporciona una descripci\u00f3n directa del elemento, mientras que aria-describedby hace referencia a otro elemento en la p\u00e1gina que contiene una descripci\u00f3n m\u00e1s detallada. Por ejemplo, un bot\u00f3n de b\u00fasqueda podr\u00eda tener un aria-description=\u00bbUse este bot\u00f3n para buscar en todo el sitio web\u00bb, y aria-describedby podr\u00eda apuntar a un p\u00e1rrafo cercano al campo de b\u00fasqueda que explique c\u00f3mo funciona la b\u00fasqueda en el sitio web.<\/p>\n

Importancia de los Hints en la Accesibilidad<\/h2>\n

Estos atributos impactan en la accesibilidad de la interfaz de la siguiente forma:<\/p>\n

    \n
  1. Claridad y Contexto: Los hints proporcionan informaci\u00f3n adicional que ayuda a los usuarios a entender la funci\u00f3n de un control. Esto es especialmente importante para controles que solo tienen iconos o textos ambiguos.<\/li>\n
  2. Mejora de la Usabilidad: Al proporcionar instrucciones claras sobre c\u00f3mo utilizar un control, se mejora la usabilidad de la aplicaci\u00f3n o sitio web, haciendo que la experiencia sea m\u00e1s intuitiva y menos frustrante para los usuarios con discapacidades visuales.<\/li>\n
  3. Inclusi\u00f3n: Al implementar hints de accesibilidad, los desarrolladores est\u00e1n tomando pasos activos hacia la inclusi\u00f3n digital, asegur\u00e1ndose de que sus productos sean utilizables por el mayor n\u00famero posible de personas.<\/li>\n<\/ol>\n

    Problemas Comunes con los Hints<\/h2>\n

    A pesar de su importancia, los hints de accesibilidad no est\u00e1n exentos de problemas. Algunos de los desaf\u00edos m\u00e1s comunes incluyen:<\/p>\n

      \n
    1. Hints Redundantes: A veces, los desarrolladores a\u00f1aden hints que repiten informaci\u00f3n que ya est\u00e1 clara en el contexto visual, lo que puede resultar en una sobrecarga de informaci\u00f3n para el usuario de un lector de pantalla. Por ejemplo, un bot\u00f3n con un texto visible \u201cBuscar\u201d no necesita un hint adicional que diga \u201cBot\u00f3n de b\u00fasqueda\u201d.<\/li>\n
    2. Falta de Actualizaci\u00f3n: Los hints pueden volverse obsoletos si no se actualizan junto con cambios en la interfaz. Esto puede llevar a confusi\u00f3n si un hint describe una funcionalidad que ya no existe o que ha cambiado.<\/li>\n
    3. Hints Incompletos: No proporcionar suficiente informaci\u00f3n es otro problema. Un hint demasiado breve puede no dar el contexto necesario. Por ejemplo, un hint que solo dice \u201cEnviar\u201d sin m\u00e1s detalles podr\u00eda no ser \u00fatil en una aplicaci\u00f3n con m\u00faltiples funcionalidades de env\u00edo.<\/li>\n
    4. Uso Incorrecto de los Atributos: En HTML, confundir aria-description con aria-describedby puede llevar a que los usuarios de lectores de pantalla no reciban la informaci\u00f3n adecuada. Es crucial usar cada atributo de forma correcta para asegurarse de que la informaci\u00f3n se transmite adecuadamente.<\/li>\n
    5. Problemas de personalizaci\u00f3n del lector de pantallas: algunos usuarios ciegos deshabilitan la lectura de estos elementos para dar mayor agilidad a su experiencia de uso. Esto implica que en el hint s\u00f3lo se debe incluir la informaci\u00f3n relacionada con el control para evitar que el usuario pierda informaci\u00f3n vital de otra parte de la interfaz.<\/li>\n<\/ol>\n

      Buenas Pr\u00e1cticas para el Uso de Hints<\/h2>\n

      Para maximizar la efectividad de los hints de accesibilidad, es importante seguir algunas buenas pr\u00e1cticas:<\/p>\n

        \n
      1. Ser Claro y Conciso: Proporcionar descripciones claras y directas que sean f\u00e1ciles de entender. Evitar la jerga t\u00e9cnica y centrarse en el prop\u00f3sito del control.<\/li>\n
      2. Actualizar Regularmente: Asegurarse de que los hints se actualizan junto con cualquier cambio en la interfaz de usuario para evitar descripciones obsoletas.<\/li>\n
      3. Consistencia: Mantener una terminolog\u00eda y un estilo consistentes en todos los hints para evitar confusi\u00f3n.<\/li>\n
      4. Seguir los estilos definidos en la gu\u00eda de interfaces del fabricante: Apple y Google tienen recomendaciones sobre el estilo de lenguaje a emplear en los hints.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

        Al dise\u00f1ar una interfaz de usuario la mahyor parte del peso de comunicaci\u00f3n entre la interfaz y el usuario es a trav\u00e9s del canal visual. Mediante un vistazo a una pantalla se puede intuir c\u00f3mo utilizar ciertos elementos de la interfaz. Pero como no todas las personas tienen la misma capacidad de intuici\u00f3n ni la … <\/p>\n

        Continuar leyendo \u00abUso de hints en las interfaces de usuario\u00bb<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,5,8],"tags":[11,483,388],"class_list":["post-1192","post","type-post","status-publish","format-standard","hentry","category-accesibilidad","category-diseno","category-metodologiafilosofia","tag-accesibilidad-2","tag-hint","tag-teoria"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/1192","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=1192"}],"version-history":[{"count":0,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/1192\/revisions"}],"wp:attachment":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}