Enhancing Web Accessibility: The 8 Essential Areas for Document Accessibility
Blind Foundation
Accessible Formats Service
T
o
d
a
y
’
s
O
b
j
e
c
t
i
v
e
s
•
Document accessibility
•
Web accessibility basics
The 8 areas you need to get right!
Accessible Formats
Accessible Standard and
Large Print
•
More than just increasing your font size
•
Clear Print Guidelines
•
Information is easy
to locate
•
Layout is simple
•
Logical text and well
spaced
•
Graphics are clear
•
Round Table - printdisability.org
Electronic Text (e-text)
•
Structured electronic documents that are
accessible to people with a print disability
•
Could be –
•
Word Doc
•
PDF (not scanned)
•
ePub3
•
Html
•
….
Audio
•
Human narrated
•
Talking books (Book Link App)
•
Audio description
•
Magazines
•
Synthetic voice
•
Screen readers
•
Newspapers
(Telephone Information Service)
Booklink App
•
For those with a print disability
•
Unable to access printed materials –
clinical diagnosis / support (associate
membership)
•
11,000+ Audio books
•
Newspapers (updated daily)
•
Youth portal
Braille
•
The only true literacy pathway for the blind
•
Is a code for representing anything written
•
6 dots / 8 for computer braille
•
Uncontracted /
Contracted
Tactile Diagrams
•
Works in collaboration with braille
•
Can represent diagrams
How can YOU make a
difference?
Just remember these tips
F
o
n
t
s
I
m
a
g
e
s
L
a
y
o
u
t
T
a
b
l
e
s
H
e
a
d
i
n
g
s
F
o
n
t
s
T
y
p
e
f
a
c
e
s
Minimum size 12pt
Large Print 18pt
PowerPoint 32pt
Line Spacing 1.2 font size
(72pt = 1 Inch printed)
F
o
n
t
s
T
y
p
e
f
a
c
e
s
Sans Serif
Helvetica
Arial
Gill Sans
Century
Gothic
Tahoma
Ornate
Gigi
Brush Script
Curlz MT
Stencil
Papyrus
Jokerman
Chiller
Serif
Garamond
Bookman
Palatino
Times New
Roman
Good
Good
Bad
F
o
n
t
s
w
h
a
t
t
o
a
v
o
i
d
•
Avoid italics
•
Avoid underlining
•
Avoid block text (all caps)
Fonts
Use Bold
Use
bold text
to emphasise text
without reducing readability
Images
Alternate
Text
Alternate text (alt text) provides a
textual alternative to describe the
images, diagrams or charts
Images
L
a
y
o
u
t
A
l
i
g
n
m
e
n
t
Sour Cream Lemon Cake
Ingredients
•
250g butter.
•
2 cups sugar.
•
6 eggs.
•
2tsp lemon rind
•
250g sour cream.
•
2 cups standard flour.
•
2 tsp baking powder.
Method
1.
Cream 250g butter and 2 cups sugar.
2.
Add 6 eggs, 2tsp lemon rind and 250g Sour Cream.
3.
Blend well, gently fold in 2 cups flour and 2 tsp baking powder.
4.
Place in a 25cm cake tin.
5.
Bake at 180 deg C for 50 - 60 mins.
6.
Pour juice of 1 lemon combined with 3 tsp sugar onto the hot cake.
7.
Cover with a few clean tea towel and leave to cool.
L
a
y
o
u
t
A
l
i
g
n
L
e
f
t
Sour Cream Lemon Cake
Ingredients
•
250g butter.
•
2 cups sugar.
•
6 eggs.
•
2tsp lemon rind
•
250g sour cream.
•
2 cups standard flour.
•
2 tsp baking powder.
Method
1.
Cream 250g butter and 2 cups sugar.
2.
Add 6 eggs, 2tsp lemon rind and 250g Sour Cream.
3.
Blend well, gently fold in 2 cups flour and 2 tsp baking powder.
4.
Place in a 25cm cake tin.
5.
Bake at 180 deg C for 50 - 60 mins.
6.
Pour juice of 1 lemon combined with 3 tsp sugar onto the hot cake.
7.
Cover with a few clean tea towel and leave to cool.
L
a
y
o
u
t
A
l
i
g
n
L
e
f
t
T
a
b
l
e
s
A
d
v
i
c
e
•
Avoid using merged cells
•
Use table headings
•
Each piece of information should have
its own cell
•
Consider reading order of tables
T
a
b
l
e
s
E
x
a
m
p
l
e
H
e
a
d
i
n
g
s
Heading structure is probably the
most important
accessibility
consideration in a Word document
H
e
a
d
i
n
g
s
S
t
y
l
e
s
Using
Styles
is how you’re meant
to format documents in Word
Accessible Word & PDF
W
o
r
d
A
c
c
e
s
s
i
b
i
l
i
t
y
C
h
e
c
k
e
r
1.
File
2.
Info
3.
Check For issues
4.
Check Accessibility
PDF Accessibility Checker
Tools > Accessibility > Quick or Full Check
Just remember
F
o
n
t
s
I
m
a
g
e
s
L
a
y
o
u
t
T
a
b
l
e
s
H
e
a
d
i
n
g
s
Achieving Basic
Web Accessibility
W
h
a
t
i
s
w
e
b
s
i
t
e
a
c
c
e
s
s
i
b
i
l
i
t
y
?
W
C
A
G
2
.
0
C
o
n
f
o
r
m
a
n
c
e
Ensuring your website is inline with the
guidelines for WCAG 2.0
•
12 guidelines
•
3 conformance levels (A, AA, AAA)
•
61 total success criteria
G
e
t
t
i
n
g
t
h
e
s
e
r
i
g
h
t
m
a
k
e
s
a
l
l
t
h
e
d
i
f
f
e
r
e
n
c
e
1.
Page title
2.
Alt text
3.
Headings
4.
Contrast
5. Text resizing
6. Keyboard access (visual focus)
7. Forms, labels and errors
8. Multimedia
P
a
g
e
T
i
t
l
e
s
•
Informative & brief
•
Distinguishable from other web page titles
H
o
w
t
o
c
h
e
c
k
•
Hover
•
Browser bookmark dialogue box
A
l
t
e
r
n
a
t
i
v
e
(
A
l
t
)
T
e
x
t
•
If an image conveys useful information,
it needs alt text
•
If an image is only decorative, it should
have a null alt (alt="")
H
o
w
t
o
c
h
e
c
k
I
E
W
A
T
t
o
o
l
b
a
r
Images > show images
F
F
W
e
b
D
e
v
e
x
t
e
n
s
i
o
n
Images > outline images
> outline images w/o alt text
H
e
a
d
i
n
g
s
•
All text that visually looks like a heading
should be marked up as a heading in
HTML
•
Heading levels need meaningful hierarchy
e.g.
Heading level 1 <h1>
Heading level 2 <h2>
Heading level 3 <h3>
H
o
w
t
o
c
h
e
c
k
F
F
t
o
o
l
b
a
r
Information
> view document outline
I
E
t
o
o
l
b
a
r
Structure
> heading structure
C
o
l
o
u
r
C
o
n
t
r
a
s
t
All web pages should have a minimum
contrast ratio of 4.5:1 for normal-size text
H
o
w
t
o
c
h
e
c
k
C
o
l
o
u
r
C
o
n
t
r
a
s
t
A
n
a
l
y
s
e
r
•
Free
•
Mac + PC
•
Print + Web
R
e
s
i
z
i
n
g
T
e
x
t
•
Ensure all text can be increased to 200%
and that it does not:
•
get cut off
•
overlap other content
•
all buttons, fields and other controls remain
visible
•
horizontal scrolling is not required to read the
content
H
o
w
t
o
c
h
e
c
k
F
F
t
o
o
l
b
a
r
View > zoom > zoom text Only
Ctrl + [+] to incrementally increase text size
K
e
y
b
o
a
r
d
A
c
c
e
s
s
(
V
i
s
u
a
l
f
o
c
u
s
)
•
All content and functionality (links, forms,
media controls etc.) need to operate with
keyboard commands.
•
Keyboard focus must be visible and follow
a logical order through page elements
H
o
w
t
o
c
h
e
c
k
•
Tab to and from elements
•
Follows logical reading order
•
Focus is visible (incl. image links)
•
All functionality works
•
Drop down lists operate properly
I
f
y
o
u
m
u
s
t
u
s
e
a
m
o
u
s
e
t
o
c
o
m
p
l
e
t
e
a
n
y
o
f
t
h
e
a
b
o
v
e
,
y
o
u
r
w
e
b
p
a
g
e
i
s
n
o
t
k
e
y
b
o
a
r
d
a
c
c
e
s
s
i
b
l
e
.
F
o
r
m
s
,
l
a
b
e
l
s
,
a
n
d
e
r
r
o
r
s
L
a
b
e
l
s
•
Every form control should have a label
associated with it using 'label', 'for', and 'id'
•
Positioned correctly
•
left of text boxes and drop downs
•
right of radio buttons and check boxes
H
o
w
t
o
c
h
e
c
k
I
E
W
A
T
t
o
o
l
b
a
r
Structure > fieldset/label
M
a
n
u
a
l
l
y
HTML – check that form controls have a 'label'
element with a 'for' attribute that matches the value
of the 'id' attribute in the related control. Id's must
be kept unique within a web page.
<
l
a
b
e
l
f
o
r
=
"
f
i
r
s
t
n
a
m
e
"
>
F
i
r
s
t
n
a
m
e
:
<
/
l
a
b
e
l
>
<
i
n
p
u
t
t
y
p
e
=
"
t
e
x
t
"
n
a
m
e
=
"
f
i
r
s
t
n
a
m
e
"
i
d
=
"
f
i
r
s
t
n
a
m
e
"
/
>
M
u
l
t
i
m
e
d
i
a
(
V
i
d
e
o
/
A
u
d
i
o
)
A
u
t
o
-
s
t
a
r
t
c
o
n
t
r
o
l
•
Prevent audio, and video with audio from
automatically starting
C
a
p
t
i
o
n
s
•
Videos with audio should be captioned
T
e
x
t
t
r
a
n
s
c
r
i
p
t
•
Transcripts should be provided for audio/video
A
u
d
i
o
d
e
s
c
r
i
p
t
i
o
n
(
A
u
d
i
o
&
T
e
x
t
)
•
Describing important visual information
A
c
c
e
s
s
i
b
i
l
i
t
y
T
o
o
l
s
•
WAVE
wave.webaim.org
•
CCA
paciellogroup.com/resources
•
FANGS
Firefox Add-on
•
Web Dev Toolbar
Firefox Add-on
•
WAT Toolbar
Internet Explorer extension
•
NVDA
nvaccess.org
•
WebAnywhere
webanywhere.cs.washington.edu
Questions?
Enhance web accessibility by ensuring document accessibility through accessible formats such as large print and electronic text, audio narration, Braille, and tactile diagrams. Make a difference by following tips on fonts, images, layout, tables, and headings. Remember fonts like Gigi, Brush Script, and more.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Todays Objectives Document accessibility Web accessibility basics The 8 areas you need to get right!
Accessible Standard and Large Print More than just increasing your font size Clear Print Guidelines Information is easy to locate Layout is simple Logical text and well spaced Graphics are clear Round Table - printdisability.org
Electronic Text (e-text) Structured electronic documents that are accessible to people with a print disability Could be Word Doc PDF (not scanned) ePub3 Html .
Audio Human narrated Talking books (Book Link App) Audio description Magazines Synthetic voice Screen readers Newspapers (Telephone Information Service)
Booklink App For those with a print disability Unable to access printed materials clinical diagnosis / support (associate membership) 11,000+ Audio books Newspapers (updated daily) Youth portal
Braille The only true literacy pathway for the blind Is a code for representing anything written 6 dots / 8 for computer braille Uncontracted / Contracted
Tactile Diagrams Works in collaboration with braille Can represent diagrams
How can YOU make a difference?
Just remember these tips Fonts Images Layout Tables Headings
Fonts Typefaces Gigi Brush Script Curlz MT Stencil P apyrus Jokerman Chiller Helvetica Arial Gill Sans Century Gothic Tahoma Garamond Bookman Palatino Times New Roman
PDF Accessibility Checker Tools > Accessibility > Quick or Full Check
Just remember Fonts Images Layout Tables Headings
WCAG 2.0 Conformance Ensuring your website is inline with the guidelines for WCAG 2.0 12 guidelines 3 conformance levels (A, AA, AAA) 61 total success criteria
Getting these right makes all the difference 5. Text resizing 6. Keyboard access (visual focus) 7. Forms, labels and errors 8. Multimedia 1. Page title 2. Alt text 3. Headings 4. Contrast
Page Titles Informative & brief Distinguishable from other web page titles
How to check Hover Browser bookmark dialogue box
Alternative (Alt) Text If an image conveys useful information, it needs alt text If an image is only decorative, it should have a null alt (alt="")
How to check IE WAT toolbar Images > show images FF Web Dev extension Images > outline images > outline images w/o alt text
Headings All text that visually looks like a heading should be marked up as a heading in HTML Heading levels need meaningful hierarchy e.g. Heading level 1 <h1> Heading level 2 <h2> Heading level 3 <h3>
How to check FF toolbar Information > view document outline IE toolbar Structure > heading structure
Colour Contrast All web pages should have a minimum contrast ratio of 4.5:1 for normal-size text
How to check Colour Contrast Analyser Free Mac + PC Print + Web
Resizing Text Ensure all text can be increased to 200% and that it does not: get cut off overlap other content all buttons, fields and other controls remain visible horizontal scrolling is not required to read the content
How to check FF toolbar View > zoom > zoom text Only Ctrl + [+] to incrementally increase text size
Keyboard Access (Visual focus) All content and functionality (links, forms, media controls etc.) need to operate with keyboard commands. Keyboard focus must be visible and follow a logical order through page elements
How to check Tab to and from elements Follows logical reading order Focus is visible (incl. image links) All functionality works Drop down lists operate properly If you must use a mouse to complete any of the above, your web page is not keyboard accessible.
Forms, labels, and errors Labels Every form control should have a label associated with it using 'label', 'for', and 'id' Positioned correctly left of text boxes and drop downs right of radio buttons and check boxes
How to check IE WAT toolbar Structure > fieldset/label Manually HTML check that form controls have a 'label' element with a 'for' attribute that matches the value of the 'id' attribute in the related control. Id's must be kept unique within a web page. <label for="firstname">First name:</label> <input type="text" name="firstname" id="firstname"/>
