Web Developers Group Accessibility Talk

1
Beyond Validation And Contracts (watch out for
the fine print)
Web Developers Group Accessibility Talk June 19,
2003
2
What is Web Accessibility?
Accessibility is a measure of how well all
people, including those with disabilities, are
able to use your site.

• The content of web pages should be accessible by
  
• Different browsers.
• Different input devices like switches and
  pointers
• Different output devices such as screen reader
  software that converts text into speech or
  braille.

3
W3C Accessibility guidelines
Web Accessibility Initiative currently has 14 Web
Content Accessibility Guidelines containing 65
checkpoints.

Each checkpoint has a Priority Level.
Priority 1 Designers must satisfy this
checkpoint for all people to access the
content. Priority 2 Designers should satisfy
this checkpoint to remove significant
barriers. Priority 3 Designers may address this
checkpoint to further improve accessibility.
4
Accessibility of NSW sites
Examination of 50 Government and commercial sites
identified the following key accessibility issues.
26 of sites use alt tags fully. 20 of sites
use relative font size values. 10 of sites use
TH tags appropriately for data tables. 23 of
sites provide adequate alternatives for all
non-W3C format content.
5
Accessibility is a legal requirement
People who provide goods and services over the
internet need to think about how they make their
WWW sites accessible to people with
disabilities. Provision of information and other
material through the web is a service covered by
the Disability Discrimination Act (DAA). Equal
access for people with a disability in this area
is required by the DAA.
Human Rights and Equal Opportunity Commission
Advisory note
There are similar laws in many other countries.
6
Read the Fine Print
Many Web Development Contracts now include clause
requiring accessibility. For example The
product is expected to comply with the Web
Content Accessibility Guidelines 1.0. These
guidelines are a specification developed by the
W3C. They address barriers which people with
physical, visual, hearing and cognitive/neurologic
al disabilities may encounter when using Web
sites.   We would expect that all Priority 1 and
Priority 2 checkpoints in the guidelines be met.
7
Issue 1 Main Navigation
Avoid using images for text WCAG 3.2 (P2)
Ensure sufficient contrast between foreground and
background colours WCAG 2.2 (P2)
Ensure page remains usable when scripts, applets
etc are not supported WCAG 6.3 (P1)
8
Issue 2 Forms
Implicit labels should be associated with their
controls WCAG 10.2 (P2)
Explicit labels should be associated using ltlabel
forgt WCAG 12.4 (P2)
Good Point With radio buttons (and checkboxes)
input should be before the label
9
Using Label for
ltform name"form action"../module3/index.html"
onSubmit"return validate()"gt 2.1 Of the
following practices, which is NOT an example of
best practice?ltbrgt lttable border0
cellpadding3gt lttrgt lttdgtltinput idq211
type"radio" name"q1" value"a"gtlt/tdgt lttdgt
ltlabel forq211gtA review of the position
descriptionlt/labelgtlt/tdgtlt/trgt lttrgt lttdgtltinput
idq212 type"radio" name"q1"
value"b"gtlt/tdgt lttdgt ltlabel forq212gt Clearly
defined selection criterialt/labelgtlt/tdgtlt/trgt
10
Grouping Form Items
ltfieldsetgt and ltlegendgt can be used to group form
items together. Very useful for screen reader
users.
ltform name"form1" method"post"
action""gt ltfieldsetgtltlegendgtltbgt1 Personal
Detailslt/bgtlt/legendgt ltlabel for"name"gtNamelt/labe
lgt ltinput id"name" type"text" name"name
size"30"gt ltbrgt ltlabel for"id"gtID
Numberlt/labelgt ltinput id"id" type"text"
name"id number" size"10"gt lt/fieldsetgt
ACCESSIBLE FORMS
11
Issue 3 Absolute Font Sizes
Many sites use absolute CSS font size values
which can cause accessibility problems. For
example
p font-family Verdana, Arial, Helvetica,
sans-serif font-size 10pt color333366 p.nav
font-family Verdana, Arial, Helvetica,
sans-serif font-size 7pt colorFFFFFF blockqu
ote font-family Verdana, Arial, Helvetica,
sans-serif font-size 10pt color333366
Use relative rather than absolute units in markup
language and style sheet values. WCAG 3.4 (P2)
BUT WHICH ONE - Percentage or em?
12
Issue 4 Data table or Form?
An Interesting Conundrum (quiz form section)
What happens when you use a screen reader?

• Dont know what column each radio button is in.
• Each button in a row is associated with the label
  on the next line.

13
Data tables should be accessible
Create tables that transform gracefully.
WCAG 5.1 and 5.2 (both P1)
For data tables, identify row and column headers
and provide a description of the table/content.

• Use TD for data cells and TH for headers.
• Use table Summary and Caption attributes.
• Use Id and Headers attributes for tables with
  two or more logical heading levels.

Important Dont use structural markup (eg TH)
for visual formatting with layout tables.
ACCESSIBLE TABLES
14
Improved Accessibility will benefit everyone
The web is moving from a text-based medium for
computer screens into a multi-media medium for a
wide range of output devices.

• Mobile phones
• Car radios
• Web tv
• Kiosks

The same design features that are needed for
accessibility will be used by these technologies
of the future.
Thankyou.