SlideShare a Scribd company logo
Responsible Design
Accountable Accessibility



                       Billy Gregory
                    @thebillygregory
“Through code ownership, I became more
Responsible for the overall Design of my code.
I believed that by holding myself Accountable
for the end result, I could directly improve the
Accessibility of my work.”
 A tall, questionably handsome, man at the front of the room
About me
I’m a front end developer at CGI in Toronto, Canada.

I am NOT an Accessibility Specialist, expert, guru, ninja, etc…

What I am is a developer who has grown to understand the
importance of Accessibility, not only to those who rely on it
but to the web as a whole.

As the web shifed, grew, mutated, evolved, matured, into
this fantastically semantic place, I began to realize one
simple fact about Accessibility that all developers should
embrace …
No.
If it worked for me…

 I like to explain Responsible Design
 using my own story as an example.

 Not because it’s particularly unique,
 but because it’s incredibly common.

 So, using my not so unique story as an
 example, let’s start at the beginning….
2008
I had just taken a job as a front end developer

My new employer had been working with the TTC (Toronto
Transit Commission) for several months and had just begun
development on the templates

I was being parachuted into the project just afer the
templates had come in from the contractor who had been
working on them
I had no idea what accessibility really was.
Trial By Fire
Forced to learn the hard way

For the frst time in my career I was using HTML
elements, tags, and attributes properly

Or in some cases, for the frst time at all.
My moment of clarity
My work took on a whole new meaning to me…
•
  I realized that I was building a tool, not a static page
•
  My code had a life of it’s own, it wasn’t there to be READ, it
  was there to be USED


While I never questioned the importance of accessibility, I
learned that it was not my job or my right to dictate who could
use this code or HOW
Through Clarity Came Focus
I noticed my skills as a developer had evolved
•
   My focus was no longer on making my code match the design
•
   I was carefully choosing how and why I was coding every
   element on the page, knowing it was going to be tested and I
   needed to defend my choices

As a result, over a period of time
•
  My code had fewer errors
•
  There were less cross-browser issues
•
  It was easier for the back end team to integrate
Accessibility in 2008

It was hard enough to get some devs to abandon table
based layouts let alone embrace semantic code

We were still years away from the end of IE6
I tried to speak to the creative department, but they didn’t
like me questioning their designs
The UX team didn’t take too kindly to me suggesting
alternative approaches
It was tough to get other clients interested in Accessibility


The most common excuses were that accessibility was “too
hard” or “too costly” so it wasn’t included in the spec


But, like most devs….
I ignored the spec.
I looked for ways to improve accessibility without
involving the client, the PM, the designers, or the UX
team while not undermining their work
The answer was at my fingertips, and right in front of
me, all along



My code.
I was ultimately responsible for the work I was putting
out there, there was no one else telling me how to
code.

I could make it as accessible as I wanted to as long as
I didn’t change the look or feel.
DIY a11y
 I took it on myself to make my work more accessible

 I knew the heart of accessible code, was semantic HTML

 I read the WCAG document top to bottom
 Then I read it again. And again. And again.

 Then I had someone smarter than my translate it into
 developer speak so I could finally understand it.

 I learned which points were bound directly to my work
 and that I had complete ownership over
When good enough stopped
being “Good Enough”
I approached my development process a little differently

•
    I spent more time planning my code up front, which lead to
    less time fixing it later
•
    I questioned everything on the page, I made sure it was
    documented
•
    Wireframes became my recipe, I refused to cook without
    them
•
    I always assumed at least SOME level of accessibility
•
    I stopped LOOKING at the designs I was building from,
    and learned to READ them
Own Your Code

… and not just the stuff you did right!

The real lessons are in the stuff you did wrong

Every bug could be a chance to learn something
you didn’t know before.
My Top Ten
Over time, I kept adding to the list of things I could "get away"
with or had complete control over

  1)    Semantic mark-up
  2)    ARIA landmark roles
  3)    Lists and the many ways we can use them
  4)    Skip links
  5)    Focus
  6)    Headings
  7)    Forms and labels
  8)    Alt text
  9)    Hidden text
  10)   Testing
By taking the extra time to carefully craf my code, and
from taking full responsibility for what I was putng out
for people to use, I became protective of my work.

Figuring out what I could do above and beyond just
writing the best HTML was just natural progression.
Thank you!

                      Billy Gregory
                   @thebillygregory

This presentation couldn’t have been
possible with help from Ryan Burgess
@coveredflth

More Related Content

Viewers also liked

