Web Accessibility - plan,design, build, test an accessible website

Web Accessibility

“The power of the web is in its universality.Access by everyone regardless of disability is an essential aspect.”

- Tim Berners-Lee W3C Director and inventor of the World Wide Web

Mike Osborne – 24 June 2010

You have no control over how users access your

website.

• Different browsers• Different technology

– PCs, Macs, Linux, mobile devices

– Different assistive technologies

• Screen sizes• Screen resolutions• Mouse/keyboard/voice• Colour depth

• Images on/off• Stylesheets on/off• User stylesheets• Javascript on/off• Flash - present or not• LCD or CRT

– Different monitors & settings• Ambient light & monitors• Bandwidth

The web is not print.

Why do we need accessible websites?

Of that 20% - 57% have more than one disability.

20% of the population has some disability.

What is assistive technology?

•Screen Readers• and browser plug-ins

•Magnifiers

•Braille Output

•Speech to text• Voice commands

•Browser Tools & Capabilities

Impairments (who needs it?)

Why do they need it?

• Communicate

• Access Information

• Access Study

• Access Entertainment

• Access Work

The internet offers independence and freedom

Why do they need it?

“If anybody asks me what the Internet means to me, I will tell him without hesitation:To me ( a quadriplegic) the Internet occupies the most important part in my life. It is my feet that can take me to any part of the world;it is my hands which help me accomplish my work; it is my best friend – it gives my life meaning.”

- Dr. ZhangXu, practising orthopaedic surgeon (via the Internet), Anshan, China

Planning

Strategy planning – upfront

Integrated Comms and OperationsContingencyLevels, StandardsNon-tech alternativesDetermine site purpose and audiences

Design

Design Factors

• Customer-centric• Task focused• Clear page hierarchy• Intuitive navigation• Simple pages• Legible type• Adequate contrast

Provide a Rich Experience

Document Publishing

• PDF’s are for print – inaccessible (not just for the blind)• e.g. low vision, low bandwidth

– magnification • horizontal scrolling

– now a lot easier to convert Word to HTML

• Multiple Fonts• Spreadsheets

Deliver clean HTML

• Ensure your Content Management System can deliver standards compliant code

• Select or build an accessible template– Ensure skip to content & navigation links built in

• Follow HTML syntax– Don’t use <TABLE> for layout, use CSS– Use <Hn> headings to convey page structure

Plain English• Use Subject-Verb-Object construction by default

e.g. “The cat sat on the mat.”, instead of “The mat was sat on by the cat.”

• Avoid vocabulary that a good portion of your audience will stumble over

• Use verbs instead of "nounisms”– Introduce rather than to make an introduction

• Use active voice instead of passive

• Avoid overly long sentences

Inverted Pyramid• Enables skim-reading• The most important information is first and

the least important is last– Applies to the page

and to each paragraph

Structure:• Key Message– Supporting Point– Supporting Point

Alternative Text – for images

• Provide meaningful information for people who can’t see the image.

• They need to present the same information that is conveyed by the image including complex images such as charts and graphs.

• Essential when text is delivered as an image.

• Purely decorative images need empty “” alts so screen readers will ignore them.

• Alts should close with a full-stop and a space.

•Where visible they can also be useful for sighted people if images are switched off

Testing

•Usability•Technical•Observational•User Testing

Top Website Faults

• Text alternatives – absent or useless• Essential public accountability and other

important documents on the site in pdf only• Poor colour contrast• Poor enlargement• Complex pages and language• Small navigation points• Accessibility statements focused on compliance

rather than an understanding of an audience• Overly busy (home) pages

In Conclusion - 1

Ten points to remember1. Everyone benefits2. Focus on the user3. Decide on the level of accessibility4. Get buy-in from decision-makers5. Link to business planning

In Conclusion - 2

Ten points to remember6. Don’t leave it to the techies7. Learn about accessibility8. Plan for accessibility9. Insist on standards and best-

practice10. Test for usability & accessibility

Contact Mike

Mike OsborneAccEase LtdP. 04 934 2821M. 021 675 010

E. mike.osborne@accease.comW. www.AccEase.com

B. www.LowVisionary.com

Web Accessibility - plan,design, build, test an accessible website

Design

Guide to Accessible Festivals & Outdoor Events · Guide to Accessible Festivals & Outdoor Events. ontario.ca/accessibility. 2. Contents. Accessibility in Ontario ... read in all light

Park Accessibility Guide...ELITCH GARDENS PARK ACCESSIBILITY GUIDE 4 Park Information Accessible Parking Accessible Parking is available in the Elitch Gardens parking lot near the

IGNIS 2015 - Making Accessibility Accessible (Terrill Thompson)

Accessible E-Learning Demonstrations Using IMS Accessibility Specifications

Introduction to Accessibility and Planning an Accessible Website

How To Make Your Web Course Accessible 2jan.ucc.nau.edu/~lsn/techwriting/manuals/accessibility... · 2013-01-30 · (World Accessibility Initiative [WAI], 2005)." Accessible web sites

Accessibility Statement · Web viewThis document was created from an accessible Microsoft Word template using accessible content principles, checked for accessibility and is verified

Making IT Accessibility Accessible (And Fun?)

Adobe DC Accessibility Presentation April 2017 · § Adobe InDesign § Accessible PDF ... §Adobe’s Voluntary Product Accessibility Templates VPATs

Towards an Accessible Future: Ontario Innovators in Accessibility

Retail and Accessibility Developing Practical Accessible Solutions

IT Accessibility Committee Accessible Tables Prepared by the NYS Forum IT Accessibility Committee

Accessibility Toolkit€¦ · 6 Accessibility Toolkit: A Guide to Making Art Spaces Accessible Overview Accessible and inclusive arts practice and presentation seeks to include, rather

2015 IGNIS Webinar Intro Slides: Making Accessibility Accessible 05.21.15

Accessibility: Make your teaching accessible and inclusive

"Making Accessibility Accessible" by Kirtika Bhuva

ACCESSIBILITY ONTARIO: Accessible Customer Service Standard

Accessible environments and unnoticed accessibility

Differences Between Accessibility Requirements found … between accessibility... · Round #1: Applicability of the 2010 ADA Standards for Accessible Design vs. Accessibility and

DIGITAL DOCUMENTS ACCESSIBILITY TRAINING CERTIFICATE · ACCESSIBILITY TRAINING. CERTIFICATE. DDAT 003 Creating Accessible Documents 3 After participating in Creating Accessible Documents