SlideShare ist ein Scribd-Unternehmen logo
1 von 39
What is Web Accessibility?
Ross Mullen
ross.mullen@canaxess.com.au
www.canaxess.com.au
Moodleposium 2016
I'll be discussing
• What and why accessibility
• Types of disabilities a user may experience
• A few tips to make your content better
• Links
• Images
• PDF files
• Videos
What is web accessibility?
• making web content accessible to everyone regardless of
impairments
• if content isn’t easy for assistive technology to interact with
it and understand, it will make it very difficult for the end
user to use the content
Why web accessibility
• Disability Discrimination Act
• If web content is not accessible it is potentially in breach of the
Disability Discrimination Act (DDA) and can result in legal action
being taken.
• University policies
• It’s the right thing to do
What is WCAG 2.0
• Web Content Accessibility Guidelines version 2.0 (WCAG 2.0)
• It’s the most consistent way to assess web content
• Endorsed by many Governments around the world
• Numbered criteria with accompanying techniques
Types of disabilities
• Not all users interact with web sites the same way
• Assistive technology is a broad term that describes any
number of pieces of hardware and software that ‘assists’ the
user
Types of disabilities
• Four main types we need to consider when designing
content
• Sight
• Movement
• Hearing
• Cognitive
How screen readers work
• Reads the HTML code and onscreen text
• Announces content through a synthesised voice
• Has features which make it easier for users to understand
content
• Viewing all page links in a separate window
Challenges
• Moodle has accessibility challenges
• Authoring your content in better ways helps
1. Link text
• It is the visible text on a link
• I am a link
Avoid unclear link text
Enrol in this semesters course content
click here
Screen reader links list window
Better link text
Enrol in this semesters course content
Read the news about the university
read an important announcement
Confusing link text
Course 1 schedule
Course 2 schedule
Course 3 schedule
Course 4 schedule
Course 5 schedule
Course 6 schedule
Unique information in the link
• Place unique information in the link at the start
• Course 1 schedule (don’t do this)
• 1st Course schedule (do this)
Unique information in the link
1st course schedule
2nd course schedule
3rd course schedule
4th course schedule
5th course schedule
6th course schedule
Add hint text to links
• Make the user aware the link triggers a file to be
downloaded
• Give them extra information to assist
Course information [PDF opens an external program]
Course content outline [link open in a new window]
Links summary
• Avoid using the words “click here” or other vague text
• Make link text understandable on its own
• Place unique information at the start of link text
• Make the user aware if the link opens a file
2. Images
• All images must have an ALT attribute
• Not all images require ALT text
<img src="image1.gif" alt="">
<img src="image2.gif" alt="Canberra skyline showing Mt
Ainslie">
Images
• If the image is decorative only and it doesn’t convey
information
• No ALT text is required
Images
• If the image conveys information that is required for
understanding
• ALT text is required
• Explain what is in the image, does the description make sense if you were unable to see
it?
Images summary
• All images must have ALT attributes
• Not all images require ALT text (alt="this text")
• Use your judgement to decide if an image is decorative
3. PDF files
• Can be made accessible
• Structured word document will output a structured PDF
• Accessibility begins dropping off when images are added
• Especially complex images
Please don’t do this
• Do not have a PDF file which has screenshots from
PowerPoint
• Completely inaccessible
PDF caveat
• Assistive technology on mobile devices hasn’t matured
enough to understand tagged PDF documents
• If students are accessing content on mobile devices
• Cannot rely on PDF alone
• Always provide an alternative document format
• Ideally that format should be HTML
• And that should be the primary document format
4. Videos
• Captions are required for audio content
• An audio description may be required if there is background
audio that needs describing
• Provide a transcript of the video
• Benefits everyone not just those users that require the support
• Users may not want to sit through a 45minute video
Autocaptioning
• Feature of YouTube
• In very limited ways it can provide accurate captions
Autocaptioning fail
"Things like the big butts well we want
to carefully look"
Video summary
• Caption all spoken words
• Consider a separate audio description
• Don’t use autocaption
• Always add your own captions
Accessibility testing
• Automatic testing tools are good for identifying easy fixes
• Cannot be relied upon as the sole source of testing
SQUIZ HTML code sniffer
• Browser bookmarklet
• Performs strict syntax testing and may display many errors
• Not everything is an accessibility problem which needs fixing
• http://squizlabs.github.io/HTML_CodeSniffer/
Issues display
• When activated displays a list of issue
Individual issue
• Each issue displays an
in-depth description
• WCAG criteria
• WCAG technique
• Clicking the pin shows
the location
Testing with screen readers
• Test with JAWS or NVDA
• Can you tab to links
• Can the links be understood
• Are there keyboard traps with the content
• What happens when a link triggers a PDF
• View the links in the links list
• Insert + F7 (JAWS)
• F7 (NVDA)
Testing with users
• Test with all ages
• With and without impairments
• Testing isn't a once only tasks it needs constant checking
External testing
• Automatic testing is good for simple HTML
• When course content becomes complex use outside testing
services
• An accessibility audit report gives you confidence you're meeting
accessibility obligations
Make your course content inclusive
• Provide the best possible experience to the end user
regardless of impairment
• Make your course content inclusive
In summary
• Web accessibility needs constant effort
• Automatic checking tools are good for basic HTML
• External companies provide greater checking auditing
capability
• It will benefit many people
• Its ok to not get things 100%
Continue the conversation
• Reach out
• ross.mullen@canaxess.com.au
• www.canaxess.com.au
• @MrRossMullen
• au.linkedin.com/in/rossmullen

