The document summarizes a workshop on accessibility for developers. It introduces the speaker and their background working on accessible websites. The workshop covers the Web Content Accessibility Guidelines (WCAG), including an exercise for attendees to make a sample HTML page more accessible. It also discusses the Web Speech API for adding text-to-speech capabilities to make content more accessible for users with visual or auditory impairments. The workshop aims to help developers better understand accessibility needs and how to build features that comply with WCAG.

1. Accessibility for Developers:
Getting intimate with WCAG
Daine Mawer / WordCamp JHB 2017

2. “The issue in web accessibility is the fact that
blind and visually-impaired people need the single
biggest boost to achieve equivalence, since the
real-world web is a visual medium.”
- Joe Clark
WHO AM I
WHO I’VE WORKED WITH
TODAY’S WORKSHOP
ASSUMPTIONS
GOALS
INTRODUCTION
EXERCISE
FUTURE
THANK YOU

3. WHO AM I
WHO I’VE WORKED WITH
TODAY’S WORKSHOP
ASSUMPTIONS
GOALS
INTRODUCTION
EXERCISE
FUTURE
THANK YOU
Front End Engineer at 10up (http://10up.com)
Lecturer, Corporate Trainer, Envato Author
BA in Creative Brand Communications
@dainemawer
https://dainelindleymawer.me

4. WHO AM I
WHO I’VE WORKED WITH
TODAY’S WORKSHOP
ASSUMPTIONS
GOALS
INTRODUCTION
EXERCISE
FUTURE
THANK YOU

5. WHY
WHERE
DEVELOP
FUTURE
do we need accessible websites?
we fail in providing accessible websites
accessible websites to cater for disadvantaged people
of accessible websites
WHO AM I
WHO I’VE WORKED WITH
TODAY’S WORKSHOP
ASSUMPTIONS
GOALS
INTRODUCTION
EXERCISE
FUTURE
THANK YOU

6. • You have a firm grasp of HTML and CSS.
• You are aware of the HTML5 spec
• You have a good understanding of Javascript
• You can use Git, create a branch on the command line and submit a pull
request
• You’re interested in developing accessible features on you website.
We’ll make the following assumptions:
WHO AM I
WHO I’VE WORKED WITH
TODAY’S WORKSHOP
ASSUMPTIONS
GOALS
INTRODUCTION
EXERCISE
FUTURE
THANK YOU

7. • A new found understanding of accessibility for blind an deaf individuals.
• Run through a couple of scenarios that you may not be factoring into your
development.
• Be able to factor in billable hours on feature development.
• Not sit back and relax once we’ve developed a feature.Test our accessibility.
• Understand how to output accessible markup in WordPress
And we’ll strive for the following goals:
WHO AM I
WHO I’VE WORKED WITH
TODAY’S WORKSHOP
ASSUMPTIONS
GOALS
INTRODUCTION
EXERCISE
FUTURE
THANK YOU

8. WHO AM I
WHO I’VE WORKED WITH
TODAY’S WORKSHOP
ASSUMPTIONS
GOALS
INTRODUCTION
EXERCISE
FUTURE
THANK YOU
NAVIGATING THROUGH WCAG
WCAG = Web Content Accessibility Guidelines 2.0
Consists of:
- General Guidelines ( -/+ 206)
- HTML / XHTML ( -/+ 97)
- CSS ( -/+ 30)
- Client Side Scripting ( -/+ 38)
- Server Side Scripting (-/+ 5)
- SMIL (-/+ 10)
- PlainText (-/+ 3)
- ARIA (-/+ 21)
- Flash (-/+ 36)
- Silverlight (-/+ 35)
- PDF (-/+ 23)
Link: https://www.w3.org/TR/WCAG20-TECHS/

9. WHO AM I
WHO I’VE WORKED WITH
TODAY’S WORKSHOP
ASSUMPTIONS
GOALS
INTRODUCTION
EXERCISE
FUTURE
THANK YOU
EXERCISE
Lets see how you cope with engineering a simple HTML page to be more accessible.
Clone down the following repo: https://github.com/dainemawer/wcjhb2017.git
Checkout a branch that follows the following pattern:
feature/accessibility-your-name
See if you can optimize the HTML page based on the checklist in the git readme. Once
you’re done, push your branch back up and do a PR, label me as the reviewer.
Goodluck!

10. WHO AM I
WHO I’VE WORKED WITH
TODAY’S WORKSHOP
ASSUMPTIONS
GOALS
INTRODUCTION
EXERCISE
FUTURE
THANK YOU
WEB SPEECH API
The Web Speech API was introduced in 2012, and comes built in to most
browsers that support the HTML5 Javascript API’s.
This API is a revolution for web accessibility and even though it requires a bit of setup,
once you understand it, it could be a very useful tool, especially from a testing perspective.
We’ll chat a little bit about it and take a look at the code that implements it.
The Web Speech API code is on a branch named, feature/speech-api.
Check it out and feel free to play around with it and if you have any questions, please
don’t hesitate.
https://github.com/dainemawer/wcjhb2017.git

11. For questions, feedback, consultations or discussion please get in touch:
THANK YOU
@dainemawer
https://dainelindleymawer.me
daine27
dainelmawer@gmail.com
WHO AM I
WHO I’VE WORKED WITH
TODAY’S WORKSHOP
ASSUMPTIONS
GOALS
INTRODUCTION
EXERCISE
FUTURE
THANK YOU