Web standards: for interoperability and Accessibility

Rencontres Mondiales du Logiciel Libre, Metz, France, July 10th, 2003.

Tristan Nitot

Mozilla and OpenWeb.eu.org contributor

http://StandBlog.com/ - tristan@nitot.com

A bit of (Web) History

In the beginning was SGML
For the Web, Tim Berners-Lee has derived HTML (with hypertext and minimal number of elements) from SGML
Competition with Netscape and Microsoft has lead to tremendous (but anarchic and undocumented) innovation. (The Browser War)
1996: W3C was created to 'bring the Web to its full potential' and create Web standards with the implementors and users

Which Standards, by the way?

(X)HTML (document structure)
CSS 1 and 2 (Cascading Style Sheets)
W3 DOM (Document Object Model)
ECMAScript (AKA JavaScript)

An infant in bad shape

Bad habits have been taken by Web developers during the browser war.
Tag soup is plaguing the Web
Most pages are correctly rendered by accident!!!

Very difficult to author content

Authoring for 2 browsers was a nightmare.
Now that modern browsers are flooding the market how can we deal with all of them?
Mac : Gecko, MS-Tasman, WebCore/KHTML, Opera
Win : Gecko, MSHTML, Opera
Linux : Gecko, KHTML, Opera

Costly to maintain

Updating a page often means asking for help to IT people (high risk of breaking something when updating pages)

Inaccessible

Web sites were tailored for IE 4+ and Netscape 4+ graphical browsers

What about Braille displays?
What about screen readers?
What about users who cannot navigate with a mouse?
What about Connected PDAs?

Not ready for international

More than half of the users are outside the US.
How can they search for pages in their own language?
- The 'lang' attribute
How to display content in various langages without charset info?

Makes browsers bloated

Browsers are very complex/bloated to be able to handle existing tag soup having to replicate rendering bugs in older browsers.
Just an example, Mozilla has four rendering modes (Quirks, almost-standards, standards, XML.)
Slows down innovation for low-power devices, which cannot implement that many rendering modes.

Very hard to index and search

The web is not machine readable
Only Google and a few search engines have invested enough money to catch what's important in a web page
A unique opportunity to change the Web before it's too late

Using the standards

Separate structure from presentation
Semantic (X)HTML for content structure
CSS for presentation
Validation to make sure your code is standards-compliant.

Benefits for users:

Accessible
Pages load faster
easier to use

Huge benefits for entreprises and web developers:

