The Trinity of Inclusive Web Development

SEO, mobile web & accessibility:

Trinity of Inclusive Web Development

CSUN 2012San Diego - March 2nd, 2012

/ 12012. AccessibilitéWebToll Free: 1 (877) 315-5550

Attribution ⬌ NonCommercial ⬌ ShareAlike 2.5 Canada

/ 2

Some Rights Reserved

2012. AccessibilitéWebToll Free: 1 (877) 315-5550

Speaker

Denis Boudreau

11+ yrs experience - Web Accessibility

Chairman, AccessibilitéWeb

Co-editor, SGQRI 008 standards

Invited Expert, W3C


@dboudreau

Accessibility: A Tough Sell?

/ 4

Making accessibility happen

What was your experience?

What were the challenges?


Times, They Are A-Changin’

/ 5

Reviewing the a11y game plan

Looking back at all we’ve accomplished

Recognizing some practices as “sexier”

If you can’t beat them, join them!


A Few Positive Signs...


At long last, #perfectA11y


A11y: Have We Lost Our Way?(Keep it Simple and Smart)

/ 8

Going back to basics...

What is the intent of web accessibility?

Forget obligations: aim for results!

How does one eat an elephant?

HOW ABOUT:

Keeping Information Semantically Structured?


Headed Towards Inclusion

/ 9

Progressively...

Pragmatically...

Realistically...

BUILDING a11y, ONE STEP AT A TIMEAccessibility should not be about what legislators want. It should be about

embodying inclusion and meeting the adaptation needs of real people.


Trinity of Inclusive Web Development

Rethinking the web development strategy

Analysis of SEO / Mobile Web practices

Drawing a parallel between practices

Selling accessibility, indirectly

Justifying efforts, differently


My Own Personal 80/20 a11y Rule

Most recurrent a11y problems encountered

Focussing on the basics!

1. Text Equivalents2. Keyboard Navigation3. Content Structure4. Forms Associations5. Color Contrasts6. Significant Hyperlinks7. Document Language8. Screen Reader Compatibility


Because What It Comes Down To Is...


...Nothing Less Than Changing The World

/ 13

HOW CAN WE TURN THIS AROUND?


Accessibility and the Mobile Web

Mobile web best practices 1.0

60 practices declined in 5 themes• Overall Behavior• Navigation and Links• Page Layout and Content• Page Definition• User Input

/ 14

ResourcesMobile Web Best Practices 1.0 - Basic Guidelineshttp://www.w3.org/TR/mobile-bp/From WCAG 2.0 to MWBP (W3C Note)http://www.w3.org/TR/mwbp-wcag/wcag20-mwbp.html


http://www.w3.org/TR/mobile-bp/

http://www.w3.org/TR/mwbp-wcag/wcag20-mwbp.html


From WCAG 2.0 to MWBP 1.0

Bridging WCAG 2.0 and MWBP 1.0

Directly related to WCAG 2.0

Plus 17 other criteria (AA and AAA)

/ 15

MWBP Elements Criteria Level WCAG Criteria

Non-text alts 1.1.1. A Non-text Content

Fonts 1.3.1 A Info and Relations

Style Sheets Use 1.3.1 A Info and Relations

Use of Color 1.4.1 A Use of Color

Tab Order 2.4.3 A Focus Order

Auto-Refresh 3.2.5 AAA Change on Request

Link Target ID 2.4.9 AAA Link Purpose


http://www.w3.org/TR/mwbp-wcag/wcag20-mwbp.html

Common Barriers

Bridging WCAG 2.0 and MWBP 1.0

Examples of barriers in user exp.

Grouped under the WCAG principles

Another WCAG/MWBP mapping

/ 16

ResourceShared Web Experiences: Barriers Common to Mobile Device Users and People with Disabilitieshttp://www.w3.org/WAI/mobile/experiences


http://www.w3.org/WAI/mobile/experiences


