Welcoming Everyone Online: Creating Accessible Online Resources For People with Disabilities (& everyone)

Our goals today Web accessibility: what is it, why does it matter? What are the basics? What if I'm not a web designer? OpenAIR contest: an opportunity for nonprofits to achieve web accessibility Answer your questions

Facilitated by Knowbility International non-profit, founded in 1998 Jayne Cravens, Knowbility OpenAIR Nonprofit Manager International Consultant, www.coyotecommunications.com, TechSoup alumni, author of The LAST Virtual Volunteering Guidebook Sharron Rush, co-founder, Executive Director invited expert since 2006 for W3C Web Accessibility Initiative (WAI), co-chair Education and Outreach Working Group (EOWG), author Maximum Accessibility (2002)

Intro to Disability Awareness for ACS NCIC ‘Accessible’ means… People 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 needs Knowbility, Inc. 12/16/2010

Universal design supports all people supports all technology improves experience for all “Good design IS accessible design” ~ Dr. John Slatin

Who decides what is accessible? Standards developed in Web Accessibility Initiative (WAI) of World Wide Web Consortium (W3C) Create standards for all web technologies Accessibility standardized across the globe. WAI provides support for those new to accessibility https://www.w3.org/WAI/gettingstarted/tips/

Why advocate for accessibility? Legal Humanitarian Market Technical Human Rights/ Equity

Why implement accessibility? People with disabilities want to donate, volunteer and otherwise support causes they care about. But if your web site isn’t accessible to them, you leave them out - and that means you leave out potential donors, volunteers, clients, ideas, talent and more. Making your web site more accessible makes it more useful for EVERYONE (not only those with disabilities) Would you rent a space that prohibited certain people from entering? Many view online accessibility the same way.

Disability is a market force Nearly 20% of US population has disability Numbers growing as population ages Your organization is likely to have large representation – even if you don't know it.

Growing constituency Fortune: “$1 trillion annual market” $200 B in discretionary spending 55 million Americans 750 million worldwide More as population ages

US Federal Law Section 508 of Rehabilitation Act ADA –notice of intention to extend the ADA to the web Oct 2010, President signed 21st Century Accessible Technology bill

UN Convention on Rights of Persons with Disabilities Explicitly references technology access as basic human right in modern world Ratified by more than 100 nations Additional accessibility laws in European Union, Canadian Government, Australia, Japan, others

It’s all about People Delia, Paul, Ryan, Desiree and Wayne: People with disabilities appear in collage each has access needs and may use assistive technology

WAI Accessibility Perspectives: Keyboard Compatibility Watch more from the WAI Accessibility Perspectives on their website -- https://www.w3.org/WAI/perspectives/

Four Principles of accessible content

Common barriers and easy fixes Link text Text alternatives PDF Color & contrast Media (videos, podcasts, etc.)

Link text Specify 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

Link description Use “aria-described” attribute. Description in code informs user of what a button does when activated (closes window, check box, etc.) Sighted user won't see it, screen reader user will hear it. More information on using aria-describedby from W3C

Text alternative basics Users with visual impairment require verbal description of any image. This is ‘alt text’. Provide text alternative (alt attribute of img element) for meaningful images Decorative image has empty alt attribute <alt=“”> Linked image identifies target of linked images Complex image (charts, graphs WAI Tutorial alt text decision tree

Accessible documents and PDFs - same principles apply Accessible PDFs must be tagged. Allows assistive technologies to interact with content and make sense of it. No automated solution for creating accessible PDFs. Free tutorial from federal government https://www.section508.va.gov/support/tutorials/pdf/

Color and contrast Some users have color blindness or trouble perceiving low contrast, while others have difficulty with high contrast. Avoid use of color as ONLY method to denote state or requirement Provide contrast of text against background of 4.5 to 1 or higher

Media - Provide video captions for the hearing impaired and audio descriptions for the visually impaired if you want to convey info to the widest audience. Keyboard operable media player Caption audio content of video and synchronize to onscreen actions (YouTube has free tools) Describe key video content in audio description track or text transcript. Note it's great for those that are not in a space to listen to audio on a video but still want the message Knowbility blog has more info on how to do this, free tools, etc.

These are easy fixes Easy to learn, easy to do None cost money Will take extra time to fix an existing web site/online materials, but no/little extra time when building a new page, site, file it's a change in approach) Volunteers can help! Learn more at WAI Easy Checks

More difficult online barriers Address these with more significant redesign effort if you already have a web site - but it's worth it! Minimal additional costs for accessibility integration is site from scratch Let’s look at Structure Reading and focus order Keyboard access

Structure - To help users orient themselves on web pages, the content and different areas need to be structured to help assistive technology identify them. Use semantic structures as intended Logical nested headings Semantic meaning not visual presentation List markup for related information Explicit form ID and label Identify row and column headings in data grids (tables) Outline structure with HTML5 regions or ARIA landmarks

Reading and focus order Reading, tab and focus order should be the same as display order. Sequence in which items receive focus should reflect intent of the content. Provide meaningful page titles to orient users among set of pages Skip links as needed Create logical tab order through links, form controls, and interactive elements

Visible Keyboard Operation Keyboard focus should be visible (ex: highlighted text) and follow a logical order. Allow functional elements to be reached and activated from keyboard (often tab and arrow keys) Make keyboard focus as clearly visible as mouse hover

Going forward Be an advocate for accessibility at your organization. Get buy-in/ mandate from senior management. Use this presentation, OpenAIR Nonprofit curriculum, other resources (w3.org/WAI) to make the case. Recruit web designers, including volunteers, who understand or will commit to learning and applying accessibility

Join OpenAIR – a contest for web designers OpenAIR: Accessibility Internet Rally – your nonprofit, NGO, school, government agency, other mission-based organization can have a new, fully accessible website, designed with the help of some of the leading accessibility developers in the country. $100 participation fee includes training, support. Your nonprofit will be promoted by Knowbility for its participation.

OpenAIR: Benefits Your organization is matched with team of web professionals. Knowbility provides support to help you prepare to be a good “Client” to your team Training Assigned mentor Regular check in sessions You control all content, styles, images, etc Maintenance and sustainability training provided once site launches

OpenAIR: Details What: 6 week competition in which web professionals and an accessibility mentor team up to build new website for your org. When: Register by November 30th. The competition kicks off in January and ends with awards ceremony in March during SXSW Interactive. How: More information and company or team registration on air-rallies website.

Questions? Thank you! Sharron Rush Jayne Cravens srush@knowbility.org jcravens@Knowbility.org @Knowbility on Twitter Questions?