Let's get accessible!

Let’s get accessible!
@RefreshDublin

Tady Walsh

Tady
Pronounced Tay-dee
Spelled T - A - D - Y

Who am I?
I am:
· A HTML, CSS and PHP developer
· A Project Manager for Arekibo Communications
· An Information Architect (UX/UI)
· An Accessibility Jedi
· A co-curator on HTML5 Gallery
· A Purple Netscape survivor of the ﬁrst Browser Wars

The Myths
· Accessibility is di cult to add/comply with

· Accessible websites are ugly websites

· New technology is already outdated

· New technology isn’t ready

· Making websites accessible is a pain in the ass

Let’s stop talking about making websites accessible. Instead,
let’s talk about keeping websites accessible. I’m not saying
that HTML is a magic bullet but as long as you are using
the most semantically appropriate elements to mark up
your content, you are creating something [that] is, by
default, accessible. It’s only afterwards, when we start
adding the bells and whistles, that the problems can begin.
Jeremy Keith, 2008

Web Accessibility

· The practice of designing, building and
maintaining websites so that they may
be used by people of all abilities and
disabilities.

Web Usability
· By contrast, web usability is the
practice of designing, building and
maintaining websites that are easy and
intuitive to understand by the user
without the requirement for prior
knowledge or experience.

Disability Act 2005
· Subsection 28: Access to information
- (2) Where a public body communicates in electronic form
with one or more persons, the head of the body shall ensure,
that as far as practicable, the contents of the communication
are accessible to persons with a visual impairment to whom
adaptive technology is available.

- (3) The head of a public body shall ensure, as far as
practicable, that information published by the body, which
contains information relevant to persons with intellectual
disabilities, is in clear language that is easily understood by
those persons.

Client RFT clauses

· Accessibility
The website must conform to at least
AAA (Triple A)/WCAG 2.0 standards...

Web Accessibility
Bodies & Standards
· W3C WAI · WCAG 2.0

· NDA · ATAG

· WebAIM · ARIA

WCAG

· Web Content Accessibility Guidelines

· Version 1.0 released in May 1999

· Version 2.0 released in December 2008

A/AA/AAA/Wha?

· A - Basic support

· AA - Better support. Minimum for Govt/
Public bodies.

· AAA - Best support. Most di cult to
implement completely

Project Time Breakdown

Design Build PM Testing Accessibility

Projected

Actual

Who’s responsibility?
· Project Manager

· User Experience/Interface expert

· Information Architect

· Designer

· Backend Developer

· Front end Developer

Think about accessibility
all the time.
ALL THE TIME!

Project Time Breakdown

Design Build PM Testing

Ideally

The idea that “if it can’t be measured, it doesn’t count” is
one of the most damaging delusions of our time. It gives us
a world that rewards quantity, not quality.

Cennydd Bowles, 2011

Make metrics the core goal of your design and you’ll just
end up with design that optimises those numbers, at the
expense of other important qualities.

Cennydd Bowles, 2011

Levels of Tolerance

· Checklists should be used as a guide

· Viewed with subjectivity

· Viewed with understanding

· Viewed with common sense

Schmidt Trigger
5
4.5
4
3.5
3
Voltage

2.5
2
1.5
1
0.5
0
12.5 13 13.5 14 14.5 15 15.5 16 16.5 17 17.5

Temperature (°C)
Heating Cooling

Screen Readers

· Jaws

· NVDA

· VoiceOver (Mac)

How screen readers work

Video source: ThinkVitamin.com

Code Sample

<h1> <img src=”logo.jpg”
title=”Welcome to the Company”
alt=”Company Name” /> </h1>

WebAIM survey
· JAWS is still the primary screen reader.
· The perception of free or low-cost screen readers is improving.
· 98.4% of respondents had JavaScript enabled.
· Two-thirds of the respondents use a screen reader on a mobile
device
· Most respondents ﬁnd longdesc useful.
· Social media use has increased.
· 12.8% use screen mag with their screen reader.
· Use of headings for page navigation continues to increase while
use of “skip” links and access keys has decreased

WebAIM survey
· One first level heading
12.5% that contains the site name