Accessibility and SEO Best Practices

Search engines, including Google...

Only understand text

Never rely on external devices

Rely on the content structure

Love section headings

Dislike automatic refreshes

Enjoy efficient navigation mechanisms

Depend on significant hyperlinks

Again, some interesting parallels between specific SEO best practices and WCAG 2.0 success criteria!



SEO And Text Equivalents

No salvation beyond text content

/ 18

Criteria WCAG Criteria Details Level

1.1.1 Non-Text Content A

1.2.1 Audio or Video Content Only A

1.2.2 Captions (prerecorded) A

1.2.3 Audio Description or Media Alternative (Prerecorded) A

1.2.4 Captions (live) AA

1.2.5 Audio Description (prerecorded) AA

1.4.5 Images of Text AA

1.2.6 to 1.2.9 Additional Criteria AAA


SEO And Keyboard Navigation

No navigation beyond the mouse

/ 19


2.1.1 Keyboard A

2.1.1 No Keyboard Traps A

2.4.3 Focus Order A

2.4.7 Focus Visible AA

2.1.3 Additional Criterion AAA


SEO And Content Structure

Headings: HTML’s integrated GPS

/ 20


1.3.1 Info and Relationships A

2.4.2 Page Titled A

2.4.6 Headings and Labels AA



SEO, Refreshes And Delays

Infinite loops and barriers to infos

/ 21


2.2.1 Timing Adjustable A

2.2.1 Pause, Stop, Hide A



SEO And Efficient Navigation

Semantics: all about making sense

/ 22


2.4.1 Bypass Blocks A

2.4.2 Page Titled A

2.4.3 Focus Order A

2.4.4 Link Purpose (in context) A

2.4.5 Multiple Ways AA

2.4.6 Headings and Labels AA

2.4.7 Focus Visible AA



SEO And Significant Hyperlinks

Click (w)Here!?

/ 23


2.4.4 Link Purpose (in context) A



Overview – Setting An A11y Baseline

A winning combination on many levels

/ 24

Criteria to consider WCAG MWBP SEO

Text Equivalents ✔ ✔ ✔

Keyboard Navigation ✔ ✔ ✔

Content Structure ✔ ✔ ✔

Significant Hyperlinks ✔ ✔ ✔

Refreshes and Delays ✔ - ✔

Efficient Navigation ✔ - ✔

Sufficient Color Contrasts ✔ ✔ -

Forms Associations ✔ ✔ -

ResourceSEO and Accessibility Overlaphttp://www.communis.co.uk/blog/2009-08-06-seo-and-accessibility-overlap


Bringing Down Barriers, One at a Time


Beyond Best Practices, "Web Quality"

/ 26

a11y within a global quality process

1.Recognize the progressive aspect of a11y

2.Give up on the desire to do everything at once

3.Divide work among the various stakeholders

4.Prioritize every team member's action items

5.Adapt the production lifecycle to the gameplan

6.Provide "real means" to achieve set goals


Finding Your WAI (way)

The W3C provides a lot of resources

Presentations you can copy

Before and After demo you can use

Business case resources

Coming across inaccessible websites

And much more!

LOTS OF GOOD STUFF!

/ 27

ResourceFinding Your WAI (way) to New Accessibility Resourceshttp://www.w3.org/WAI/yourWAI.html


And Above All...


Keep spreading the word. Be that change.

Thank You!

Denis Boudreau,President

Coopérative AccessibilitéWeb

1751 Richardson street, suite 6111

Montreal (Quebec), Canada H3K 1G6

Toll Free: +1 (877) 315-5550

Email: [email protected]

Web: www.accessibiliteweb.com

Blog: www.accessiblogue.com

Twitter : @AccessibiliteWb / @dboudreau


Spkr8 - Comments, suggestions? http://spkr8.com/t/9309

Slideshare.net – present yourself!http://is.gd/X28Lgd

The Trinity of Inclusive Web Development

Technology