online learning resource accessibility in a lunchtime

Online Learning Resource Accessibility in a Lunchtime

David Sloan@sloandr

8 June 2012eLearning SymposiumUniversity of Dundee

Photo credit: Flickr user @benshepherd

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

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


1. KEYBOARD ACCESSIBILITY

4David Sloan, 8 June 2012

Photo credit: flickr user @bobjudge

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.


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


http://www.bbc.co.uk/news

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?


2. ALTERNATIVE TEXT FOR GRAPHICS


Photo credit: flickr user @saucesupreme

Alternative text: What to look for

• Alternative text that is:– Missing– Unhelpful– Redundant– Illogical

• Why? Supporting people who can’t see images


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?


http://wave.webaim.org/

The WAVE in action


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


3. USE OF COLOUR


Photo credit: flickr user @daffydil

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.


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


http://goo.gl/Qfvbs

http://goo.gl/Zpq3

http://www.vischeck.com/vischeck/

The Colour Contrast Analyser


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


4.HEADINGS AND LISTS


Photo credit: flickr user @tonx

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.


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


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


5.ACCESSIBILITY IN RESOURCE SELECTION POLICY AND PROCESS


Photo credit: flickr user @rubber_slippers_in_italy

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


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?


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


http://blog.dundee.ac.uk/accessibility/

http://blog.dundee.ac.uk/altformats/

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


THANKYOU!

email: [email protected]: @sloandr

blogs: www.58sound.com --- blog.dundee.ac.uk/eaccessibilitywork: www.dmag.org.uk --- www.computing.dundee.ac.uk

28

online learning resource accessibility in a lunchtime

Technology