People First Accessibility
-
Upload
trisha-salas -
Category
Internet
-
view
440 -
download
0
description
Transcript of People First Accessibility
![Page 1: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/1.jpg)
People First Accessibility Considera4ons
for Theme Developers
WordCamp DFW October 4, 2014
![Page 2: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/2.jpg)
Trisha Salas WordPress Developer
trishasalas trishacodes
trishasalas
![Page 3: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/3.jpg)
Which Path Do you Choose?
![Page 4: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/4.jpg)
Jus4n used to be extremely ac4ve kid
![Page 5: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/5.jpg)
He used to ride his bike all over town, only stopping long enough to do cool tricks.
![Page 6: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/6.jpg)
His vision loss occurred over a period of 6 weeks. He lost most of his central vision and put his bike away.
![Page 7: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/7.jpg)
Op4c Neuropathy of Unknown Origin. Age 15
![Page 8: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/8.jpg)
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.
![Page 9: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/9.jpg)
Web Accessibility makes a real difference in the lives of people
with disabili4es.
![Page 10: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/10.jpg)
What is Accessibility? Accessibility is all about our ability to engage with, use, par4cipate in, and belong to, the world around us.
![Page 11: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/11.jpg)
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
![Page 12: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/12.jpg)
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.
![Page 13: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/13.jpg)
What’s with all the acronyms?
WCAG 2.0 A11y
Sec4on 508 WAI-‐ARIA
![Page 14: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/14.jpg)
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.
![Page 15: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/15.jpg)
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
![Page 16: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/16.jpg)
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
![Page 17: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/17.jpg)
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
![Page 18: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/18.jpg)
Who Does Accessibility Benefit?
• Blind • Low-‐vision • Deaf & hard of hearing
• Color blind
• Cogni4ve impairments • Mobility impairments • Mobile devices • Brightly lit rooms • Older Users
![Page 19: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/19.jpg)
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
![Page 20: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/20.jpg)
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
![Page 21: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/21.jpg)
Keyboard Naviga4on
![Page 22: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/22.jpg)
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
![Page 23: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/23.jpg)
Is your theme accessible-‐ready?
![Page 24: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/24.jpg)
13 Of the 2,764 themes in the WordPress.org theme
repository only 13 are accessbile-‐ready. (10-‐4-‐2014)
![Page 25: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/25.jpg)
Theme Review Handbook • Headings • Link Text • Controls • Keyboard • Naviga4on
• Contrasts • Skip Links • Forms • Images • Media
hhps://make.wordpress.org/themes/handbook/guidelines/accessibility/
![Page 26: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/26.jpg)
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.
![Page 27: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/27.jpg)
Link Text • Avoid repe44ve non-‐contextual text strings such as ‘read
more…’ • The core-‐defined ‘read more’ links fall under this guideline
Use Filters
![Page 28: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/28.jpg)
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)
![Page 29: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/29.jpg)
Using These:
<buhon> <input> <a>
Controls
will ensure na4ve keyboard accessibility and interac4on with screen reader accessibility APIs.
![Page 30: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/30.jpg)
Contrasts Color contrasts for plain text should be within the level AA contrast ra4o
(4.5:1)
![Page 31: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/31.jpg)
Skip Links
Include a mechanism that enables users to navigate directly to content or naviga4on on entering any given page.
![Page 32: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/32.jpg)
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.
![Page 33: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/33.jpg)
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/
![Page 34: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/34.jpg)
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.
![Page 35: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/35.jpg)
At Google Pihsburgh for an accessibility meetup. Extremely eye-‐opening.
![Page 36: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/36.jpg)
Not Allowed
• Any posi4ve tabindex ahribute. • The inclusion of the accesskey ahribute. • Spawning new windows or tabs without
warning the user.
![Page 37: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/37.jpg)
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.
![Page 38: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/38.jpg)
Books A Web for Everyone Accessibility Handbook
![Page 39: People First Accessibility](https://reader035.fdocuments.in/reader035/viewer/2022081401/55639e26d8b42a2b6a8b4b53/html5/thumbnails/39.jpg)
Thank You! Ques4ons?