50.4% ·One first level heading that
contains the document title
37.1%

·Two first level headings,
one for the site name and
one for the document title

Image source: british-stamps.com

Motor or mobility
di culties

Code Sample

a:hover, a:focus
{background: rgba(200,200,200,0.5;}

Code Sample
HTML

JavaScript

Cognitive disabilities
Quick question...

Statistic source: wikipedia

Wordpress Codex

http://codex.wordpress.org/Template_Tags/posts_nav_link

Chronological order

Previous Next

Older Newer

HTML5 Markup

· Header · Article

· Footer · Figure

· Nav · Aside

· Section · Time

HTML5 Markup

<img src=”image.jpg” alt=”Photo of a cow
of a field” />

HTML5 Markup

<figure>
of a field” />
<figcaption>A Jersey cow grazing in a
field beside a wood</figcaption>
</figure>

HTML5 Markup

<abbr>etc</abbr>

Deﬁnitions: Camen Design

HTML5 Markup

<abbr title=”et cetera”>etc</abbr>


HTML5 Markup

<abbr>HTML</abbr>


HTML5 Markup

<dfn title=”HyperText Markup
Language”><abbr>HTML</abbr></dfn>


CSS3

· Rounded corners and background gradients

CSS3


· Text and box shadows

CSS3



· Transforms

CSS3



· Transforms

· Transitions

WAI-ARIA
· Add roles to elements

<nav>

WAI-ARIA
· Add roles to elements

<nav role=”navigation”>

WAI-ARIA
<nav role=”navigation”>
<header role=”banner”>
<aside role=”complimentary”>
<footer role=”contentinfo”>
<section role=”main”>
<form role=”form”>
<form role=”search”>
<div role=”application”>

WAI-ARIA

<figure>
of a field”/>
<figcaption>A Jersey cow grazing in a
field beside a wood</figcaption>
</figure>

WAI-ARIA

<figure>
of a field” aria-describedby=”fig1”/>
<figcaption id=”fig1”>A Jersey cow grazing
in a field beside a wood</figcaption>
</figure>

WAI-ARIA

<button aria-label=”Update”
aria-busy=”false”>

One ﬁnal myth

Tables are inaccessible

Basic table

March April
Apples 60 70
Oranges 30 50

Basic table
<table>
<tr>
<td> </td><td>March</td><td>April</td>
</tr>
<tr>
<td>Apples</td><td>60</td><td>70</td>
</tr>
<tr>
<td>Oranges</td><td>30</td><td>50</td>
</tr>
</table>

Accessible table
<table summary=”Sale of Apples & Oranges in
March/April this year”>
<caption> Fruit sales Q1 2011 </caption>
<thead>
<tr>
<th> </th><th id=”march”
scope=”col”>March</th><th id=”april”
scope=”col”>April</th>
</tr>
</thead>

Accessible table
<tbody>
<tr>
<th id=”apples” scope=”row”>Apples</th>
<td headers=”march apples”>60</td>
<td headers=”april apples”>70</td>
</tr>
<tr>
<th id=”oranges” scope=”row”>Oranges</th>
<td headers=”march oranges”>30</td>
<td headers=”april oranges”>50</td>
</tr>
</tbody>
</table>

Be proactive

· Research more

· Attempt more

· Know more

· Think more

Interwebs

· http://www.nda.ie

· http://www.universaldesign.ie/

· http://www.webaim.org

· http://www.w3c.org/WAI

Tweeters
· Jeremey Keith @adactio

· Je erey Zeldman @zeldman

· Derek Featherstone @feather

· Christian Heilmann @codepo8

· Molly Holzschlag @mollydotcom

· Tom Coates @tomcoates

· Luke Wroblewski @lukew

· Robin Christopherson @usa2day

Shout outs!

· Alan Dalton (NDA)

· Stu and all at Refresh Dublin

· The Science Gallery

· Brandon Grotesque

Thank you!
@RefreshDublin

http://www.tadywalsh.com
@tadywankenobi

Let's get accessible!

More Related Content

What's hot

Similar to Let's get accessible!

Recently uploaded

Let's get accessible!