Accesibilidad Web

¡Hola a todos! 🙌  Os voy a hablar sobre la accesibilidad web siguiendo estos pasos.

1) Accederemos a la Página: http://accesibilidadweb.dlsi.ua.es.

2) Revisaremos los contenidos y recursos que ofrece sobre accesibilidad web.

3) Vamos a hacer un análisis de la accesibilidad web de algunas páginas significativas que ofrecen la pagina http://accesibilidadweb.dlsi.ua.es y vamos a ver sus errores típicos de accesibilidad con su solución.

4) Vamos a hacer el análisis de accesibilidad de dos páginas web diferentes.

5) Por último vamos a buscar páginas web que apliquen las pautas de accesibilidad web. y que cumplan el Nivel de Conformidad "A", Nivel de Conformidad "Doble A" y Nivel de Conformidad "Triple A".

¿Qué es la accesibilidad web?.

La accesibilidad web tiene como objetivo lograr que las páginas web sean utilizables por el máximo número de personas, independientemente de sus conocimientos o capacidades personales e independientemente de las características técnicas del equipo utilizado para acceder a la Web. En la actualidad, no existe una definición formal y totalmente aceptada del concepto de accesibilidad web.Además, también existen una serie de mitos sobre la accesibilidad web que perduran desde hace años. Estos mitos se pueden resumir en que la accesibilidad web es cara y supone un coste extra en el desarrollo de un sitio web, sin que los beneficios sean importantes. Además, otro de los mitos que perdura es creer que la accesibilidad web sólo beneficia a las personas con discapacidad. Los beneficiarios de la accesibilidad web son todo el mundo.

Para lograr la accesibilidad, se han desarrollado diferentes pautas o guías que explican cómo se tienen que crear las páginas web para que sean accesibles.

¿Que es la World Wide Web Consortium? W3C.

La World Wide Web Consortium (W3C) es una organización independiente y neutral cuya principal actividad es desarrollar protocolos y directrices que aseguren el crecimiento de la Web a largo plazo.

Los estándares del W3C definen las partes claves que hacen que la World Wide Web funcione.

Los siguientes principios:

Web para todo el mundo: El valor social que aporta la Web, es que ésta hace posible la comunicación humana, el comercio y las oportunidades para compartir conocimiento. Uno de los objetivos principales del W3C es hacer que estos beneficios estén disponibles para todo el mundo, independientemente del hardware, software, infraestructura de red, idioma, cultura, localización geográfica, o habilidad física o mental.

Web desde cualquier dispositivo:  La cantidad de dispositivos diferentes para acceder a la Web ha crecido exponencialmente. Actualmente, los teléfonos móviles, teléfonos inteligentes, PDAs, sistemas de televisión interactiva, sistemas de respuesta de voz, puntos de información e incluso algunos pequeños electrodomésticos pueden acceder a la Web.

Pasos a seguir en la pagina http://accesibilidadweb.dlsi.ua.es una vez ya vistos los contenidos y recursos:

Prioridades y niveles:

 Prioridad 1: son aquellos puntos que un desarrollador Web tiene que cumplir ya que, de otra manera, ciertos grupos de usuarios no podrían acceder a la información del sitio Web.

Prioridad 2: son aquellos puntos que un desarrollador Web debería cumplir ya que, si no fuese así, sería muy difícil acceder a la información para ciertos grupos de usuarios

Prioridad 3: son aquellos puntos que un desarrollador Web debería cumplir ya que, de otra forma, algunos usuarios experimentarían ciertas dificultades para acceder a la información.

Nivel de Conformidad "A": todos los puntos de verificación de prioridad 1 se satisfacen.

 Nivel de Conformidad "Doble A": todos los puntos de verificación de prioridad 1 y 2 se satisfacen.

Nivel de Conformidad "Triple A": todos los puntos de verificación de prioridad 1,2 y 3 se satisfacen.

Ahora vamos a hacer un análisis de la accesibilidad web de dos paginas:

El MUNDO: http://www.elmundo.es/

Cosas buenas:

 

El sitio web ofrece una versión accesible

Hay 1 elemento link para navegación: Criterio de conformidad 2.4.5 (Nivel AA) ,Criterio de conformidad 2.4.8 (Nivel AAA) 

Se usan 69 elementos de encabezado: Criterio de conformidad 1.3.1 (Nivel A) ,Criterio de conformidad 2.4.10 (Nivel AAA) 

No se usan elementos para controlar la presentación visual: Criterio de conformidad 1.3.1 (Nivel A)

La página tiene un elemento title: Criterio de conformidad 2.4.2 (Nivel A)

Cosas malas:

En 2 casos los encabezados no están anidados correctamente: Criterio de conformidad 1.3.1 (Nivel A) , Criterio de conformidad 2.4.10 (Nivel AAA)

