2015 presentation: front end meetup

26
Web accessibility: user experience & practical tips Dr Scott Hollier Front End Web Developers 2015

Upload: media-access-australia

Post on 16-Jul-2015

56 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: 2015 Presentation: Front End Meetup

Web accessibility:

user experience &

practical tips

Dr Scott Hollier

Front End Web Developers 2015

Page 2: 2015 Presentation: Front End Meetup

Who is Media Access Australia?

• Australia’s only independent NFP

organisation increasing access to

media for people with disabilities

• Provides expert knowledge and

advice on existing and emerging

mainstream technologies

• Works as a catalyst for change in

multiple areas of access

Page 3: 2015 Presentation: Front End Meetup

Who am I?

• Professional: • Project Manager & WA Manager for MAA

• W3C Advisory Committee representative

• Academic: • Adjunct Senior Lecturer, Edith Cowan

University

• PhD thesis ‘The Disability Divide’

• Personal: Legally blind, first-hand

knowledge of access issues

Page 4: 2015 Presentation: Front End Meetup

Brief history of access

• For the mainstream population,

Internet was viewed primarily as an

information and communication

resource

• For people with disabilities, Internet

was viewed as a gateway to

independence

Page 5: 2015 Presentation: Front End Meetup

User experience

• People with disabilities generally use assistive

technologies to help use a computer

• Assistive Technology is the practical

implementation of technology to support and

help people with disabilities

• Old model: specialist AT costs $1000-$2000

• New model: OS now contains many of these

tools, and free open-source also viable

Page 6: 2015 Presentation: Front End Meetup

Windows 7/8.1/RT

• Change the icon and text size

• Adjust cursor width and blink rate

• Mouse pointer size and movement

• Change the colour scheme to high contrast

• ToggleKeys

• Visual alerts

• On-screen keyboard (predictive in 7)

• Magnifier (touch-optimised in 8.1)

• Narrator screen reader (touch-optimised in 8.1)

• NVDA screen reader available as free download

Page 7: 2015 Presentation: Front End Meetup

Demonstration

• Windows 8.1 Zoom

• Windows 8.1 Narrator screen reader

Page 8: 2015 Presentation: Front End Meetup

Mac features

Improvements over Windows:

• Better screen reader VoiceOver

• Braille display support

However…

• VoiceOver has issues with Office for

Mac

• No touch screen support

Page 9: 2015 Presentation: Front End Meetup

Mobile access

iPad and iPhone:

• Great access: VoiceOver, zoom,

captioned video, colour changes.

• VoiceOver & Zoom work together

• App compatibility getting better

Page 10: 2015 Presentation: Front End Meetup

Mobile access

Google Android

• TalkBack screen reader

• Magnifier

• Support for mobility-related AT

• Inverse colours (5.0+)

• Cheaper than Apple (<$100 devices)

• Customisable (e.g. BIG launcher)

However…

• Only really viable since 4.2 Jelly Bean

Page 11: 2015 Presentation: Front End Meetup

Web professionals & the importance of standards

Page 12: 2015 Presentation: Front End Meetup

Web Content Accessibility Guidelines (WCAG) 2.0

• WCAG 2.0 is definitive standard, both as

web standard and ISO (40500)

• Three compliance levels: ‘A’, ‘AA’, ‘AAA’

• Australian government set transition

targets (NTS) now completed, WCAG

2.0 AA required

• WA: transition completed, A or AA now

Page 13: 2015 Presentation: Front End Meetup

WCAG 2.0 at a glance

Perceivable:

• Provide text alternatives for non-text content.

• Provide captions and other alternatives for

multimedia.

• Create content that can be presented in

different ways, including by assistive

technologies, without losing meaning.

• Make it easier for users to see and hear

content.

Page 14: 2015 Presentation: Front End Meetup

WCAG 2.0 at a glance

Operable:

• Make all functionality available from a

keyboard.

• Give users enough time to read and

use content.

• Do not use content that causes

seizures.

• Help users navigate and find content.

Page 15: 2015 Presentation: Front End Meetup

WCAG 2.0 at a glance

Understandable:• Make text readable and understandable.• Make content appear and operate in

predictable ways.• Help users avoid and correct mistakes.

Robust:• Maximize compatibility with current and

future user tools.

Page 16: 2015 Presentation: Front End Meetup

Good design examples

• Media Access Australia:

www.mediaaccess.org.au

• BBC: www.bbc.co.uk

• IP Australia: www.ipaustralia.gov.au

Page 17: 2015 Presentation: Front End Meetup

Media Access Australia: mediaaccess.org.au

Page 18: 2015 Presentation: Front End Meetup

BBC: bbb.co.uk

Page 19: 2015 Presentation: Front End Meetup

IP Australia: ipaustralia.gov.au

Page 20: 2015 Presentation: Front End Meetup

Bad design examples

• Mr Bottles: www.mrbottles.com

• Fremantle: www.fremantle.wa.gov.au

• Yahoo!7: www.yahoo7.com.au

Page 21: 2015 Presentation: Front End Meetup

Mr Bottles: mrbottles.com

Page 22: 2015 Presentation: Front End Meetup

City of Fremantle: fremantle.wa.gov.au

Page 23: 2015 Presentation: Front End Meetup

Yahoo! 7: www.yahoo7.com.au

Page 24: 2015 Presentation: Front End Meetup

MAA training

• Professional Certificate in Web

Accessibility Compliance• Six week training course

• Tertiary backed, delivered by UniSA and

MAA

• For ICT professionals to integrate web

accessibility into work practices

• www.mediaaccess.org.au/learn

Page 25: 2015 Presentation: Front End Meetup

Media Access Australia services

• Training and workshops

• Digital accessibility consultancy

• Website testing and auditing

• Web accessibility resources:

accessiq.org

• Complete Guides to Web Accessibility

Page 26: 2015 Presentation: Front End Meetup

Further information

• Dr Scott Hollier: • E-mail:

[email protected]

• Website: www.mediaaccess.org.au

• Twitter: @mediaaccessaus