UC3M logo

Web Accessibility Evaluation via XSLT

UC3M logo
Vicente Luque-Centeno
Telematic Engineering Department
Carlos III University of Madrid

Agenda

  1. Accessibility evaluation methods
  2. Report examples
  3. Accessibility rules expressible in a XHTML grammar
  4. Accessibility rules not expressible in a XHTML grammar
  5. XSLT appliance: WAEX, Web Accessibility Evaluation in XSLT
  6. Tool comparison
  7. Conclusions

Accessibility evaluation methods

Imperative Declarative
Imperative Vs Declarative
Program-based Rule-based
Hard-coded conditions Clean conditions
Embedded in the source code Context-free
Hard to read Easy to read
Hard to reuse Easy to reuse
Hard to share Easy to share
Hard to agree expectations Easy to agree expectations

Most evaluation tools follow the imperative approach.

Declarative approaches

Report examples: IWWUA main

Some pages and their reports
Taw Hera WAEX

Report examples: Office de Tourisme Nancy

Some pages and their reports
Taw Hera WAEX

Report examples: WAI main

Some pages and their reports
Taw Hera WAEX

Rules expressible in DTD, Schema and XSLT (1/3)

<img src="img/logo_cost.gif" /> No alt!!
<img src="img/logo_mause.jpg" /> No alt!!
Images without alternative text. The img's alt attribute is mandatory.
Expression
DTD <!ATTLIST img alt CDATA #REQUIRED>
XML Schema <xs:element name="img"> <xs:complexType>
 <xs:attribute name="alt" use="required"
  type="xs:string"/>
</xs:complexType> </xs:element>
XSLT <xsl:template match="//img[not(@alt)]">
 <xsl:message>Images with no alt attribute</xsl:message>
</xsl:template>

Rules expressible in DTD, Schema and XSLT (2/3)

<blink>«</blink> Deprecated!!

<b>Address</b> Deprecated!!
Deprecated elements no longer in use
Expression
DTD No such <!ELEMENT b ...> nor
<!ELEMENT blink ...> ... (in new XHTML versions)
XML Schema No such <xs:element name="b"/> nor
<xs:element name="blink"/> ... (in new XHTML versions)
XSLT <xsl:template match="//b | //i | //u | //tt | //font | //center |//blink">
 <xsl:message>Deprecated elements no longer in use</xsl:message>
</xsl:template>

Rules expressible in DTD, Schema and XSLT (3/3)

<a href="..."><label>Room</label></a> Bad!! (but not in DTD)

<em><ins><p>Bad insertion</p></ins></em> Bad!! (but not in DTD)
Restrictions in XHTML specification (prose) not expressed in the DTD
Container element Forbidden contents Condition to be forbidden
pre img, object, big, small, sub, sup Always forbidden
a, label a, area, label, input, select, textarea, button Always forbidden
form form Always forbidden
table table In XHTML Basic
ins Any block-type element If the ins element is inside an inline-type element

Rules not expressible in a XHTML grammar (1/7)

<input type="image" name="submit1" /> No alt!!

<input type="radio" alt="..."/> Wrong alt!!
Image inputs without alternative text. The alt attribute is mandatory.
Expression
DTD Not feasible
XML Schema Not feasible
XSLT <xsl:template match="//input[@type='image'][not(@alt)]">
 <xsl:message>Image input with no alt</xsl:message>
</xsl:template>

Rules not expressible in a XHTML grammar (2/7)

Attributes conditionally required.
Container element Attribute Condition to be mandatory
img,area alt Always (and thus, expressible)
frame title Always (and thus, expressible)
input alt If input's type is "image"
th abbr If table header's text is too long
table summary If table contains tabular data, i.e, it is not a layout-only table

Rules not expressible in a XHTML grammar (3/7)

Elements conditionally required
Container element Required element Condition to be mandatory
head title Always (expressed)
html head Always (expressed)
frameset, iframe noframes Always (expressible)
object some alternative inside If object does not contain alternative text
form fieldset If too many form fields
select optgroup If too many options
table caption If table contains tabular data, i.e, it is not a layout-only table

