ACCESIBILIDAD WEB.  Introducción  ¿Qué es la accesibilidad Web?  ¿Por qué necesitamos accesibilidad?  ¿Qué usuarios pueden tener problemas de accesibilidad?

Presentación del tema: "ACCESIBILIDAD WEB.  Introducción  ¿Qué es la accesibilidad Web?  ¿Por qué necesitamos accesibilidad?  ¿Qué usuarios pueden tener problemas de accesibilidad?"— Transcripción de la presentación:

1 ACCESIBILIDAD WEB

2  Introducción  ¿Qué es la accesibilidad Web?  ¿Por qué necesitamos accesibilidad?  ¿Qué usuarios pueden tener problemas de accesibilidad?  Problemas de accesibilidad en la Web.  ¿Cómo se consigue?  Estándares  ¿Cómo se sabe si una página web es accesible?  Testeando  Retos  Conclusiones

3 INTRODUCCIÓN Según estudios recientes el 90 % de sitios Web sufre problemas de accesibilidad y/o la usabilidad.

4 ACCESIBILIDAD WEB  Introducción  ¿Qué es la accesibilidad Web?  ¿Por qué necesitamos accesibilidad?  ¿Qué usuarios pueden tener problemas de accesibilidad?  Problemas de accesibilidad en la Web.  ¿Cómo se consigue?  Estándares  ¿Cómo se sabe si una página web es accesible?  Testeando  Retos  Conclusiones

5 DEFINICIÓN DE ACCESIBILIDAD WEB “El poderde la Web reside en su universalidad. El acceso por cualquiera independientemente de sus discapacidades es un aspecto esencial” (TimBerners-Lee, uno de los padres de la Web) “Hablar de Accesibilidad Web es hablar del acceso de todos a la Web, independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidades de los usuarios.” (W3C, oficina española) Que el mayor número de usuarios puedan acceder a la Web NO existe la “accesibilidad absoluta”

6 MITO: la accesibilidad web es sólo “para ciegos” FALSO Los criterios de accesibilidad ayudan a personas con deficiencias físicas(visuales, auditivas, motrices), cognitivas, de lenguaje, …etc. PERO TAMBIÉN ES VERDAD QUE: Usuarios con discapacidades temporales. Usuarios de edad avanzada. Dispositivos menos (?) habituales: móviles, PDAs; versiones antiguas SO/navegador; conexiones lentas Entornos especiales (kioskos públicos; entornos ruidosos, fábricas, etc.)

7 Acceso Universal

8 ACCESIBILIDAD WEB  Introducción  ¿Qué es la accesibilidad Web?  ¿Por qué necesitamos accesibilidad?  ¿Qué usuarios pueden tener problemas de accesibilidad?  Problemas de accesibilidad en la Web.  ¿Cómo se consigue?  Estándares  ¿Cómo se sabe si una página web es accesible?  Testeando  Retos  Conclusiones

9 ¿ POR QUÉ NECESITAMOS ACCESIBILIDAD? Razones éticas Razones sociales Razones políticas Razones económicas Razones legales: En algunos países es política de Estado –En los Estados Unidos, por ejemplo, existe la Sección 508 de la Ley de Rehabilitación que exige alojamiento razonable para empleados con problemas de discapacidad, y ese requisito se extiende a la accesibilidad en la Red. –En Europa, a través de la Iniciativa eEurope, a partir del año 2005 los sitios oficiales deben ser accesibles.

10 ACCESIBILIDAD WEB  Introducción  ¿Qué es la accesibilidad Web?  ¿Por qué necesitamos accesibilidad?  ¿Qué usuarios pueden tener problemas de accesibilidad?  Problemas de accesibilidad en la Web.  ¿Cómo se consigue?  Estándares  ¿Cómo se sabe si una página web es accesible?  Testeando  Retos  Conclusiones

11 ¿ QUÉ USUARIOS PUEDEN TERNER PROBLEMAS DE ACCESIBILIDAD? La accesibilidad es para todos nosotros y no para el otro.

12 ACCESIBILIDAD WEB  Introducción  ¿Qué es la accesibilidad Web?  ¿Por qué necesitamos accesibilidad?  ¿Qué usuarios pueden tener problemas de accesibilidad?  Problemas de accesibilidad en la Web.  ¿Cómo se consigue?  Estándares  ¿Cómo se sabe si una página web es accesible?  Testeando  Retos  Conclusiones

