1. HCID2013 DIY Accessibility
April 2013
Caleb Tang User Experience | Accessibility Consultant

2. • Define Accessibility
• Disability and the Web
• DIY tools
• Let’s do it
• Next steps
Agenda
2 @calebtang

3. What is Accessibility?
Accessibility means
having equal access to web-based
information and services regardless
of physical or developmental abilities
or impairments
Accessibility toolkit
• Web Content Accessibility Guidelines
• Automated checks
• Manual checks
• Expert reviews using assistive
technologies
• User testing with disabled people
• Co-design, focus groups, personas…
Define Accessibility
3 @calebtang

4. Today we are going to look at manual checks
4 @calebtang

5. The Ecology
5 @calebtang
Define Accessibility

6. • Define Accessibility
• Disability and the Web
• DIY tools
• Let’s do it
• Next steps
Agenda
6 @calebtang

7. Visual Impairment
Types of visual impairment
• Blindness
• Low vision: macular degeneration,
glaucoma, diabetic retinopathy,
cataract
• Colour-blindness: red, green, blue
or no colour deficiencies
More about visual impairment
• http://webaim.org/articles/visual/
• http://www.inclusivedesigntoolkit.com/
betterdesign2/simsoftware/
simsoftware.html
How do they use the computer?
• http://www.bbc.co.uk/accessibility/guides/
vision_index.shtml
• http://www.bbc.co.uk/accessibility/guides/
blind_index.shtml
Disability and the Web
7 @calebtang

8. Hearing Impairment
Types of hearing impairment
• Mild, medium, severe, profound
• Conductive hearing loss, neural
hearing loss, high tone hearing
loss, low tone hearing loss
More about hearing impairment
• http://webaim.org/articles/auditory/
• http://www.inclusivedesigntoolkit.com/
betterdesign2/UChearing/hearing.html
How do they use the computer?
• http://www.bbc.co.uk/accessibility/guides/
hearing_index.shtml
Disability and the Web
8 @calebtang

9. Cognitive Impairment
Types of cognitive impairment
• Memory, problem solving,
attention, reading, linguistic,
verbal comprehension, maths
comprehension, visual
comprehension
More about cognitive impairment
• http://webaim.org/articles/cognitive/
How do they use the computer?
• http://www.bbc.co.uk/accessibility/guides/
words_index.shtml
Disability and the Web
9 @calebtang

10. Motor Impairment
Types of motor impairment
• Injury: Spinal cord injury, loss or
damage of limbs
• Diseases: Cerebral palsy, muscular
dystrophy, multiple sclerosis,
spina bifida, ALS, arthritis,
Parkinson’s disease, essential
tremor
More about motor impairment
• http://webaim.org/articles/motor/
How do they use the computer?
• http://www.bbc.co.uk/accessibility/guides/
movement_index.shtml
Disability and the Web
10 @calebtang

11. • Define Accessibility
• Disability and the Web
• DIY tools
• Let’s do it
• Next steps
Agenda
11 @calebtang

12. Step 1: We are going to use
Internet Explorer for this
exercise. Alternative toolbars
are available for other browsers
Web Accessibility Toolbar (WAT) by Paciello Group
12 @calebtang
Step 2: Download and install
WAT Toolbar from
http://www.paciellogroup.com/
resources/wat/ie
Step 3: Pick your website and
start using the toolbar
DIY tools

13. • Define Accessibility
• Disability and the Web
• DIY tools
• Let’s do it
• Next steps
Agenda
13 @calebtang

14. What do we look for in images?
Images may not be easily perceived by people with visual impairment or sometimes
cognitive impairment. To make them accessible, alternative texts are added to the
HTML code as a way to describe the image. There are many types of images and
alternative texts can be treated differently depending on their context.
• Informative: Alt text should describe the message of the image
• Decorative or supplementary: They should just have an empty alt text
• Groups of images: Normally found in maps. The first image should have
descriptive alt text and the following should have alt text
• Image of texts: Alt text should be equivalent to the texts in the image
• Image link: Provide title to the link and leave the image alt text empty
14 @calebtang
Images
Let’s do it

15. Step 1: Load the webpage you
wish to check. On the toolbar,
click’Show images’under the
‘Images’tab
Images
15 @calebtang
Step 2: you will see‘alt text’
displayed for each image. If you
don’t see one, they are
implemented as background
images, which won’t be read out
by screen readers.
Step 3: Consider if those
images are informative or
decorative. If you feel that the
image provide additional
information to the texts, then
its informative, otherwise its
decorative
Let’s do it

16. Practice: Is this informative or
decorative?
Images (cont.)
16 @calebtang
Practice: What about this? This is
a link image. The‘alt text’
provides alternative to the text
images and the link title says
‘Sign in to Rightmoveplus’.
What if the alternative text is
empty (alt=“”)? Is it still
acceptable?
Practice: The top hero image
does not have an‘alt text’
detected, what could it be? It’s
a background image. Is it
acceptable?
The second hero image has an
alt text of‘My dream home’,
while the image texts on the
image says‘If you have a
dream, we have the home.
Watch the advert’
Let’s do it

17. What do we look for in typography?
Typography helps define the structure of the page. Headings, paragraphs, list items,
quotes etc. are ways to help chunk content so that they are meaningful, easier to
scan and read.
• All typographic elements should semantically coded. For example, a heading
should be coded using <h1> to <h6>, list items should be <li> or quotes should
be <blockquote>.
• Headings: Ideally, they are hierarchical, <h1> followed by <h2>, <h3> etc.
• Resize: Text shouldn’t be coded using‘px’because they are not resizable.
Consider using other measurement unit such as %, em, pt
17 @calebtang
Typography
Let’s do it

