08/11/2017

FURAG 2017 SITIO WEB DE LA ENTIDAD ACCESIBLE Y USABLE

Contenido

RETO 2. SITIO WEB DE LA ENTIDAD ACCESIBLE Y USABLE .................................................................. 3

1. DESCRIPCIÓN ............................................................................................................................... 3

Garantizar el cumplimiento en el portal del MADR de los criterios de accesibilidad nivel A definidos

en la NTC5854 y el cumplimiento de los criterios de usabilidad definidos en la guía de usabilidad

para Gobierno en línea. ....................................................................................................................... 3

PLANEACIÓN DEL RETO ....................................................................................................................... 3

2. EVIDENCIAS DEL RETO ................................................................................................................. 3

a. Contenido no textual ............................................................................................................... 5

b. Información y relaciones ......................................................................................................... 6

c. Secuencia con significado ........................................................................................................ 7

d. Características sensoriales ...................................................................................................... 8

e. Uso del color.......................................................................................................................... 10

f. Teclado .................................................................................................................................. 12

g. Sin trampas para el foco del teclado ..................................................................................... 13

h. Tiempo ajustable ................................................................................................................... 13

i. Poner en pausa, detener, ocultar .......................................................................................... 14

j. Evitar bloques ........................................................................................................................ 15

k. Titulado de páginas ............................................................................................................... 15

l. Orden del foco ....................................................................................................................... 16

m. Propósito de los enlaces (en contexto) ............................................................................. 17

n. Idioma de la página ............................................................................................................... 17

o. Al recibir el foco .................................................................................................................... 17

p. Al recibir entradas ................................................................................................................. 17

q. Identificación de errores ....................................................................................................... 18

r. Etiquetas o instrucciones ...................................................................................................... 19

s. Procesamiento ...................................................................................................................... 20

t. Nombre, función, valor ......................................................................................................... 21

u. Diseño ordenado y limpio ..................................................................................................... 21

v. Ruta de migas ........................................................................................................................ 22

w. Interfaces en movimiento ..................................................................................................... 23

x. URL limpios ............................................................................................................................ 23

y. Navegación global consistente .............................................................................................. 24

z. Uso adecuado de espacios en blanco ................................................................................... 25

aa. Navegación de contexto .................................................................................................... 26

bb. Vínculo a página de inicio .................................................................................................. 26

cc. Independencia de navegador ............................................................................................ 27

dd. Enlaces bien formulados ................................................................................................... 30

ee. Ventanas emergentes ....................................................................................................... 30

ff. Botón atrás ............................................................................................................................ 30

gg. Títulos y encabezados ....................................................................................................... 30

hh. Vínculos rotos .................................................................................................................... 31

ii. Justificación del texto ............................................................................................................ 31

jj. Ancho del cuerpo de texto .................................................................................................... 32

kk. Texto subrayado ................................................................................................................ 32

ll. Desplazamiento horizontal ................................................................................................... 33

mm. Hojas de estilo para diferentes formatos .......................................................................... 33

nn. Vínculos visitados .............................................................................................................. 33

oo. Campos obligatorios ............................................................................................................... 34

pp. Asociación de etiquetas y campos .......................................................................................... 34

qq. Ejemplos en los campos de formulario ................................................................................... 35

rr. Listas ......................................................................................................................................... 36

SITIO WEB DE LA ENTIDAD ACCESIBLE Y USABLE

1. DESCRIPCIÓN

Garantizar el cumplimiento en el portal del MADR de los criterios de accesibilidad nivel A definidos en la NTC5854 y el cumplimiento de los criterios de usabilidad definidos en la guía de usabilidad para Gobierno en línea.

2. PLANEACIÓN DEL RETO

Con el fin de llevar a cabo este reto, se planearon las siguientes actividades:

3. EVIDENCIAS

Accesibilidad y usabilidad del sitio web de la entidad

A continuación se presentan por cada numeral las imágenes que evidencian la validación de los

criterios de accesibilidad y pantallazos del sitio Web donde se evidencian los criterios de usabilidad.

Para analizar estos criterios se usaron las siguientes herramientas automáticas:

• Web developer

• Tawdis

• firefox accessibility extensión

• https://validator.w3.org/checklink? (Validador de link rotos)

• revisión manual (Se realizaron manuales porque no se puede a través de una herramienta

automática)