13 PROBLEMAS DE ACCESIBILIDAD EN LA WEB (1) Personas con problemas visuales (o dispositivos como PDAs, móviles, etc.) Sólo “ven” texto de modo secuencial (usan lectores de pantalla/navegadores por voz, como JAWS, PwWebSpeak, Orca, Home Page Reader o terminales Braille, entre otros.) Necesitan textos grandes No distinguen bien los colores (daltonismo, miopía, etc.) que usan magnificadores de pantalla o navegan en ambientes con deficiente iluminación. –Imágenes sin descripción textual –Tablas y marcos (frames) mal etiquetados –Colores de bajo contraste –Texto no escalable –Ventanas emergentes (pop-up) –No funcionan con teclado

14 EJEMPLO Con un lector de pantalla o un navegador parlante, el usuario oiría el siguiente texto: “Instrucciones para dar cuerda al reloj bra de una mujer, el perfume del pan. Por Julio Cortázar ¿Qué mas quiere, qué mas quiere? Átelo... pronto a su muñeca, déjelo latir en libertad, Allá al fondo está la muerte, pero no tenga imítelo...”

15 PROBLEMAS DE ACCESIBILIDAD EN LA WEB (2) Personas con discapacidades cognitivas/ de aprendizaje: Pueden tener problemas para “entender” los contenidos o para concentrarse Problemas de memoria Dislexia, diversos grados de retraso mental o con limitaciones de aprendizaje). Errores de paginas para este tipo de discapacidad: Documentos con estructura mal definida Demasiada información en una página Lenguaje innecesariamente complejo Falta de imágenes para clarificar el texto Animaciones y elementos decorativos superfluos

16 PROBLEMAS DE ACCESIBILIDAD EN LA WEB (3) Personas con discapacidades auditivas (o en entornos ruidosos o con equipos sin hardware de audio) Pueden tener problemas para acceder a los contenidos sonoros –Audio/vídeo sin descripciones textuales –Frases complejas o demasiado largas

