Accessibility in one sprint

class: center, middle

# Accessibility in one sprint

.small[[@PMK Potluck Lightening Talk](https://publicmediakitchen.github.io/toolkit/public-media-potluck-june-2018.html) | Fri, June 15, 2018]

Daigo Fujiwara, .small[Web Developer, WBUR, http://wbur.org @DaigoFuji]

---
class: center, middle, white

## *Caveat

You should spend more than one sprint on web accessibility.

---
class: center, middle, white, big-img

![Trello card](img/trello.png)

<!---
I am not an accessibility expert.

You hear about ADA compliance law suit but spirit of ADA is to give more people access to information, contents that you create.
-->
---
class: center, middle

## **Americans with Disabilities Act** ("ADA") and **Section 508 of the Rehabilitation Act**
<!-- The ADA is a civil rights law (1990) that prohibits discrimination against individuals with disabilities in all areas of public life, including jobs, schools, transportation, and all public and private places that are open to the general public.

In 1998, Congress amended the Rehabilitation Act of 1973 to require Federal agencies to make their electronic and information technology (EIT) accessible to people with disabilities.
-->

---
class: center, middle, white, big-img

![Velma](img/velma.gif)

---
class: center, middle

# Make the website **NOT inaccesible**
<!---
Access to meaningful and effective contents on the Internet 
integral part of our modern life

Universal Design

"As more and more of our social infrastructure is made available on the Internet - in some cases, exclusively online - access to information and electronic technologies is increasingly becoming the gateway civil rights issue for individuals with disabilities (Non-discrimination, Equal Opportunity)." - Bobby Silverstein, the behind-the-scenes architect of the Americans with Disabilities Act (ADA)
-->

---
class: center, middle, inverse

# Assistive Technology

Screen Reader (blind), Zoom (low vision), Closed Captioning (deaf) etc.

---
class: middle

## Screen Reader landscape

- Apple Safari + [Voice Over](https://www.apple.com/accessibility/mac/vision/)
- Windows IE + [JAWS](http://www.freedomscientific.com/Products/Blindness/JAWS)
- Windows IE + [NVDA](https://www.nvaccess.org/)
- [Orca](https://wiki.gnome.org/Projects/Orca)

---
class: center, middle, white, big-img

## Apple Voice Over

![vo](img/voiceover.jpg)

---
class: center, middle, white, big-img

Turning it on

![vo](img/accessibility-panel.png)

Settings > General > Accessibility

---
class: center, middle, white, big-img

![bur](img/screenreader-wbur.png)

---
class: middle

## VoiceOver Useful keys:

VO key is "Control-Option" by default
- VO-left/right/up/down: Navigate
- VO-A: Read
- VO-B: Read from beginning
- Control: Pause reading
- VO-D: Dock
- VO-Z: repeat what was just read
---
class:  middle, inverse

# Roter?

- VO-U

---
class: center, middle, white, big-img

<video width="608" height="480" controls loop>
 <source src="img/roter.m4v" type="video/mp4">
 <source src="img/roter.mov" type="video/ogg">
Your browser does not support the video tag.
</video>

---
class: center, middle

# WCAG 2.0

[Web Content Accessibility Guidelines](https://www.w3.org/WAI/WCAG20/quickref/)

<!---

WCAG PRINCIPLES 
- Perceivable (able to see/hear - not hidden)
- Operable (able to use)
- Understandable
- Robust
-->

---
class: center, middle, big-img

## Alt tag

![Alt tag is important](img/)

---
class: middle

### Accessible Rich Internet Applications (ARIA)

- aria-required
- aria-invalid
- aria-describedby (Use id on a page)
- aria-labeledby 
- aria-label

---
class: middle

## Resources

-W3C [Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/Overview.html)
- Microsoft's [Inclusive Design](https://www.microsoft.com/en-us/design/inclusive)
- Google [Accessibility](https://www.google.com/accessibility/for-developers.html)
- [Perkins School for the Blind](http://www.perkins.org/get-involved/events/achieving-web-accessibility-make-sure-your-online-presence-works-for-everyone)

---
class: middle, white

##In conclusion

* Don't be afraid
* Responsive Design and Mobile First approach helps Accessibility
* Turn VoiceOver and check your site out

---
class: middle, center, white, big-img
<img src="img/velma.gif" alt="" width="500">

**Thank you!** https://github.com/daigofuji/a11y-in-one-sprint

@DaigoFuji on &