Feb 2014 Intro-Accessibility-Webinar

siteimprove.com 1-855-SITEIMPROVE kry@siteimprove.com

WEB ACCESSIBILITYAn Introduction

What’s this? Another introduction to Web accessibility?

Kevin Rydberg Senior eAccessibility Consultant www.linkedin.com/in/kevinrydberg kry@Siteimprove.com

Follow Siteimprove

What is the most popular and widely used assistive device ever created? !

WEB ACCESSIBILITY

Glasses!(and contact lenses)

WEB ACCESSIBILITY

Which standards do I use?What are the benefits of accessible coding standards?Nuts and BoltsAssistive TechnologyGetting StartedQuestions/Demo

An Introduction

What is accessibility?

WEB ACCESSIBILITY

Marketing Staff Web Developers Web Designers Content Managers IT Staff Non-technical Stakeholders

An Introduction

Everyonewith a stake in the website {

Which standards do I use?• WCAG 2.0• Section 508• Web Standards for the Government of Canada• AODA (Ontario)

Which standards do I use?

WCAG 2.0• W3C• Perceivable• Operable• Understandable• Robust• Three levels, A, AA, and AAA

WEB ACCESSIBILITY

Section 508• Software Applications and Operating Systems• Web-based Internet and Intranet• Telecommunications• Text• Video and Multimedia• Self Contained, Closed Products• Desktop and Portable Computers

An Introduction

WEB ACCESSIBILITY

Web Standards for Government of Canada• Mobile Devices (New)• Interoperability• Usability• Accessibility• Web Experience Toolkit

An Introduction

WEB ACCESSIBILITY

Accessibility for Ontarians with Disabilities Act (AODA)• Employment• Information and Communications• Transportation• Design of Public Spaces (Built Environment)• Based on WCAG 2.0 • AODA Compliance Wizard

An Introduction

WEB ACCESSIBILITYBenefits of Accessible Coding• Social Responsibility• Larger Customer Base• Efficient Code

• Website Maintenance• Device compatibility• Faster pages• Improved SEO

WEB ACCESSIBILITYNuts and Bolts• Semantic Markup

Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation or look.

WEB ACCESSIBILITYNuts and Bolts• Semantic Markup• Page Titles

The <title> element: • defines a title in the browser toolbar • displays a title for the page in search engine results • provides a title when a page is added to favorites

WEB ACCESSIBILITYNuts and Bolts• Semantic Markup• Page Titles• Headings

• Don't use headings to make text BIG or bold • Search engines use your headings to index the

structure and content of your web pages • Users may skim your pages by headings; use headings

to show the document structure.

WEB ACCESSIBILITYNuts and Bolts• Semantic Markup• Page Titles• Headings• Graphics

• Images can enhance comprehension • Don't use color only as the sole means of conveying

meaning • Use alternative text attributes on your image tags • Be careful using text within images

WEB ACCESSIBILITYNuts and Bolts• Semantic Markup• Page Titles• Headings• Graphics• Links

• Clearly identify the target of each link • Good link text should not be too general; don't use

"click here." • Specify a "title" attribute that describes the target of

the link • Provide a way to bypass or skip a group of links

WEB ACCESSIBILITYNuts and Bolts• Semantic Markup• Page Titles• Headings• Graphics• Links• Tables and Forms

• Use tables to display data, not for page layout • Use table headers to organize data • Make forms logical and easy to use • Make forms keyboard accessible • Be sure to use labels with form elements

WEB ACCESSIBILITYAssistive Technology

WEB ACCESSIBILITYAssistive Technology• Screen Readers

WEB ACCESSIBILITYAssistive Technology• Screen Readers• Windows and Mac Accessibility

WEB ACCESSIBILITYAssistive Technology• Screen Readers• Windows and Mac Accessibility• Color Contrast Analyzers

WEB ACCESSIBILITYAssistive Technology• Screen Readers• Windows and Mac Accessibility• Color Contrast Analyzers• Toolbars/Extensions/Plug Ins

WEB ACCESSIBILITYAssistive Technology• Screen Readers• Windows and Mac Accessibility• Color Contrast Analyzers• Toolbars/Extensions/Plug Ins• Mobile Devices

WEB ACCESSIBILITY

Getting Started

WEB ACCESSIBILITY

Getting Started• Know the Rules

WEB ACCESSIBILITY

Getting Started• Know the Rules• Practical Training and Testing Plans

WEB ACCESSIBILITY

Getting Started• Know the Rules• Practical Training and Testing Plans• Low-hanging Fruit

WEB ACCESSIBILITY

Getting Started• Know the Rules• Practical Training and Testing Plans• Low-hanging Fruit• High Traffic Pages

WEB ACCESSIBILITY

Getting Started• Know the Rules• Practical Training and Testing Plans• Low-hanging Fruit• High Traffic Pages• A-level Errors

WEB ACCESSIBILITY

Getting Started• Know the Rules• Practical Training and Testing Plans• Low-hanging Fruit• High Traffic Pages• A-level Errors• Report and Track Progress

academy.siteimprove.com • Accessibility Certification

• Non-technical Course • Technical Course

• Web Governance Certification

Questions?

Resources • WCAG 2.0

• Overview of WCAG 2.0 • www.w3.org/WAI/intro/wcag.php

• W3C’s WCAG 2.0 Homepage • www.w3.org/TR/WCAG20/

• Getting Started with Web Accessibility • www.w3.org/WAI/gettingstarted/Overview.html

• Section 508 • www.section508.gov/

• Web Standards for Government of Canada • www.tbs-sct.gc.ca/ws-nw/index-eng.asp • Web Experience Toolkit

• wet-boew.github.io/wet-boew/index-en.html • AODA

• http://www.mcss.gov.on.ca/en/mcss/programs/accessibility/ • AODA Compliance Wizard

• https://www.appacats.mcss.gov.on.ca/eadvisor/

Image Credits !

• http://boredomblows.files.wordpress.com/2011/10/trailer_park_boys_11.jpg • http://www.pdf-accessibility.com/wp-content/themes/publiread/images/content/sidebar/w3c-wcag.png • http://www.americantrails.org/508_logo_clear.gif • http://miketodd.typepad.com/photos/uncategorized/2007/12/06/canadian_flag.gif • http://www.united-states-flag.com/media/catalog/product/cache/1/image/

9df78eab33525d08d6e5fb8d27136e95//o/won46hf_-00_ontario-flag-4-x-6-inch.jpg • http://memegenerator.net/Scumbag-Steve • http://vector.me/files/images/1/5/150733/andy_tools_hammer_spanner_clip_art.jpg • http://memegenerator.net/Good-Guy-Greg • http://edudemic.com/wp-content/uploads/2010/12/browser_logos-256.png • http://www.brailleworks.com/blog/wp-content/uploads/2012/10/Freedom-Scientific-JAWS-for-

Windows-300x130.jpg • http://a.espncdn.com/photo/2012/0921/referees_nfl_g_mp_576.jpg • http://www.komarketingassociates.com/images/2010/07/low-hanging-fruit.jpg • http://www.xaas.com/Portals/0/Images/Solutions/HighTrafficCloudHosting/

XaaS_High_Traffic_Cloud_Hosting_Rounded.jpg • http://static.guim.co.uk/sys-images/Guardian/Pix/pixies/2013/2/25/1361807925686/Triple-A-

rating-008.jpg • http://jragsdale.files.wordpress.com/2007/06/corda1.jpg • http://memegenerator.net/The-Most-Interesting-Man-In-The-World

Siteimprove Web Governance Suite

• Web Quality Assurance • Web Accessibility • Web Analytics • Search Engine Optimization (SEO) • Web Performance Alerts

Visit us at Siteimprove.com

Feb 2014 Intro-Accessibility-Webinar

Technology

Transcript of Feb 2014 Intro-Accessibility-Webinar

Intro to Accessibility Testing (with non-commercial tool)

Decoded 1 – Intro & Accessibility Requirements

Usability ≠ Accessibility. An intro to web accessibility for agencies.

YSI Colorimeter Products Intro Webinar

Accessibility Testing - Using Asqatasun - Meetup Webinar

Intro to accessibility workshop slides

Intro ToAPQP Webinar

Conscires intro to scrum webinar

Infopeople Webinar Series: Accessibility and Technology.

Webinar: Intro to Trove_Mirantis_26_feb2015

Webinar: Intro to Cypher

Intro to Data Mining Webinar

Webinar - Web Accessibility 101 - 2016-08-09

FortiusOne Webinar - Intro To GeoIQ

Intro to scrum webinar

Embase intro webinar july 2015

Webinar Intro

Webinar on linkedin intro

Intro Apex Code Webinar

ZL 2011 iida intro webinar