Weitere ähnliche Inhalte

Andere mochten auch

Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0 Effective Inclusive...
Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0  Effective Inclusive...Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0  Effective Inclusive...
Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0 Effective Inclusive...jack_armley
 
INHOLLAND Workshop Internet & Marketing
INHOLLAND Workshop Internet & MarketingINHOLLAND Workshop Internet & Marketing
INHOLLAND Workshop Internet & MarketingAyman van Bregt
 
«Потребности различных групп инвалидов в помощи на объектах социальной и...
«Потребности различных групп инвалидов в помощи на объектах      социальной и...«Потребности различных групп инвалидов в помощи на объектах      социальной и...
«Потребности различных групп инвалидов в помощи на объектах социальной и...Александр Горбунов
 
Payment gateway
Payment gatewayPayment gateway
Payment gatewayPiyush Dua
 
A Practical Guide to Web Accessibility
A Practical Guide to Web AccessibilityA Practical Guide to Web Accessibility
A Practical Guide to Web AccessibilityPlayground Inc
 
Tokyo Stock Exchange IPO Market Review 2016 1Q
Tokyo Stock Exchange IPO Market Review 2016 1Q Tokyo Stock Exchange IPO Market Review 2016 1Q
Tokyo Stock Exchange IPO Market Review 2016 1Q Cyberagent Ventures Korea
 

Andere mochten auch (7)

Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0 Effective Inclusive...
Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0  Effective Inclusive...Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0  Effective Inclusive...
Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0 Effective Inclusive...
 
INHOLLAND Workshop Internet & Marketing
INHOLLAND Workshop Internet & MarketingINHOLLAND Workshop Internet & Marketing
INHOLLAND Workshop Internet & Marketing
 
Wicked Problems
Wicked ProblemsWicked Problems
Wicked Problems
 
«Потребности различных групп инвалидов в помощи на объектах социальной и...
«Потребности различных групп инвалидов в помощи на объектах      социальной и...«Потребности различных групп инвалидов в помощи на объектах      социальной и...
«Потребности различных групп инвалидов в помощи на объектах социальной и...
 
Payment gateway
Payment gatewayPayment gateway
Payment gateway
 
A Practical Guide to Web Accessibility
A Practical Guide to Web AccessibilityA Practical Guide to Web Accessibility
A Practical Guide to Web Accessibility
 
Tokyo Stock Exchange IPO Market Review 2016 1Q
Tokyo Stock Exchange IPO Market Review 2016 1Q Tokyo Stock Exchange IPO Market Review 2016 1Q
Tokyo Stock Exchange IPO Market Review 2016 1Q
 

