furag 2017 - minagricultura.gov.co 118... · • revisión manual (se realizaron manuales porque no...
TRANSCRIPT
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