Notas para a accesibilidade web (III)

• Sheriff
• 28 de Marzo de 2008
• A. Formación, Accesibilidade, Recursos, Reflexións
• 4
• 1536

[D-411]

Como inserir imaxes sen tolear

Parece claro que a informática aportou a enorme plasticidade á hora de xuntar textos, imaxes, vídeos, sons, etc. para crear documentos multimedia de fermosa factura e valor engadido. Internet, ademais, engade a capacidade do intercambio inmediato de xeito sinxelo amén de colaborar en que sexan máis lúdicos e interactivos.

En cambio as regras de accesibilidade son claras: toda información que non sexa textual deberá ser tamén accesible en modo texto polo que, ou ben poñemos elementos multimedia que teñen un carácter de puro adorno para non ter que traducilas a texto (opción totalmente rexeitable por empobrecedora e ata farisea), ou ben temos que aportar un mecanismo que explique en forma de texto cal é o significado, intención e función que aporta o elemento auditivo, visual ou interactivo ao conxunto.

Ademais, os obxectos multimedia interactivos deben seguir un protocolo de regras establecido para que as persoas con discapacidade (motora, sensorial, etc.) os poidan manipular sen tolear no intento. Pero diso xa falaremos outro día. Hoxe centrarémonos nas imaxes.

Regulación da accesibilidade das imaxes

De entrada imos comezar por separar:

1. Protocolo a seguir para os formatos e os deseños das imaxes.
2. Sistema para inserir imaxes en código HTML.

Sobre formato e deseño de imaxes

Hoxe en día, non todos os tipos de imaxes se poden amosar nunha páxina web. Os formatos estándar admitidos son:

• GIF: O Graphic Interchange Format ou GIF foi creado por Compuserve. Emprega o algoritmo de compresión para reducir o peso da imaxe sen perda de datos.
• JPG: (siglas de Joint Photographic Experts Group) o JPG soporta 16,7 millóns de cores (24 bits) e é o máis empregado (e adecuado) para as fotografías.
• PNG: Este formato foi desenvolvido para superar as limitacións do GIF. Utiliza tamén un algoritmo de compresión sen perdas. Do mesmo xeito que o GIF é adecuado para imaxes con poucas variacións de cores.
• Nota: os datos que acabamos de explicar poden sonar a chino a moitos de vós, quedádevos cos 3 nomes mencionados como formatos estándar válidos para usar na web, GIF e PNG para os debuxos e JPG para as fotografías.

Con respecto ao contido mesmo das imaxes cómpre facer as seguintes precisións:

• Non deben ter pestanexos a fin de evitar problemas de convulsións a persoas con problemas deste tipo.
• As cores, brillos e contrastes deberían ser tales que persoas con vista reducida ou limitada (retinopatías diabéticas, cataratas, etc.) poidan apreciar minimamente os obxectos retratados.
• A presenza da imaxe debe ter un propósito claro e evidente, ou ben de mero adorno ou ben aportando significado e funcionalidade ao texto que acompaña.

Como inserir imaxes en código HTML

Ben, comecemos polo máis feo, imaxinemos unha imaxe que queremos inserir no texto, e para a que queremos facer todo canto estea na nosa man para que sexa accesible 100%. ¿Que tedes a sorte de dispor dunha plataforma de deseño de páxinas web que xa volo dan todo feito? A nosa máis sincera noraboa por ter tanta sorte de poder contar cunha plataforma tan coidada. Pero a realidade di que, na maior parte dos casos, as plataformas actuais non son tan boas e, cando se quere inserir algo como unha imaxe con toda a parafernalia para que sexa accesible ao máximo non se pode facer directamente senón que hai que ir á parte do código HTML para, facendo fontanería, colocar o código seguinte:

<img
src = "(Enderezo da imaxe)"
class = "(Nome do estilo para a colocación da imaxe)"
longdesc = "(Enderezo da explicación detallada)"
alt = "(Descrición alternativa da imaxe)"
title = "(Descrición alternativa da imaxe)" >
[<a href="(Enderezo da explicación detallada)"
hreflang = "xx" xml:lang = "xx" lang = "xx" title = "Ir á descripción detallada da Imaxe ...">D-xxx</a>]


