Una web para todos. Comprendiendo y aplicando las WCAG 2.0

Page 57

Jorge Iván Pincay Ponce

Capítulo IV: Rediseño del sitio original, reevaluación

CÓDIGO FUENTE ORIGINAL

CÓDIGO FUENTE MODIFICADO

COMENTARIOS

Problema: No resultaba evidente para las tecnologías de asistencia que un control input o textarea tuviese el enfoque.

input id=”nombre” placeholder=”JORGE IVAN” required aria-required=”true” width=”38%” type=”text” onfocus=”toggleFocus(this)” onblur=”toggleBlur(this)”/>

Se requería que cualquier interfaz de usuario operable por teclado, tenga una forma de operar en la cual el indicador del foco del teclado resultara visible, entonces se implementó una solución por medio de código JavaScript. Esto conforme al criterio 2.1.1 (A), 2.1.2 (A) y 2.1.3. (AAA) de teclado accesible.

input id="nombre" p l a c e h o l d e r = " J O RG E I VA N " required aria-required="true" width="38%" type="text" o n fo c u s = " t o g g l e F o c u s ( t h i s ) " onblur="toggleBlur(this)"/>

Problema: No se etiquetaban algunos <p> controles en un formulario. <label for="mensaje">Mensaje *</label> <br/>

<p> Mensaje: <br/> <textarea required size=”40px” name=”message” rows="3" cols="40"></textarea> </p>

Se ha vinculado la frase “Mensaje*”, con la caja <textarea de texto en la que el placeholder="Ahora describiré el asunto de mi usuario debe escribir mensaje" el Mensaje. Conforme required aria-required=”true” al criterio 2.4.6. de width=”42%” type=”text” encabezados y etiquetas id=”mensaje” (AA) y 3.3.2. de etiquetas name=”nmensaje” rows=”3” e instrucciones (AA). onfocus=”toggleFocus(this)” onblur=”toggleBlur(this)” title=”Su mensaje”></textarea> </p>

4.3. Modificaciones realizadas para cumplir WAI-ARIA 1.0 4.3.1. Modificaciones en el archivo index.html, http:// vivero.oficentro-ecuador.com/index.html Tabla 17: Modificaciones realizadas para cumplir WAI ARIA en la página Principal, parte 1 CÓDIGO FUENTE ORIGINAL

CÓDIGO FUENTE MODIFICADO

Problema: El DOCTYPE empleado no soporta <!DOCTYPE html> HTML5 y muchas funcionalidades de WAI-ARIA. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd">

COMENTARIOS Todas las páginas del sitio están reconstruidas empleando etiquetas semánticas. En concordancia con ARIA y HTML5.

57


Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.