Mehr von Ross Mullen

Creating Website Status Updates for the Blind, the Bold and the Beautiful
Creating Website Status Updates for the Blind, the Bold and the BeautifulCreating Website Status Updates for the Blind, the Bold and the Beautiful
Creating Website Status Updates for the Blind, the Bold and the BeautifulRoss Mullen
 
Core accessibility patterns for better Joomla! sites
Core accessibility patterns for better Joomla! sitesCore accessibility patterns for better Joomla! sites
Core accessibility patterns for better Joomla! sitesRoss Mullen
 
Whats new in WCAG 2.1
Whats new in WCAG 2.1Whats new in WCAG 2.1
Whats new in WCAG 2.1Ross Mullen
 
Accessibility with Single Page Apps
Accessibility with Single Page AppsAccessibility with Single Page Apps
Accessibility with Single Page AppsRoss Mullen
 
Making chatbots accessible - DTA
Making chatbots accessible - DTAMaking chatbots accessible - DTA
Making chatbots accessible - DTARoss Mullen
 
Making chatbots accessible
Making chatbots accessibleMaking chatbots accessible
Making chatbots accessibleRoss Mullen
 
Challenges with third party tools in Federal Government web apps - A11y Camp ...
Challenges with third party tools in Federal Government web apps - A11y Camp ...Challenges with third party tools in Federal Government web apps - A11y Camp ...
Challenges with third party tools in Federal Government web apps - A11y Camp ...Ross Mullen
 

Mehr von Ross Mullen (7)

Creating Website Status Updates for the Blind, the Bold and the Beautiful
Creating Website Status Updates for the Blind, the Bold and the BeautifulCreating Website Status Updates for the Blind, the Bold and the Beautiful
Creating Website Status Updates for the Blind, the Bold and the Beautiful
 
Core accessibility patterns for better Joomla! sites
Core accessibility patterns for better Joomla! sitesCore accessibility patterns for better Joomla! sites
Core accessibility patterns for better Joomla! sites
 
Whats new in WCAG 2.1
Whats new in WCAG 2.1Whats new in WCAG 2.1
Whats new in WCAG 2.1
 
Accessibility with Single Page Apps
Accessibility with Single Page AppsAccessibility with Single Page Apps
Accessibility with Single Page Apps
 
Making chatbots accessible - DTA
Making chatbots accessible - DTAMaking chatbots accessible - DTA
Making chatbots accessible - DTA
 
Making chatbots accessible
Making chatbots accessibleMaking chatbots accessible
Making chatbots accessible
 
Challenges with third party tools in Federal Government web apps - A11y Camp ...
Challenges with third party tools in Federal Government web apps - A11y Camp ...Challenges with third party tools in Federal Government web apps - A11y Camp ...
Challenges with third party tools in Federal Government web apps - A11y Camp ...
 

Kürzlich hochgeladen

Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsTechSoup
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationnomboosow
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfAdmir Softic
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphThiyagu K
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdfQucHHunhnh
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)eniolaolutunde
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformChameera Dedduwage
 
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...fonyou31
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeThiyagu K
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactPECB
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactdawncurless
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Disha Kariya
 
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfArihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfchloefrazer622
 
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...PsychoTech Services
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...EduSkills OECD
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxVishalSingh1417
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAssociation for Project Management
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13Steve Thomason
 

Kürzlich hochgeladen (20)

Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
 
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..
 
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfArihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdf
 
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13
 

