This slideset is designed for Opera, some features may only be available in the Opera Video Builds. However the basic content should work in any browser.

To see this in presentation mode using Opera, simply select "View" ->"Full Screen". To see how all this is done, view the source...

Opera - accessibility, usability and HTML 5

Contents

Talk contents

A web (pre)history

Web history > pre-dotcom crash

1989
TBL proposes a project
1992
<img> in Mosaic beta. Now 99.57% (MAMA)
1994
W3C started at MIT
1996
The Browser Wars: IE and Netscape one-upmanship
1999
Web Content Accessibility Guidelines (WCAG) and HTML 4.01

Research by Opera's MAMA analyser shows that 99.57% of pages have an image applied by markup of some description

More web history

Web history > accessibility and HTML 5

2005
WHAT-WG and W3C Mobile Web Initiative
2007
W3C adopts WHAT-WG spec as basis for HTML 5
January 22, 2008
First public working draft of HTML 5, WCAG 2.0 becomes a recommendation?

2004: WHAT-WG is Web Hypertext Application Technology Working Group. "Work on HTML5 originally started in late 2003, as a proof of concept to show that it was possible to extend HTML4's forms to provide many of the features that XForms 1.0 introduced, without requiring browsers to implement rendering engines that were incompatible with existing HTML Web pages. At this early stage, while the draft was already publicly available, and input was already being solicited from all sources, the specification was only under Opera Software's copyright.

In early 2004, some of the principles that underly this effort, as well as an early draft proposal covering just forms-related features, were presented to the W3C jointly by Mozilla and Opera at a workshop discussing the future of Web Applications on the Web. The proposal was rejected on the grounds that the proposal conflicted with the previously chosen direction for the Web's evolution.

Shortly thereafter, Apple, Mozilla, and Opera jointly announced their intent to continue working on the effort. A public mailing list was created, and the drafts were moved to the WHATWG site. The copyright was subsequently amended to be jointly owned by all three vendors, and to allow reuse of the specifications.

In 2006, the W3C expressed interest in the specification, and created a working group chartered to work with the WHATWG on the development of the HTML5 specifications. The working group opened in 2007. Apple, Mozilla, and Opera allowed the W3C to publish the specifications under the W3C copyright, while keeping versions with the less restrictive license on the WHATWG site." http://www.whatwg.org/specs/web-apps/current-work/multipage/introduction.html#history0

Standards

Standards @ Opera

Web standards > Opera involvement

25+ employees work on standards

The Web Standards Curriculum provides resources and Opera Labs examples of emerging technologies

Why standards?

Web standards > Why standards?

  1. The Web works everywhere
  2. Good standards help developers
  3. Good standards help site owners
  4. Good standards help site end-users

"The Web is the platform"

Developers can validate; separate content and presentation - means specialisation and maintainability.

For owners, more maintainability; smaller pages; better SEO

Users: light-weight; interoperable; more likely accessible

The current big contenders

Web standards > Future contenders

HTML 5
Anne van Kesteren, Lachlan Hunt, Simon Pieters
CSS 3
Håkon Wium Lie, Anne van Kesteren
ECMAScript 3.1, 4
Chris Pine
SVG
Erik Dahlström

And more!

ECMAscript encompasses JavaScript, JScript and Actionscript

Accessibility

Why bother?

Accessibility > Why bother

"For me being online is everything. It's my hi-fi, my source of income, my supermarket, my telephone. It's my way in." Mike, gamer and freelance technology writer with Cerebral Palsy

Mike using his thumb switch

See AbilityNet video's of people with disabilities using the web

Accessibility

Accessibility > who, what how

Who it affects, how people access and what makes this work:

Web Content Accessibility Guidelines (WCAG)

Accessibility > WCAG

A set of guidelines, not a specification, developed by the Web Accessibility Initiative (WAI)

See W3C's Web Accessibility Initiative for guidelines and details

.

Accessibility basics

Accessibility > basics

Accessibility, images

Accessibility > Images

Accessibility, headings

Accessibility > Headings

Heading list in Jaws the screen reader

Accessibility and Ajax

Accessibility > Ajax

HTML 4 designed for a mostly static web, doesn't scale to today's web

Filters and sliders
- Web apps that update areas of the page asynchronously i.e. automatically updating forms, drag 'n' drop, sliders, widgets...
- Issue: Notification of change of state, keyboard access

It's a bit like styling text as a heading without the heading element - it means nothing

ARIA

Accessibility > WAI ARIA

Web Accessibility Initiative Accessible Rich Internet Applications is the fix, it describes:

- Roles: what the widget does i.e. slider
- States and properties: a checkbox as checked
Image of a slider example
Standard: WAI ARIA, plays nicely with WCAG, being adopted by big 5 browsers and screen readers.

See Introduction to ARIA, Gez Lemon

Accessibility and usability

Accessibility > usability

Ramp seamlessly integrated with stairs

Disabled users are the ultimate user tester

See Integrating Accessibility Throughout Design

Accessibility and SEO

Accessibility > SEO

"SEO naturally takes care of accessibility because Google is the biggest blind user in the world" The Blind Billionaire?

Machine readable:
i.e. TITLE, headings, ALT text, link text, good hierarchy
Beware of faking it:
Keyword stuffing, hidden text...
Testing:
Switch off images, use a text browser, use users!

See Legal and General case study in the UK

HTML 5

Why HTML 5?

Technologies > HTML 5

HTML 4 great for documents...not suited for web apps

HTML 5: <canvas>

Technologies > HTML 5 > Canvas

"Immediate" Vector Graphics

(You can't manipulate them)

Serious application

HTML 5: Web Forms 2.0

HTML 5 > Web forms 2.0

More robust forms

Easier to put together standards control archetypes that are complicated with HTML 4.x.

<input type=date>:

<input type=range>:

Video - old code

HTML 5 <video>

Current way to embed video:

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/LtfQg4KkR88&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://www.youtube.com/v/LtfQg4KkR88&hl=en&fs=1" type="application/x-shockwave-flash"
allowfullscreen="true" width="425" height="344"></embed>
</object>

Video - new code

HTML 5 <new code>

Badass sexy new way

<video src="video.ogv"
  controls
  autoplay
  poster="poster.jpg" 
  width="320" height="240">
    <a href="video.ogv">Download movie</a>
</video>

Video - examples

HTML 5 <video>

in HTML5
A simple example
Or with some control
and in SVG
Add filters
or animation
and dynamic interaction

New stuff

Technologies > New Opera builds

Some demonstrations need an Opera experimental build.

To learn more read All together now: Video, 3D, File access.

Download:

Opera Dragonfly

Opera Dragonfly

Opera Dragonfly > Inside Opera Dragonfly

What Opera Dragonfly does

Opera Dragonfly > What Opera Dragonfly does

Debug pages
DOM inspector - on the fly
Style inspector - style sheets, rules and computed style
Error console - CSS, SVG, network problems, mail etc
Validation

Try it in Opera 9.5 +
Tools -> Advanced -> Developer Tools.

Also try the Debug Menu.

Opera Education

Opera education

End credits!

Thank you

hennys@opera.com