Download - People First Accessibility
People First Accessibility Considera4ons
for Theme Developers
WordCamp DFW October 4, 2014
Trisha Salas WordPress Developer
trishasalas trishacodes
trishasalas
Which Path Do you Choose?
Jus4n used to be extremely ac4ve kid
He used to ride his bike all over town, only stopping long enough to do cool tricks.
His vision loss occurred over a period of 6 weeks. He lost most of his central vision and put his bike away.
Op4c Neuropathy of Unknown Origin. Age 15
A few years later he picked up his bike again and he now rides some with a ‘seeing eye friend.’ He spends a lot of 4me on the internet learning about BMX, photography, backpacking and all the adventurous things he’s doing and would love to do more of.
Web Accessibility makes a real difference in the lives of people
with disabili4es.
What is Accessibility? Accessibility is all about our ability to engage with, use, par4cipate in, and belong to, the world around us.
The power of the Web is in its universality. Access by everyone regardless of disability is
an essen:al aspect.
Tim Berners-‐Lee, W3C Director and inventor of the World Wide Web
Why Accessibility is Important • 246,000,000 visually impaired • 39,000,000 legally blind • 275,000,000 deaf & hard of hearing That’s 560 million total!! To put this in perspec4ve, the en4re popula4on of the United States is 315,000,000.
What’s with all the acronyms?
WCAG 2.0 A11y
Sec4on 508 WAI-‐ARIA
WCAG 2.0 Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in coopera4on with individuals and organiza4ons around the world, with a goal of proving a single shared standard for web content accessibility that meets the needs of individuals, organiza4ons, and governments interna4onally. For a short summary of the WCAG 2.0 guidelines, see WCAG 2.0 at a Glance.
Sec4on 508 In 1998, Congress amended the Rehabilita4on Act of 1973 to require Federal agencies to make their electronic and informa4on technology (EIT) accessible to people with disabili4es. Sec4on 508 was enacted to eliminate barriers in informa4on technology, open new opportuni4es for people with disabili4es, and encourage development of technologies that will help achieve these goals. www.sec4on508.gov/Sec4on-‐508-‐Of-‐The-‐Rehabilita4on-‐Act
A11y Accessibility is ogen abbreviated as the numeronym a11y, where the number 11 refers to the number of lehers omihed. This parallels the abbrevia4ons of interna4onaliza4on and localiza4on as i18n and l10n respec4vely. hhps://en.wikipedia.org/wiki/Computer_accessibility
WAI-‐ARIA The Web Accessibility Ini:a:ve -‐ Accessible Rich Internet Applica:ons Suite, defines a way to make Web content and Web applica4ons more accessible to people with disabili4es. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. hhp://www.w3.org/WAI/intro/aria.php
Who Does Accessibility Benefit?
• Blind • Low-‐vision • Deaf & hard of hearing
• Color blind
• Cogni4ve impairments • Mobility impairments • Mobile devices • Brightly lit rooms • Older Users
Accessibility Benefits Everyone! Not everyone who is disabled has been disabled forever or will remain disabled. A website that is accessible for the disabled ogen gains the benefit of becoming easier to use for everyone Overview of web accessibility for older users
hhp://www.w3.org/WAI/intro/wai-‐age-‐literature.php Web Content Accessibility and Mobile Web: Making a Website Accessible Both for People with Disabili4es and for Mobile Devices
hhp://www.w3.org/WAI/mobile/overlap
Accessibility Benefits Everyone!
Not everyone who is disabled has been disabled forever or will remain disabled.
Overview of web accessibility for older users Web Content Accessibility and Mobile Web: Making a Website Accessible Both for People with Disabili4es and for Mobile Devices
Keyboard Naviga4on
A simple test you can do is this: Unplug your mouse and/ or turn off your trackpad
1. Can you interact with all controls, links, and menus using only the keyboard?
2. Can you see what item has focus at all 4mes? 3. Does the visual focus order match the intended interac4on order?
The 6 Simplest Web Accessibility Tests Anyone Can Do
Is your theme accessible-‐ready?
13 Of the 2,764 themes in the WordPress.org theme
repository only 13 are accessbile-‐ready. (10-‐4-‐2014)
Theme Review Handbook • Headings • Link Text • Controls • Keyboard • Naviga4on
• Contrasts • Skip Links • Forms • Images • Media
hhps://make.wordpress.org/themes/handbook/guidelines/accessibility/
Headings • Use a reasonable heading structure -‐ including the use
of heading elements for page sub-‐sec4ons. • Do not use text formanng, such as font size or bold to
give the visual appearance of headings -‐ use actual heading -‐ You can use css to change the appearance of your text
• Heading elements for structure MAY be posi4oned off-‐screen as long as this is not at the expense of providing good, visual, structure.
Link Text • Avoid repe44ve non-‐contextual text strings such as ‘read
more…’ • The core-‐defined ‘read more’ links fall under this guideline
Use Filters
Keyboard Naviga4on • Provide visual keyboard focus highligh4ng in naviga4on
menus, for form fields, submit buhons & text links. • Naviga4on by keyboard should also be intui4ve and
effec4ve.
POTENTIAL PROBLEMS • Something other than a link or form control (such as a <div> or
<span>) is programmed with scrip4ng to perform an ac4on. • Scripted elements • Lengthy naviga4on (use skip links)
Using These:
<buhon> <input> <a>
Controls
will ensure na4ve keyboard accessibility and interac4on with screen reader accessibility APIs.
Contrasts Color contrasts for plain text should be within the level AA contrast ra4o
(4.5:1)
Skip Links
Include a mechanism that enables users to navigate directly to content or naviga4on on entering any given page.
Forms Comment Forms Must: • Have appropriate field labels • All content within form tags MUST be explicitly
associated to a form control • Errors or confirma4ons MUST be perceivable
If you are using the default WordPress comment or search forms, these pass the accessibility-‐ready criteria.
Images • Decora4ve images must be included using CSS • Incorporate an appropriate alt ahribute or the
means for an end user to provide one.
SEE webaim.org/techniques/alhext/
Media • Media resources must NOT auto start or change without user ac4on as a default configura4on
• This includes resources such as audio, video, or image/content sliders and carousels.
In general, media resources of this nature are likely to fall under the plugin territory guidelines, and will not be allowed in your theme. If you have a conforming usage, however, these rules will apply.
At Google Pihsburgh for an accessibility meetup. Extremely eye-‐opening.
Not Allowed
• Any posi4ve tabindex ahribute. • The inclusion of the accesskey ahribute. • Spawning new windows or tabs without
warning the user.
Low Vision – Don’t Do This • hhp://youtu.be/HoHnqruA5bg • hhp://youtu.be/bIW3POa9D-‐o • hhp://youtu.be/oklmoixpjI0 The video clips from the presenta4on are on Youtube at the links above.
Books A Web for Everyone Accessibility Handbook
Thank You! Ques4ons?