uando se está desarrollando unsitio Web, se debe poner énfasis en hacerlo acce-sible para el mayor rango de usuarios posible,incluyendo en muchos casos a personas disca-pacitadas o con problemas de percepción o com-prensión.

Para evitar que estos usuarios tengan difi-cultades a la hora de navegar por páginas Webexisten numerosas ayudas técnicas, como son:lectores de pantalla, zooms de pantalla o de letra,añadidos para la personalización de fuentes ycolores de la página, etc. Todas estas ayudas téc-nicas disponibles pierden considerablemente suefectividad si la página no está bien construidaen lo que a accesibilidad se refiere.

La accesibilidad Web se puede definir de lasiguiente forma: consiste en ofrecer la informa-ción de un sitio Web sin excluir a personas con defi-ciencias visuales, auditivas, motrices y/o cogniti-vas o que utilicen dispositivos con limitaciones devisualización o de velocidad.

Para promover la accesibilidad Web, y quetanto desarrolladores como editores de conte-nidos sepan aplicarla, el W3C (World Wide WebConsortium) ha creado un grupo de trabajodenominado WAI (Web Accessibility Initiative),el cual ha definido unas pautas a seguir paraque los desarrolladores puedan mejorar fácil-mente la accesibilidad de sus sitios. Cada pau-ta contiene varios puntos de verificación quese deben comprobar para saber cómo de acce-sible es un sitio Web.

Muchos de estos aspectos se pueden verifi-car mediante validadores automáticos de acce-sibilidad Web, mientras que otros, como son elcaso de los contrastes de color, el uso incorrec-to del espacio de la página, el tamaño de los tex-tos, las imágenes o textos parpadeantes o enmovimiento, etc. se deben verificar de maneramanual.

Además, es necesario revisar la gramática denuestras páginas para que cumpla con el esque-ma XHTML Strict 1.0, que es el recomendadopor el W3C, y que no permite etiquetas ni atri-butos referentes al estilo de la página, por lo queel estilo se debe expresar única y exclusivamen-te mediante hojas de estilo en cascada (CSS). Deesta manera se asegura que la página esté bienformada y que el usuario pueda personalizar elestilo (colores, fuentes, etc.) si lo necesita.

Un elemento indispensable para que unapágina Web sea accesible es que esté bienconstruida. Para comprobarlo, se puedeutilizar el validador de gramática del W3C:http://validator.w3.org "(figura 1)"

Es importante resaltar que una Web accesiblebeneficia a todos los usuarios, ya que si nuestraspáginas están bien construidas es más probableque se visualicen correctamente en todo tipo denavegadores y dispositivos, como por ejemplo telé-

Especialista en accesibili-dad a proyectos de MOSS

David Provencio

Internet llega cada vez a más usuarios, por lo que crear sitios Web accesibles se está convirtiendo enalgo imprescindible. Para los programadores de sitios Web, los controles de ASP.NET facilitan mucho laprogramación, pero éstos no son accesibles al renderizarse en la página. En este artículo veremos porqué no lo son y cómo corregir esta situación.

Accesibilidad Web con .NET

c

dotN

etManía

29

fonos móviles o PDA, aumentando asíel rango de posibles usuarios.

Accesibilidad en páginasASP.NETA continuación, vamos a describir losprincipales problemas que se presen-tan en relación con la accesibilidad alcrear un sitio Web con ASP.NET.

En primer lugar, al crear un proyec-to Web con Visual Studio, éste generala página por defecto según el esque-ma XHTML Transitional 1.0, por lo que,siguiendo la recomendación del W3C,se debe modificar el DocType de la pági-na para que sea XHTML Strict 1.0, tal ycomo se muestra en el listado 1.

Con XHTML Strict 1.0 se consigueun marcado totalmente limpio ya que,como se ha comentado antes, XHTMLStrict 1.0 no admite atributos referidosa la presentación, como son width, bor‐der o style, por nombrar algunos. Elhecho de que el estilo se exprese úni-camente mediante CSS permitirá a losusuarios, por ejemplo, establecer su pro-pia hoja de estilos CSS para aumentarel tamaño de letra o modificar los con-trastes de colores de la página.

