Online Learning                                         Resource                                         Accessibility    ...
Accessibility and Online Learning• We know that technology can make learning  environments more inclusive:   – Digital tex...
But accessibility can seem             daunting…• …so this talk will give you five lunchtime  activities that you can appl...
1. KEYBOARD                                                   ACCESSIBILITYPhoto credit: flickr user @bobjudge            ...
Keyboard accessibility: What to look for• Question 1: Can you operate the resource without  having to use the mouse?   – C...
Keyboard accessibility: How to check • Use your keyboard! • Use the tab key to navigate through the page • Use enter to se...
Keyboard accessibility: Actions• Fixing efficiency problems:   –   Add in-page navigation links   –   Reducing unnecessary...
2.                                                 ALTERNATIVE                                                 TEXT FOR   ...
Alternative text: What to look for• Alternative text that is:  – Missing  – Unhelpful  – Redundant  – Illogical• Why? Supp...
Alternative text: How to check• Automated tools (e.g. the WAVE:  http://wave.webaim.org)  – Can inform you of missing alte...
The WAVE in action   David Sloan, 8 June 2012   11
Alternative text: Actions• Change any alternative text that you find is  problematic  – Hand-edit the HTML (alt attribute ...
3.                                                  USE OF                                                  COLOURPhoto cr...
Use of colour: What to look for• Question 1: Are there any instances of low-contrast  text and background colours?• Questi...
Colour issues: How to check• Use your eyes!   – Print off a page on a black and white printer – does     information still...
The Colour Contrast Analyser        David Sloan, 8 June 2012   16
Colour issues: Actions• Low contrast colour schemes  – Increase contrast wherever possible by adjusting    colour values• ...
4.                                                  HEADINGS                                                  AND LISTSPho...
Headings and lists: What to look for• Question 1: Are headings suitably identified in  the page’s HTML?• Question 2: Are l...
Headings and lists: How to check• Check a page’s HTML code to see if what looks  like a:  – heading is actually identified...
David Sloan, 8 June 2012   21
Headings and lists: Actions• Edit HTML to clearly identify headings• Edit HTML to clearly identify lists  – Ordered, unord...
5.                                                   ACCESSIBILITY                                                   IN RE...
Accessibility in resource selection       policy and process• Question 1: Do you have a policy for selecting,  commissioni...
Accessibility in resource selection       policy and process• Consider the potential a resource offers to increase  inclus...
Finding out more: accessibility at UoD• Checking the eAccessibility Blog:  http://blog.dundee.ac.uk/accessibility/• Consul...
Summary• Those were some – not all! – things you can to  to consider online learning accessibility• Lots of tools and tech...
THANKYOU!email: dsloan@computing.dundee.ac.uktwitter: @sloandrblogs: www.58sound.com --- blog.dundee.ac.uk/eaccessibilityw...
Upcoming SlideShare
Loading in...5
×

Online Learning Resource Accessibility in a Lunchtime

1,581

Published on

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.

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,581
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • 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?
  • Transcript of "Online Learning Resource Accessibility in a Lunchtime"

    1. 1. Online Learning Resource Accessibility in a Lunchtime David Sloan @sloandr 8 June 2012 eLearning SymposiumPhoto credit: Flickr user @benshepherd University of Dundee
    2. 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. 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. 4. 1. KEYBOARD ACCESSIBILITYPhoto credit: flickr user @bobjudge David Sloan, 8 June 2012 4
    5. 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. 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. 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. 8. 2. ALTERNATIVE TEXT FOR GRAPHICSPhoto credit: flickr user @saucesupreme David Sloan, 8 June 2012 8
    9. 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. 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. 11. The WAVE in action David Sloan, 8 June 2012 11
    12. 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. 13. 3. USE OF COLOURPhoto credit: flickr user @daffydil David Sloan, 8 June 2012 13
    14. 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. 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. 16. The Colour Contrast Analyser David Sloan, 8 June 2012 16
    17. 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. 18. 4. HEADINGS AND LISTSPhoto credit: flickr user @tonx David Sloan, 8 June 2012 18
    19. 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. 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. 21. David Sloan, 8 June 2012 21
    22. 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. 23. 5. ACCESSIBILITY IN RESOURCE SELECTION POLICY ANDPhoto credit: flickr user@rubber_slippers_in_italy PROCESS David Sloan, 8 June 2012 23
    24. 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. 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. 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. 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. 28. THANKYOU!email: dsloan@computing.dundee.ac.uktwitter: @sloandrblogs: www.58sound.com --- blog.dundee.ac.uk/eaccessibilitywork: www.dmag.org.uk --- www.computing.dundee.ac.uk 28
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×