Se usa el elemento meta http-equiv para actualizar la página:  Criterio de conformidad 2.2.1 (Nivel A) ,Criterio de conformidad 2.2.4 , (Nivel AAA) Criterio de conformidad 3.2.5 (Nivel AAA) 

 

 Hay 2 imágenes sin alternativas textuales: Criterio de conformidad 1.1.1 (Nivel A) 

No existen enlaces para saltar bloques de contenido: Criterio de conformidad 2.4.1 (Nivel A)

El primer enlace de la página no lleva al contenido principal de la página: Criterio de conformidad 2.4.1 (Nivel A)

Hay 1 valor repetido en los atributos id: Criterio de conformidad 4.1.1 (Nivel A)

Hay 32 enlaces cuyo contenido es sólo una imagen sin alternativa textual: Criterio de conformidad 2.4.4 (Nivel A) ,Criterio de conformidad 2.4.9 (Nivel AAA) ,Criterio de conformidad 4.1.2 (Nivel A)

Hay 1 elemento iframe sin title: Criterio de conformidad 2.4.1 (Nivel A) ,Criterio de conformidad 4.1.2 (Nivel A)

Hay 70 enlaces con el mismo texto pero diferentes destinos:

Se usan 46 elementos o atributos HTML para controlar la presentación del texto: Criterio de conformidad 1.3.1 (Nivel A) ,Criterio de conformidad 1.4.4 (Nivel AA) ,Criterio de conformidad 1.4.5 (Nivel AA) , Criterio de conformidad 1.4.9 (Nivel AAA)

Hay 43 imágenes con el atributo alt nulo:  Criterio de conformidad 1.1.1 (Nivel A)

Hay 1 formulario sin un botón de envío: Criterio de conformidad 3.2.2 (Nivel A)

Antena 3: http://www.antena3.com/

Cosas Buenas:

Hay 1 elemento link para navegación: Criterio de conformidad 2.4.5 (Nivel AA)

Se usan 63 elementos de encabezado: Criterio de conformidad 1.3.1 (Nivel A)

No se usan atributos para controlar la presentación visual: Criterio de conformidad 1.3.1 (Nivel A), Nivel AA, Nivel AAA

 los controles de formulario tienen una etiqueta asociada:

No se usan elementos para controlar la presentación visual: Criterio de conformidad 1.3.1 (Nivel A) ,Criterio de conformidad 1.4.5 (Nivel AA) ,Criterio de conformidad 1.4.9 (Nivel AAA)

Se identifica el idioma principal de la página con el código "es": Criterio de conformidad 3.1.1 (Nivel A)

Todas las medidas en las CSS están expresadas con valores relativos: Criterio de conformidad 1.4.8 (Nivel AAA)

Todos los formularios tienen un botón de envío: Criterio de conformidad 3.2.2 (Nivel A)

El título de la página contiene 72 caracteres: Criterio de conformidad 2.4.2 (Nivel A)

Cosas malas:

Hay 4 casos de enlaces adyacentes que enlazan con el mismo recurso: Criterio de conformidad 1.1.1 (Nivel A) ,Criterio de conformidad 2.4.4 (Nivel A) ,Criterio de conformidad 2.4.9 (Nivel AAA)

Hay 15 imágenes sin alternativas textuales: Criterio de conformidad 1.1.1 (Nivel A)

En 149 casos, el atributo title de un enlace sólo repite el texto del enlace: Criterio de conformidad 2.4.4 (Nivel A) ,Criterio de conformidad 2.4.9 (Nivel AAA)

En 4 casos se usan medidas absolutas para indicar el ancho de un elemento: Criterio de conformidad 1.4.4 (Nivel AA) ,Criterio de conformidad 1.4.8 (Nivel AAA)

No existen enlaces para saltar bloques de contenido: Criterio de conformidad 2.4.1 (Nivel A)

Hay 18 enlaces cuyo contenido es sólo una imagen sin alternativa textual: Criterio de conformidad 2.4.4 (Nivel A) ,Criterio de conformidad 2.4.9 (Nivel AAA),Criterio de conformidad 4.1.2 (Nivel A)

Hay 71 enlaces con el mismo texto pero diferentes destinos: Criterio de conformidad 2.4.9 (Nivel AAA)

En 7 casos se especifican valores absolutos para el tamaño de las fuentes: Criterio de conformidad 1.4.4 (Nivel AA)

INTRODUCCIÓN AL DISEÑO WEB Y CREACIÓN DE BANNERS

 ¡HOLA A TODOS! AQUI OS DEJO MI PDF interactivo. HEMOS TRABAJADO CON BOTONES

Tipos de Páginas web

¡ Hola a todos! os os voy a hablar sobre el análisis de una pagina web . Y sus distintos tipos que existen:

• Páginas  web  corporativas
• Comerciales
• Educativas
• Personales
• Tiendas online
• Pag. web de servicio
• portfolios o portfolios
• Blog o páginas de contenidos
• Foros
• Landing Pages
• Informativas

Usabilidad