Lower bandwidth costs
Better ranking in search engines
Easier (cheaper) to maintain
Broader audience (compatible with modern browsers
Vendor independance
Long term compatibility with XML (future-proof content)
- XML processing tools available for free

Let's dive into technical details

Start with a valid template
Separate content from structure
Use semantic, strict markup (XHTML 1.0 being more rewarding than HTML 4.01)
A template to start with

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

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">

<head>

  <title>My own page</title>

  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />  

</head>

<body>

  <h1>What a nice page</h1>

  <p>Just a  sample for FR language, with iso-8859-1 encoding (western Europe) and XHTML 1.0 Strict.</p>

</body>

</html>

Linking to a style sheet

In the head element:

Applies the style sheet to the page

Insert some stuff into the style sheet:

body { 

font-family: verdana, arial, helvetica, sans-serif;

color: white;

background-color: black;

background-image: url("coucher-soleil.jpg");

background-repeat: no-repeat;}

Demos : the power of CSS

Local demo with/without style
Test Styles Bookmarklet : change the layout in real time
Standblog / Switcher
CSS Zen Garden

DTDs and validation

HTML is the grammar of the Web
Need to parse it without ambiguity
Several grammars are available
- HTML 2.0, 3.2, 4.01, XHTML 1.0, 1.1...
Doctype indicates what grammar is used.
Validation: making sure that document complies with indicated grammar
Needed to ensure correct document rendering
Use http://validator.w3.org/ or HTML-Tidy

Buy standards compliant Web sites

Web Standards and validation for the Buyer

They are the best tools to

Ensure Web site quality (the thing they pay for)
Ensure Vendor independence
To limit hidden mainenance costs

Read 'Buy Standards Compliant Web sites' on W3.org

Back to benefits

Accessible (we'll see that later)
Pages load faster
Better ranking in search engines
Compatible with more browsers
Easier (cheaper) to maintain
Long term compatibility with XML (future-proof content)

Conclusion for Web developers

How do we embrace Web standards?
- validation
- throwing out pixel-perfect and absolute designs
- ensure your tools support standards
- configure your tools to support standards
- demand standards-compliant sites from your contractors
  - See "Buy standards-compliant Web sites"
- define a process to improve the quality of your Web site
  - See "Web Standards Switch"

Conclusion francophone ;-)

http://openweb.eu.org/
http://pompage.net/
Une liste de discussion pour partager les expériences : http://pompage.net/liste/
http://standblog.com/

Conclusion for the End User

Some web sites are “optimized” for certain browsers
Find contact info (webmaster) and send this person a polite e-mail asking why they do not support standards
Connect to http://bugzilla.mozilla.org/ and report Tech Evangelism Bug for your country with exact URL and the issue.
Help with Tech Evangelism effort.

Accessibility

What is accessibility

Importance : ability for the electronic information to be changed to suit the user's needs
The Web is for everybody
The Web is even more important for people with disabilities than for non-disabled persons

How do people with disabilities use the Web?

Vision Disabilities and adaptive technologies

Reading / no vision
Braille displays
Screen readers
Reading / low vision
Screen magnifiers
Reading / colourblindness
No adaptive technology...

Other disabilities and associated adaptives technologies

Physical
- Mouse / Trackball
- Keyboard / switches
Cognitive / learning disabilities
- Reading slowly
- Dyslexia
Hearing impairment

Some scary statistics

disabled users currently make up around 10% to 20% of the population in most countries
two million people in the UK registered with serious sight loss (source: RNIB)
The average age in many countries is increasing over time

Some selfish reasons to be accessible

Broaden the audience
Be useable from connected PDAs and smartphones
Accessibility means more usability
You'll probably end up with sight problems sooner or later

Accessibility and the law

USA, Canada, UK and Australia
- Web content accessibility is mandatory to government web sites and -depending on the country- to all businesses Web sites
All Europe but UK
- No law, yet.
- 2003: European year for people with disabilities
Europe Accessibility Certification being put in place by W3C. http://www.euroaccessibility.org/

W3C and accessibility

Web Accessibility Initiative (WAI) started in 1999
Web Content Accessibility Guidelines 1.0 (WCAG 1.0) is current work
Working on WCAG 2.0 (draft issued june 24th, 2003)
Also working on Authoring tools accessibility guidelines and User Agent (browser) Accessibility Guidelines

WAI Guidelines

Provide equivalent alternatives to auditory and visual content
Don't rely on color alone
Use markup and style sheets and do so properly
Clarify natural language usage
Create tables that transform gracefully
Ensure that pages featuring new technologies transform gracefully
Ensure user control of time-sensitive content changes

WAI Levels

Single-A : good;
- All priority 1 checkpoints are met.
Double-A : better;
All Priority 1 and 2 checkpoints are met.

Triple-A: ideal.
- All Priority 1, 2 and 3 checkpoints are met.

The more “A”, the better :-)

Testing your site

Limits of “validation” technology for accessibility: tools are not smart enough.

Need for human testing
Use you site with the keyboard only
View your site on text-only browsers
Use adaptive technology (JAWS test version downloadable for free)
- http://www.freedomscientific.com/fs_products/software_jaws.asp

Accessibility testing tools

Bobby used to be the most used tool at some point
WAVE 3.0 http://www.wave.webaim.org/
Cynthia Says http://www.contentquality.com/
A-Prompt windows software http://aprompt.snow.utoronto.ca/

Conclusion

The inaccessible buildings of tomorrow are built today, on the Web.

We have the power to change that.

Do we want to?