Web Accessibility Intro Webinar for AddThis

Quick Tips to Get StartedMaking Websites Accessible to People with Disabilities

1

Our goals todayTake a snapshot of web accessibility what is it, why does it matter? Identify essential techniques Answer questions Point to whats next

2

Facilitated bySharron Rush, co-founder, Executive Director Knowbility IncInvited Expert since 2006 for W3C Web Accessibility Initiative (WAI) Currently co-chair for Education and Outreach Working Group (EOWG)Author Maximum Accessibility (2002)Hi there!

3

The Web is meant to transcend barriers

Regardless of differences platformoperating systemformatsbrowserdevicedistancelanguageability

4

Web Accessibility Initiative at W3CW3C is global standards maker for the webDevelop technical standards Including accessibility guidelines: Content (WCAG)Authoring tools (ATAG)Browsers and AT (UAAG)Dynamic applications (ARIA) W3C Web Accessibility Initiative logo

Fireman grips firehose with huge output of letters of regulations and guidelines NIMC, DAISY, WCAG, ATAG. 508, etc dont be overwhelmed!

Accessible vs Inclusive6Intro to Disability Awareness for ACS NCIC Knowbility, Inc. 12/16/2010

AccessiblePeople with disabilities can acquire the same information participate in the same activities actively produce as well as consume online content

We often talk of accessibility in terms of adherence to standards. It is good to remember that accessibility is about inclusive design for real people with human needs7Intro to Disability Awareness for ACS NCIC Knowbility, Inc. 12/16/2010

Why advocate for accessibility?

Legal TechnicalMarket Humanitarian

Its all about People

Delia, Paul, Ryan, Desiree and Wayne: People with disabilities appear in collage each has access needs and may use assistive technology9

Short videos from WAI

10 videos with optional captions and audio description

Four Principles of accessible contentPerceivable, operable, understandable and robust. Cartoon shows four colorful characters. First is a man with dark glasses saying I can perceive it. Next a fellow with one arm in a sling who says I can use it, then a woman with a lightbulb over her head saying I can grasp it, and finally a woman holding a smart phone saying I can access it. across the broadest possible spectrum

Common BarriersStructure Reading orderKeyboardText alternatives Color and contrastLink textMulti-media

StructureUse semantic structures as intendedUse for semantic meaning, not visual presentationExplicit form id and labelOutline structure with HTML 5 regions or ARIA landmarks

Reading and focus orderReading order reflects code orderLogical tab order top to bottom, left to rightPage titles uniquely describe page contentAlerts and error messages receive focus.

Useful for blind visitors and many assistive technology devices that navigate using only the keyboard.

15

Visible Keyboard OperationAllow all functional elements to be reached and activated from the keyboard (often tab and arrow keys)Make keyboard focus as clearly visible as mouse hover states

Text alternative basics

All image elements must have alt text (alt attribute of img element) Brief informative descriptions for meaningful imagesEmpty alt attribute for decorative images or use CSS backgroundIdentify target of linked imagesFully describe complex images like charts, graphs

Decision tree from WAI Tutorial

Color and contrastAvoid using color as ONLY method to denote a state or requirement

Provide contrast of text against background of 4.5 to 1 or higher

Link textSpecify link target (where the link goes, what it does)Text should make sense out of context (not More or Click here) - OR - Use aria-describedby to make an association available to assistive technology

MediaKeyboard operable media playerCaption audio content of video and synchronize to onscreen actionsDescribe meaningful video content in audio description track or text transcript.

Preliminary TestingDuring develop, QA etc, include accessibility testingEasy Checks from W3C

Include People with disability in usability testsReach out locally to disability organizationsRemote testing using AccessWorks

Learn so much more from WAI!Tips for getting StartedGet started with accessibility. These tips introduce some basic considerations for making your website more accessible to people with disabilities, and provide links to additional guidance. Tips for Writing, Developing and Design for web accessibilityhttps://www.w3.org/WAI/gettingstarted/tips/index.html

WAI website:http://www.w3.org/WAI/

Getting WAI announcements:http://www.w3.org/WAI/about/announcements

Translating WAI documents:http://www.w3.org/WAI/translation

Participating in WAI:http://www.w3.org/WAI/participation23

Participate Community events and programs centered around equal accessAccessibility Internet Rally accessible web development contest benefits global nonprofitsAccessWorks remote user test employs people with disabilitiesATSTAR helps teachers apply assistive tech to improve learning outcomes for kids with disability.

Thank you!Sharron Rush srush@knowbility.org

@knowbility@addthis

25