La Usabilidad es la medida de la calidad de la experiencia que tiene un usuario cuando interactúa con un producto o sistema. Esto se mide a través del estudio de la relación que se produce entre las herramientas (entendidas en un Sitio Web el conjunto integrado por el sistema de navegación, las funcionalidades y los contenidos ofrecidos) y quienes las utilizan, para determinar la eficiencia en el uso de los diferentes elementos ofrecidos en las pantallas y la efectividad en el cumplimiento de las tareas que se pueden llevar a cabo a través de ellas.


Y ahora vamos a ver 4 ejemplos de tres tipos de paginas web distintas:

Páginas web corporativas

Una página web corporativa es un sitio online que pertenece a una determinada empresa o institución, y donde sólo hay información sobre esa empresa o institución.

En este tipo de páginas se suelen mostrar los productos o servicios principales que se proporcionan, pero no tienen ninguna opción para comprarlos a través de Internet.

Unas de las mejores paginas web corporativas es la de bp estando en el  1 puesto en el ranking 

↠Utiliza Diseños claros y sencillos  Los colores , las imágenes y la posición de los elementos son muy buenos . E l diseño es claro, simple y limpio, fácil de procesar por nuestra vista.

↠Usa colores acordes con el Logotipo y la imagen . Los colores son un gran medio para transmitir emociones y estados de ánimo.

↠Tiene un diseño uniforme entre las páginas

↠Usa espacios en blanco que es un elemento clave para un buen diseño; en este caso permite al usuario prestar más atención a los distintos elementos y sea más fácil la navegación.

↠No sobre utiliza animaciones y efectos no debe de tardar más de 8 segundos en este caso no se da tarda poco en cargarse sino la atención del usuario se perdería y se acabaría por salir de la pagina

↠Cuida las palabras claves

↠Lo más importante en estas paginas web es el contenido este es uno de los aspectos en una pagina web , está pagina es increíble nos aporta todo tipo de información sobre su empresa desde quienes son, sus métodos de trabajo, la tecnología que usan ,  sus inversores , su clientela, lo que nos quieren vender etc....

↠Comparte y interactúa con sus usuarios.

Tienda online

↠Una página web e-commerce (o tienda online) es un sitio en Internet en el que puedes presentar tus productos físicos y que todo el que visite tu página pueda comprarlos.

↠Es igual que una tienda tradicional, sólo que en el mundo virtual.

↠La diferencia aquí es que los clientes pueden comprar directamente desde la comodidad de sus casas (sin desplazarse), pagar por distintos métodos (como PayPal, transferencia bancaria, contrareembolso), y hacerlo a cualquier hora del día.






1. página web que os voy analizar. se trata de Amazon.

↠Contenido: Esta pagina web es bastante atractiva.. No tanto a la vista sino más relacionada al contenido. Esto ayudara que aumente el número de visitas.

↠Tipografía: Es buena , sencilla de leer  para todos los usuarios . Para resaltar secciones más interesantes varia la fuente del tamaño , con lo cual esta muy bien.

↠Utiliza iconos lo que le facilita al usuario de comprar por ejemplo la cesta que es un icono de un carrito que llama la atención y nos ayuda a ir seleccionando lo que queremos ir comprando y lo guardo todo en esa cesta y poder comprarlo todo a la vez.

↠Utiliza fondos claros y sencillos que nos facilitan la visualización y dan un aspecto despejado.

↠Las Imágenes que utiliza son muy nítidas y los datos del producto son claros y sencillos entendibles para todos los usuarios.

Informativa

1. En este caso vamos a hablar de la pagina web BBC

↠La jerarquía: El tamaño de la letra es la optima ,  utiliza buenos cambios de fuentes que es bastante importante para resaltar la información que es más importante .

↠Imágenes: contienen muchas imágenes pero esto  no quiere decir que sea malo porque nos aportan información.

↠Utiliza fondos claros y sencillos que facilitan la visualización y resalta la letra

↠Contiene enlaces que nos pueden llevar al contenido que nos interesa.

↠Tiene una Sobriedad: Tiene una fácil visualización de los contenidos (vídeos, imágenes, textos), la información o contenidos no tardan en cargarse.

↠Su contenido es atractivo es interesante y atraer al público es su objetivo

FORO

Los foros son reuniones de interés, donde convergen dos o más personas con el fin de debatir acerca de un tema en específico, brindar asesoría, proporcionar material didáctico y encontrar soluciones o ideas que aporten al desarrollo del mismo.

↠Aquí os dejo uno de los foros que particularmente me gusta mucho: Universo Marvel

↠Tarda poco en cargarse, tiene una buena jerarquía siendo muy legible , la calidad de las imágenes es muy buena ,  es una pagina llamativa ,  atractiva y muy colorida , contiene información sobre todo lo relacionado sobre el mundo de Marvel, contiene enlaces a redes sociales con las cuales interactuas fácilmente y ayuda además a crear comunidad.