Presentation given at the University of Dundee's eLearning Symposium on 8 June 2012, focusing on some key techniques for assessing and addressing potential accessibility barriers in online learning resource.
Online Learning Resource Accessibility in a Lunchtime
1. Online Learning
Resource
Accessibility
in a Lunchtime
David Sloan
@sloandr
8 June 2012
eLearning Symposium
Photo credit: Flickr user @benshepherd
University of Dundee
2. Accessibility and Online Learning
• We know that technology can make learning
environments more inclusive:
– Digital text is flexible in appearance and format
– Online learning resources enable use and aggregation of
different formats (video, audio, animation) to support
different learning styles
– Online learning resources can reduce or overcome the
impact of physical barriers on participation in educational
experiences
• But when we use online learning resources, we must
avoid introducing new barriers
David Sloan, 8 June 2012 2
3. But accessibility can seem
daunting…
• …so this talk will give you five lunchtime
activities that you can apply to a specific web
resource:
– Check for a particular accessibility issue - and
know why it’s an issue for some people
– And understand what to do (or what to tell
someone else to do) if you find the issue
David Sloan, 8 June 2012 3
4. 1. KEYBOARD
ACCESSIBILITY
Photo credit: flickr user @bobjudge
David Sloan, 8 June 2012 4
5. Keyboard accessibility: What to look for
• Question 1: Can you operate the resource without
having to use the mouse?
– Can you navigate, access information, enter data, operate
controls?
• Question 2: Can you proceed logically and efficiently
through a screen or application?
• Question 3: Can you visually follow the tab focus?
• Why? Supporting anyone who can’t use a mouse.
David Sloan, 8 June 2012 5
6. Keyboard accessibility: How to check
• Use your keyboard!
• Use the tab key to navigate through the page
• Use enter to select the link or form control
that currently has focus
Example:
http://www.bbc.co.uk/news
David Sloan, 8 June 2012 6
7. Keyboard accessibility: Actions
• Fixing efficiency problems:
– Add in-page navigation links
– Reducing unnecessary links and form components
– Optimising form design
– Adjusting CSS to style a:onfocus and a:onactive
• Sorting keyboard inaccessibility:
– Likely to require modifying scripts that control dynamic
behaviour
– Provide alternative routes to accessing the same
functionality?
David Sloan, 8 June 2012 7
8. 2.
ALTERNATIVE
TEXT FOR
GRAPHICS
Photo credit: flickr user @saucesupreme
David Sloan, 8 June 2012 8
9. Alternative text: What to look for
• Alternative text that is:
– Missing
– Unhelpful
– Redundant
– Illogical
• Why? Supporting people who can’t see
images
David Sloan, 8 June 2012 9
10. Alternative text: How to check
• Automated tools (e.g. the WAVE:
http://wave.webaim.org)
– Can inform you of missing alternative text
– And some dodgy alternative text
• Human inspection
– Look at appropriateness of text by viewing the
page as text-only
– Listen to the page using a screen reader – does
the alternative text make sense when read out?
David Sloan, 8 June 2012 10
11. The WAVE in action
David Sloan, 8 June 2012 11
12. Alternative text: Actions
• Change any alternative text that you find is
problematic
– Hand-edit the HTML (alt attribute of img
element)
– Or using a content management system/blogging
software to select the image, and change its
alternative text value
David Sloan, 8 June 2012 12
13. 3.
USE OF
COLOUR
Photo credit: flickr user @daffydil
David Sloan, 8 June 2012 13
14. Use of colour: What to look for
• Question 1: Are there any instances of low-contrast
text and background colours?
• Question 2: Are there any instances of problematic
colour combinations? (e.g. red/green, red/black, red/
blue)
• Question 3: Are there any instances where colour
perception is required to understand information?
• Why? Accommodating people with colour deficit.
David Sloan, 8 June 2012 14
15. Colour issues: How to check
• Use your eyes!
– Print off a page on a black and white printer – does
information still make sense?
• Colour contrast checking tools:
– TPG’s Colour Contrast Analyser: http://goo.gl/Qfvbs
– Snook.ca’s Online Colour contrast check:
http://goo.gl/Zpq3
• Use Vischeck’s simulator
http://www.vischeck.com/vischeck/ to identify
possible issues for people with colour deficit
David Sloan, 8 June 2012 15
17. Colour issues: Actions
• Low contrast colour schemes
– Increase contrast wherever possible by adjusting
colour values
• Avoid use of problematic colour pairs
• Provide redundancy so that information
available via colour coding is also available
without perceiving colour (e.g. asterisks, text)
• If you can’t avoid colour problems, provide the
same information in an additional format
David Sloan, 8 June 2012 17
18. 4.
HEADINGS
AND LISTS
Photo credit: flickr user @tonx
David Sloan, 8 June 2012 18
19. Headings and lists: What to look for
• Question 1: Are headings suitably identified in
the page’s HTML?
• Question 2: Are lists suitably identified in the
page’s HTML?
• Why? Important landmark information for
screen reader users. Helpful ways to identify
and break up text for everyone.
David Sloan, 8 June 2012 19
20. Headings and lists: How to check
• Check a page’s HTML code to see if what looks
like a:
– heading is actually identified as such (<h1>…
<h6>)
– List is actually identified as such (<ol> or <ul>
+ <li>; or <dl> + <dt> and <dd>)
• Use a tool to highlight all headings and lists on
a page:
– e.g. the Web Developer Toolbar
David Sloan, 8 June 2012 20
22. Headings and lists: Actions
• Edit HTML to clearly identify headings
• Edit HTML to clearly identify lists
– Ordered, unordered, definition lists
– Can use CSS to control appearance of the list and
bullet points
David Sloan, 8 June 2012 22
23. 5.
ACCESSIBILITY
IN RESOURCE
SELECTION
POLICY AND
Photo credit: flickr user
@rubber_slippers_in_italy PROCESS
David Sloan, 8 June 2012 23
24. Accessibility in resource selection
policy and process
• Question 1: Do you have a policy for selecting,
commissioning, procuring, appropriating
online resources for use in your teaching?
• Question 2: If so, does it include accessibility?
• Why should it? Accessibility should be part of
a QA process – identify opportunities and
threats early, rather than at the last minute
David Sloan, 8 June 2012 24
25. Accessibility in resource selection
policy and process
• Consider the potential a resource offers to increase
inclusion for specific groups
• Consider the threat that the resource presents in
terms of introducing new barriers…and how that
threat can be dealt with:
– Can the accessibility barrier be repaired?
– Is there a workaround?
– Accept the barrier cannot be removed and provide
an alternative for affected groups?
– Or reject the resource?
David Sloan, 8 June 2012 25
26. Finding out more: accessibility at UoD
• Checking the eAccessibility Blog:
http://blog.dundee.ac.uk/accessibility/
• Consulting with on-campus help and support:
– Web Accessibility Support service
– Alternative Formats service (
http://blog.dundee.ac.uk/altformats/)
• Sharing best practice via the Inclusive Practice
Showcase
David Sloan, 8 June 2012 26
27. Summary
• Those were some – not all! – things you can to
to consider online learning accessibility
• Lots of tools and techniques available to help
you address accessibility and inclusion, bite by
bite
• Embedding accessibility into online learning
resource selection and usage helps anticipate
and deal with potential barriers
David Sloan, 8 June 2012 27
BBC News web site shows examples of good practice – supports keyboard access, logical tab order, some in-page keyboard shortcuts, visual indication of current location of tab focus
Screenshots show the WAVE identifying alternative text it considers appropriate, and erroneous.
Screenshot shows the Colour Contrast Analyser reporting sufficient contrast – between black and white! Note that very high contrast between text and background colours can also cause readability problems for some people.
Web Developer Toolbar has an option to outline all headings (as identified in HTML) on a page. In this screenshot, there are two instances of text that visually resembles a heading. One is outlined, and therefore marked up in HTML as a heading; the other is not. Is that a problem?