ACTIVIDAD INICIO FIN COMPLETADO

Reunión con la oficina de prensa para definir requerimientos de contenido 10/07/2017 10/07/2017 100%

Revisión del portal con herramientas automáticas 11/07/2017 31/07/2017 100%

Comparación de las pruebas contra la norma NTC5854 1/08/2017 4/08/2017 100%

Solución de los problemas detectados 7/07/2017 30/08/2017 100%

Creación documento de Evidencias para el reporte de cumplimiento del reto principal No. 2 31/08/2017 31/08/2017 100%

Publicación Evidencia del reto principal No.2 en Plataforma MinTIC-Máxima Velocidad 01/09/2017 01/09/2017 100%

• http://qweos.net/blog/2009/01/28/guias-practicas-para-profesionales-web-puntos-de-

verificacion-de-las-pautas-de-accesibilidad-al-contenido-web-wcag-20/

• Siguiendo los lineamientos de la norma NTC456

a. Contenido no textual

Se verifica que todas las Imágenes cuenten con los atributos ALT y LONGDESC

b. Información y relaciones

Se soluciona: Se remueve contenido que ocasionaba problemas.

c. Secuencia con significado

Herramientas usadas:

WAT>Estructura->Orden de Celdas de tabla. Verificar que el orden

de las celdas sea el correcto

C8: Web Developer for Firefox->CSS>view CSS buscar "letter-

spacing“

G96: http://www.sidar.org/traducciones/wcag20/es/comprender-

wcag20/content-structure-separation-understanding.html

Técnica:

(http://www.w3.org/WAI/WCAG20/quickref/#qr-content-

structure-separation-programmatic)

•G57: Ordenar el contenido en una secuencia significativa para todo el contenido de la página Web

•Marcado secuencias en el contenido como algo significativo mediante una de las siguientes técnicas Y G57: Ordenar

el contenido en una secuencia significativa para esas secuencias

•H34: Usar una marca Unicode de derecha a izquierda (RLM) o de izquierda a derecha marca (LRM) para mezclar

dirección de texto en línea (HTML), H56: Usar el atributo dir de un elemento en línea para resolver problemas con

secuencias direccionales anidados (HTML), C6: contenido Posicionamiento basado en marcadores estructurales (CSS),

C8: El uso de CSS letter-spacing para controlar el espaciado dentro de una palabra (CSS), C27: Haciendo el orden

DOM coincide con el orden visual (CSS), FLASH15: utilizar la propiedad tabIndex para especificar un orden de lectura

lógico y un orden lógico de tabulación en flash (Flash), Pdf3: Garantizar la pestaña correcta y el orden de lectura en

documentos PDF (PDF), SL34: El uso de la secuencia de tabulación predeterminado Silverlight y alterando Tab

Secuencias Con Propiedades (Silverlight)

d. Características sensoriales

Se hace la revisión manual, dentro del portal se hace una búsqueda y se evidencia que no aparece

la palabra “aquí”, “Haga click aquí, Click a la derecha).

Se elimina el componente:

e. Uso del color

El texto cumple

El texto del botón de búsqueda, cumple

El texto del footer cumple

El texto de términos y condiciones cumple

f. Teclado Navegar con TAB en la página.

g. Sin trampas para el foco del teclado

Mostrar orden de tabulación.

h. Tiempo ajustable

Revisión manual.

La página no tiene límite de tiempo

Controles:

Pausar e iniciar videos:

i. Poner en pausa, detener, ocultar Revisión manual

Pausar e iniciar el control de videos:

j. Evitar bloques Ver elementos en bloque -Web Developer Toolbar->outline-> outline Block Elements. Revisión

Manual

No Aplica. No hay bloques de contenido

k. Titulado de páginas Todas las paginas tiene la etiqueta title

Paginas internas:

l. Orden del foco Revisión manual,

Se revisa la estructura de tab para navegación del portal.

m. Propósito de los enlaces (en contexto)

Se retira el “Ver más” de las noticias y se cambia el menú de prensa.

Se hace el ajsute para que todas las imágenes cuenten con las etiquetas ALT, y LongDesc

n. Idioma de la página

o. Al recibir el foco Revisión manual.

Si cumple, Revisar que los vínculos no ingresan hasta presionar enter

