SEO, Mobile Web and Accessibility: The Trinity of Inclusive Web Development

a11yYOW 2011

Ottawa — December 2nd, 2011

(In presentation mode, use the arrow keys or space bar)

Share!

2011. Fully licensed under a Creative Commons BY-NC-SA.

Attribution
NonCommercial
ShareAlike 2.5 Canada

Speaker

Denis Boudreau

Over 11 years in the field of web accessibility
Chairman, Coopérative AccessibilitéWeb
Co-editor, Quebec Accessibility Standards (SGQRI 008)
Invited Expert, W3C
- WCAG Working Group
- Education and Outreach Working Group
- WCAG Evaluation Methodology TaskForce
- HTML5 Accessibility TaskForce

Before We Start

Accessibility : A Tough Sell?

What was your experience? // What were the challenges?

Selling accessibility within the organizations?
Making accessibility happen within the industry?

The Times, They Are A-Changin'

Reviewing the Approach

Reviewing the accessibility game plan?
Some practices are sexier than others
If you can't beat them, join them!

A Few Positive Signs...

Screen capture of two tweets - in french: 1) L'accessiblité, pour donner des résultats, doit s'inscrire dans une logique progressive d'amélioration continue. 2) Le plus grand signe de maturité en accessibilité, c'est pouvoir reconnaître que les standards n'ont pas à être monolithiques.

KISS - Have We Lost Our Ways?

What if KISS simply meant going back to basics?

What is the intent of Web Accessibility?
Forget the obligations: aim for results!
Don't be paralyzed by the enormity of the task

How about: Keeping Information Semantically Structured?

Towards A Goal Of Inclusion

Crossing the distance, one step at a time

Progressively
Pragmatically
Realistically

Accessibility should not be about what legislators want. It should be about embodying inclusion and meeting the adaptation needs of end users.

Trinity Of Inclusive Web Development

Rethinking the Web Development Strategy

Analysis of SEO / Mobile Web practices
Drawing a parallel between both practices
Selling accessibility, indirectly
Justifying the inclusion efforts, differently

The 80/20 a11y Rule

Most recurrent accessibility problems encountered

More relevant than ever in 2011 :
- Text Equivalents
- Keyboard Navigation
- Content Structure
- Color Contrasts
- Forms Associations

Could we maybe just focus on covering the basics!?

Because What It Comes Down To Is...

Everybody Wants to Change the World, but Nobody Wants to Change.

How can we turn this around?

Accessibility And 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

Mobile Web Best Practices 1.0 - Basic Guidelines
http://www.w3.org/TR/mobile-bp/

From WCAG 2.0 to MWBP (W3C Note)
http://www.w3.org/TR/mwbp-wcag/wcag20-mwbp.html

From WCAG 2.0 To MWBP 1.0

Capture d'écran - Meilleures pratiques du Web mobile.

Bridging WCAG 2.0 and MWBP 1.0

Directly related to WCAG 2.0 criteria

MWBP Elements	Criteria	Level	WCAG Criteria Details
Non-text Alts	1.1.1	A	Non-text Content
Fonts	1.3.1	A	Info and Relationships
Style Sheets Use	1.3.1	A	Info and Relationships
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

Plus 17 other applicable criteria (AA and AAA)

Common Barriers

Screen Capture - Shared Web Experience (W3C).

Bridging WCAG 2.0 and MWBP 1.0

Examples of barriers users experience
Grouped under the four WCAG principles
Another mapping of WCAG 2.0 and MWBP 1.0

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

Accessibility And SEO

Rubick's cube with Google logos on some faces.

Search engines, including Google...

Only understand text
Never rely on devices
Rely on the content structure
Are real fond of section headings
Hate 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

Clusters of small cardboard tiles, each bearing a letter of the alphabet.

No salvation beyond text content!

Criteria	WCAG Criteria Detail	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 possible beyond the mouse

Criteria	WCAG Criteria Detail	Level
2.1.1	Keyboard	A
2.1.2	No Keyboard Trap	A
2.4.3	Focus Order	A
2.4.7	Focus Visible	AA
2.1.3	Additional Criterion	AAA

SEO And Content Structure

Schematic representation of a wireframe.

Table of contents and page organization

Criteria	WCAG Criteria Detail	Level
1.3.1	Info and Relationships	A
2.4.2	Page Titled	A
2.4.6	Headings and Labels	AA
2.4.10	Additional Criterion	AAA

SEO, Refreshes And Delays

Deux flèches en boucle symbolisant un refraîchissement accompagné d'un chronomètre.

Infinite loops and barriers to information

Criteria	WCAG Criteria Detail	Level
2.2.1	Timing Adjustable	A
2.2.2	Pause, Stop, Hide	A
2.2.3	Additional Criterion	AAA

SEO And Efficient Navigation

Série de symboles représentant des éléments de navigation.

Coherent mechanisms and semantic structure

Criteria	WCAG Criteria Detail	Level
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
2.4.8	Additional Criterion	AAA

SEO And Significant Hyperlinks

Determination of reputation

Criteria	WCAG Criterion Detail	Level
2.4.4	Link Purpose (In Context)	A
2.4.9	Additional Criterion	AAA

Overview - Setting An a11y Baseline

A winning combination on many levels

Criteria to Consider	WCAG	WMBP	SEO
Text Equivalents	√	√	√
Keyboard Navigation	√	√	√
Content Structure	√	√	√
Significant Hyperlinks	√	√	√
Refreshes and Delays	√	-	√
Efficient Navigation	√	-	√
Color Contrasts	√	√	-
Forms Associations	√	√	-