MoodlePosium 2016 what is web accessibility

  • 1. What is Web Accessibility? Ross Mullen ross.mullen@canaxess.com.au www.canaxess.com.au Moodleposium 2016
  • 2. I'll be discussing • What and why accessibility • Types of disabilities a user may experience • A few tips to make your content better • Links • Images • PDF files • Videos
  • 3. What is web accessibility? • making web content accessible to everyone regardless of impairments • if content isn’t easy for assistive technology to interact with it and understand, it will make it very difficult for the end user to use the content
  • 4. Why web accessibility • Disability Discrimination Act • If web content is not accessible it is potentially in breach of the Disability Discrimination Act (DDA) and can result in legal action being taken. • University policies • It’s the right thing to do
  • 5. What is WCAG 2.0 • Web Content Accessibility Guidelines version 2.0 (WCAG 2.0) • It’s the most consistent way to assess web content • Endorsed by many Governments around the world • Numbered criteria with accompanying techniques
  • 6. Types of disabilities • Not all users interact with web sites the same way • Assistive technology is a broad term that describes any number of pieces of hardware and software that ‘assists’ the user
  • 7. Types of disabilities • Four main types we need to consider when designing content • Sight • Movement • Hearing • Cognitive
  • 8. How screen readers work • Reads the HTML code and onscreen text • Announces content through a synthesised voice • Has features which make it easier for users to understand content • Viewing all page links in a separate window
  • 9. Challenges • Moodle has accessibility challenges • Authoring your content in better ways helps
  • 10. 1. Link text • It is the visible text on a link • I am a link
  • 11. Avoid unclear link text Enrol in this semesters course content click here
  • 12. Screen reader links list window
  • 13. Better link text Enrol in this semesters course content Read the news about the university read an important announcement
  • 14. Confusing link text Course 1 schedule Course 2 schedule Course 3 schedule Course 4 schedule Course 5 schedule Course 6 schedule
  • 15. Unique information in the link • Place unique information in the link at the start • Course 1 schedule (don’t do this) • 1st Course schedule (do this)
  • 16. Unique information in the link 1st course schedule 2nd course schedule 3rd course schedule 4th course schedule 5th course schedule 6th course schedule
  • 17. Add hint text to links • Make the user aware the link triggers a file to be downloaded • Give them extra information to assist Course information [PDF opens an external program] Course content outline [link open in a new window]
  • 18. Links summary • Avoid using the words “click here” or other vague text • Make link text understandable on its own • Place unique information at the start of link text • Make the user aware if the link opens a file
  • 19. 2. Images • All images must have an ALT attribute • Not all images require ALT text <img src="image1.gif" alt=""> <img src="image2.gif" alt="Canberra skyline showing Mt Ainslie">
  • 20. Images • If the image is decorative only and it doesn’t convey information • No ALT text is required
  • 21. Images • If the image conveys information that is required for understanding • ALT text is required • Explain what is in the image, does the description make sense if you were unable to see it?
  • 22. Images summary • All images must have ALT attributes • Not all images require ALT text (alt="this text") • Use your judgement to decide if an image is decorative
  • 23. 3. PDF files • Can be made accessible • Structured word document will output a structured PDF • Accessibility begins dropping off when images are added • Especially complex images
  • 24. Please don’t do this • Do not have a PDF file which has screenshots from PowerPoint • Completely inaccessible
  • 25. PDF caveat • Assistive technology on mobile devices hasn’t matured enough to understand tagged PDF documents • If students are accessing content on mobile devices • Cannot rely on PDF alone • Always provide an alternative document format • Ideally that format should be HTML • And that should be the primary document format
  • 26. 4. Videos • Captions are required for audio content • An audio description may be required if there is background audio that needs describing • Provide a transcript of the video • Benefits everyone not just those users that require the support • Users may not want to sit through a 45minute video
  • 27. Autocaptioning • Feature of YouTube • In very limited ways it can provide accurate captions
  • 28. Autocaptioning fail "Things like the big butts well we want to carefully look"
  • 29. Video summary • Caption all spoken words • Consider a separate audio description • Don’t use autocaption • Always add your own captions
  • 30. Accessibility testing • Automatic testing tools are good for identifying easy fixes • Cannot be relied upon as the sole source of testing
  • 31. SQUIZ HTML code sniffer • Browser bookmarklet • Performs strict syntax testing and may display many errors • Not everything is an accessibility problem which needs fixing • http://squizlabs.github.io/HTML_CodeSniffer/
  • 32. Issues display • When activated displays a list of issue
  • 33. Individual issue • Each issue displays an in-depth description • WCAG criteria • WCAG technique • Clicking the pin shows the location
  • 34. Testing with screen readers • Test with JAWS or NVDA • Can you tab to links • Can the links be understood • Are there keyboard traps with the content • What happens when a link triggers a PDF • View the links in the links list • Insert + F7 (JAWS) • F7 (NVDA)
  • 35. Testing with users • Test with all ages • With and without impairments • Testing isn't a once only tasks it needs constant checking
  • 36. External testing • Automatic testing is good for simple HTML • When course content becomes complex use outside testing services • An accessibility audit report gives you confidence you're meeting accessibility obligations
  • 37. Make your course content inclusive • Provide the best possible experience to the end user regardless of impairment • Make your course content inclusive
  • 38. In summary • Web accessibility needs constant effort • Automatic checking tools are good for basic HTML • External companies provide greater checking auditing capability • It will benefit many people • Its ok to not get things 100%
  • 39. Continue the conversation • Reach out • ross.mullen@canaxess.com.au • www.canaxess.com.au • @MrRossMullen • au.linkedin.com/in/rossmullen