p. Al recibir entradas La plataforma SharePoint, encapsula su contenido dentro de etiquetas form pero no es un

formulario de recolección de datos.

q. Identificación de errores

NO APLICA porque la página no tiene formularios de recolección de datos

r. Etiquetas o instrucciones

s. Procesamiento

t. Nombre, función, valor

Técnica:

http://www.w3.org/WAI/WCAG20/quickref/#qr-content-structure-separation-programmat

u. Diseño ordenado y limpio Revisión manual, según diseño aprobado por prensa.

Cumple

v. Ruta de migas

Cumple: todas las páginas tienen habilitada la miga de pan

w. Interfaces en movimiento Revisión manual.

Cumple: La página no tiene interfaces en movimiento

x. URL limpios Revisión manual

Cumple:

El nombre de la página hace referencia a su contenido, y la url no tiene caracteres extraños

y. Navegación global consistente

Cumple: el menú superior se mantiene en todas las páginas

z. Uso adecuado de espacios en blanco Manual

Cumple: tiene relación con Diseño ordenado y limpio.

aa. Navegación de contexto No cumple: La página no cuenta con menú de contexto, teniendo en cuanto a las restricciones

presupuestales y el corto tiempo del desarrollo de concurso este requerimiento se ajustara en la

siguiente versión compromiso adquirido por el MADR.

bb. Vínculo a página de inicio Cumple: el logo conduce a la página de inicio, y en el menú superior existe la opción llamada inicio.

cc. Independencia de navegador Se hace la validación en los tres navegadores más comunes del mercado.

Google Chrome:

Explorer:

Firefox:

dd. Enlaces bien formulados Se revisa con el motor de búsqueda de Google que no aparezcan palabras restringidas y se

corrigen las páginas.

ee. Ventanas emergentes Cumple: Al llegar al portal no se abren Pop-ups

ff. Botón atrás Cumple: al presionar el botón atrás del navegador, se regresa a la página que fue visitada con

anterioridad

gg. Títulos y encabezados Cumple: la página no usa artículos como el, la, los, las al inicio de los encabezados., la primera frase del

encabezado transmite la idea más importante.

hh. Vínculos rotos Se revisa a través de la herramienta: https://validator.w3.org/checklink

Se detectan las siguientes páginas con enlaces rotos y se solucionan:

ii. Justificación del texto Cumple: las páginas no tienen el texto justificado o el código text-align: justify;

jj. Ancho del cuerpo de texto Cumple: Se utiliza un ancho promedio entre 60 y 80 cpl (caracteres por línea) para el cuerpo del

texto

.

kk. Texto subrayado Cumple: En el footer existía texto subrayado y no era un hipervínculo, el cual se le quita la propiedad de underline

Solución:

ll. Desplazamiento horizontal No cumple: en la resolución 1024 x 768 pixeles se ve la barra de desplazamiento horizontal. Herramienta Webdeveloper->Resize->1024 x 768 No cumple: La página no cuenta con menú de contexto, teniendo en cuanto a las restricciones

presupuestales y el corto tiempo del desarrollo de concurso este requerimiento se ajustara en la

siguiente versión compromiso adquirido por el MADR.

mm. Hojas de estilo para diferentes formatos No cumple. No existe una hoja de estilo para impresión Para verificar, en el navegador vaya al menú Ver > Código fuente y revise en la sección del encabezado (entre las etiquetas <head> y </head> si existe vinculada una hoja de estilos con el atributo media=”print”. No cumple: La página no cuenta con menú de contexto, teniendo en cuanto a las restricciones

presupuestales y el corto tiempo del desarrollo de concurso este requerimiento se ajustara en la

siguiente versión compromiso adquirido por el MADR.

nn. Vínculos visitados Cumple, en la hoja de estilos se presenta la etiqueta “Visited”:

oo. Campos obligatorios Si cumple: se pueden identificar los campos obligatorios.

pp. Asociación de etiquetas y campos Si cumple: los Campos están etiquetados

qq. Ejemplos en los campos de formulario Si cumple: existe ayuda para diligenciar formularios.

rr. Listas No aplica. La página no tiene listas.

APROBÓ

ING. FIDEL ANTONIO TORRES MOYA

Jefe Oficina de Tecnologías de la Información y las Comunicaciones