Suggested Recommendation for Accessibility in XHTML 2.0 Draft

Summary

This is a suggested recommendation for accessibility in the XHTML 2.0 draft using the <section> element.

Content

To help improve accessibility to web content for users of mobile devices with small screens or disabled users such as blind or visually impaired persons, I suggest using the <section> element to block-up sections of XHTML code that can be given attributes such as id, title, and summary. These sections of code on a web page can then be displayed separately by a browser on a mobile device or read by a text-to-speech program for the visually impaired. For example, the code for a section could look something like this:

<section id="sitenav" title="Site Navigation" summary="Navigation links for our website." >
    <p>
    </p>
</section>

The <section> element could also be nested to give a hierarchical structure view to a web page. This hierarchical or outline view list could be generated and displayed by a browser on a mobile device to show the various sections on a web page. The user could then select what section of the web page they would like to view and the browser will then only show that section of the page on the screen.

For instance, on a mobile device when a user visits a web page they might see a section list with their browser like this:

www.weather.com (or page title)
    Site Navigation
        Search Site
        Find Weather by ZIP or City
    Current Conditions
    Local Radar Image
    10 Day Forecast

If the user would select "10 Day Forecast" the browser could just show on the screen or text-to-speech software the section of the web page that is in between the <section> element surrounding the table containing the 10 Day Forecast.

This would greatly improve accessibility to web pages for mobile devices and disabled users, especially with pages that are full of tables used for mainly graphical structure (which could just not be place in any section in the code so it won't show up in the section outline list) or that have a large amount of content plastered in table cells all over the page.

Extra Considerations

A few extra things that you might consider is allowing for a header and footer to be declared in the <head> of the document that would insert code before and after the code in a section when a section is displayed on a screen by itself. This would allow for navigational links and/or a site header graphic (or for small ads on sites that rely on advertising for their free content) to be displayed along with any section that is displayed by itself in a browser. A possible example is below:

<head>
    <section header="index.php?header" footer="index.php?footer" />
</head>

These would be the default header and footer for all sections if they are displayed by themselves on a screen. If you want to deviate from the default header or footer when coding a section you can just place a header or footer attribute with that section. For example you might place something in the code like this:

<section id="sitenav" title="Site Navigation" summary="Navigation links for our website." header="index.php?alternateheader" footer="index.php?alternatefooter">
    <p>
    </p>
</section>

You could also just specify that you don't want any header (void) for this section (if you defined a default header for all sections in <head>) by saying something like:

<section id="sitenav" title="Site Navigation" summary="Navigation links for our website." header="">
    <p>
    </p>
</section>

When using relative links on a web page you could link to show just one section on a mobile device screen or speech-to-text program when 'href' points to an 'id' that is associated with a <section> element. For example:

<a href="#sitenav">Site Navigation</a>

This would take you right to showing you the <section> element block with the 'id' attribute 'sitenav'.

Another consideration is to have an optional <meta> tag in the <head> of the document that would point to a simple web page that would show on a mobile device an alternate navigational section outline view (made by the web page creators) that could be more graphical than the general outline of the sections generated and shown by the browser otherwise. The browser will still load the original page the meta tag was found in to be able to show or read the individual sections, but would point to an alternate navigational view if desired for a more graphical customized look. This simple navigational document would contain relative links (ex: href="#sitenav") to the various sections that would then be shown independently. For example you might have a <meta> tag like in <head> like:

<head>
<meta name="navigate" content="navigate.html" />
</head>

Browsers, like on mobile devices, that would support a <meta> tag like this would show a simple customized navigational document that could even be personalized for each user if desired. (A blind user that wouldn't care about a nice graphical display could just use the section outline generated by the browser by default.)

One last extra thing to possibly consider is a way to show an alternative to a section if it is displayed alone on a small screen device, etc. You may consider using the 'src' attribute to specify an external file containing code for an alternate view if the code that is displayed on a full computer screen would look rather bad by itself or on a small screen. For example, maybe something like:

<section id="sitenav" title="Site Navigation" summary="Navigation links for our website." src="sitenav.php?">
    <p>
    </p>
</section>

Full screen computer browsers will skip over the <section> tag and show the content in between, but if viewed separately on a mobile device it will use the code from the file in the 'src' attribute.

(P.S. showing sections alone may also be useful for printing a web page where only one section containing what you want to print is printed.)

Conclusion

Using the <section> attribute to surround parts or sections of the code that could then be viewed separately would greatly improve web content browsing for mobile and disabled users. I know that the <section> element is already contained in the XHTML 2.0 draft, but from what I read about it I think it could be used in this way, but maybe another element name could do. The extra considerations may not be suggested in the best way for how the code would look or how features like this could be done, but hopefully it would give you an idea for how something like the <section> element could be made more useful. Thank you for your time in reading this and for considering ways to improve accessibility for mobile and disabled users.

Seth Honeycutt