Hinweis der Redaktion

  1. Today I'll be talking about the what's and why of web accessibility. The types of disabilities a user may experience and a few tips to make your content accessible.
  2. Web accessibility is about making web content accessible to everyone regardless of impairments. Your users may have any number of disabilities that affect their capacity to interact with your course content. A user may have partial or full vision impairments, temporary or permanent motor disabilities or they just prefer using a keyboard over a mouse. These challenges can affect the way a user interacts with web based content and if that content isn’t marked up in a way that makes it easy for assistive technology to interact with it and understand, it will make it very difficult – and in some instances, impossible, for the end user to use the content.
  3. Access to information and online services is covered by the Australian Disability Discrimination Act, it is a legal requirement to ensure no discrimination based on a disability exists, equal access for people with a disability must be provided where reasonably possible, that is you have shown a willingness to make content accessible. This requirement applies to any web content that is hosted in Australia. Not providing an accessible experience for users, particularly paying students can increase the likelihood of legal action taking place against universities. In addition university policies exist which promote a positive and inclusive environment and making content accessible is simply the right thing to do.
  4. The Web Content Accessibility Guidelines version 2.0 are a series of techniques produced by the governing body of the world-wide web which make web content more accessible. These techniques have been identified as the best way to assess web content, identify if its accessible and if, not have suggested techniques to make it accessible.
  5. Not all users interact with web sites the same way. Many use assistive technology which is a broad term that describes any number of pieces of hardware and software that ‘assists’ the user navigating their way around a website.
  6. A person who has a vision impairment may use a piece of software called a screen reader. Screen readers translate what is being displayed on the screen into spoken words. It will identify areas of content, links, and blocks of text and read everything with synthesised speech. Other vision impairments may mean the user uses a software magnification tool to zoom into a part of the screen, or activate a high colour contrast mode to enhance what is being displayed. If a user has a hearing impairment they may activate the captioning on videos and may also use a separate audio track that describes the background audio in the video content. Users who have difficulty using the mouse may instead use a voice navigation program that translates their spoken commands into movements on the screen, or they may just prefer the keyboard over using the mouse. It may seem overwhelming to have to be aware of a range of disabilities to create web content that is accessible but following WCAG 2.0 gives you the techniques you can use to make content accessible.
  7. Screen readers work by audibly announcing web content, and keyboard commands allow a user to navigate around that web content. The screen reader scans the HTML code and announces the text and HTML mark-up through a synthesised voice, and presents the content in a linear way. It can identify tables, form controls and changes in text but this must be correctly marked up in the HTML otherwise a screen reader will not announce the content correctly or give no information about the content.
  8. Regardless of the way your content is authored and through the best of your intentions the moodle platform still has challenges with accessibility. However, the moodle developers are making progress and the accessibility improvements will increase over time, as a content author you may not be able to directly edit common moodle elements but you can edit your content. There are techniques we can use to improve the creation of more accessible course content. These will not make your course accessible that takes time, but they will improve the accessibility of some of your authored content and are the things you should be doing as standard.
  9. Link text is the text a user clicks to navigate to different content within the same page or to different content hosted elsewhere. The way in which links are created and laid out on the screen can make it very difficult for a screen reader user to navigate.
  10. Sighted users can understand poorly worded links by the text surrounding it. If the link text was “click here” when read on its own it doesn’t make sense however the surrounding text and paragraph in which the link is in would give sufficient extra meaning to the user. In the example shown, the link text click here is at the end of the sentence about enrolling in course content, the whole sentence when read as a whole gives meaning. Screen reader users don’t necessarily have the same ability to gather this extra contextual information easily and must rely on the link text alone to provide all the information they require.
  11. Within screen readers is a feature which allows the user to create a list of all links on a page. Because of this feature, appropriate link text is crucial for making it easier for the end-user to understand. If all links on the page were worded as “click here” and there were 40 links the complete list would be impossible to navigate. Would you feel confident clicking a link labelled “click here” if you didn’t know where it took you or what it did?
  12. A technique we can use to increase the readability of the links is to simply use better link text. Link text should be descriptive enough to understand on its own outside of the webpage. In the example shown we've replaced the click here links with more appropriate link text. When deciding on suitable link text, consider if the …. is capable of being understood in the screen reader links list.
  13. Because a screen reader orders links alphabetically in this window, place any unique information in the link text at the start. if you had a page with 40 links, which all start with the word "course", when these are displayed in the links list window you also have 40 links which are difficult to navigate, as they all begin with 'course'. The user must listen to each link in full to determine the unique information.
  14. In the example shown, the number 1 is in the middle of the link, and we place with at the start, when the links are viewed within the links list window its ordered based on the number.
  15. By providing the unique information at the front of the link helps the user find the link easier because the ordering is on the first character.
  16. If the link triggers the download of a PDF or other file format, place hints in the link text to give the user the required information. Such as [PDF] for links which open PDF files or [Link opens in a new window] if links open content in a new window let the user know. Give the user that extra contextual information which assists their understanding.
  17. In summary, avoid using the click here or read more link text. Make the link text understandable when read on its own, place unique information at the start of the link and make the user aware if the link opens a file or takes them to an external site. Make it easy for your users.
  18. Images are one of those accessibility issues that people think they know all about, I'm sure many of you have heard if you have an image you must add ALT text to make it accessible, this is only half the story. It's true that all images require an ALT attribute, but not every image requires ALT text (the value inside the quotes).
  19. An ALT attribute is short for alternative text, it provides a text description for the image. If the image is decorative only and serves no purpose, have blank ALT text. In the example shown the image of the man is decorative a user doesn’t need to be made aware of that, so we've selected on the image properties in moodle, description not necessary. Which renders blank ALT text.
  20. If the image conveys a purpose or instruction, then the ALT text must have a description that can be understood if someone could not view the image.
  21. In summary, all images must have ALT attributes, but not all images require ALT text. Use your judgement, if the image is decorative only no ALT text is required.
  22. PDF files can be made accessible. When creating PDF files, make sure they're created from a properly structured Microsoft Word document. A properly structured document at the source will equal a properly tagged PDF document when created, give or take a bit of manual fixing up with Adobe InDesign or Adobe acrobat.
  23. It's important to engage with relevant stakeholders in particular lecturers and professors who upload content to Moodle. They need understand that there are things they can't do which make the content inaccessible to people with impairments, especially those using screen readers. One example which I've seen was a number of PowerPoint slides which in turn had a range of images, pasted into a PDF.
  24. However, there is a very large caveat with using accessible PDFs. If you anticipate students to view course content on mobile devices, you need to be aware of the limitations of the assistive technology support. On those devices, the screen reader capability for understanding a correctly tagged PDF is poor. The mobile device screen reader technology hasn’t matured enough to understand a tagged PDF document and so for those students which need that extra level of support, it fails them. Always provide another alternative to a PDF file. Providing a HTML file is the gold standard for accessible content and in every situation, you should be publishing in HTML primary and PDF secondary.
  25. Captions are required for all video content which has audio, if the video has a person talking, caption it. And videos may require an audio description, this is for audio other than a person talking, it may be incidental music or background noise, if something is happening and you can hear it, it may need describing. Provide a transcript of the video, make it easy for your users to understand your content, not all users who would benefit from a transcript would have a disability requiring them to use it, some users may just prefer reading through a transcript quicker than watching a video.
  26. A word of warning over the YouTube auto captioning feature. Autocaptioning is a feature where YouTube guesses the spoken audio and overlays what it thinks is the correct words, you may be thinking it's a great way to provide captions quickly. However, unless the audio has no noise other than the spoken words and is crystal clear you will end up with something like the example.
  27. The slide shows a Today show interview with former Prime Minister Tony Abbott, autocaptioning is used. What Mr Abbott said was "well we want to carefully look at this budget" the captions say "things like the big butts well we want to carefully look", whilst amusing it's not a good look. The best way to avoid this is to add captions yourself and YouTube allows you to add captions to any video content you upload.
  28. Caption all spoken words, and consider a separate audio track if there are long blocks of non-spoken audio. Avoid the autocaption feature and instead use your own written captions and upload these to YouTube.
  29. When you've finished creating your content it's important to run a few tests to check the accessibility, one of the ways is with any number of the automatic testing. These tools perform an accessibility assessment quickly, they can't be relied upon as the sole source of accessibility testing but they do provide a good first pass of checking and identifying those easy to fix problems.
  30. One of the best free tools which I use is the SQUIZ HTML checker, this is a free browser bookmark when activated runs automated tests over your web content. It does unfortunately tend to perform strict checking and will display every error, so don’t be alarmed if you see many errors Its knowing what errors to focus on and you can fix, versus what errors to ignore and are outside of your control and this just comes down to practice and experience.
  31. The Squiz checker displays a report of found issues.
  32. Clicking each issue will display a cursor on the screen showing where the error exists, it also includes the criteria which it has failed against.
  33. Part of your testing strategy should include testing with screen readers JAWS and NVDA. What you're looking for with screen reader testing, can you navigate to all content on the screen via the keyboard, do the links make sense and what happens when links which trigger PDF files are selected. Try the testing with the monitor switched off to work out if the content is understandable.
  34. Testing with users regularly is crucial to understanding the difficulties users may encounter with your content, test will all users of all ages with and without impairments to ensure the web content works. Can vision impaired users navigate easily and understand how to move around it, can users with a motor impairment navigate it, can people with temporary impairments access it. Don’t limit yourself to testing with a specific user group, on a specific device. Make accessibility testing part of your course deployment strategy.
  35. Although automatic testing can help you identify those easy to identify accessibility failings, it won't find more complex accessibility problems. As complex functionality increases in your content then so should your testing strategy, if you have workflows, numerous images or interactivity it's at this point begin considering outside accessibility testing services by experienced reviewers because automatic testing tools will no longer give accurate results. External companies use a combination of automatic and manual accessibility testing strategies and detail the results in an accessibility audit.
  36. Web accessibility may sound like a daunting prospect, but it doesn’t need to be. Following good web development practice can and will improve your course content, don’t think of web accessibility as a once only task it needs constant effort and readjustment to get things right, the effort you're putting in will benefit many people.
  37. You may not always get it right and that’s ok, be bold engage your stakeholders and ensure any content you upload to Moodle conforms to WCAG 2.0 and is useable, be innovative and try new things but be responsive to user needs if the content is becoming difficult to navigate, encourage users to contact you if the content needs fixing. You're doing something to improve the user's ability to access information and that’s a great thing. The WCAG 2.0 guidelines are the start for accessibility the end goal is a great user experience and this will take time and effort.
  38. There is help available, we at CANAXESS love to help and improve accessibility, if you have a problem with accessibility, would like an audit report to identify bottlenecks in your content or just want to chat, drop us an email and let's carry on the conversation. Reach out to me on email, our website, follow me on twitter and connect on LinkedIn. I'll tweet the links to the HTML squiz bookmarklet, the screen readers and a few useful pages on web accessibility. Does anyone have any questions?