Para validar si nuestra páginaASP.NET cumple con la gramática quehemos indicado en el DocType, bastacon ejecutar la aplicación, copiar el códi-go fuente de la página que se renderi-za en el navegador, y luego entrar en elvalidador de gramática del W3C(http://validator.w3.org/#valida‐te_by_input, figura 1), pegar el códigofuente en el cuadro de texto habilitadoal efecto y pulsar el botón “Check”.

Al realizar la comprobación, obten-dremos el siguiente error: “Attribute‘name’ exists, but can not be used for thiselement”, debido a que el elemento formno admite el atributo name en XHMTLStrict 1.0.

Revisando el código enVisual Studio, se ve que elelemento form no contieneel atributo name (<form

id=”form1” runat=”server”>), debido aque éste se añadirá en tiempo de ejecu-ción, cuando el servidor vaya a generar lapágina que enviará al navegador. Para solu-cionar esto, se debe añadir al archivoWeb.config el elemento xhtmlConforman‐ce asociándole el valor Strict, de tal for-ma que las páginas de ASP.NET se gene-ren cumpliendo automáticamente con lagramática XHTML Strict 1.0 (listado 2). Alvolver a pasar la validación, veremos queahora sí obtenemos código válido XHTMLStrict 1.0.

Uso de adaptadores de controles

En el apartado anterior, hemos obteni-do una página ASP.NET en blanco quecumple las normas de accesibilidad. Acontinuación, introduciremos en dicha

página controles de ASP.NET y veremoscómo hacerlos accesibles.

Los controles de ASP.NET facilitanmucho las cosas a la hora de progra-mar en comparación con los controlesHTML estándar pero, como se verá acontinuación, el renderizado que tienenen la página en muchos casos no esaccesible. Por ejemplo, vamos a añadira nuestra página .aspx un controlASP.NET de tipo Image, como se ve enel listado 3. El código en el navegador,una vez procesada la página por .NETFramework, queda como se muestra enel listado 4.

Al pasar el validador de gramáticadel W3C, vemos que el código renderi-zado no es válido, ya que el elemento

<!DOCTYPE html PUBLIC “‐//W3C//DTD XHTML 1.0 Strict//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd”>

Listado 1. DocType para XHTML Strict 1.0.

<configuration><system.web>

<xhtmlConformance mode=”Strict” /></system.web>

</configuration>

Listado 2. Preparación del fichero Web.configpara que genere código XHTML Strict 1.0.

<asp:Image ID=”Image1” runat=”server”ImageUrl=”~/wai.bmp”AlternateText=”Logo de la WAI” />

Listado 3. Código ASP.NET de un control detipo Image

Figura 1. Validador de gramática del W3C

<img id=”Image1” src=”wai.bmp” alt=”Logo de la WAI”style=”border‐width:0px;” />

Listado 4. Código HTML resultante derenderizar un control de tipo Image

dotN

etManía

30

img incluye el atributo style. Este atributo no es admi-tido en XHTML Strict 1.0, ya que define estilo direc-tamente en la página, lo cual no permite a las ayudastécnicas establecer su propio formato y hacer la pági-na legible y accesible para los usuarios que dependende estas ayudas. Si se quiere definir estilo en el ele-mento img, se debe utilizar una hoja de estilos, apli-cando el atributo class al elemento.

Para eliminar el atributo style del control, utili-zaremos los adaptadores de controles (Control Adap-ters) de .NET. La clase ControlAdapter está incluidadesde la versión 2.0 de .NET Framework, y permitesobrescribir el renderizado de cualquier control jus-to antes de que se éste se envíe al navegador.

El funcionamiento de los control adapters es elsiguiente: cuando el navegador solicita una página.aspx, .NET comprueba si existe algún adaptadorpara las clases de los controles que se están utili-zando en la página, y en caso de que existan, losaplica inmediatamente antes de generar el HTMLcorrespondiente.

Para que .NET Framework conozca si existe uncontrol adapter para un tipo de control concreto, sehace un mapeo que se configura mediante ficheros.browser. En el caso del ejemplo anterior, para resol-ver el problema del atributo style en el control detipo imagen, hemos creado el archivo accesible.brow‐ser, que se muestra en el listado 5.

Asimismo, hemos creado una clase denomi-nada ImagenAccesible (listado 6), que hereda deSystem.Web.UI.Adapters.ControlAdapter. Esta clasees el adaptador en sí, y a través de ella se va a obte-ner el HTML del control y combinarlo con el delresto de la página para su envío al navegador. Comose ve en el listado 5 (elemento <adapter>), la claseSystem.Web.UI.WebControls.Image se mapea a la cla-se ImagenAccessible; de manera que en el atributocontrolType se indica la clase a adaptar y en adap‐terType se establece el adaptador correspondien-te a ese tipo de control. En nuestro ejemplo, eladaptador lo que hace es sustituir el atributo sty‐le y su valor por una cadena vacía. De esta mane-ra, el atributo style no aparecerá en el HTML resul-tante.

Se pueden crear uno o varios ficheros para indi-car los mapeos, y los ficheros .browser deberán estaren la carpeta especial App_Browsers. Por su parte, lasclases herederas de ControlAdapter deberán estar enla carpeta especial App_Code (figura 4).

CSS-Friendly Control AdaptersLa manera de resolver problemas de accesibilidadque hemos presentado en el ejemplo anterior paraun control ASP.NET sencillo, como es Image, es apli-

<browsers><browser refID=”Default”><controlAdapters><adapter controlType=”System.Web.UI.WebControls.Image”

adapterType=”MisAdaptadores.ImagenAccessible” /></controlAdapters>

</browser></browsers>

Listado 5. Archivo .browser con el mapeo del adaptadorImagenAccesible para un control de tipo Imagen

Figura 2. Página .aspx con un control de tipo Imagen

Figura 3. Esquema de funcionamiento delcontrol adapters

dotN

etManía

32

cable a todos los controles de .NET. No obstante, parafacilitar esta tarea en controles más complejos, exis-te toda una serie de control adapters ya creados, deno-minados CSS-Friendly Control Adapters, que permi-ten que controles como, por ejemplo, el GridView oel TreeView sean accesibles.

Los CSS-Friendly Control Adapters son adap-tadores de controles ya creados, que permi-ten hacer accesibles muchos controles deASP.NET. Se pueden descargar dehttp://www.ASP.NET/CssAdapters

Por ejemplo, para el caso de un GridView, por defec-to al renderizarse un control de este tipo en una páginase crean varias tablas anidadas. Por accesibilidad, esrecomendable utilizar tablas solo para presentar datosy no para maquetar la página, por lo que se deben eli-minar las tablas anidadas y dejar exclusivamente la quecontiene los datos. Aplicando el control adapter para elGridView que forma parte de los CSS-Friendly ControlAdapters, se renderizará únicamente una tabla, la quecontiene los datos del GridView. En la figura 5 se puedecomparar los resultados de renderizar un GridView cony sin la aplicación del control.

La tabla 1 muestra un listado de los CSS-Friendly Con-trol Adapters actualmente disponibles. Estos adaptado-res se ofrecen con código fuente, que se puede modifi-car para adecuarlos a las necesidades concretas del pro-yecto Web en el que estemos trabajando.

Beneficios de los adaptadores de controlesLos control adapters son una buena solución para sal-var problemas de accesibilidad, consiguiendo que loscontroles se rendericen de manera accesible. De igual

namespace MisAdaptadores{

public class ImagenAccessible :System.Web.UI.Adapters.ControlAdapter

{protected override void Render(HtmlTextWriter output){

System.IO.StringWriter sw = new System.IO.StringWriter();

HtmlTextWriter hw = new HtmlTextWriter(sw);

base.Render(hw);string html = sw.ToString();

output.Write(html.Replace(“style=\”border‐width:0px;\””, string.Empty));

}}

}

Listado 6. Código del adaptador (ImagenAccesible.cs)

Figura 4. Carpetas especialesApp_Browsers y App_Code

<browser refID=”IE”><controlAdapters>

<adapter controlType=”System.Web.UI.WebControls.Image”adapterType=” MisAdaptadores.ImagenAccessibleIE” />

</controlAdapters></browser>

<browser refID=”MozillaFirefox”><controlAdapters>

<adapter controlType=”System.Web.UI.WebControls.Image”adapterType=” MisAdaptadores.ImagenAccessibleFireFox” />

</controlAdapters></browser>

Listado 7. Archivo .browser con el mapeo de dos adaptadores para distintosnavegadores.

<browser refID=”Default”><controlAdapters>

<adapter controlType=“Microsoft.SharePoint.Publishing.WebControls.SummaryLinkFieldControl”adapterType=” MisAdaptadores.Mi_SummaryLinkFieldControl_Adapter” />

</controlAdapters></browser>

<browser refID=”Default”><controlAdapters>

<adapter controlType=”System.Web.UI.WebControls.WebParts.WebPartZone”adapterType=” MisAdaptadores.Mi_WebPartZone_Adapter” />

</controlAdapters></browser>

Listado 8. Archivo .browser con el mapeo de un adaptador para un WebControlde MOSS 2007 y otro para WebPartZone.

dotN

etManía

34

forma, es posible crear una clase que here-de de System.Web.UI.Adapters.PageA‐dapter para crear un adaptador para unapágina .aspx completa, permitiendo deesta manera incluir la lógica que quera-mos para el renderizado de la página.

Una vez resueltos los problemas degramática, se realizará una revisión de laaccesibilidad, verificando las pautas deaccesibilidad de la WAI. En la página deKAW (Kit de Accesibilidad Web), http://www.e‐kaw.org, se ofrecen diversas herra-mientas, tanto para los puntos de verifica-ción automáticos como para los manuales.

Los control adapters posibilitanademás la personalización del renderi-zado en función del navegador, permi-tiendo mapear distintos adaptadorespara un mismo control dependiendodel navegador en el que se vaya a mos-trar la página. Esto se establece median-te el atributo refID (listado 7).

Por último, los control adapterstambién son muy útiles para conse-guir adaptar el renderizado de con-troles de los que no se dispone decódigo fuente. Por ejemplo, se pue-den utilizar para adaptar controles

Web de MOSS 2007, o para adaptarWebParts de MOSS 2007 de formaque sean accesibles (listado 8).

ConclusiónEn este artículo hemos presentadodiversas técnicas destinadas a resolverlos problemas de accesibilidad que sepresentan al desarrollar con ASP.NET,y en particular cómo utilizar los adap-tadores de controles con este objetivo.Esperamos que este artículo le resulteútil para su trabajo. t

Figura 5. HTML de un GridView, aplicando el adaptador y sin aplicarlo.

Tabla 1. Lista de CSS-Friendly Control Adapters disponibles

System.Web.UI.WebControls.Menu CSSFriendly.MenuAdapter

System.Web.UI.WebControls.TreeView CSSFriendly.TreeViewAdapter

System.Web.UI.WebControls.DetailsView CSSFriendly.DetailsViewAdapter

System.Web.UI.WebControls.FormView CSSFriendly.FormViewAdapter

System.Web.UI.WebControls.DataList CSSFriendly.DataListAdapter

System.Web.UI.WebControls.GridView CSSFriendly.GridViewAdapter

System.Web.UI.WebControls.ChangePassword CSSFriendly.ChangePasswordAdapter

System.Web.UI.WebControls.Login CSSFriendly.LoginAdapter

System.Web.UI.WebControls.LoginStatus CSSFriendly.LoginStatusAdapter

System.Web.UI.WebControls.CreateUserWizard CSSFriendly.CreateUserWizardAdapter

System.Web.UI.WebControls.PasswordRecovery CSSFriendly.PasswordRecoveryAdapter

Web Control CSS Friendly Control Adapter