Rules not expressible in a XHTML grammar (4/7)

<a href="javascript:loadUrl(...)">... Bad!! Use onclick instead!!
Attributes typically misused
Container element Misused attribute Misusage condition
a, area href JavaScript present at href attribute, instead of at onclick attribute
meta http-equiv Badly used for auto-refresh or auto-redirect
input alt If input's type is not "image"
* (any tag) tabindex Not a set of unique consecutive numbers
* (any tag) accesskey Not a unique character

Rules not expressible in a XHTML grammar (5/7)

<h1>...</h1> <h3>...</h3> Missing h2!!
Properly used headers
Expression
DTD Not feasible
XML Schema Not feasible
XSLT <xsl:template match="//h6[not(preceding::*[self::h1 or self::h2 or self::h3 or self::h4 or self::h5 or self::h6][1][self::h6 or self::h5])] |
  //h5[not(preceding::*[self::h1 or self::h2 or self::h3 or self::h4 orself::h5 or self::h6][1][self::h6 or self::h5 or self::h4])] |
  //h4[not(preceding::*[self::h1 or self::h2 or self::h3 or self::h4 orself::h5 or self::h6][1][self::h6 or self::h5 or self::h4 or self::h3])] |
  //h3[not(preceding::*[self::h1 or self::h2 or self::h3 or self::h4 orself::h5 or self::h6][1][self::h6 or self::h5 or self::h4 or self::h3 or self::h2])] |
  //h2[not(preceding::*[self::h1 or self::h2 or self::h3 or self::h4 orself::h5 or self::h6][1])]">
 <xsl:message>Improper headers</xsl:message>
</xsl:template>

Rules not expressible in a XHTML grammar (6/7)

<area href="..."/ > Missing redundant link!
A redundant link is required for each client-side map area.
Expression
DTD Not feasible
XML Schema Not feasible
XSLT <xsl:template match="//area">
 <xsl:variable name="area" select="." />
 <xsl:if test="not(//a[@href = $area/@href])">
  <xsl:message>Missing redundant area's link</xsl:message>
 </xsl:if>
</xsl:template>

Rules not expressible in a XHTML grammar (7/7)

<input size="84" name="address" type="text" /> Missing label!
A label is required for each form field
Expression
DTD Not feasible
XML Schema Not feasible
XSLT <xsl:template match="//select | //textarea |
  input[@type='password' or @type='text' or
    @type='checkbox' or @type='radio' or @type='file']">
 <xsl:variable name="ff" select="." />
 <xsl:variable name="l" select="//label[@for=$ff/@id]" />
 <xsl:if test="count($l)&gt;1 or
    (count($l)=0 and not(@title))">
  <xsl:message>Missing form field's label</xsl:message>
 </xsl:if>
</xsl:template>

External validators

Markup validation
<xsl:value-of select="document(concat( 'http://validator.w3.org/check?charset=%28detect+automatically%29&uri=' ,$url))//xhtml:*[contains(., 'Congratulations')]" />
CSS validation
<xsl:value-of select="document(concat( 'http://jigsaw.w3.org/css-validator/validator?uri=' ,$url))//xhtml:*[contains(., 'Congratulations')]" />

External HTTP header sniffer

Mobile OK tests
<xsl:value-of select="document(concat( 'http://cgi.w3.org/cgi-bin/headers?url=' ,$url))//xhtml:pre" />

WAEX appliance

Original version + Repair process + Forms

A comparison

Tool comparison
Taw Hera WAEX
Size 3 Mb 329 Kb 90 Kb
Platform Java PHP XSLT
WCAG Coverage OK OK OK
Standalone Yes Yes Yes
Online Yes Yes Yes
HTML Any Any XHTML
Reusability Poor Poor Rich
EARL Yes Yes Not yet (easy)
Multiple idioms Yes Yes Not yet (easy)
Multiple pages Yes No No
HTTPS Yes No No
Mobile OK Yes No Yes
Uses external tools No Yes Yes
Covers XHTML restrictions not in DTD No No Yes

Conclusions (1/2)

Conclusions (2/2)

Usable