1. \u00a0<!DOCTYPE html><\/code><\/p>\nCABEZA Y CUERPO<\/h3>\n
Como toda p\u00e1gina web, se debe tener una cabeza y un cuerpo (etiquetas head y body respectivamente). La primera es necesaria para la meta informaci\u00f3n de la p\u00e1gina web, es decir informaci\u00f3n que el usuario normal no ve, pero es esencial para su funcionamiento. Tambi\u00e9n ac\u00e1 suelen enlazarse los archivos de hojas de estilo e incluso scripts de javascript.<\/p>\n
En el cuerpo va la estructura de toda la p\u00e1gina, todos los elementos que el usuario ve y que contienen la informaci\u00f3n.<\/p>\n
Por ahora pondremos un t\u00edtulo simple a toda nuestra p\u00e1gina:
\n
\n1. <!DOCTYPE html>
\n2. <head>
\n3. <title>Portafolio Personal<\/title>
\n4. <\/head>
\n5. <body>
\n6. <\/body><\/code><\/p>\nESTRUCTURA GENERAL<\/h3>\n
Antes de comenzar a desarrollar cualquier p\u00e1gina web, debemos comenzar definiendo la estructura de la p\u00e1gina web. Partiremos de la siguiente estructura simple:<\/p>\n
![\"estructura\"](\"http:\/\/blog.utp.edu.co\/accesibilidad\/files\/2014\/10\/estructura.png\")
<\/a><\/p>\nPor ahora no nos interesa el estilo visual ni embellecer la p\u00e1gina, simplemente definir la base de la estructura de ella; as\u00ed que con base en esta estructura, nuestro c\u00f3digo quedar\u00eda as\u00ed:<\/p>\n
1.\u00a0\u00a0 \u00a0<!DOCTYPE html>
\n2.\u00a0\u00a0 \u00a0<head>
\n3.\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <title>Portafolio Personal<\/title>
\n4.\u00a0\u00a0 \u00a0<\/head>
\n5.\u00a0\u00a0 \u00a0<body>
\n6.\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <header>
\n7.\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/header>
\n8.\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <nav>
\n9.\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/nav>
\n10.\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <aside>
\n11.\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/aside>
\n12.\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <article>
\n13.\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/article>
\n14.\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <footer>
\n15.\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/footer>
\n16.\u00a0\u00a0 \u00a0<\/body><\/code><\/p>\nGuardemos estas l\u00edneas en un archivo llamado index.html, en una carpeta designada para el tutorial.<\/p>\n
Ahora bien si abrimos este archivo en un navegador web lo \u00fanico que veremos ser\u00e1 un fondo blanco vac\u00edo y la p\u00e1gina tendr\u00e1 el t\u00edtulo que ya le insertamos, pero nada m\u00e1s.<\/p>\n
HOJA DE ESTILOS<\/h3>\n
Durante el transcurso de este tutorial no tendremos en cuenta la accesibilidad de las hojas de estilo CSS, as\u00ed que usaremos un s\u00f3lo archivo de estilos, algo b\u00e1sico, para usar en todo la p\u00e1gina.<\/p>\n
Las instrucciones css que usaremos pueden encontrarlas en el siguiente enlace: http:\/\/textuploader.com\/oo5s<\/a><\/p>\nEste css es una mezcla de un reset (que se usa para que la mayor\u00eda de elementos HTML tengan el mismo comportamiento en todos los navegadores) y unas instrucciones personalizadas para nuestro ejemplo.<\/p>\n
Hay que recordar que este archivo debe ser guardado en la misma carpeta del tutorial y ser llamado desde el archivo html en la etiqueta head<\/strong> as\u00ed:<\/p>\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\"><\/code><\/p>\nLuego de esto probemos de nuevo la p\u00e1gina en un navegador web. Si ves algo como esto, vas en el camino correcto:<\/p>\n
![\"step1\"](\"http:\/\/blog.utp.edu.co\/accesibilidad\/files\/2014\/10\/step1.png\")
<\/a><\/p>\nENCABEZADOS<\/h3>\n
En los lineamientos mencionamos la importancia de la jerarquizaci\u00f3n de los t\u00edtulos (encabezados) en las p\u00e1ginas web, as\u00ed que debemos tener eso en cuenta para los t\u00edtulos que necesitamos en nuestra p\u00e1ginas, que son los siguientes:<\/p>\n
\n- t\u00edtulo general<\/li>\n
- t\u00edtulos para contenidos secundarios, como la informaci\u00f3n b\u00e1sica, la galer\u00eda de fotos y los diferentes subcontenidos de los mismos.<\/li>\n<\/ul>\n
El t\u00edtulo general y el t\u00edtulo de la p\u00e1gina (de la etiqueta title) son normalmente los mismos. Podr\u00edamos tener algo m\u00e1s descriptivo como \u201cPortafolio Personal de nombre_de_la_persona\u201d, pero por ahora seguiremos con nuestro estilo gen\u00e9rico, para que todo sea m\u00e1s comprensible.<\/p>\n
Al ser \u00e9ste el t\u00edtulo m\u00e1s importante, usaremos una etiqueta <h1> e insertaremos el t\u00edtulo dentro del <header> de la p\u00e1gina, quedando as\u00ed:<\/p>\n
1.\u00a0\u00a0 \u00a0<!DOCTYPE html>
\n2.\u00a0\u00a0 \u00a0<head>
\n3.\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <title>Portafolio Personal<\/title>
\n4.\u00a0\u00a0 \u00a0<\/head>
\n5.\u00a0\u00a0 \u00a0<body>
\n6.\u00a0\u00a0 \u00a0\u00a0\u00a0 <header>
\n7.\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <h1>Portafolio Personal<\/h1>
\n8.\u00a0\u00a0 \u00a0\u00a0\u00a0 <\/header><\/code><\/p>\nBARRA DE NAVEGACI\u00d3N<\/h3>\n
En la barra de navegaci\u00f3n se encuentran enlaces a diferentes secciones de un sitio web. En nuestro caso ser\u00edan enlaces a secciones galer\u00eda de fotos, foto personal e inicio.<\/p>\n
Por ahora no nos preocuparemos de la funcionalidad de dichos enlaces, sino tan solo de su sentido sem\u00e1ntico y de accesibilidad.<\/p>\n
Para estos enlaces debemos usar una lista, pero \u00bfqu\u00e9 lista debemos usar?, \u00bfuna ordenada o una sin orden?. La forma m\u00e1s f\u00e1cil de responder esa pregunta es analizando si los usuarios finales requieren un orden expl\u00edcito en la lista. Para una lista con enlaces de navegaci\u00f3n claramente eso no es necesario, as\u00ed que usaremos una lista sin orden <ul><\/em>.<\/p>\n<nav>
\n <ul>
\n <li><a href=\"#\">Inicio<\/a><\/li>
\n <li><a href=\"#\">Galería Fotográfica<\/a><\/li>
\n <li><a href=\"#\">Contacto<\/a><\/li>
\n <\/ul>
\n<\/nav><\/code><\/p>\nAhora con el men\u00fa de navegaci\u00f3n incrustado en nuestra p\u00e1gina web, \u00e9sta debe verse as\u00ed:<\/p>\n
![\"menu\"](\"http:\/\/blog.utp.edu.co\/accesibilidad\/files\/2014\/10\/menu.png\")
<\/a><\/p>\nBARRA LATERAL<\/h3>\n
Para la barra lateral usamos un elemento nuevo en HTML5: la etiqueta aside. Esta etiqueta debe ser usada para crear contenido secundario, es decir contenido diferente al contenido o idea principal que se quiere proporcionar con la p\u00e1gina.
\nPara nuestro ejemplo la barra lateral contendr\u00e1 una lista de informaci\u00f3n personal del due\u00f1o de la p\u00e1gina web, como enlaces a sus perfiles de redes sociales, de la siguiente forma:<\/p>\n
<aside>
\n <ul>
\n <li><a href=\"#\">LinkedIn<\/a><\/li>
\n <li><a href=\"#\">Facebook<\/a><\/li>
\n <li><a href=\"#\">Twitter<\/a><\/li>
\n <li><a href=\"#\">Google+<\/a><\/li>
\n <\/ul>
\n<\/aside><\/code><\/p>\nCONTENIDO DE LA P\u00c1GINA<\/h3>\n
Por fin nos adentramos a la secci\u00f3n con la informaci\u00f3n m\u00e1s importante de toda la p\u00e1gina. Para este contenido principal vamos a usar la etiqueta article de HTML5. Esta etiqueta se usa para crear contenido independiente, que sea autoexpicatorio, es decir que no necesite de otro contenido o elementos para representar la informaci\u00f3n que se contiene.<\/p>\n
Para nuestra p\u00e1gina dividiremos nuestra informaci\u00f3n principal en varias secciones: informaci\u00f3n b\u00e1sica, galer\u00eda de fotos y formulario de contacto. Cada una de estas secciones estar\u00e1 contenida dentro de un article, haciendo de esta forma el contenido m\u00e1s independiente y sem\u00e1ntico.<\/p>\n
Vale aclarar que no nos preocuparemos por textos o nombres, as\u00ed que usaremos textos autogenerados de http:\/\/lipsum.org\/ y supondremos que el due\u00f1o de la p\u00e1gina web (e sujeto de quien trata el portafolio\/biograf\u00eda) tiene como nombre Lorem Ipsum.<\/p>\n
INFORMACI\u00d3N B\u00c1SICA<\/h3>\n
En esta secci\u00f3n pondremos informaci\u00f3n simple, un t\u00edtulo secundario con el nombre del sujeto del portafolio, unos cuantos p\u00e1rrafos de texto, simulando una peque\u00f1a biograf\u00eda, al igual que una foto del personaje en cuesti\u00f3n, la cual deber\u00e1 estar flotando a la izquierda del texto.
\nPara el t\u00edtulo secundario usaremos una etiqueta h2, para mantener la l\u00ednea jer\u00e1rquica de los encabezados.<\/p>\n
<article id=\"basic_info\">
\n<h2>Lorem Ipsum<\/h2>
\n<p><img src=\"images\/Man-Silhouette-Clip-Art.jpg\">
\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum a nunc quis consectetur. Sed rutrum tellus a nisl interdum, non dapibus nisi vestibulum. Integer et laoreet arcu, ut tincidunt libero. Quisque ornare turpis sit amet vestibulum fermentum. Donec eget risus eu dui blandit dictum eu et nisl. Nulla nec cursus felis, adipiscing rhoncus purus. Duis congue felis sed massa ornare viverra. Sed aliquet elit suscipit orci iaculis, eget molestie justo egestas. Donec tortor sem, bibendum et posuere non, venenatis eget sem. Vivamus varius, augue malesuada pulvinar cursus, sapien sapien facilisis nulla, fringilla venenatis justo nisi eget risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer nulla ipsum, dignissim et ultricies sit amet, pharetra sodales felis. Phasellus aliquam euismod turpis, vitae consequat turpis placerat in.<\/p>
\n<p>Maecenas eget tempus augue, ut lacinia metus. Aliquam lobortis auctor ligula. Quisque dapibus varius purus, ut auctor risus posuere quis. Vestibulum elementum eget leo eget ullamcorper. Pellentesque sed leo sit amet nunc tristique rutrum quis at arcu. Nunc ligula nunc, vehicula eget arcu at, iaculis auctor nibh. Fusce mi massa, convallis eu nulla in, blandit aliquam mi. Aliquam vitae pulvinar lectus. Nam consequat pharetra dolor, ut volutpat ante commodo at.<\/p>
\n<p>Fusce id eros augue. Quisque pharetra pellentesque elit eget luctus. In nibh sapien, pretium ut pellentesque eget, elementum non nisl. Vivamus sit amet scelerisque ligula. In cursus iaculis nisl. Fusce pellentesque sapien et nibh porta, vel ullamcorper nulla dapibus. Proin luctus in nisl vel viverra. <\/p>
\n<\/article><\/code><\/p>\nIntroducimos este html en el contenido, reemplazando el article que antes ten\u00edamos y nos queda lo siguiente.<\/p>\n
![\"content\"](\"http:\/\/blog.utp.edu.co\/accesibilidad\/files\/2014\/10\/content.png\")
<\/a><\/p>\nSe ve bien, pero \u00bfqu\u00e9 sucede con la imagen?, \u00bfes lo suficientemente accesible?. Repasemos los lineamientos sobre im\u00e1genes que mencionamos anteriormente:<\/p>\n
\n- La foto se trata del sujeto (Lorem Ipsum), pero analizando su contexto, el nombre no aparece en ninguna parte.<\/li>\n
- La imagen no tiene ninguna funci\u00f3n.<\/li>\n<\/ul>\n
Por consiguiente el atributo alt de la imagen debe ser:
\nalt=\u201dLorem Ipsum\u201d<\/code><\/p>\nGALER\u00cdA DE FOTOS<\/h3>\n
Toda p\u00e1gina de portafolio necesita fotos sobre trabajos y experiencias que pueda mostrar, para lo cual usaremos esta galer\u00eda de fotos.<\/p>\n
La galer\u00eda de fotos estar\u00e1 contenida, de igual forma, en una etiqueta article totalmente independiente y seguida de la anterior que contiene la informaci\u00f3n b\u00e1sica. Tambi\u00e9n debe contener un t\u00edtulo secundario, similar al de la informaci\u00f3n b\u00e1sica.
\nEl siguiente contenido HTML debe ir justo despu\u00e9s del article de informaci\u00f3n b\u00e1sica. Para as\u00ed tener una nueva informaci\u00f3n independiente.<\/p>\n
<article id=\"gallery\">
\n <h2>Galería fotográfica<\/h2>
\n <ul>
\n <li><a href=\"#\"><img src=\"images\/texBWall.png\" \/><\/a><\/li>
\n <li><a href=\"#\"><img src=\"images\/texBlueMaze.png\" \/><\/a><\/li>
\n <li><a href=\"#\"><img src=\"images\/texBWall.png\" \/><\/a><\/li>
\n <li><a href=\"#\"><img src=\"images\/texBlueMaze.png\" \/><\/a><\/li>
\n <li><a href=\"#\"><img src=\"images\/texBWall.png\" \/><\/a><\/li>
\n <li><a href=\"#\"><img src=\"images\/texBlueMaze.png\" \/><\/a><\/li>
\n <li><a href=\"#\"><img src=\"images\/texBWall.png\" \/><\/a><\/li>
\n <li><a href=\"#\"><img src=\"images\/texBlueMaze.png\" \/><\/a><\/li>
\n <\/ul>
\n<\/article><\/code><\/p>\nLuego de esto, nuestra p\u00e1gina se ver\u00e1 as\u00ed:<\/p>\n
![\"gallery\"](\"http:\/\/blog.utp.edu.co\/accesibilidad\/files\/2014\/10\/gallery.png\")
<\/a><\/p>\nComo se puede notar en el nuevo html que hemos creado, las im\u00e1genes no contienen el atributo alt, as\u00ed que debemos analizar cu\u00e1l debe ser el contenido de dicho atributo en cada una de las im\u00e1genes.<\/p>\n
\n- Las im\u00e1genes pertenecen a una funci\u00f3n: abrir informaci\u00f3n ampliada del \u201cproyecto\u201d del portafolio al hacer click sobre ellas.<\/li>\n
- El nombre o informaci\u00f3n de la imagen no est\u00e1 contenida en el enlace o en ning\u00fan contexto.<\/li>\n<\/ul>\n
Por lo cual el atributo alt debe ser as\u00ed:
\nalt=\u201dnombre_del_proyecto\u201d<\/code><\/p>\nCabe recordar que el contenido del atributo alt no puede ser \u201cimagen del proyecto\u201d o \u201cenlace al proyecto\u201d, con el nombre del proyecto basta.<\/p>\n
FORMULARIO DE CONTACTO<\/h3>\n
En toda p\u00e1gina de portafolio debe hallarse un formulario para contactar al due\u00f1o de dicho portafolio y \u00e9sta no puede ser la excepci\u00f3n. Crearemos un formulario sencillo, con campos para nombre, correo, sitio web y mensaje, de los cuales todos ser\u00e1n obligatorios, excepto el campo de sitio web.<\/p>\n
Lo primero que debemos enfocarnos es en el orden. Un formulario tan simple tiene por supuesto un orden muy simple: nombre, correo, sitio web, mensaje. No s\u00f3lo es un orden simple, es pr\u00e1cticamente un est\u00e1ndar (no oficial) del orden de este tipo de formularios.<\/p>\n
Por otro lado no importa si un usuario tiene alguna discapacidad o no, cualquier usuario debe poder navegar a trav\u00e9s del formulario mediante un teclado. La forma m\u00e1s com\u00fan es usando la tecla \u201ctab\u201d, con la cual el comportamiento esperado es que el cursor navegue entre campos y etiquetas explicativas de los campos, nada m\u00e1s. El cursor no debe acceder a im\u00e1genes o elementos que no tengan que ver con la funcionalidad del formulario. Para lograr esto, en el HTML no debemos poner im\u00e1genes innecesarias ni ning\u00fan otro tipo de elemento decorativo, para que as\u00ed el cursor navegue normalmente por los campos entre tab y tab. Tambi\u00e9n es importante no alterar el comportamiento b\u00e1sico de los elementos mediante javascript, cosa que no haremos en este formulario.<\/p>\n
Pondremos el siguiente HTML como otro contenido, justo despu\u00e9s del article de galer\u00eda de fotos:<\/p>\n
<article id=\"contact_form\">
\n <h2>Formulario de contacto<\/h2>
\n <form action=\"#\" method=\"post\">
\n <fieldset>
\n <table>
\n <tr>
\n <td><label for=\"nombre\">Nombre (obligatorio):<\/label><\/td>
\n <td><input type=\"text\" name=\"nombre\" id=\"nombre\" \/><\/td>
\n <\/tr>
\n <tr>
\n <td><label for=\"correo\">Correo (obligatorio):<\/label><\/td>
\n <td><input type=\"text\" name=\"correo\" id=\"correo\" \/><\/td>
\n <\/tr>
\n <tr>
\n <td><label for=\"website\">Sitio Web:<\/label><\/td>
\n <td><input type=\"text\" name=\"website\" id=\"website\" \/><\/td>
\n <\/tr>
\n <tr>
\n <td><label for=\"mensaje\">Mensaje (obligatorio):<\/label><\/td>
\n <td><textarea name=\"mensaje\" id=\"mensaje\"><\/textarea><\/td>
\n <\/tr>
\n <\/table>
\n <input type=\"submit\" name=\"enviar\" value=\"Enviar\" \/>
\n <\/fieldset>
\n <\/form>
\n<\/article><\/code><\/p>\nHay que notar varias cosas de \u00e9ste HTML:<\/p>\n
\n- Todos los campos del formulario est\u00e1n \u201cencapsulados\u201d dentro de una etiqueta fieldset<\/em>. Esta etiqueta agrupa secciones de campos en formularios. Normalmente se usan varias de ellas en formularios grandes, pero en nuestro caso s\u00f3lo usamos una.<\/li>\n
- Cada campo del formulario tiene una etiqueta label<\/em> equivalente, la cual describe mediante un texto corto la informaci\u00f3n que debe contener cada campo.<\/li>\n
- Estos labels<\/em> tienen un atributo muy especial: el atributo for<\/em>. Estos atributos contienen el id<\/em> del campo del formulario al que hacen referencia. De esta forma un label<\/em> queda relacionado de manera \u00fanica con un campo. Al hacer click de esta manera sobre un label<\/em>, el foco queda autom\u00e1ticamente en el campo al que hace referencia, lo cual es muy \u00fatil en lo que a accesibilidad y usabilidad respecta.<\/li>\n
- Los campos obligatorios muestran expl\u00edcitamente que deben ser obligatorios.<\/li>\n<\/ul>\n
Siguiendo todos estos pasos, nuestro formulario debe verse as\u00ed:<\/p>\n
![\"contact\"](\"http:\/\/blog.utp.edu.co\/accesibilidad\/files\/2014\/10\/contact.png\")
<\/a><\/p>\nPIE DE P\u00c1GINA<\/h3>\n
Hemos creado poco a poco la p\u00e1gina desde la parte de arriba hacia abajo, ya hemos llegado al final, el pie de la p\u00e1gina o footer. Dependiendo del tipo de p\u00e1gina en esta secci\u00f3n puede haber cosas variadas, como enlaces de navegaci\u00f3n, secciones personalizadas, informaci\u00f3n de redes sociales, entre varias otras opciones.<\/p>\n
En nuestro footer pondremos informaci\u00f3n relevante al due\u00f1o del portafolio y de los creadores de la p\u00e1gina, es decir, nosotros. Ser\u00e1 algo simple, s\u00f3lo unas cuantas l\u00edneas de HTML.<\/p>\n
De esta forma, nuestro HTML final queda de la siguiente manera:<\/p>\n
http:\/\/textuploader.com\/oj18<\/a><\/p>\nY con esto hemos terminado nuestra p\u00e1gina web simple, con ejemplos paso a paso de accesibilidad en sus elementos.<\/p>\n
Este tutorial fue creado por Mauricio Sep\u00falveda y Michael Valencia (actual editor de esta entrada) como parte de un proyecto de grado para optar por el t\u00edtulo de ingeniero de sistemas y computaci\u00f3n en la Universidad Tecnol\u00f3gica de Pereira. Esperamos les sea \u00fatil y ayude a desarrolladores web a adentrarse en el creciente mundo del desarrollo web accesible.<\/p>\n","protected":false},"excerpt":{"rendered":"
Saludos, en esta publicaci\u00f3n mostraremos c\u00f3mo implementar una serie de lineamientos y pautas b\u00e1sicas que deben tenerse en cuenta en el desarrollo de p\u00e1ginas y\/o sitios web accesibles. El ejemplo que emplearemos ser\u00e1 una p\u00e1gina sencilla de portafolio\/biograf\u00eda, con informaci\u00f3n … Sigue leyendo