10 tips in 10 minutes - DevTO Sept 30, 2013
10 tips in 10 minutes - DevTO Sept 30, 201310 tips in 10 minutes - DevTO Sept 30, 2013
10 tips in 10 minutes - DevTO Sept 30, 2013
Billy Gregory
 
How Accessibility Made Me a Better Developer
How Accessibility Made Me a Better DeveloperHow Accessibility Made Me a Better Developer
How Accessibility Made Me a Better Developer
Billy Gregory
 
AD CC and Me: Lessons Learned in Video Accessibility
AD CC and Me: Lessons Learned in Video AccessibilityAD CC and Me: Lessons Learned in Video Accessibility
AD CC and Me: Lessons Learned in Video Accessibility
Billy Gregory
 
Making JavaScript Accessible
Making JavaScript AccessibleMaking JavaScript Accessible
Making JavaScript Accessible
Dennis Lembree
 
HTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown WidgetHTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown Widget
Dennis Lembree
 
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
Dylan Wilbanks
 
Accessible Video in The Enterprise
Accessible Video in The Enterprise Accessible Video in The Enterprise
Accessible Video in The Enterprise
John Foliot
 
[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & AccessibilityChristopher Schmitt
 
Anatomy of an accessible carousel: everyone's responsible!
Anatomy of an accessible carousel: everyone's responsible!Anatomy of an accessible carousel: everyone's responsible!
Anatomy of an accessible carousel: everyone's responsible!
Access iQ
 
How To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBosHow To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBos
Dennis Lembree
 
Getting Things Done for Technical Communicators at TCUK14
Getting Things Done for Technical Communicators at TCUK14Getting Things Done for Technical Communicators at TCUK14
Getting Things Done for Technical Communicators at TCUK14
Karen Mardahl
 
Strategic Approach to IT Accessibility
Strategic Approach to IT AccessibilityStrategic Approach to IT Accessibility
Strategic Approach to IT Accessibility
InnoTech
 
Getting Things Done for Technical Communicators
Getting Things Done for Technical CommunicatorsGetting Things Done for Technical Communicators
Getting Things Done for Technical Communicators
Karen Mardahl
 
HTML5 Accessibility - Is it ready yet?
HTML5 Accessibility - Is it ready yet?HTML5 Accessibility - Is it ready yet?
HTML5 Accessibility - Is it ready yet?
Steven Faulkner
 
Usability meets accessibility
Usability meets accessibilityUsability meets accessibility
Usability meets accessibility
Whitney Quesenbery
 
How To Build An Accessible Web Application
How To Build An Accessible Web ApplicationHow To Build An Accessible Web Application
How To Build An Accessible Web Application
Dennis Lembree
 
Designing with Empathy [Reasons to be Creative 2013]
Designing with Empathy [Reasons to be Creative 2013]Designing with Empathy [Reasons to be Creative 2013]
Designing with Empathy [Reasons to be Creative 2013]
Aaron Gustafson
 
Teach your Browser new tricks
Teach your Browser new tricksTeach your Browser new tricks
Teach your Browser new tricks
Dirk Ginader
 
AccessU 2011 Keynote
AccessU 2011 KeynoteAccessU 2011 Keynote
AccessU 2011 Keynote
Dennis Lembree
 
Create Accessible Infographics
Create Accessible Infographics Create Accessible Infographics
Create Accessible Infographics
Ted Drake
 

Viewers also liked (20)

10 tips in 10 minutes - DevTO Sept 30, 2013
10 tips in 10 minutes - DevTO Sept 30, 201310 tips in 10 minutes - DevTO Sept 30, 2013
10 tips in 10 minutes - DevTO Sept 30, 2013
 
How Accessibility Made Me a Better Developer
How Accessibility Made Me a Better DeveloperHow Accessibility Made Me a Better Developer
How Accessibility Made Me a Better Developer
 
AD CC and Me: Lessons Learned in Video Accessibility
AD CC and Me: Lessons Learned in Video AccessibilityAD CC and Me: Lessons Learned in Video Accessibility
AD CC and Me: Lessons Learned in Video Accessibility
 
Making JavaScript Accessible
Making JavaScript AccessibleMaking JavaScript Accessible
Making JavaScript Accessible
 
HTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown WidgetHTML5's ARIA and a Web-Accessible Dropdown Widget
HTML5's ARIA and a Web-Accessible Dropdown Widget
 
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.
 
Accessible Video in The Enterprise
Accessible Video in The Enterprise Accessible Video in The Enterprise
Accessible Video in The Enterprise
 
[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility
 
Anatomy of an accessible carousel: everyone's responsible!
Anatomy of an accessible carousel: everyone's responsible!Anatomy of an accessible carousel: everyone's responsible!
Anatomy of an accessible carousel: everyone's responsible!
 
How To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBosHow To Build An Accessible Web Application - a11yBos
How To Build An Accessible Web Application - a11yBos
 
Getting Things Done for Technical Communicators at TCUK14
Getting Things Done for Technical Communicators at TCUK14Getting Things Done for Technical Communicators at TCUK14
Getting Things Done for Technical Communicators at TCUK14
 
Strategic Approach to IT Accessibility
Strategic Approach to IT AccessibilityStrategic Approach to IT Accessibility
Strategic Approach to IT Accessibility
 
Getting Things Done for Technical Communicators
Getting Things Done for Technical CommunicatorsGetting Things Done for Technical Communicators
Getting Things Done for Technical Communicators
 
HTML5 Accessibility - Is it ready yet?
HTML5 Accessibility - Is it ready yet?HTML5 Accessibility - Is it ready yet?
HTML5 Accessibility - Is it ready yet?
 
Usability meets accessibility
Usability meets accessibilityUsability meets accessibility
Usability meets accessibility
 
How To Build An Accessible Web Application
How To Build An Accessible Web ApplicationHow To Build An Accessible Web Application
How To Build An Accessible Web Application
 
Designing with Empathy [Reasons to be Creative 2013]
Designing with Empathy [Reasons to be Creative 2013]Designing with Empathy [Reasons to be Creative 2013]
Designing with Empathy [Reasons to be Creative 2013]
 
Teach your Browser new tricks
Teach your Browser new tricksTeach your Browser new tricks
Teach your Browser new tricks
 
AccessU 2011 Keynote
AccessU 2011 KeynoteAccessU 2011 Keynote
AccessU 2011 Keynote
 
Create Accessible Infographics
Create Accessible Infographics Create Accessible Infographics
Create Accessible Infographics
 

Similar to Responsible Design: Accountable Accessibility

UX 101: User Research methods to kickstart your project
UX 101: User Research methods to kickstart your projectUX 101: User Research methods to kickstart your project
UX 101: User Research methods to kickstart your project
Charlotte Breton Schreiner
 
Thoughts on design
Thoughts on designThoughts on design
Thoughts on designshawntelford
 
Grad lauren head final
Grad  lauren head finalGrad  lauren head final
Grad lauren head final
Lauren Head
 
How to learn coding
How to learn codingHow to learn coding
How to learn coding
HananeMessad1
 
Keynote talk: How to stay in love with programming (with notes)
Keynote talk: How to stay in love with programming (with notes)Keynote talk: How to stay in love with programming (with notes)
Keynote talk: How to stay in love with programming (with notes)
Camille Fournier
 
How Python Changed My Life PyCon Indonesia 2019
How Python Changed My Life   PyCon Indonesia 2019How Python Changed My Life   PyCon Indonesia 2019
How Python Changed My Life PyCon Indonesia 2019
Fauzan Erich Emmerling
 
Sourceress cover letter
Sourceress cover letterSourceress cover letter
Sourceress cover letter
Tala Shivute
 
Zero Adoption: Lessons Learned From Failing at Open Source
Zero Adoption: Lessons Learned From Failing at Open SourceZero Adoption: Lessons Learned From Failing at Open Source
Zero Adoption: Lessons Learned From Failing at Open Source
Memi Beltrame
 
Technical Writing Overview: WTD Nigeria
Technical Writing Overview: WTD NigeriaTechnical Writing Overview: WTD Nigeria
Technical Writing Overview: WTD Nigeria
Margaret Fero
 
Marketing Your Open Source Project - OSCON 2019_v04.pdf
Marketing Your Open Source Project - OSCON 2019_v04.pdfMarketing Your Open Source Project - OSCON 2019_v04.pdf
Marketing Your Open Source Project - OSCON 2019_v04.pdf
Amazon Web Services
 
Scottish Ruby Conference 2014
Scottish Ruby Conference  2014Scottish Ruby Conference  2014
Scottish Ruby Conference 2014michaelag1971
 
Chapter 11 Advocacy
Chapter 11 AdvocacyChapter 11 Advocacy
Chapter 11 Advocacy
PiercyTe
 
Chapter 11 advocacy
Chapter 11 advocacyChapter 11 advocacy
Chapter 11 advocacystodd12088
 
Product Management: Wrangling People
Product Management: Wrangling PeopleProduct Management: Wrangling People
Product Management: Wrangling People
Janet Brunckhorst
 
Agile Prototyping Best Practices
Agile Prototyping Best PracticesAgile Prototyping Best Practices
Agile Prototyping Best Practices
uxpin
 
How to Teach Yourself to Code
How to Teach Yourself to CodeHow to Teach Yourself to Code
How to Teach Yourself to Code
Mattan Griffel
 
Designing for Customer needs: A UX Perspective
Designing for Customer needs: A UX PerspectiveDesigning for Customer needs: A UX Perspective
Designing for Customer needs: A UX Perspective
Richard O'Brien
 
A Cup of Tea With Michael Larsen
A Cup of Tea With Michael LarsenA Cup of Tea With Michael Larsen
A Cup of Tea With Michael Larsen
Michael Larsen
 
The Care and Keeping of Your Junior Developer
The Care and Keeping of Your Junior DeveloperThe Care and Keeping of Your Junior Developer
The Care and Keeping of Your Junior Developer
bonmatts
 

Similar to Responsible Design: Accountable Accessibility (20)

UX 101: User Research methods to kickstart your project
UX 101: User Research methods to kickstart your projectUX 101: User Research methods to kickstart your project
UX 101: User Research methods to kickstart your project
 
Thoughts on design
Thoughts on designThoughts on design
Thoughts on design
 
Grad lauren head final
Grad  lauren head finalGrad  lauren head final
Grad lauren head final
 
How to learn coding
How to learn codingHow to learn coding
How to learn coding
 
Keynote talk: How to stay in love with programming (with notes)
Keynote talk: How to stay in love with programming (with notes)Keynote talk: How to stay in love with programming (with notes)
Keynote talk: How to stay in love with programming (with notes)
 
How Python Changed My Life PyCon Indonesia 2019
How Python Changed My Life   PyCon Indonesia 2019How Python Changed My Life   PyCon Indonesia 2019
How Python Changed My Life PyCon Indonesia 2019
 
Sourceress cover letter
Sourceress cover letterSourceress cover letter
Sourceress cover letter
 
Zero Adoption: Lessons Learned From Failing at Open Source
Zero Adoption: Lessons Learned From Failing at Open SourceZero Adoption: Lessons Learned From Failing at Open Source
Zero Adoption: Lessons Learned From Failing at Open Source
 
Technical Writing Overview: WTD Nigeria
Technical Writing Overview: WTD NigeriaTechnical Writing Overview: WTD Nigeria
Technical Writing Overview: WTD Nigeria
 
Marketing Your Open Source Project - OSCON 2019_v04.pdf
Marketing Your Open Source Project - OSCON 2019_v04.pdfMarketing Your Open Source Project - OSCON 2019_v04.pdf
Marketing Your Open Source Project - OSCON 2019_v04.pdf
 
Scottish Ruby Conference 2014
Scottish Ruby Conference  2014Scottish Ruby Conference  2014
Scottish Ruby Conference 2014
 
Chapter 11 Advocacy
Chapter 11 AdvocacyChapter 11 Advocacy
Chapter 11 Advocacy
 
Chapter 11 advocacy
Chapter 11 advocacyChapter 11 advocacy
Chapter 11 advocacy
 
Product Management: Wrangling People
Product Management: Wrangling PeopleProduct Management: Wrangling People
Product Management: Wrangling People
 
Agile Prototyping Best Practices
Agile Prototyping Best PracticesAgile Prototyping Best Practices
Agile Prototyping Best Practices
 
Designer vs Developer
Designer vs DeveloperDesigner vs Developer
Designer vs Developer
 
How to Teach Yourself to Code
How to Teach Yourself to CodeHow to Teach Yourself to Code
How to Teach Yourself to Code
 
Designing for Customer needs: A UX Perspective
Designing for Customer needs: A UX PerspectiveDesigning for Customer needs: A UX Perspective
Designing for Customer needs: A UX Perspective
 
A Cup of Tea With Michael Larsen
A Cup of Tea With Michael LarsenA Cup of Tea With Michael Larsen
A Cup of Tea With Michael Larsen
 
The Care and Keeping of Your Junior Developer
The Care and Keeping of Your Junior DeveloperThe Care and Keeping of Your Junior Developer
The Care and Keeping of Your Junior Developer
 

Recently uploaded

The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Product School
 
Generating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using SmithyGenerating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using Smithy
g2nightmarescribd
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
DianaGray10
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
Safe Software
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
Guy Korland
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Jeffrey Haguewood
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
Elena Simperl
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
Thijs Feryn
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
Dorra BARTAGUIZ
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Tobias Schneck
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
Frank van Harmelen
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
Product School
 

Recently uploaded (20)

The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
 
Generating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using SmithyGenerating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using Smithy
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
 

Responsible Design: Accountable Accessibility

  • 1. Responsible Design Accountable Accessibility Billy Gregory @thebillygregory
  • 2. “Through code ownership, I became more Responsible for the overall Design of my code. I believed that by holding myself Accountable for the end result, I could directly improve the Accessibility of my work.” A tall, questionably handsome, man at the front of the room
  • 3. About me I’m a front end developer at CGI in Toronto, Canada. I am NOT an Accessibility Specialist, expert, guru, ninja, etc… What I am is a developer who has grown to understand the importance of Accessibility, not only to those who rely on it but to the web as a whole. As the web shifed, grew, mutated, evolved, matured, into this fantastically semantic place, I began to realize one simple fact about Accessibility that all developers should embrace …
  • 4.
  • 5. No.
  • 6.
  • 7. If it worked for me… I like to explain Responsible Design using my own story as an example. Not because it’s particularly unique, but because it’s incredibly common. So, using my not so unique story as an example, let’s start at the beginning….
  • 8.
  • 9. 2008 I had just taken a job as a front end developer My new employer had been working with the TTC (Toronto Transit Commission) for several months and had just begun development on the templates I was being parachuted into the project just afer the templates had come in from the contractor who had been working on them
  • 10. I had no idea what accessibility really was.
  • 11. Trial By Fire Forced to learn the hard way For the frst time in my career I was using HTML elements, tags, and attributes properly Or in some cases, for the frst time at all.
  • 12. My moment of clarity My work took on a whole new meaning to me… • I realized that I was building a tool, not a static page • My code had a life of it’s own, it wasn’t there to be READ, it was there to be USED While I never questioned the importance of accessibility, I learned that it was not my job or my right to dictate who could use this code or HOW
  • 13. Through Clarity Came Focus I noticed my skills as a developer had evolved • My focus was no longer on making my code match the design • I was carefully choosing how and why I was coding every element on the page, knowing it was going to be tested and I needed to defend my choices As a result, over a period of time • My code had fewer errors • There were less cross-browser issues • It was easier for the back end team to integrate
  • 14. Accessibility in 2008 It was hard enough to get some devs to abandon table based layouts let alone embrace semantic code We were still years away from the end of IE6
  • 15. I tried to speak to the creative department, but they didn’t like me questioning their designs
  • 16. The UX team didn’t take too kindly to me suggesting alternative approaches
  • 17. It was tough to get other clients interested in Accessibility The most common excuses were that accessibility was “too hard” or “too costly” so it wasn’t included in the spec But, like most devs….
  • 18. I ignored the spec.
  • 19. I looked for ways to improve accessibility without involving the client, the PM, the designers, or the UX team while not undermining their work The answer was at my fingertips, and right in front of me, all along My code. I was ultimately responsible for the work I was putting out there, there was no one else telling me how to code. I could make it as accessible as I wanted to as long as I didn’t change the look or feel.
  • 20. DIY a11y I took it on myself to make my work more accessible I knew the heart of accessible code, was semantic HTML I read the WCAG document top to bottom Then I read it again. And again. And again. Then I had someone smarter than my translate it into developer speak so I could finally understand it. I learned which points were bound directly to my work and that I had complete ownership over
  • 21. When good enough stopped being “Good Enough” I approached my development process a little differently • I spent more time planning my code up front, which lead to less time fixing it later • I questioned everything on the page, I made sure it was documented • Wireframes became my recipe, I refused to cook without them • I always assumed at least SOME level of accessibility • I stopped LOOKING at the designs I was building from, and learned to READ them
  • 22.
  • 23.
  • 24.
  • 25. Own Your Code … and not just the stuff you did right! The real lessons are in the stuff you did wrong Every bug could be a chance to learn something you didn’t know before.
  • 26. My Top Ten Over time, I kept adding to the list of things I could "get away" with or had complete control over 1) Semantic mark-up 2) ARIA landmark roles 3) Lists and the many ways we can use them 4) Skip links 5) Focus 6) Headings 7) Forms and labels 8) Alt text 9) Hidden text 10) Testing
  • 27. By taking the extra time to carefully craf my code, and from taking full responsibility for what I was putng out for people to use, I became protective of my work. Figuring out what I could do above and beyond just writing the best HTML was just natural progression.
  • 28. Thank you! Billy Gregory @thebillygregory This presentation couldn’t have been possible with help from Ryan Burgess @coveredflth