Live From HighEdWebDev06: How to Lower Costs and Increase Accessibility with Web Standards

Bryan Hantman of University of Maryland presented yesterdat a session at HighEdWebDev in Rochester titled “Setting the Standards: How Web Standards Lower Costs & Increase Accessibility.”

Dimitri Glazkov, one of the HighEdWebDev guest bloggers, enjoyed this presentation a lot. This is Dimitri’s second post.

Bryan Hantman of University of Maryland gave a good talk on Web standards. He used his experience with School of Nursing as the basis of presentation. And real-world experience beats anything in my book. The presentation slides are available on the Web.

Here’s a quick recap:

In standards-compliant worlds, the separation of content, presentation, and behavior is definite and permanent. For each facet of development, there are standards, supported by World Wide Web consortium. The separation of concerns is the Holy Grail of Web standards-based development and it offers great benefits, like:

* Simpler development and maintenance — it is easier to understand and maintan standards-supported code
* Forward compatibility — use of standards and validation promotes compatibility with the future improvement of the standards
* Faster downloading — uses less HTML. He used the classic Eric Meyer’s example, where standardization cut the size of the code by 44%
* Better accessibility — semantic HTML makes it easer for screen readers and alternative devices to interpret content
* Better search engine rankings

So, what is semantic markup?
Simply put, it is about using HTML tags according to their meaning. For instance, using H1 tag to specify heading, not “bold and ugly.” Each tag has specific meaning, and Web standards developers care about the meaning.

This leads to clean, concise markup that reflects hierarchy of information. At the same time, standards are not ugly. CSS allows to control presentation (look and feel) to a very high degree.

Bryan then gave the history highlights of his Web site.

* Old site used frames, used invalid, tag soup markup, feel apart across browsers.
* New site offers increased accessibility, lower bandwidth costs, semantic markup and better ratings in the search engines.
* The site renders picture-perfectly in IE6 and Gecko browsers (Netscape 6+, Firefox, Flock, etc.), and offers content-perfect (graceful degradatation) presentation for all other browsers.
* There is a separate stylesheet for printing.

Among accessibility features, the site has:

* access keys (cool!)
* tab indexing
* “skip to content” links

It’s one of the new, table-less layouts. Bryan mentioned that the use of tables is purely semantic, for data only. In addition, they’ve added captions and summaries to existing and new tables, which is another accessibility bonus.

Questions from audience:

* How to create skip-links and access keys? Bryan pointed to this alistapart.com article
* Is there advantage of images in CSS? Bryan’s answer was based on performance, but I can offer another set of answers:
o Images are in presentation, and they travel with the stylesheet. You can link to the stylesheet from anywhere and the images will follow
o Redesigning the page is much easier, because you don’t have to pluck the img elements out of the markup one-by-one.
* One user pointed out the improper use of the fieldset element. Bryan humbly agreed with the semantic nit-picker.
* How to enforce XHTML strict on pages? There was a “policy” answer from audience, then another lady suggested that Contribute offers markup lock-down features. At this point, I started worrying about compliance for the sake of compliance, but we’ve moved on to another topic.
* How to develop for handheld? Brian pointed out another alistapart.com article.

Brian also demonstrated the Web Developer Toolbar extension for Firefox, a must for any Web developer.

In my opinion, this was one of the best sessions of the whole conference, offering outcomes based on specific experiences, and a great showcase of Web standards development in higher education.