Como xa sei que acabo de escribir un montón de palabrotas… terei que explicarme un pouquiño máis a detalle. Fixádevos ben en como está todo escrito e imos comparala co exemplo concreto que fixemos coa ilustración que serviu de portada a este artigo (substituín con puntos suspensivos os enderezos máis longos para non amolar demasiado):

<img src="https://tadega.net/.../streetartufo.jpg" title="Un neno observa como o debuxo dunha nave espacial parece real grazas a un efecto de sol e sombra." alt="Un neno observa como o debuxo dunha nave espacial parece real grazas a un efecto de sol e sombra." class="alignleft" longdesc="https://tadega.net/.../#ovni-asombroso" />[<a href="https://tadega.net/.../#ovni-asombroso" title="Ir á descripción detallada de 'Un OVNI asombroso'.">D-411</a>]

Ben, agora gostaríavos saber: todas isas partes que son, para que siven, e cales son obrigatorias. Imos aló:

• Código: [class = "(Nome do estilo para a colocación da imaxe)"] Vainos dicir onde se debe colocar a imaxe en relación ao artigo (centrada, á esquerda, aliñada, con marco, sen marco). Esta parte non é obrigatoria.
• Código: [longdesc = "(Enderezo da explicación detallada)"] Este será o enderezo da páxina na que quen o desexe atopará unha explicación detallada da imaxe que se presenta. Esta etiqueta é obrigatoria para a accesibilidade web sempre que a imaxe aporte un significado ou unha funcionalidade ao artigo que está dando soporte.
• Código: [alt = "(Descrición alternativa da imaxe)"] e código [title = "(Descrición alternativa da imaxe)"] Parecen iguais pero teñen propósitos diferentes. A etiqueta Alt é para que, no caso de que a imaxe fallase porque o servidor non a pode amosar, no seu lugar, amosaría ise texto descritivo. A etiqueta Title fará que apareza a etiqueta descritiva cando pase o rato por encima da imaxe, de todos modos debemos advertir que a etiqueta Title non é obrigatoria para accesibilidade a non ser que a imaxe tamén sexa un enlace para ir a outra páxina web. Nese caso si é obrigatoria e tería que conter unha descrición da páxina a visitar.
• Código: [[<a href="(Enderezo da explicación detallada)" ... title = "Ir á descripción detallada da Imaxe ...">D-xxx</a>]]. Ben, isto puido despistar algo e cómpre explicalo: cando unha imaxe ten asociado unha descrición detallada noutra páxina, debe existir un aviso visual que advirta desta presenza, en definitiva, un enlace. Habitualmente o costume é avisar destas descricións detalladas colocando a simboloxía “[D]” (a letra D maiúscula entre corchetes) e sendo a propia letra o enlace á descrición detallada. Pero non podemos usar este tipo de notación cando hai varias imaxes na mesma páxina coas súas respectivas descricións, xa que nos atoparíamos con varias anotacións idénticas deste tipo apuntando a descricións diferentes. A solución pode vir por diferentes vías, nós, en TADEGa temos optado por inserir un código identificativo do artigo e de imaxe, por exemplo “[D-413-2]” sería a descrición detallada da 2ª fotografía do artigo número 413.
• Código: [hreflang = "xx" xml:lang = "xx" lang = "xx"]. Aquí xa non nos paramos tanto porque esta parte do código xa foi explicada o venres anterior cando falabamos doustros obxectos de código que tamén usaban estas notacións. Son notacións para advertir que o obxecto notado (neste caso unha descrición detallada dunha imaxe) está redactada nun idioma diferente ao do artigo (polo tanto se o o idioma é o mesmo toda esa notación sobra). E onde o código “xx” deberá ser substituído polo correspondente ao código de idioma.

Enlaces e materiais de interese

1. Páxina de José Antonio Alonso Martín da que se tomou a foto: antonioxalonso.tumblr.com
2. Páxina de Olga Carreras centrada na accesibilidade e usabilidade web e de gran calidade técnica: olgacarreras.blogspot.com
3. Este artigo en español: www.opentrad.org/tradurl.php… (*)

Aclaracións

• (*) Este artigo foi traducido ao español a petición dos lectores. A traducción que se amosa é automática grazas a Opentrad, polo que se advirte que pode haber erros pola ausencia dunha verificación manual.
• Grazas a todas e todos pola vosa paciencia. Circunstancias persoais impediron a publicación deste artigo o venres previsto atrasándoo dous días.