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.

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

16. The Colour Contrast Analyser
David Sloan, 8 June 2012 16

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

21. David Sloan, 8 June 2012 21

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

28. THANKYOU!
email: dsloan@computing.dundee.ac.uk
twitter: @sloandr
blogs: www.58sound.com --- blog.dundee.ac.uk/eaccessibility
work: www.dmag.org.uk --- www.computing.dundee.ac.uk
28