39
What is Web Accessibility? Ross Mullen [email protected] www.canaxess.com.au Moodleposium 2016

MoodlePosium 2016 what is web accessibility

Embed Size (px)

Citation preview

Page 1: MoodlePosium 2016 what is web accessibility

What is Web Accessibility?Ross [email protected]

Moodleposium 2016

Page 2: MoodlePosium 2016 what is web accessibility

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

Page 3: MoodlePosium 2016 what is web accessibility

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

Page 4: MoodlePosium 2016 what is web accessibility

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

Page 5: MoodlePosium 2016 what is web accessibility

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

Page 6: MoodlePosium 2016 what is web accessibility

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

Page 7: MoodlePosium 2016 what is web accessibility

Types of disabilities • Four main types we need to consider when designing

content• Sight• Movement• Hearing• Cognitive

Page 8: MoodlePosium 2016 what is web accessibility

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

Page 9: MoodlePosium 2016 what is web accessibility

Challenges•Moodle has accessibility challenges• Authoring your content in better ways helps

Page 10: MoodlePosium 2016 what is web accessibility

1. Link text• It is the visible text on a link• I am a link

Page 11: MoodlePosium 2016 what is web accessibility

Avoid unclear link text

Enrol in this semesters course contentclick here

Page 12: MoodlePosium 2016 what is web accessibility

Screen reader links list window

Page 13: MoodlePosium 2016 what is web accessibility

Better link text

Enrol in this semesters course contentRead the news about the universityread an important announcement

Page 14: MoodlePosium 2016 what is web accessibility

Confusing link text

Course 1 scheduleCourse 2 scheduleCourse 3 scheduleCourse 4 scheduleCourse 5 scheduleCourse 6 schedule

Page 15: MoodlePosium 2016 what is web accessibility

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)

Page 16: MoodlePosium 2016 what is web accessibility

Unique information in the link

1st course schedule2nd course schedule3rd course schedule4th course schedule5th course schedule6th course schedule

Page 17: MoodlePosium 2016 what is web accessibility

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]

Page 18: MoodlePosium 2016 what is web accessibility

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

Page 19: MoodlePosium 2016 what is web accessibility

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">

Page 20: MoodlePosium 2016 what is web accessibility

Images• If the image is decorative only and it doesn’t convey

information• No ALT text is required

Page 21: MoodlePosium 2016 what is web accessibility

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?

Page 22: MoodlePosium 2016 what is web accessibility

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

Page 23: MoodlePosium 2016 what is web accessibility

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

Page 24: MoodlePosium 2016 what is web accessibility

Please don’t do this• Do not have a PDF file which has screenshots from

PowerPoint• Completely inaccessible

Page 25: MoodlePosium 2016 what is web accessibility

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

Page 26: MoodlePosium 2016 what is web accessibility

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

Page 27: MoodlePosium 2016 what is web accessibility

Autocaptioning• Feature of YouTube• In very limited ways it can provide accurate captions

Page 28: MoodlePosium 2016 what is web accessibility

Autocaptioning fail

"Things like the big butts well we wantto carefully look"

Page 29: MoodlePosium 2016 what is web accessibility

Video summary• Caption all spoken words• Consider a separate audio description• Don’t use autocaption• Always add your own captions

Page 30: MoodlePosium 2016 what is web accessibility

Accessibility testing• Automatic testing tools are good for identifying easy fixes• Cannot be relied upon as the sole source of testing

Page 31: MoodlePosium 2016 what is web accessibility

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/

Page 32: MoodlePosium 2016 what is web accessibility

Issues display•When activated displays a list of issue

Page 33: MoodlePosium 2016 what is web accessibility

Individual issue• Each issue displays an

in-depth description• WCAG criteria• WCAG technique

• Clicking the pin shows the location

Page 34: MoodlePosium 2016 what is web accessibility

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)

Page 35: MoodlePosium 2016 what is web accessibility

Testing with users• Test with all ages• With and without impairments

• Testing isn't a once only tasks it needs constant checking

Page 36: MoodlePosium 2016 what is web accessibility

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

Page 37: MoodlePosium 2016 what is web accessibility

Make your course content inclusive• Provide the best possible experience to the end user

regardless of impairment•Make your course content inclusive

Page 38: MoodlePosium 2016 what is web accessibility

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%