{"id":1123,"date":"2023-11-24T00:00:00","date_gmt":"2023-11-23T23:00:00","guid":{"rendered":"https:\/\/programaraciegas.net\/?p=1123"},"modified":"2023-10-30T06:29:17","modified_gmt":"2023-10-30T05:29:17","slug":"agregar-descripciones-alternativas-en-las-imagenes-compartidas-por-slack","status":"publish","type":"post","link":"https:\/\/programaraciegas.net\/?p=1123","title":{"rendered":"Agregar descripciones alternativas en las im\u00e1genes compartidas por Slack"},"content":{"rendered":"

El compartir una imagen con un diagrama, una captura de pantalla o algo que nos llame la atenci\u00f3n es algo muy com\u00fan en Internet. Pero esta pr\u00e1ctica puede crear problemas de accesibilidad importantes ya que si la imagen no resulta accesible las personas que no puedan acceder a la informaci\u00f3n visual quedar\u00e1n fuera del mensaje.<\/p>\n

Este problema es a\u00fan m\u00e1s grabe cuando el hecho de una imagen sin accesibilidad aparece en una herramienta de comunicaci\u00f3n en el trabajo como es el cliente de mensajer\u00eda instant\u00e1nea Slack<\/a>.<\/p>\n

Para hacer que una imagen sea accesible es necesario que dicha imagen posea una descripci\u00f3n alternativa<\/strong> en texto.<\/p>\n

Para escribir una buena descripci\u00f3n alternativa para una imagen hay muchas reglas, trucos y consejos. En la revista ASEPAU escrib\u00ed un art\u00edculo para escribir buenas descripciones alternativas para im\u00e1genes<\/a>.<\/p>\n

Agregar una descripci\u00f3n alternativa paso a paso<\/h2>\n

En la propia documentaci\u00f3n de Slack para accesibilidad de las im\u00e1genes<\/a> se proporciona informaci\u00f3n para poder escribir una descripci\u00f3n alternativa en una imagen adjuntada a un mensaje de Slack.<\/p>\n

    \n
  1. Para adjuntar la imagen simplemente debemos pegarla dentro del campo de texto donde escribimos un nuevo mensaje.<\/li>\n
  2. Una vez a\u00f1adida la imagen aparecer\u00e1 una representaci\u00f3n de la imagen dentro del campo de mensaje. Deberemos hacer click en la representaci\u00f3n de la imagen y luego en la opci\u00f3n Editar detalles del archivo<\/strong><\/li>\n
  3. Encontraremos en el popup que aparece un campo para describir la imagen<\/li>\n
  4. Por \u00faltimo pulsamos el bot\u00f3n de Guardar cambios<\/strong> y procedemos a enviar nuestro mensaje<\/li>\n<\/ol>\n

    Incluso podemos a\u00f1adir la descripci\u00f3n a la imagen de un mensaje ya enviado. Simplemente debemos pulsar el icono con tres puntos suspensivos (…) y seleccionar la opci\u00f3n de Editar detalles del archivo<\/strong>.<\/p>\n

    Utilizando un lector de pantallas<\/h2>\n

    Las instrucciones anteriores se realizan utilizando un rat\u00f3n u otro dispositivo apuntador pero para usuarios de lector de pantallas tambi\u00e9n es posible utilizar estas opciones.<\/p>\n

      \n
    1. Copiamos nuestra imagen en el explorador de archivos y la pegamos en el cuadro de edici\u00f3n de un nuevo mensaje<\/li>\n
    2. Una vez a\u00f1adida la imagen podemos pulsar una vez la tecla tabular para saltar al siguiente control o explorar con las funciones de nuestro lector de pantallas hasta encontrar un bot\u00f3n llamado Ver vista previa de la imagen<\/li>\n
    3. Pulsando en ese bot\u00f3n se desplegar\u00e1 un men\u00fa que podemos recorrer pulsando la tecla tab hasta llegar a la opci\u00f3n de Editar detalles del archivo<\/li>\n
    4. Pulsando en ese bot\u00f3n de editar detalles del archivo llegaremos al cuadro para incluir la descripci\u00f3n para nuestra imagen<\/li>\n<\/ol>\n

      Esta operaci\u00f3n ha sido probada con VoiceOver para MacOS, NVDA, JAWS y Narrador para Windows 11 y en todos los casos ha sido posible realizar la operaci\u00f3n utilizando el salto por tabulaci\u00f3n y las adaptaciones a la navegaci\u00f3n de la interfaz proporcionadas por el equipo de accesibilidad de Slack<\/p>\n","protected":false},"excerpt":{"rendered":"

      El compartir una imagen con un diagrama, una captura de pantalla o algo que nos llame la atenci\u00f3n es algo muy com\u00fan en Internet. Pero esta pr\u00e1ctica puede crear problemas de accesibilidad importantes ya que si la imagen no resulta accesible las personas que no puedan acceder a la informaci\u00f3n visual quedar\u00e1n fuera del mensaje. … <\/p>\n

      Continuar leyendo \u00abAgregar descripciones alternativas en las im\u00e1genes compartidas por Slack\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,37,17,169,18,93,28,39],"tags":[11,461,460,459],"class_list":["post-1123","post","type-post","status-publish","format-standard","hentry","category-accesibilidad","category-herramientas-software","category-jaws","category-narrator","category-nvda","category-redes-sociales","category-voiceover","category-windows","tag-accesibilidad-2","tag-descripcion","tag-imagen","tag-slack"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/1123","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=1123"}],"version-history":[{"count":0,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/1123\/revisions"}],"wp:attachment":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}