Desarrollo front-end, estándares web, accesibilidad y más
Por kcmr, el 8 de febrero de 2009 en HTML
En muchas ocasiones nos habrá tocado encontrarnos con la necesidad de usar atributos desaprobados por el W3C, que hacen que nuestros documentos no validen. Este es el caso del atributo autocomplete en campos de formulario, el atributo target para enlaces en XHTML estricto o los atributos de WAI-ARIA.
Podemos solucionar el problema de la validación mediante el uso de una DTD personalizada. Reciéntemente han sido varios los sitios que han propuesto el uso de una DTD personalizada para validar documentos que usan atributos de WAI-ARIA. En todos estos casos se usaba una DTD externa. Para usar una DTD externa sólo necesitamos descargar una DTD original de XHTML y modificarla añadiendo los atributos que deseemos para determinados elementos. Después necesitaremos hacer referencia a esta DTD, alojada en un dominio público, en el DOCTYPE del documento HTML.
Ejemplo:
<!DOCTYPE html SYSTEM
"http://dominio.com/dtd/xhtml1-custom.dtd">
Existe otra opción que consiste en modificar una DTD de forma interna, en el propio documento XHTML, sin necesidad de necesitar un documento DTD alojado en el servidor.
En el siguiente ejemplo modificamos la dtd de XHTMl transicional, para añadir el atributo autocomplete a elementos input:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
[
<!ATTLIST input autocomplete (off) #IMPLIED>
]
>
En esta línea <!ATTLIST input autocomplete (off) #IMPLIED> estamos diciendo que al elemento input se le añade un nuevo atributo (autocomplete), cuyo valor será off. #IMPLIED indica que su uso es opcional.
De la misma forma podríamos añadir el atributo target para los enlaces en XHTML estricto. Por cierto, una práctica nada recomendable.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[
<!ATTLIST a target (_blank|_parent|_search|_self|_top) #IMPLIED>
]
>
Y añadir atributos WAI-ARIA a determinados elementos HTML sin necesidad de usar Javascript. En este caso añadimos el atributo aria-required con el valor true para elementos input.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[
<!ATTLIST input aria-required (true) #IMPLIED>
]
>
Esta técnica tiene un pequeño problema, y es que, en el navegador nos aparecen unos caracteres al principio del documento ]>
En este ejemplo, que usa XTHML estricto e incluye la ampliación del DTD para admitir, tanto el atributo autocomplete, como el atributo target en enlaces y aria-required en elementos input, se puede ver el problema de los caracteres al principio del documento.
La solución elegante consiste simplemente en servir el documento como application/xhtml+xml, con la extensión .xhtml. El problema de este método es que Internet Explorer no acepta este Content-type e intentará guardar el documento. Ver ejemplo de XHTML servido como application/xhtml+xml.
La solución sucia pero eficaz, consiste en utilizar CSS para ocultar los caracteres no deseados. Podemos hacerlo de varias formas, esta es la que yo he elegido después de varias opciones:
html{text-indent: -99999em; line-height: 0;}
body *{text-indent: 0; line-height: normal;}
Ver ejemplo de XHTML estricto servido como text/html (aceptado por Internet Explorer) con los estilos anteriores.
La verdad es que lo he publicado como una opción a tener en cuenta en casos extremos (el plan B), y me parece, más que nada, una forma de engañar a los validadores, que se debería usar con moderación y en ocasiones muy puntuales. En los ejemplos expuestos se han usado atributos de uso común, pero sería peligroso que cada uno decidiera usar atributos de su propia cosecha. Recomiendo echarle un vistazo a lo que opina el W3C sobre las DTD personalizadas, simplemente “no utilice DTDs personalizadas“.
Campos obligatorios marcados con asterisco *