18. Step 1: On the toolbar, click
‘Heading Structure’under the
‘Structure’tab
Typography: Headings
18 @calebtang
Step 2: A heading structure
report is presented. There are
headings, so it’s a good thing.
They are presented in hierarchy,
but not ideal. <h3> could be
<h2>
Step 3: Check if those headings
represent the structure of the
page visually.
Note: There is no one way to
define the structure. Well
thought out and consistent
structure will benefit
Accessibility, Responsive
Design as well as SEO
Let’s do it

19. Step 1: On the toolbar, click
‘List items’under the‘Structure’
tab
Typography: Lists
19 @calebtang
Step 2: You will see all the lists that
has been coded as list items
highlighted.
Scan the page to see if any of the
lists on the page are not
highlighted. If so, then you need to
inform the developer
Step 3: Navigation is
considered a list of links
although they don’t look like a
list visually. Ensure primary nav,
secondary, menu, footer etc.
are also coded as lists
Note: Screen reader and voice
recognition software allow
users to highlight just list items
through a command. It will
help them use the website
better if they are predictable
Let’s do it

20. Step 1: On the browser‘Page’
tab, click‘Text Size’ and select
‘Largest’
Typography: Resize
20 @calebtang
Step 2: See if all the texts on
page has been enlarged.
In this case, they are still the
same. So the developer will need
to work on this.
Note: Not all people with visual
impairment use screen readers.
Depending on their severity,
they may just need to see
larger texts.
This is particularly relevant to
older people and also people
using small screens.
Let’s do it

21. What do we look for in links?
A link is designed to take user from one page to another. It can also trigger a
scripting event such as a lightbox popup, content refresh, tabs etc.
Links are, in another word, a call-to-action. They may look like a link or a
button through CSS. It is important to make sure they are descriptive.
• A link to another page: text should describe the destination page
• A link to trigger a scripting event: text should describe the purpose of the
event
• A link for an image: image ‘alt text’ can be empty (alt=“”) and the link title
should describe the destination or purpose depending on the call to action
21 @calebtang
Links
Let’s do it

22. Step 1: On the toolbar, click’
List links [new window]’under
the‘Doc Info’tab
Links
22 @calebtang
Step 2: You will see a new
window listing all the links,
image‘alt text’, url, title and
target in a form of table.
Read the lists on the table and
see if they make sense to you.
Practice: You may see multiple
‘more info’links in some pages.
Ideally the link says‘more info
about renting’, but it is
acceptable to have the‘…about
renting’as title
Let’s do it

23. What do we look for in titles?
There are two types of title:
• Page title: this can be found under <title> tag on the HTML code. It is the first
thing a screen reader reads out, it is displayed on search engine results pages,
and it is presented on the frame of the browser. For these reasons, they have to
be unique and descriptive
• Title attribute: this can be found supplementing all HTML tag (<a title=“title
here”>). You may not see them as visible on the page, but they are visible to all
assistive technologies. You occasionally see them as a tooltip in some browsers.
They can provide supplementary information but beware of over doing it as it
can be annoying when a screen reader talks too much
23 @calebtang
Titles
Let’s do it

24. Step 1: On the toolbar, click’
Page Information [new window]’
under the‘under the Doc Info’
tab.
Alternatively you can just read
the title bar on top of the browser
Titles
24 @calebtang
Step 2: On the toolbar, click’
Show Titles’under the‘under the
Doc Info’tab.
Step 3: Similar to image‘alt
text’you will see the titles
presented. Check if they are
supplementing or actually just
repeating
Let’s do it

25. What do we look for in tables?
There are two types of tables
• Layout tables: Developers sometimes use tables to control the layout of the
page. As long as they are coded as layout table (ie. No <th> and just <td>), and
they make sense when linearised, they are fine to use. But, hey its 2013, web
technologies have progressed to table-less layout
• Data tables: Used to display content in tabular way, similar to Excel. Sometimes
they can be very complex and additional coding is needed to help provide
equivalent semantics (i.e. id, scope, colspan, rowspan attributes)
25 @calebtang
Tables
Let’s do it

26. What do we look for in colour?
Almost one in four men and one in three women are colour blind. Colour should
not be the only way to convey information. Colour can be supplemented by other
cues such as text, shape, icons etc.
To ensure that your content can be read by users with colour blindness, the colour
contrast between the texts and background should be sufficient and legible
26 @calebtang
Colour
Let’s do it

27. What do we look for in consistency?
Good design should be consistent. People with disabilities may learn to form a
mental model as they use your website, therefore consistency is key to help
them use your site more easily.
Reusable assets on your websites such as navigation, patterns, naming
convention, behaviour, metaphors etc. should all be consistent as possible.
27 @calebtang
Consistency
Let’s do it

28. There are more elements to check…
• Forms
• AJAX and custom controls
• Language
• HTML code validation
• Keyboard usability
• Audio and video
28 @calebtang
Other aspects to check
Let’s do it…next time

29. • Define Accessibility
• Disability and the Web
• DIY tools
• Let’s do it
• Next steps
Agenda
29 @calebtang

30. These checks will not make your site fully
accessible, they just help you to avoid critical
barriers
30 @calebtang

31. Involve domain experts and test your websites with
people with disabilities
31 @calebtang

32. More references
For more information on disability
• AbilityNet’s factsheets (http://www.abilitynet.org.uk/factsheets)
• WebAIM’s articles (http://webaim.org/articles/)
If you are not sure, seek help from the community
• Webaim mailing list (http://webaim.org/discussion/)
Guidelines and standards
• WCAG 2 (Full: http://www.w3.org/TR/WCAG/, Quick ref: http://3pha.com/
wcag2/)
• BS8878 (http://shop.bsigroup.com/en/ProductDetail/?
pid=000000000030180388)
Next steps
@calebtang32

33. Thank you.
33 @calebtang