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!** <br>https://github.com/daigofuji/a11y-in-one-sprint

@DaigoFuji on <i class="fab fa-twitter"></i> & <i class="fab fa-github"></i>

Notes for current slide

Notes for next slide

Accessibility in one sprint

@PMK Potluck Lightening Talk | Fri, June 15, 2018

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

1 / 20

*Caveat

You should spend more than one sprint on web accessibility.

2 / 20

Trello card

3 / 20

Americans with Disabilities Act ("ADA") and Section 508 of the Rehabilitation Act4 / 20

Velma

5 / 20

Make the website NOT inaccesible6 / 20

Assistive Technology

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

7 / 20

Apple Safari + Voice Over
Windows IE + JAWS
Windows IE + NVDA
Orca

8 / 20

Apple Voice Over

9 / 20

Turning it on

Settings > General > Accessibility

10 / 20

bur

11 / 20

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

12 / 20

Roter?VO-U 
13 / 20

14 / 20

WCAG 2.0

Web Content Accessibility Guidelines

15 / 20

Alt tag

Alt tag is important

16 / 20

Accessible Rich Internet Applications (ARIA)aria-required
aria-invalid
aria-describedby (Use id on a page)
aria-labeledby 
aria-label
17 / 20

Resources

-W3C Understanding WCAG 2.0

18 / 20

In conclusionDon't be afraid
Responsive Design and Mobile First approach helps Accessibility
Turn VoiceOver and check your site out
19 / 20

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

@DaigoFuji on &

20 / 20

*Caveat

You should spend more than one sprint on web accessibility.

2 / 20

Paused

Help

Keyboard shortcuts

↑, ←, Pg Up, k	Go to previous slide
↓, →, Pg Dn, Space, j	Go to next slide
Home	Go to first slide
End	Go to last slide
Number + Return	Go to specific slide
b / m / f	Toggle blackout / mirrored / fullscreen mode
c	Clone slideshow
p	Toggle presenter mode
t	Restart the presentation timer
?, h	Toggle this help

Esc	Back to slideshow