17 PROBLEMAS DE ACCESIBILIDAD EN LA WEB (4) Personas con discapacidades motoras (que le impidan usar el mouse (o ratón) y/o el teclado, o que no tengan mouse (terminales UNIX, telefonía móvil, PDA’s, iPhone, smartphones, Blackberry, etc.) o teclado (WebTV, terminales callejeros o kioscos informáticos, etc.). Tienen que usar el teclado u otros dispositivos (reconocimiento de voz) –Páginas que no funcionan con teclado

18 PROBLEMAS DE ACCESIBILIDAD EN LA WEB (5) Edad de las personas -no poseen todas sus capacidades (físicas y/o mentales) en su mejor nivel Problemas debido a su educación formal, con analfabetismo, o con pocos años de formación, o hablen otro idioma Computadoras antiguas, poca memoria RAM, procesador antiguo, etc. Software antiguo (o Software muy moderno ) Hardware no estándar, como teléfonos celulares, iPhone, smartphones, terminales Braille, terminales UNIX, PDA’s, Blackberry, etc. Conexiones lentas y costosas. Conexiones y equipos ajenos.

19 ACCESIBILIDAD WEB  Introducción  ¿Qué es la accesibilidad Web?  ¿Por qué necesitamos accesibilidad?  ¿Qué usuarios pueden tener problemas de accesibilidad?  Problemas de accesibilidad en la Web.  ¿Cómo se consigue?  Estándares  ¿Cómo se sabe si una página web es accesible?  Testeando  Retos  Conclusiones

20 Cómo se consigue una WEB accesible? Conociendo y cumpliendo los estándares De los lenguajes utilizados (HTML, CSS; etc.) Específicos de accesibilidad Testeando Diferentes entornos (navegadores, sistemas operativos, etc.) Con usuarios reales

21 MITO: para ser accesible basta con tener una versión “sólo texto” FALSO Sólo para determinados usuarios Suponen una discriminación (“entrar por la puerta trasera”) Problemas por contenidos duplicados: –mantenimiento –indexación en buscadores Se descuida la accesibilidad de la versión “normal” ¿Cómo llego a la versión accesible? MEJOR: si es posible, una única versión que cumpla los estándares de accesibilidad

22 EJEMPLO

23 ACCESIBILIDAD WEB  Introducción  ¿Qué es la accesibilidad Web?  ¿Por qué necesitamos accesibilidad?  ¿Qué usuarios pueden tener problemas de accesibilidad?  Problemas de accesibilidad en la Web.  ¿Cómo se consigue?  Estándares  ¿Cómo se sabe si una página web es accesible?  Testeando  Retos  Conclusiones

24 ¿Qué ESTÁNDARES? (1) Lenguajes/técnicas utilizados: –HTML válido –CSS válido –JavaScript “no obstructivo” –Etc. IMPORTANTE: separar contenido vs. aspecto El mismo contenido para todos los usuarios Aspecto en función de las condiciones particulares

25 Con el mismo contenido HTML

26 ¿Qué ESTÁNDARES? (2) Section 508 (USA) WAI(Web Accessibility Initiative) –Internacionales, W3C –Sugeridas por la Comisión Europea UNE 139803 “Requisitos de accesibilidad para contenidos Web”(España). Basada en WAI

27 WAI (Web Accessibility Initiative) Forma parte del W3C(World Wide Web Consortium) Recomendaciones y directrices sobre: –Contenido web(WCAG) Contenidos weba ccesibles –Herramientas de autor (ATAG) Herramientas de creación accesibles y que generen contenidos accesibles –Agentes usuario (navegadores) (UAAG) Navegadores accesibles –Aplicaciones XML (XAG) Para aplicaciones XML (draft)

28 WCAG (Web Content Accessibility Guidelines) Cómo crear contenidos web accesibles 14 principios generales (guidelines) – Cada guideline incluye puntos de verificación (checkpoints) – Cada checkpoint tiene una prioridad: 1.Debe satisfacerse; requerimientos básicos (14) 2.Debería satisfacerse; eliminar barreras significativas (30) 3.Puede satisfacerse; acceso mejorado (19) Además: técnicas, ejemplos, enlaces, etc.

29 WCAG guidelines(1) 1. Proporcione alternativas equivalentes para el contenido visual o auditivo. 2. No se base solo en el color. 3. Utilice marcadores y hojas de estilo y hágalo adecuadamente. 4. Identifique el idioma usado. 5. Cree tablas que se transformen correctamente. 6. Asegúrese de que las páginas que incorporan nuevas tecnologías se transformen correctamente. 7. Asegure al usuario el control sobre los cambios de los contenidos tempo- dependientes. 8. Asegure la accesibilidad directa de las interfaces de usuario incrustadas. 9. Diseñe para la independencia de dispositivo. 10. Utilice soluciones provisionales. 11. Utilice las tecnologías y pautas del W3C. 12. Proporcione información de contenido y presentación. 13. Proporcione mecanismos claros de navegación. 14. Asegúrese de que los documentos sean claros y simples.

30 WCAG: ejemplo guideline Guideline 2. Don't rely on color alone. Ensure that text and graphics are understandable when viewed without color. –If color alone is used to convey information, people who cannot differentiate between certain colors and users with devices that have non-color or non-visual displays will not receive the information. When foreground and background colors are too close to the same hue, they may not provide sufficient contrast when viewed using monochrome displays or by people with different types of color deficits. Checkpoints: 2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup. [Priority1] Techniques for checkpoint 2.1 2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen. [Priority2 for images, Priority3 for text]. Techniques for checkpoint 2.2

31 WCAG: ejemplo técnicas 2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup. [Priority1] (Checkpoint 2.1) – Core Techniques: Structure vs. Presentation –CSS Techniques: Ensuring information is not in color alone […] For example, when asking for input from users, do not write "Please select an item from those listed in green." Instead, ensure that information is available through other style effects (e.g., a font effect) and through context (e.g,. comprehensive text links). […]

32 No confiar únicamente en el color

33 WCAG: niveles de cumplimiento A, AA y AAA -3 niveles de cumplimiento de las guidelines WCAG por parte de páginas o sitios web: Conformidad nivel “A” Cumplen todos los checkpointsde prioridad 1(“deben”) Conformidad nivel “AA” Cumplen todos los checkpointsde prioridad 1 y 2 (“deberían”) Conformidad nivel “AAA” Cumplen todos los checkpointsde prioridad 1, 2 y 3 (“pueden”) -Las declaraciones de conformidad (“los sellos”) se incluyen por decisión propia(W3C NO las verifica) -Habitualmente se intenta alcanzar el nivel “AA”

34 Cuadro de Comparaciones – Prioridad 1

35 Cuadro de Comparaciones – Prioridad 2

36

37 Cuadro de Comparaciones – Prioridad 3

38 ¿CÓMO SE SABE SI UNA PÁGINA WEB ES ACCESIBLE? 1. Revisar la página con, al menos, un validador automático de accesibilidad. 2. Revisar manualmente los posibles problemas de accesibilidad que no puedan ser testeados por los validadores automáticos. 3. Navegar la página con distintos navegadores, desde diversos sistemas operativos (incluyendo navegadores visuales, parlantes, textuales, WebTV, teléfonos celulares, PDA’s, etc.) y desde distintos hardware. 4. Revisar el uso del color en la página. 5. Navegar la página con las imágenes deshabilitadas. 6. Navegar la página con el sonido desconectado. 7. Navegar la página con Javascript deshabilitado. 8. Navegar la página con applets de Java deshabilitado. 9. Navegar la página sólo con el teclado, sin el mouse. 10. Revisar el código de la página para ver si es válido. 11. Navegar la página con conexiones lentas. 12. Navegar la página con computadoras antiguas. 13. Por último, pero (obviamente) no menos importante, pedirle a personas con diversos problemas de discapacidad (visuales, motrices, cognitivos) que naveguen la página.

39 HERRAMIENTAS AUTOMÁTICAS DE VALIDACIÓN Online y offline Para comprobar sintaxis de HTML, CSS, etc. –W3C (HTML Validation Service; CSS Validation Service; etc.) –Otras herramientas (HTML Tidy; etc.) Para validación de accesibilidad –WebXACT/Bobby; CynthiaSays; TAW; eXaminator –Comprueban si se cumplen determinados checkpoints de WCAG –Sirven como herramienta de apoyo, pero NO son suficientes para evaluar la accesibilidad

40 MITO: los validadores automáticos indican si una página es accesible o no FALSO Los validadores comprueban la sintaxis (HTML, CSS, etc.) Los validadores comprueban algunos checkpoints PERO… Muchos checkpoints son interpretables y necesitan validación manual. Las herramientas automáticas pueden producir “falsos negativos” y “falsos positivos” Guidelines, checkpoints, validadores automáticos y sellos son herramientas e indicadores, NO un objetivo Lo importante: la accesibilidad real

41 EJEMPLOS DE HERRAMIENTAS AUTOMATICAS TAW (Fundación CTIC). Se trata de la herramienta de evaluación automática de accesibilidad de habla hispana más extendida. Para más información puede consultarse el ANEXO “TAW – Test de Accesibilidad Web”. http://www.tawdis.nethttp://www.tawdis.net Bobby (Watchfire) Es el validador automático de accesibilidad más utilizado a nivel mundial. La comprobación de accesibilidad se basa tanto en las pautas WCAG 1.0 como en las de la sección 508 (Estados Unidos). http://www.watchfire.com/products/webxm/bobby.aspxhttp://www.watchfire.com/products/webxm/bobby.aspx HERA (Fundación Sidar) Herramienta online diseñada para facilitar a los desarrolladores la tarea de la revisión manual de accesibilidad de las páginas Web según las WCAG 1.0. http://www.sidar.org/hera/index.php.eshttp://www.sidar.org/hera/index.php.es Cynthia Says : Se trata de un proyecto educacional promovido por varias organizaciones y empresas creado para divulgar la accesibilidad Web entre los desarrolladores. Se basa tanto en las pautas WCAG 1.0 como en la sección 508. http://www.cynthiasays.com/http://www.cynthiasays.com/ The Wave : Herramienta de validación y de reparación que se basa en las WCAG y en la sección 508. No realiza un análisis exhaustivo de las páginas, sino que sirve de ayuda a los desarrolladores en determinadas comprobaciones. http://www.wave.webaim.org/http://www.wave.webaim.org/

42 HERRAMIENTAS MANUALES Web Developer Toolbar –https://addons.mozilla.org/en-US/firefox/addon/60 Firefox Accessibility Extension –https://addons.mozilla.org/es-ES/firefox/addon/1891 Web Accessibility Toolbar (Internet Explorer) –http://www.visionaustralia.org.au/info.aspx?page=614 –Opera: http://www.paciellogroup.com/resources/wat- about.html Internet Explorer Developer Toolbar –http://www.microsoft.com/downloads/details.aspx?fa milyid=e59c3964-672d-4511-bb3e- 2d5e1db91038&displaylang=en

43 Extensiones de Firefox Firebug https://addons.mozilla.org/es-ES/firefox/addon/1843 https://addons.mozilla.org/es-ES/firefox/addon/1843 Esta extensión permite a los desarrolladores modificar directamente el código fuente HTML, CSS, JavaScript, etc. contenido en la página Web. También permite ver el código del documento de forma dinámica, según es generado o modificado por los scripts.

44 Extensiones de Firefox Document Map https://addons.mozilla.org/es-ES/firefox/addon/475 Esta extensión permite desplegar la estructura de encabezados de cada página Web.

45 Extensiones de Firefox Fangs Esta extensión muestra el contenido de la página emulando un lector de pantalla. La página Web se convierte en una página solo texto en la que se detalla tanto el contenido del documento como los mensajes propios de los lectores de pantalla (identificando enlaces, imágenes, encabezados, listas, tablas, etc.).

46 EXTENSIONES FIREFOX Metatags Esta extensión muestra los metadatos de una Web con cómodo acceso a los vínculos como ficheros CSS y los datos relevantes como el MIME type, Content-type, keywords, strict-mode, etc. https://addons.mozilla.org/en-US/firefox/addon/1668

47 EXTENSIONES FIREFOX HMTL Validator Tidy https://addons.mozilla.org/en-US/firefox/addon/249

48 Herramientas de evaluación de color y contraste Colour Contrast Analyser Para comprobar las combinaciones de color de primer plano y color de fondo (contraste) se puede utilizar la herramienta Colour Contrast Analyser. http://www.visionaustralia.org.au/info.aspx?page=628 La aplicación Colour Contrast Analyser trabaja con dos algoritmos: el de diferencia de brillo y color y el de luminosidad, siendo el primero el que se debe usar ya que el algoritmo de luminosidad aún se encuentra en fase experimental. Se considerará como válida la combinación de color de primer plano y fondo siempre y cuando supere los umbrales mínimos (125 para el diferencial de brillo y 500 para el diferencial de color).

49 Herramientas de evaluación de color y contraste Fujitsu ColorDoctor Es una aplicación que emula los diferentes tipos de daltonismo: deuteranopia, protanopia y tritanopia. Además convierte a escala de grises la página Web. http://www.fujitsu.com/global/accessibilit y/assistance/cd/

50 Herramientas de evaluación de color y contraste Fujitsu ColorSelector Es una herramienta que permite determinar la combinación de color de primer plano y color de fondo más accesible. http://www.fujitsu.com/global/ac cessibility/assistance/cs/

51 Simuladores de discapacidades Vischeck colour blindness Simulator Herramienta online que permite emular los diferentes tipos de daltonismo. http://www.vischeck.com/vischeck/vischeckURL.php

52 Simuladores de discapacidades Visual Impairment Simulator Es una herramienta que simula diferentes tipos de deficiencias visuales (glaucoma, degeneración macular, hyperopia, etc) http://www.cita.uiuc.edu/software/vis/downld.php

53 NAVEGADORES Los navegadores gráficos principales son: Internet Explorer, Mozilla Firefox, Opera, Netscape, Galeon, Konqueror, Safari BrowserCam (http://www.browsercam.com/Default2.aspx), que permiten comprobar cómo se visualizarían las páginas en diferentes navegadores y sistemas operativos. Navegador de texto: LYNX Con los navegadores de texto se puede observar si el contenido de la página está bien estructurado y en su correcto orden de lectura. De esta forma se comprueba que toda la información ofrecida en un navegador visual también está disponible en uno de texto. LYNX es gratuito y está disponible para diversos sistemas operativos como VMS, Windows, Linux o Unix. Este navegador puede instalarse en una máquina local o utilizar algún servicio online de emulación como Delorie Lynx Viewer o Lynx-me http://lynx.browser.org/

54 HERRAMIENTAS DE APOYO Al revisar la accesibilidad de un sitio Web se deben emplear productos de apoyo para comprobar que, en un caso de uso real, no existen problemas de acceso a los contenidos. Los lectores de pantalla permiten a las personas con discapacidad visual la navegación y la interacción con el sistema operativo y sus aplicaciones, incluyendo los navegadores Web. Los navegadores de voz sólo proporcionan acceso a Internet. Ambos transforman el texto en voz.

55 HERRAMIENTAS DE APOYO JAWS for Windows (Freedom Scientific): Es uno de los lectores de pantalla más conocidos. Esta herramienta permite a los usuarios con discapacidad visual usar su ordenador, el sistema operativo y todas las aplicaciones, así como acceder a Internet. http://www.freedomscientific.com/fs_products/soft ware_jaws.asp Desventajas de JAWS: Uso complicado

56 HERRAMIENTAS DE APOYO Window-Eyes (GW Micro): Es posiblemente el segundo lector de pantalla más usado, después de JAWS. http://www.gwmicro.com/Window-Eyes/ Home Page Reader (IBM): Esta herramienta es un navegador de voz para personas invidentes o con otras discapacidades visuales. http://www-03.ibm.com/able/solution_offerings/hprtrial3.html

57 ACCESIBILIDAD WEB  Introducción  ¿Qué es la accesibilidad Web?  ¿Por qué necesitamos accesibilidad?  ¿Qué usuarios pueden tener problemas de accesibilidad?  Problemas de accesibilidad en la Web.  ¿Cómo se consigue?  Estándares  ¿Cómo se sabe si una página web es accesible?  Testeando  Retos  Conclusiones

58 Comprobar que es accesible… Leyendo el contenido: –Lenguaje sencillo –Abreviaturas, idiomas, … –¿Se entiende? Comprobar navegadores gráficos –Firefox, Internet Explorer, Opera, Safari, … –Diferentes plataformas, versiones y sistemas operativos –Diferentes configuraciones: Desactivando imágenes, CSS, JavaScript, sonido, etc. Diferentes resoluciones de pantalla, tamaños de texto, combinaciones de colores o B/N, etc. Usar navegadores sólo texto; lectores de pantalla Usar dispositivos alternativos (sólo con teclado)

59 Pruebas con usuarios Similares a los tests de usabilidad: –Observación de usuarios reales mientras se enfrentan al sitio web Proporcionan mucha información útil, pero son muy complejos: –Definir tareas representativas –Existe gran cantidad de tipologías de discapacidad

60 TAW - TEST DE ACCESIBILIDAD WEB TAW (Test de Accesibilidad Web), desarrollado por la Fundación CTIC es la herramienta de evaluación automática de accesibilidad de habla hispana más extendida. Dispone de una versión online y de otra descargable que permite trabajar sin conexión a Internet, siendo ambas versiones gratuitas. Además existe una extensión para Firefox: TAW3 en un clic (https://addons.mozilla.org/es-ES/firefox/addon/1158 )

61 TAW - TEST DE ACCESIBILIDAD WEB En el resumen el TAW muestra: -Un listado con los problemas de accesibilidad encontrados (ordenados por prioridad) y su descripción. -El número de línea de la página en la que se produce el error. -La etiqueta HTML que genera problemas de accesibilidad.

62 EJERCICIO VALIDANDO LA PAGINA DE LA FIEC CON TAW

63

64 EJERCICIO VALIDANDO LA PAGINA DE LA FIEC CON EJERCICIO VALIDANDO LA PAGINA DE LA FIEC CON HERA

65 EJERCICIO VALIDANDO LA PAGINA DE LA FIEC CON EJERCICIO VALIDANDO LA PAGINA DE LA FIEC CON Cynthia Says

66 EJERCICIO W EJERCICIO Web Page Speed Report

67 ACCESIBILIDAD WEB  Introducción  ¿Qué es la accesibilidad Web?  ¿Por qué necesitamos accesibilidad?  ¿Qué usuarios pueden tener problemas de accesibilidad?  Problemas de accesibilidad en la Web.  ¿Cómo se consigue?  Estándares  ¿Cómo se sabe si una página web es accesible?  Testeando  Retos  Conclusiones

68 WCAG 2.0 Hasta ahora hemos usado las WCAG 1.0 WCAG 2.0 son public working draft(borrador de trabajo público) para su revisión por la comunidad –Sin cambios radicales respecto a 1.0 –Más genéricas, aplicables a diferentes tecnologías –Requisitos más comprobables; lenguaje más claro –Cambios en terminología: Principios de diseño (nuevo) Guidelines –Criterios de éxito (checkpoints) Algunas críticas –Demasiado voluminosas –Demasiado genéricas

69 RIAs (Rich Internet Applications) Conseguir interfaces “de escritorio” en la web Algunas aplicaciones: –Google(Gmail; GoogleMaps); Flickr; YouTube;... Tecnologías: –AJAX; Flash; Java; DHTML; etc. Ya no son interfaces “insertados” en una página web, sino que son la propia interfaz. WAI-ARIA(WAI AccessibleRichInternet Applications) en desarrollo Mientras tanto… –Estándares para conseguir degradación progresiva –Proporcionar versión alternativa

70 ¿“Demasiada accesibilidad”? (1) WCAG 1.0, checkpoint 13.1 [P2] “Clearly identify the target of each link” “...content developers may further clarify the target of a link with an informative link title”

71 ¿“Demasiada accesibilidad”? (2) Permite cambiar el tamaño del texto,pero… –Duplica funcionalidad del navegador –No funciona en otras páginas –El usuario no sabe/aprende cómo hacerlo con el navegador

72 ¿“Demasiada accesibilidad”? (3)

73 ACCESIBILIDAD WEB  Introducción  ¿Qué es la accesibilidad Web?  ¿Por qué necesitamos accesibilidad?  ¿Qué usuarios pueden tener problemas de accesibilidad?  Problemas de accesibilidad en la Web.  ¿Cómo se consigue?  Estándares  ¿Cómo se sabe si una página web es accesible?  Testeando  Retos  Conclusiones

74 CONCLUSIONES Permite que el mayor número posible de personas acceda a los contenidos (no sólo discapacitados). Beneficia a todos los usuarios, haciéndoles más fácil el acceso a las páginas (mejor usabilidad). Reduce costes de mantenimiento/desarrollo: –Una única versión para todas las plataformas –Es más fácil hacer cambios (contenido vs. presentación) –Mayor “vida útil”de los contenidos –Las técnicas se pueden aplicar a diferentes sitios Cumplir estándares mejora la visibilidad en Internet (buscadores).

75 MITO: las páginas accesibles son feas http://www.inretirementservices.co.uk/ http://geekministry.com/old_geek/ http://www.3point7designs.com/

76 http://www.inretirementservices.co.uk/

77 http://geekministry.com/old_geek/

78 http://www.3point7designs.com/

79 POSICIONAMIENTO WEB

80  Introducción  El contenido es la clave.  Tecnología web.  Sencillez.  Google  Enlaces y Pagerank.  Penalizaciones  Recomendaciones

81 INTRODUCCIÓN Lo más importante a la hora de crear una página web es su optimización web y el posicionamiento conseguido en los motores de búsqueda, posicionamiento Existen gran cantidad de trucos no legales para la optimización de una página Web que la mayoría de los buscadores penalizan por ser ilegales. Confunden a los usuarios y no ofrecen información útil sobre las consultas.

82 POSICIONAMIENTO WEB  Introducción  El contenido es la clave.  Tecnología web.  Sencillez.  Google  Enlaces y Pagerank.  Penalizaciones  Recomendaciones

83 El contenido es la clave Buenos contenidos ¿Por qué necesito buenos contenidos? ¿Debo actualizar constantemente los contenidos? A Google le gustan los sitios que renuevan y actualizan sus contenidos.

84 Palabras Claves Son las palabras para las cuales quieres aparecer en la primera posición de los resultados de un buscador. Por ejemplo, "coches usados", "abogados en caracas" o "sms gratis". Se recomienda 2 o 3 por página, y no exceder de 10. ¿Qué palabras claves (keywords) utilizo? Existen herramientas que nos ayudan a escoger palabras claves para nuestras páginas http://es.espotting.com/popups/keywordgenbox.asp –http://inventory.overture.com/d/searchinventory/suggestion/http://inventory.overture.com/d/searchinventory/suggestion/ –http://www.7search.com/scripts/advertiser/sample_get.asphttp://www.7search.com/scripts/advertiser/sample_get.asp Otras páginas que muestran las palabras más buscadas: –http://sp.ask.com/docs/about/jeevesiq.htmlhttp://sp.ask.com/docs/about/jeevesiq.html –http://50.lycos.com/http://50.lycos.com/ –http://buzz.yahoo.com/http://buzz.yahoo.com/

85 POSICIONAMIENTO WEB  Introducción  El contenido es la clave.  Tecnología web.  Sencillez.  Google  Enlaces y Pagerank.  Penalizaciones  Recomendaciones

86 TECNOLOGÍA WEB Estar informado de las últimas novedades en cuanto a servidores o lenguajes de programación.

87 POSICIONAMIENTO WEB  Introducción  El contenido es la clave.  Tecnología web.  Sencillez.  Google  Enlaces y Pagerank.  Penalizaciones  Recomendaciones

88 SENCILLEZ Al robot de Google no le gustan las páginas con excesivas decoraciones y simplemente busca textos legibles y contenidos claros.robot de Google

89 POSICIONAMIENTO WEB  Introducción  El contenido es la clave.  Tecnología web.  Sencillez.  Google  Enlaces y Pagerank.  Penalizaciones  Recomendaciones

90 https://www.google.com/webma sters/tools/ El primer paso para conseguir una buena posición en Google es aparecer en el buscador. Descubre cómo hacerlo.

91

92

93

94

95

96

97 POSICIONAMIENTO WEB  Introducción  El contenido es la clave.  Tecnología web.  Sencillez.  Google  Enlaces y Pagerank.  Penalizaciones  Recomendaciones

98 ENLACES Y PAGERANK Es el pilar fundamental para obtener un PageRank alto. Intenta aparecer en los principales directorios (Yahoo! y DMOZ) y que te enlacen desde otros sitios web. PageRank

99 POSICIONAMIENTO WEB  Introducción  El contenido es la clave.  Tecnología web.  Sencillez.  Google  Enlaces y Pagerank.  Penalizaciones  Recomendaciones

100 Google sabe que muchas personas le intentan engañar, y está empezando a tomar medidas contra páginas web que realizan prácticas poco éticas para mejorar su posicionamiento.

101 PENALIZACIÓN Cloaking: devolver contenidos distintos, dependiendo de si visita la página el robot de Google o un usuario en busca de información que no va a encontrar en sitios web con esta técnica de engaño a los buscadores. Enlaces Ocultos: son una variante del texto oculto realizada por webmasters que quieren promocionar otros sitios Web y, al no poder conseguir enlaces externos, utilizan sus propias páginas. Popularidad Artificial: es una técnica que aumenta, de forma artificial, el posicionamiento en la recuperación de búsquedas de motores Web. Hay diferentes modalidades: Spam en weblogs y libros de firmas Texto oculto: consiste en la inserción de multitud de palabras clave en sus páginas web ocultándolas con el mismo color del fondo, con etiquetas meta o dentro del código fuente. Abuso de palabras claves: situar palabras clave en un montón de elementos de una página web. Si bien es cierto, estos métodos son muy usados, ahora estan penalizados por Google, quien elimina de su base de datos a los sitios que "compran" pagerank.

102 RECOMENDACIONES LOS TÍTULOS : (que no superen los 50 caracteres), y no repetir más de 3 veces la misma palabra (Google lo puede considerar 'spam'). Un buen título para una página de venta de productos ganaderos podría ser: ALT URL: que contenga las keywords deseadas, pero no abusar y no intentar que el dominio, subdominio y nombre de la página contengan las mismas

103 LOS META-TAGS Cada página, al igual que ocurría con el título, debe poseer su propio meta, y su contenido debe describir de forma clara y breve la temática central de la página. Como ya se ha comentado, la repetición de tags no es una buena práctica desde el punto de vista del posicionamiento, por lo que en este caso interesa de nuevo que cada página posea su propio meta-tag. Este texto puede ser mostrado en las SERPs como resumen asociado a un resultado, por lo que vale la pena escribirlo de forma que el usuario del buscador, al leerlo, entienda de forma clara que le podemos ofrecer si accede a nuestro Site. Una buena implementación del meta-tag, asociada al ejemplo anterior, podría ser

104 LOS META-TAGS HEADINGS: –Diseñar páginas que respeten la estructura HTML, incluyendo los encabezados en el orden correcto, y utilizando al menos siempre el primero de ellos en cada página. –De nuevo, no repetir los encabezados es todas las páginas. Además en este caso es importante no utilizar más de un por página, ya que podemos incurrir en penalizaciones por parte de los buscadores, y no demasiados (un valor por debajo de 10 es aceptable) por el mismo motivo. –Utilizar palabras clave en los encabezados, sobre todo en el, ya que el texto descrito en este tag adquiere una especial relevancia en los algoritmos de puntuación utilizados por los buscadores. –Una buena utilización de encabezados, asociada al ejemplo anterior, podría ser:

105 LOS META-TAGS –La existencia de este meta-tag es beneficiosa para nuestros Site, por lo que conviene que todas las páginas lo contengan, y éste refleje de forma exacta las palabras clave que identifican el contenido de cada página particular, y las genéricas del Site. –Por la repercusión negativa que ya se ha comentado, no es nada recomendable que se repita el contenido de este meta-tag en las páginas del Site. –En este meta-tag no caben todas las palabras clave del Site, por lo que no deberemos abusar de él de forma indiscriminada, recomendando no incluir más de 10 palabras clave por página. –Usar en este campo, además de las palabras clave de la página concreta, las Keywords genéricas del Site. –Una buena implementación del meta-tag, asociada al ejemplo que venimos utilizando, podría ser:

106 REFERENCIAS GENERALES World Wide Web Consortium (W3C). http://www.w3.org/ Oficina Española W3C. http://w3c.es/ Página principal de WAI Página principal de la Iniciativa de Accesibilidad Web del W3C, donde se puede encontrar la información más actual sobre accesibilidad Web. http://www.w3.org/WAI/ Centro Estatal de Autonomía Personal y Ayudas Técnicas. http://www.ceapat.org/

107 REFERENCIAS TECNICAS Pautas de Accesibilidad al Contenido en la Web 1.0. Explica en detalle cómo hacer una página Web accesible para personas con diferentes tipos de discapacidad. http://www.w3.org/TR/WCAG10/ Web ContentAccessibilityGuidelines2.0: http://www.w3.org/TR/WCAG20 Norma UNE 139803:2004, “Aplicaciones informáticas para personas con discapacidad. Requisitos de accesibilidad para contenidos en la Web”. http://www.inteco.es/Accesibilidad/Normativa_1/Descarg a/DescargaUNE_139803

108 REFERENCIAS TECNICAS Grupo SQUaC: http://squac.iti.upv.es W3C MarkupValidationService: http://validator.w3.org/ WebXACT: http://webxact.watchfire.com/ CynthiaSays: http://www.cynthiasays.com TAW: http://www.tawdis.net/http://www.tawdis.net/ HERRAMIENTAS DE EVALUACIÓN DE LA ACCESIBILIDAD - Instituto Nacional de Tecnologías de la Comunicación –Marzo 2008 Accesabilidad e Internet - Claudio Fabián Segovia ACCESIBILIDAD WEB: principios, mitos, y algunos ejemplos prácticos - Jordi Sánchez Instituto Tecnológico de Informática (ITI) http://www.iti.upv.es Guía de Recomendaciones SEO de Posicionamiento - Copyright © 2007 Instituto Nacional de Tecnologías de la comunicación (INTECO) – Septiembre 2007 - http://www.inteco.es/http://www.inteco.es/

109 GRACIAS Cualquier consulta: nverdezoto@cti.espol.edu.ec