My name is Alison Walden, and I’m a director of technology at Publicis Sapient. I’m responsible for the quality of our front-end code deliverables, the customer-facing aspect of our code. I’m also our accessibility lead.
This combination role puts me in a position where I get to review large samples of our front end code and that of vendors we work with, and I have started to compile a list of the most common accessibility issues inadvertently caused by front end developers.
I share this list with you today in the form of this deck from a talk I did in 2019 at Web à Québec, in hopes that you can avoid making these same issues. I've appended my speaking notes to each slide to provide context.
The web you were used to is gone. Architecture and strategy for your mobile c...Alberta Soranzo
Information architecture and content strategy are the foundation of any website but, when it comes to mobile, they can literally mean the life or death of a product.
The truth is that even the best-designed and well-engineered mobile products can still fail if their IA is not sound, and that’s because mobile information architecture doesn’t only define the structure of content, but also determines how users will interact with it. And speaking of content, do you know what content should go on your mobile sites and apps? Are your users finding what they came for?
In this talk we will take a look at the thought process that drives mobile content strategy, the specific challenges and opportunities of the mobile space and how information architecture and content strategy contribute to the creation of outstanding mobile experiences.
ElectroSmog SkillShare: Tools and Models for Online CollaborationEyebeam
Eyebeam participated in ElectroSmog, a new festival that revolves around the concept of Sustainable Immobility. The festival, which takes place simultaneously at many locations around the world, introduces and explores the concept of sustainable immobility in both theory and practice, with discussions, workshops, and performances taking place at each of the festival partners' home bases.
The web you were used to is gone. Architecture and strategy for your mobile c...Alberta Soranzo
Information architecture and content strategy are the foundation of any website but, when it comes to mobile, they can literally mean the life or death of a product.
The truth is that even the best-designed and well-engineered mobile products can still fail if their IA is not sound, and that’s because mobile information architecture doesn’t only define the structure of content, but also determines how users will interact with it. And speaking of content, do you know what content should go on your mobile sites and apps? Are your users finding what they came for?
In this talk we will take a look at the thought process that drives mobile content strategy, the specific challenges and opportunities of the mobile space and how information architecture and content strategy contribute to the creation of outstanding mobile experiences.
ElectroSmog SkillShare: Tools and Models for Online CollaborationEyebeam
Eyebeam participated in ElectroSmog, a new festival that revolves around the concept of Sustainable Immobility. The festival, which takes place simultaneously at many locations around the world, introduces and explores the concept of sustainable immobility in both theory and practice, with discussions, workshops, and performances taking place at each of the festival partners' home bases.
Web accessibility is about creating web content, design, and tools that can be used by everyone regardless of ability. Web accessibility is the need for websites to utilize tools and technologies developed to aid the perception, understanding, contribution, navigation, and interaction of a person with disabilities on the site. Integrating accessibility can seem intimidating to those that are just getting acquainted with it, but it is a vital element of user experience. Accessibility should be built into the web development and design process, rather than trying to retrofit it as an afterthought.
How to create accessible websites - WordCamp BostonRachel Cherry
Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to, websites by people with disabilities. When your website is inaccessible, research shows you could be excluding up to 20 percent of your visitors and customers. When your website is accessible, everyone can consume your information and interact with you and your services. Visually-impaired users can visit your website using a screen reader. Those who can’t use a mouse can navigate your site using a keyboard or other input device. Designing with accessibility in mind will also improve your SEO. Join my workshop to learn more about accessibility, the importance of universal design, and how to create a high-quality user experience that is inclusive and beneficial to all.
Matt May tweeted an observation in 2016 introducing Trickle-Down Accessibility and recognized prioritizing our blind customers could lead to less support for others.
Focusing on screen reader accessibility has distinct advantages for product developers. If your application works with a screen reader, it should also be usable with a keyboard, voice recognition, and switch control devices. Screen reader accessibility also falls in line with automated testing tools.
However, there are many disabilities, and assistive technologies, that are not necessarily benefited by this focus on the blind/low-vision community. Color contrast, closed captioning, readability, consistency in design, user customization, session timeouts, and animation distraction are just a few examples of concerns that often go unaddressed.
Beginners Guide To Web Accessibility - WordCamp UK July 2013Graham Armfield
A beginners guide to web accessibility. A presentation covering the definition of what web accessibility is, why it's important, what you can do about it, and when to think about it.
A workshop for those new to accessibility
- what it is
- what it looks like when done well
- how to advocate for improvement
- how to audit for it
- tools to use to assess it
A presentation that I did along with a professor from the University of South Carolina Upstate (http://uscupstate.edu): Dr. Tina Herzberg.
The presentation covers information about a braille training grant that she was awarded, and my position on the team as creating universal design plugins for Omeka and WordPress, along with other web accessibility items.
Usability ≠ Accessibility. An intro to web accessibility for agencies.Kate Horowitz
I often see people mistake usability for accessibility. They are not the same; in fact, often they contract each other. I've put together this guide to better understand accessibility, how it differs from usability, and when accessibility may be right for your client.
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...UXPA International
An estimated 1.3 billion people globally report limitations in their daily activities due to a disability. When it comes to the physical world, businesses have made progress in accommodating customers with disabilities. But in the digital world, websites lack basic accessibility features such as text alternatives describing images, proper heading level structures so individuals who are blind and use screen readers can understand the content on a webpage, or captioning for multimedia content for individuals who are deaf or are hard of hearing – let alone assistive technology for customers who have trouble using mobile devices due to dexterity limitations that arise from a variety of conditions.
In this session, attendees will:
* Understand people with disabilities (PWDs) and how they use the web
* Learn about common barriers, issues and solutions
* Discover the different testing methodologies and their interdependencies
* Uncover ROI
Web Accessibility: What it is, Why it's importantGraham Armfield
Slides from a presentation I gave to an ISTC group meeting on November 12th 2013. The audience consisted mainly of technical authors - most of whom were not technically orientated.
The presentation is an introduction to web accessibility, and as well as a definition for web accessibility I presented some reasons why it's important to take it seriously. I looked at various types of disability and impairment, some examples of assistive technology, and some simple things that content authors can do to help keep their articles and posts accessible.
Tinder Foundation Older People's Specialist Network Event - 10th June 2014
Presentation from Steve Griffiths (Digital Accessibility Development Officer, RNIB)
Websites often forget a large group of people who want to do business with them: people with disabilities. This deck covers information including what the population of people with disabilities and handicaps looks like, as well as some of their perceptions about the current state of the internet's accessibility. Additionally, it covers tips on how you can make your website more accessible and provides additional resources to help you on your journey.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Web accessibility is about creating web content, design, and tools that can be used by everyone regardless of ability. Web accessibility is the need for websites to utilize tools and technologies developed to aid the perception, understanding, contribution, navigation, and interaction of a person with disabilities on the site. Integrating accessibility can seem intimidating to those that are just getting acquainted with it, but it is a vital element of user experience. Accessibility should be built into the web development and design process, rather than trying to retrofit it as an afterthought.
How to create accessible websites - WordCamp BostonRachel Cherry
Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to, websites by people with disabilities. When your website is inaccessible, research shows you could be excluding up to 20 percent of your visitors and customers. When your website is accessible, everyone can consume your information and interact with you and your services. Visually-impaired users can visit your website using a screen reader. Those who can’t use a mouse can navigate your site using a keyboard or other input device. Designing with accessibility in mind will also improve your SEO. Join my workshop to learn more about accessibility, the importance of universal design, and how to create a high-quality user experience that is inclusive and beneficial to all.
Matt May tweeted an observation in 2016 introducing Trickle-Down Accessibility and recognized prioritizing our blind customers could lead to less support for others.
Focusing on screen reader accessibility has distinct advantages for product developers. If your application works with a screen reader, it should also be usable with a keyboard, voice recognition, and switch control devices. Screen reader accessibility also falls in line with automated testing tools.
However, there are many disabilities, and assistive technologies, that are not necessarily benefited by this focus on the blind/low-vision community. Color contrast, closed captioning, readability, consistency in design, user customization, session timeouts, and animation distraction are just a few examples of concerns that often go unaddressed.
Beginners Guide To Web Accessibility - WordCamp UK July 2013Graham Armfield
A beginners guide to web accessibility. A presentation covering the definition of what web accessibility is, why it's important, what you can do about it, and when to think about it.
A workshop for those new to accessibility
- what it is
- what it looks like when done well
- how to advocate for improvement
- how to audit for it
- tools to use to assess it
A presentation that I did along with a professor from the University of South Carolina Upstate (http://uscupstate.edu): Dr. Tina Herzberg.
The presentation covers information about a braille training grant that she was awarded, and my position on the team as creating universal design plugins for Omeka and WordPress, along with other web accessibility items.
Usability ≠ Accessibility. An intro to web accessibility for agencies.Kate Horowitz
I often see people mistake usability for accessibility. They are not the same; in fact, often they contract each other. I've put together this guide to better understand accessibility, how it differs from usability, and when accessibility may be right for your client.
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...UXPA International
An estimated 1.3 billion people globally report limitations in their daily activities due to a disability. When it comes to the physical world, businesses have made progress in accommodating customers with disabilities. But in the digital world, websites lack basic accessibility features such as text alternatives describing images, proper heading level structures so individuals who are blind and use screen readers can understand the content on a webpage, or captioning for multimedia content for individuals who are deaf or are hard of hearing – let alone assistive technology for customers who have trouble using mobile devices due to dexterity limitations that arise from a variety of conditions.
In this session, attendees will:
* Understand people with disabilities (PWDs) and how they use the web
* Learn about common barriers, issues and solutions
* Discover the different testing methodologies and their interdependencies
* Uncover ROI
Web Accessibility: What it is, Why it's importantGraham Armfield
Slides from a presentation I gave to an ISTC group meeting on November 12th 2013. The audience consisted mainly of technical authors - most of whom were not technically orientated.
The presentation is an introduction to web accessibility, and as well as a definition for web accessibility I presented some reasons why it's important to take it seriously. I looked at various types of disability and impairment, some examples of assistive technology, and some simple things that content authors can do to help keep their articles and posts accessible.
Tinder Foundation Older People's Specialist Network Event - 10th June 2014
Presentation from Steve Griffiths (Digital Accessibility Development Officer, RNIB)
Websites often forget a large group of people who want to do business with them: people with disabilities. This deck covers information including what the population of people with disabilities and handicaps looks like, as well as some of their perceptions about the current state of the internet's accessibility. Additionally, it covers tips on how you can make your website more accessible and provides additional resources to help you on your journey.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
I have heard many times that architecture is not important for the front-end. Also, many times I have seen how developers implement features on the front-end just following the standard rules for a framework and think that this is enough to successfully launch the project, and then the project fails. How to prevent this and what approach to choose? I have launched dozens of complex projects and during the talk we will analyze which approaches have worked for me and which have not.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
2. Developing accessible experiences
April 2019
Alison Walden
Director of Technology
@lsnrae
Medium.com/@lsnrae
I presented this deck at Web à Québec 2019 and want to give a special shout out to my excellent audience who requested that I make it available
online. This is the slideshare version. On every slide, I provide my speaker notes in a box like this one. The conference version of the deck did not
have these boxes on every slide!
My name is Alison Walden, and I’m a director of technology at Publicis Sapient. I’m responsible for the quality of our front-end code deliverables,
the customer-facing aspect of our code. I’m also our accessibility lead.
This combination role puts me in a position where I get to review large samples of our front end code and that of vendors we work with, and I
started to compile a list of the most common accessibility issues inadvertently caused by front end developers.
I’m going to share this list with you today, in hopes that you can avoid making these same issues. So let’s get started.
3. Key Ideas:
1. An accessible web benefits everyone.
2. The WCAG guidelines are easy to read.
3. Test with your keyboard & screen reader.
3
@lsnrae
5. “Accessibility means access. It refers to the
ability for everyone, regardless of disability
or special needs, to access, use and benefit
from everything within their environment.”
- The Canadian National Institute for the Blind
5
@lsnrae
6. @lsnrae
I’ve been focusing on accessibility in my
work for over 10 years.
One of the first times I thought about
accessibility was on a trip to the Great Wall
of China in 2006.
The Great Wall is one of the wonders of
the ancient world, as you know. There’s no
denying that it wasn’t designed to be
accessible. That’s understandable for a
structure built over 2000 years ago.
As a healthy, active person, I wouldn’t
have noticed the accessibility challenges of
the Great Wall if I had not been traveling
with my elderly father in law. He simply
couldn’t climb up all of those stairs. It was
the first time that someone else’s
accessibility requirements affected me
personally.
7. The next time I recall noticing accessibility
barriers is when I had a baby. This isn’t a
picture of me but it illustrates what all
parents face when they want to take their
child out in a stroller.
Carrying a stroller up the stairs is
challenging. Depending on how many
stairs there are, it could be impossible
without help.
It made me empathize with people in
wheelchairs who always faced this
problem that had never affected me
before.
And it struck me how willing strangers
were to help me carry the stroller up the
stairs. People are kind, and they want to
help.
8. @lsnrae
And people are smart. They find
workarounds. Even when something isn’t
designed for accessibility, sometimes
people can find a way to succeed in their
task.
9. But we also have an opportunity to
consider everyone’s needs up front, and to
design and develop accessible
experiences purposefully, so that everyone
can enjoy them.
10. Here’s another view of this style of
accessible ramp. This won an urban
design award and it shows that it’s
definitely possible to have an experience
that is both beautiful AND accessible.
What I’m trying to convey is that when
we make a physical space accessible, it
actually benefits everyone.
12. @lsnrae
With the advent of smartphones we are all
subject to a degree of new challenges
when trying to navigate websites. Here I’m
showing how the glare on the screen can
cut down on anyone’s ability to view
content.
13. @lsnrae
We also have to consider the temporary
disabilities we’re all subject to – temporary
vision loss or when you injure your arms.
14. We have all ages of people surfing the
internet, with varying degrees of dexterity
and vision loss…
15. @lsnrae
…who wouldn’t even self-identify as
needing an “accessible” experience.
But let’s talk about the population of people
with disabilities, who will also benefit from
accessible experiences.
16. People with disabilities (US, 2016)
16%
Ambulatory
6%
Cognitive
5%
Hearing
3%
Sight
2%
US POPULATION
“web
impacting
disabilities”
@lsnrae
A full 16% of the US population had some
kind of disability in 2016.
Let’s talk about disabilities other than
ambulatory ones:
Cognitive issues, hearing loss, and vision
loss. I refer to these as “web impacting”
disabilities, because these are examples of
disabilities that affect peoples’ ability to
navigate the web using a mouse pointing
device. How many people are impacted by
these disabilities?
17. 0 50,000,000 100,000,000 150,000,000 200,000,000 250,000,000 300,000,000 350,000,000
"Web Disabilities" Pop. (US)
Canadian Population
US Population
A significant number of people are affected…
~35 million
people
@lsnrae
A significant number. The top grey bar
represents the number of people online in
the US.
The middle grey bar is the population of
people online in Canada.
I want to draw your attention to the blue
bar at the bottom, which is the population
of people with “web impacting” disabilities
in the US. ~35 million people. This is
almost the same as the population of
Canada.
18. 0 50,000,000 100,000,000 150,000,000 200,000,000 250,000,000 300,000,000 350,000,000
"Web Disabilities" Pop. (US)
Canadian Population
US Population
A significant number of people are affected…
~35 million
people
@lsnrae
Here are some Canadian numbers:
~half a million Canadians live with
significant vision loss. (Almost the whole
population of Quebec City).
Canadians who identify themselves
as culturally Deaf comprise more than
350,000 people across Canada. (Canadian
Association of the Deaf, 2007)
That’s about ¾ of a million people.
20. Some definitions:
20
Web Accessibility:
Web accessibility means that people with disabilities can perceive, understand, navigate, and
interact with the Web.
Web Content Accessibility Guidelines (WCAG):
A series of guidelines from the World Wide Web Consortium (W3C) that explain how to make
web content accessible to people with disabilities.
World Wide Web Consortium (W3C):
The main international standards organization for the World Wide Web.
@lsnrae
21. P E R C E I V A B L E
1.1 Text Alternatives
1.2 Time-based Media
1.3 Adaptable
1.4 Distinguishable
2.1 Keyboard Accessible
2.2 Enough Time
2.3 Seizures
2.4 Navigable
2.5 Input modalities
4.1 Compatible3.1 Readable
3.2 Predictable
3.3 Input Assistance
O P E R A B L E U N D E R S T A N D A B L
E
R O B U S T
The Web Content Accessibility Guidelines (WCAG) are organized under 4
principles:
@lsnrae
22. 1.1 Use alternative text
1.2 Audio/video related
1.3 Use semantic markup
1.4 Make content easy to
see
2.1 Use the keyboard alone
2.2 Give users enough time
2.3 Don’t cause seizures
2.4 Help users navigate
2.5 …Beyond keyboard
4.1 Use correct syntax and
follow HTML specifications
3.1 Use language attributes
3.2 Predictable operation
3.3 Make accessible forms
CONTENT SHOULD BE CONTROLS SHOULD BE CONTENT SHOULD BE CODING SHOULD BE
P E R C E I V A B L E O P E R A B L E U N D E R S T A N D A B L
E
R O B U S T
The Web Content Accessibility Guidelines (WCAG) are organized under 4
principles:
@lsnrae
23. A
AA
AAA
L O W E S T
H I G H E S T
WCAG guidelines are divided into 3 conformance levels:
@lsnrae
24. A
AA
AAA
L O W E S T
H I G H E S T
WCAG guidelines are divided into 3 conformance levels:
@lsnrae
Even the W3C doesn’t recommend trying
to adhere to all of level AAA because some
of the guidelines are less measurable.
E.g. There’s a AAA guideline about
unusual words needing to be defined in a
glossary. Who gets to decide if a word is
unusual? Me? You? This is not objective
enough to be measurable.
25. Accessibility compliance is collaborative:
Project Managers must ensure
accessibility compliance is considered in
the timeline.
Experience Designers must consider
the linear screen reader experience in
their wireframes.
Visual Designers must consider people
with vision challenges in their design.
Front end developers must test their
work with the keyboard and screen
reader.
Copywriters must be sure to write in an
accessible way.
Quality Assurance Specialists must
test against accessibility requirements.
Vendors must adhere to the same
standards.
Everyone must be trained how to
comply.
@lsnrae
26. “Imagine not
being able to
access
information.
For [35 million people in
the US], this is the reality.
Today, only 5 percent of
printed materials are
available in alternate
formats, while less than 1
percent of websites are
accessible.” - CNIB
WHY?
26
27. “Design is not just what it looks like and
feels like. Design is how it works.”
- Steve Jobs
27
@lsnrae
28. Ways the web works:
@lsnrae
And the web works in a variety of ways: It can work with a mouse pointing device and a monitor, the way many of us probably use it. It can work with just a keyboard and a
monitor. Consider someone who has a tremor and cannot focus their mouse pointer and needs to use a keyboard instead. Or, a sighted person who may be paralyzed, and
use a puff and suck device that mimics the function of a tab key. Or, in the case of a non-sighted person, they will use their keyboard in conjunction with a screen reader.
In both of these latter two cases, the main way people are navigating is with their keyboard, not a mouse. But most people who design websites today actually use a
mouse pointer to navigate.
29. @lsnrae
Would you ask someone to design OR
BUILD the perfect bike who has never
ridden one?
You probably wouldn’t. But that is
effectively what we’re asking designers
AND DEVELOPERS to do, when they
usually navigate the web using a mouse
pointing device, and we ask them to start
designing or DEVELOPING experiences
for people who mainly use their keyboards.
Just because it works fine with our mouse
pointing device doesn’t mean it’ll work with
a keyboard.
Let’s now look at a few common issues I
see in front end code. These are issues
where the site works fine with a mouse,
but has problems with the keyboard and/or
screen reader.
31. Forgetting to test ALL of our work
with our keyboard, every time
Common code-related issue #1:
Home About Us Products Services
Lorem
Ipsum dolor sit
amet, consectetur
adipiscing elit, sed
do eiusmod tempor
incididunt ut labore
et dolore.
Learn more >
Lorem
Ipsum dolor sit
amet, consectetur
adipiscing elit, sed
do eiusmod tempor
incididunt ut labore
et dolore.
Learn more >
@lsnrae
When people don’t test with their keyboards, they miss obvious and easy to
fix issues. This example shows a basic global navigation menu that a user is
navigating with the keyboard. They will hit enter to open the “Services” menu, and
they can tab through it with their keyboard…
32. Forgetting to test ALL of our work
with our keyboard, every time
Common code-related issue #1:
Home About Us Products Services
Lorem
Ipsum dolor sit
amet, consectetur
adipiscing elit, sed
do eiusmod tempor
incididunt ut labore
et dolore.
Learn more >
Lorem
Ipsum dolor sit
amet, consectetur
adipiscing elit, sed
do eiusmod tempor
incididunt ut labore
et dolore.
Learn more >
Service
s
• Link 1
• Link 2
• Link 3
• Link 4
@lsnrae
…but when they tab out of the menu, it doesn’t close. Every front end developer
reading this knows why this happened and how to fix it. The problem is, the
developer who made it did not test with their keyboard, so they didn’t notice
that the issue was happening!
33. Developing modal windows without
keyboard functionality
First focus on close button (that has a “close” label).
Modal heading is announced.
Focus kept within modal.
Close modal with close button or escape key.
Common code-related issue #2
Main title goes here
Subtitle 1
Body text goes here lorem ipsum
dolor sit amet.
Learn more
Subtitle 2
Body text goes here lorem ipsum
dolor sit amet.
Learn more
Subtitle 3
Body text goes here lorem ipsum
dolor sit amet.
Learn more
But wait, there’s more!
Lorem ipsum dolor sit amet here
is
the text of the modal window
lorem ipsum dolor sit amet.
Cancel Submit
X
<div role="dialog" aria-labelledby=
"dialog1Title" aria-
describedby="dialog1Desc">
<h2 id="dialog1Title">But wait,
there’s more</h2>
<p id="dialog1Desc">Lorem ipsum dolor
sit amet…</p>
<button>Close</button>
...
</div>
@lsnrae
34. <img src=“images/instagram.gif”
alt=“Connect with us on Instagram” />
<i class="icon-twitter"><span
class="visually-hidden">Twitter</span></i>
<a href="https://www.facebook.com/myPage"
target="_blank" class="social_icons
social_facebook">
<span class="icon-facebook"></span></a>
Common code-related issue #3:
Writing invalid HTML markup, like
empty links.
This is the MOST COMMON error I see in front end development. These icons are
designed for sighted users only. When they get keyboard focus, the screen reader
will only announce “Link, link,link…” because the links have no label.
Use <img> tags instead. Images that are content should be within image
tags. Use SVG if you want them to scale. Or, if you really want to use an
icon font, add a hidden label the screen reader can announce.
35. Building inaccessible forms
All fields have programmatically associated labels.
Even fields with no visible label have hidden labels.
Error messages are announced by the screen reader.
User can submit form with errors.
Common code-related issue #4:
First name*:
Last name*:
Phone number:
Email address*:
Please enter a valid email address.
Jane
Doe
janedoe@gmail
Submit
Required field indicators
Actual labels for all fields
Error messaging is read out by screen
reader
Buttons are not disabled
@lsnrae
36. Not separating heading styles from
structure
Common code-related issue #5:
H1 – Franklin Gothic Medium, 24 px
H2 – Franklin Gothic Medium, 20 px
H3 – Franklin Gothic Book, 18 px
P – Garamond, 16 px
L1 – Franklin Gothic Medium, 24 px
L2 – Franklin Gothic Medium, 20 px
L3 – Franklin Gothic Book, 18 px
Body copy – Garamond, 16 px
@lsnrae
Don’t apply CSS styles directly to heading elements. Make classes instead, so you
can use whichever heading level you need to use to display whatever font design is
shown in a given page layout.
37. L1 – Franklin Gothic Medium, 24 px
L2 – Franklin Gothic Medium, 20 px
L3 – Franklin Gothic Book, 18 px
Body copy – Garamond, 16 px
Main title goes here
Subtitle 1
Body text goes here lorem ipsum
dolor sit amet.
Learn more
Subtitle 2
Body text goes here lorem ipsum
dolor sit amet.
Learn more
<h1 class=“L1”>
<h2 class=“L3”>Not separating heading styles from
structure
Common code-related issue #5:
@lsnrae
Then, when suddenly we get a design that skips heading levels, we can write code
that does not skip heading levels.
38. Overuse of ARIA
when simple
semantic HTML
will suffice
<img src=“myimage.jpg”
role=“img”…/>
<a href=“mypage.html”
role=“link”…/>
<article role=“article”…/>
<img src=“house.jpg”
alt=“A house” aria-
label=“A house” />
<nav role=“navigation”>
<img src=“smiley.gif” alt=“”
aria-label=“Smiley face” />
<div role="link"><a href="/"
role="button" tabindex="12" title="link
text">Link text</a></div>
<div role=
“presentation” aria-
label=“Presentation”>
Common code-related issue #6:
The problem with WAI-ARIA is
that too many developers are
using it the wrong way. Respected
accessibility service
provider WebAIM recently analyzed
the home pages for the top one
million websites (Google the
WebAIM million) and among their
other results, they discovered
that home pages with ARIA present
averaged 11.2 more detectable
errors than pages without ARIA.
This means that well-intentioned
developers are making pages LESS
accessible.
39. Mis-using aria-label and
aria-describedby attributes
Common code-related issue #7:
4-door 2-door
<button aria-label=“Four door vehicle highlights”…>
4-door
</button>
<button aria-label=“Two door vehicle highlights” …>
2-door
</button>
(1) Aria-label attributes are used to
completely replace vague control names:
@lsnrae
This is a real example taken from a page that shows vehicle highlights for either a
4-door version of the vehicle or a 2-door version of the vehicle. The sighted user
can gather this context by seeing the interface, but it is not enough for a non-
sighted user to hear “button: 4-door” or “button: 2-door”.
40. Mis-using aria-label and
aria-describedby attributes
Common code-related issue #7:
<p id=“mystatement”>Buy tires and wheels online.</p>
<a href=“page.html” aria-describedby=“mystatement”>
Learn More</a>
(2) Aria-describedby attributes are used to
append existing nearby content to vague
control names to provide more context.
Buy tires and wheels online.
Learn more >
Nearby text is appended to vague link text
@lsnrae
When you are able to use aria-describedby attributes instead of aria-labels, I like
it better because it requires less maintenance down the road and is less subject
to error.
41. Not using captions and scope
attributes for data tables
Common code-related issue #8:
<table>
<caption>Javascript Libraries</caption>
<tbody><tr>
<th scope=“col”>Name</th>
<th scope=“col”>Age</th>
<th scope=“col”>Birthday</th>
</tr>
<tr>
<td scope=“row”>Jquery</td>
<td>11</td>
<td>August 26</td>
</tr>
<tr>
<th scope=“row”>React</th>
<td>4</td>
<td>March 21</td>
</tr>
</tbody></table>
Name Age Birthday
JQuery 11 August 26
React 4 March 21
Javascript LibrariesScreen readers use the caption element and scope attributes to help
non-sighted people understand how a data table is organized.
TABLE DO’s AND DON’Ts:
DO use the table heading in the caption element.
DO use the <th> element for table headings.
DO define the scope of a heading as belonging to a column or row.
DON’T make insanely complex tables without trying to help a designer
to simplify them. Some screen readers can’t handle merged rows or
columns, for example.
42. Not using captions and scope
attributes for data tables
Common code-related issue #8:
<table>
<caption>Javascript Libraries</caption>
<tbody><tr>
<th scope=“col”>Name</th>
<th scope=“col”>Age</th>
<th scope=“col”>Birthday</th>
</tr>
<tr>
<th scope=“row”>Jquery</th>
<td>11</td>
<td>August 26</td>
</tr>
<tr>
<th scope=“row”>React</th>
<td>4</td>
<td>March 21</td>
</tr>
</tbody></table>
Name Age Birthday
JQuery 11 August 26
React 4 March 21
Javascript LibrariesTable caption is announced by screen reader
If you don’t provide a caption element, the screen reader will simply
announce, “table: 3 columns, 3 rows”.
43. Building inaccessible calendars
Common code-related issue #9:
http://airbnb.io/react-dates/
Can I tab through the dates with my keyboard?
How does the screen reader read the date?
Can I select a date range in an intuitive way by
keyboard?
If not, can I simply type the date into a text field?
Is the date format provided as part of the label?
@lsnrae
Calendars are hard to make accessible. Why not just use React Dates? They made
it work with the keyboard. I highly recommend it. If you can’t use it, make sure you
have lots of time to make your calendar keyboard accessible.
44. Focus order not logical and
intuitive
Common code-related issue #10:
Log in to Online Banking
Card number*:
Remember my card number
Password (case sensitive)*:
Forgot my password
Bank
Logo
Contact us | Help
Log in
1
2
3
4 5
6
7
8
@lsnrae
Keyboard focus should go from top to bottom, left to right, unless there
is some user experience reason to deviate from this. The example
opposite shows a scenario where the default focus was overridden on
purpose. A user got to this page from clicking on a link that said “Login
to online banking” so the UX designer thought it would make more
sense for them to land immediately on the card number field. I agree.
However, the developer forced the tabindex shown in red, resulting in a
cumbersome experience for the user. Tabindex is shown opposite with
the red and grey numbers. This is another mistake that would have
been obvious and easy to fix, had the developer tested with their
keyboard.
45. All of this information belongs in
the wireframes.
If it’s not there, ask!
Heading levels/structure
Keyboard functionality
Hidden wayfinding cues
Hidden form labels
What the screen reader should
SAY if different than what the
sighted user sees
Updating content areas and
associated notification text
Focus order (if not default)
Table captions and hidden
column or row heading values
Etc.
@lsnrae
47. Automated vs.
Manual testing –
Do both!
Automated testing –
For issues that do not
require human
judgment to be
detected.
E.g. 1.1.1 Non-Text
Content.
• If there is an <img>
tag, does it have an
alt attribute?
47
@lsnrae
48. Automated vs.
Manual testing –
Do both!
Manual testing – For
issues that do require
human judgment to be
detected.
E.g. 1.1.1 Non-Text
Content
A human can judge the
following
characteristics:
• Should the alt
attribute be null or
descriptive?
• What constitutes a
descriptive alt
attribute?
48
@lsnrae
49. Page-level
automated
testing tool
examples• Free browser
plugins you can
download.
49
WAVEWeb accessibility evaluation tool by WebAIM
Google Lighthouse
for developers
Axe accessibility
tool by Deque
ACHECKER
50. Manual web accessibility test procedure:
1.Build the functionality.
2.Test it with your keyboard alone (employing your sight).
3.Test it with your keyboard plus a screen reader, without
employing your sight.
50
@lsnrae
51. 3-Step manual testing
1. Build the functionality.
2. Test it with your keyboard alone (employing your sight).
Is all of the functionality available to the keyboard?
Is the method of access an intuitive one that the user will
understand? (e.g. Do you force them to navigate with the
keyboard arrows without actually saying that is how it works?)
Can content be accessed without employing non-intuitive
workarounds (e.g. tabbing past something, then back-tabbing
to access something else)?
3. Test it with your keyboard plus a screen reader, without
employing your sight.
Are all of the points above still true?
Could you in good faith use what you built if you were not the
person who developed it?
Procedure:
51
@lsnrae
53. Things to remember:
1. An accessible web benefits everyone.
2. The WCAG guidelines are easy to read.
3. Test with your keyboard & screen reader.
53
@lsnrae
Today I’ve talked about the most common code-related accessibility issues that I see on web experiences every day that make it impossible for a person
with disabilities to access content and to really be part of our community. I wanted to empower all of you to understand the extra steps we must take as
developers to enable accessible experiences so that you could bring these skills to your daily work.
I conduct screen reader training internally and with clients at Publicis Sapient, and the most impactful moment during the session is when I invite the
class to do some online shopping. I let them choose any online retailer and any product, then let them loose to try to purchase that product with their
keyboard and screen readers alone. I always make sure they notice that I do not constrain their choices – I let them pick any online store. That’s how
confident I am that no e-commerce experience will be accessible.
We’ve tried many popular retailers and they are getting better, but it is still all to rare that someone gets through the checkout.
54. Imagine the impact
of web accessibility
54
@lsnrae
A positive way of looking at this is that there is a massive opportunity in
this area.
I like to imagine the amazing impact as developers like us continue to
learn how to implement websites in an accessible way, and to influence
our respective agencies and through them, our clients. Imagine the top
ecommerce and content websites becoming truly accessible, and what it
will mean to so many people. Thanks again for having me here today.
55. thank you
copyright publicis sapient | confidential
Alison Walden
Director of Technology
@lsnrae
Medium.com/@lsnrae
Editor's Notes
My name is Alison Walden, and I’m a director of technology at Publicis Sapient. I’m responsible for the quality of our front-end code deliverables, the customer-facing aspect of our code. I’m also our accessibility lead.
This combination role puts me in a position where I get to review large samples of our front end code and that of vendors we work with, and I started to compile a list of the most common accessibility issues inadvertently caused by front end developers.
I’m going to share this list with you today, in hopes that you can avoid making these same issues. So let’s get started.
My name is Alison Walden, and I’m a director of technology at Publicis Sapient. I’m responsible for the quality of our front-end code deliverables, the customer-facing aspect of our code. I’m also our accessibility lead.
This combination role puts me in a position where I get to review large samples of our front end code and that of vendors we work with, and I started to compile a list of the most common accessibility issues inadvertently caused by front end developers.
I’m going to share this list with you today, in hopes that you can avoid making these same issues. So let’s get started.
I’ve been focusing on accessibility in my work for over 10 years.
One of the first times I thought about accessibility was on a trip to the Great Wall of China in 2006.
The Great Wall is one of the wonders of the ancient world, as you know. There’s no denying that it wasn’t designed to be accessible. That’s understandable for a structure built over 2000 years ago.
As a healthy, active person, I wouldn’t have noticed the accessibility challenges of the Great Wall if I had not been traveling with my elderly father in law. He simply couldn’t climb up all of those stairs. It was the first time that someone else’s accessibility requirements affected me personally.
The next time I recall noticing accessibility barriers is when I had a baby. This isn’t a picture of me but it illustrates what all parents face when they want to take their child out in a stroller.
Carrying a stroller up the stairs is challenging. Depending on how many stairs there are, it could be impossible without help.
It made me empathize with people in wheelchairs who always faced this problem that had never affected me before.
And it struck me how willing strangers were to help me carry the stroller up the stairs. People are kind, and they want to help.
And people are smart. They find workarounds. Even when something isn’t designed for accessibility, sometimes people can find a way to succeed in their task.
But we also have an opportunity to consider everyone’s needs up front, and to design and develop accessible experiences purposefully, so that everyone can enjoy them.
Here’s another view of this style of accessible ramp. This won an urban design award and it shows that it’s definitely possible to have an experience that is both beautiful AND accessible.
What I’m trying to convey is that when we make a physical space accessible, it actually benefits everyone.
With the advent of smartphones we are all subject to a degree of new challenges when trying to navigate websites. Here I’m showing how the glare on the screen can cut down on anyone’s ability to view content.
We also have to consider the temporary disabilities we’re all subject to – temporary vision loss or when you injure your arms.
Getting older is another fact of life we can’t avoid.
We have all ages of people surfing the internet, with varying degrees of dexterity and vision loss…
…who wouldn’t even self-identify as needing an “accessible” experience.
But let’s talk about the population of people with disabilities, who will also benefit from accessible experiences.
A full 16% of the US population had some kind of disability in 2016.
Let’s put ambulatory disabilities to the side for a moment and talk about the other three types:
Cognitive issues, hearing loss, and vision loss.
I refer to these as “web impacting” disabilities, because these are the disabilities that affect peoples’ ability to navigate the web. How many people are impacted by these disabilities?
A significant number.
The top grey bar represents the number of people online in the US.
The middle grey bar is the population of people online in Canada.
I want to draw your attention to the blue bar at the bottom, which is the population of people with “web impacting” disabilities in the US. ~35 million people. This is almost the same as the population of Canada.
Here are some Canadian numbers:
~half a million Canadians live with significant vision loss. (Like the whole population of Newfoundland and Labrador). Or Hamilton.
Canadians who identify themselves as culturally Deaf comprise more than 350,000 people across Canada. (Canadian Association of the Deaf, 2007)
That’s about ¾ of a million people. It’s like there is an invisible store that already exists that could service a community the size of Winnipeg. That’s what you already have, if it were accessible. For the US, there’s an invisible store that could service a community the size of Canada.
A significant number.
The top grey bar represents the number of people online in the US.
The middle grey bar is the population of people online in Canada.
I want to draw your attention to the blue bar at the bottom, which is the population of people with “web impacting” disabilities in the US. ~35 million people. This is almost the same as the population of Canada.
Here are some Canadian numbers:
~half a million Canadians live with significant vision loss. (Like the whole population of Newfoundland and Labrador). Or Hamilton.
Canadians who identify themselves as culturally Deaf comprise more than 350,000 people across Canada. (Canadian Association of the Deaf, 2007)
That’s about ¾ of a million people. It’s like there is an invisible store that already exists that could service a community the size of Winnipeg. That’s what you already have, if it were accessible. For the US, there’s an invisible store that could service a community the size of Canada.
The principles and high level criteria…
And here they are in regular language…
Even the W3C doesn’t recommend trying to adhere to all of level AAA because some of the guidelines are less measurable.
E.g. There’s a AAA guideline about unusual words needing to be defined in a glossary. Who gets to decide if a word is unusual? Me? You? This is not objective enough to be measurable.
And the web works in a variety of ways:
It can work with a mouse pointing device and a monitor, the way many of us probably use it.
It can work with just a keyboard and a monitor. Consider someone who has a tremor and cannot focus their mouse pointer and needs to use a keyboard instead. Or, a sighted person who may be paralyzed, and use a puff and suck device that mimics the function of a tab key.
Or, in the case of a non-sighted person, they will use their keyboard in conjunction with a screen reader.
In both of these latter two cases, the main way people are navigating is with their keyboard, not a mouse.
But most people who design websites today actually use a mouse pointer to navigate.
Would you ask someone to design OR BUILD the perfect bike who has never ridden one?
You probably wouldn’t. But that is effectively what we’re asking designers AND DEVELOPERS to do, when they usually navigate the web using a mouse pointing device, and we ask them to start designing or DEVELOPING experiences for people who mainly use their keyboards.
Just because it works fine with our mouse pointing device doesn’t mean it’ll work with a keyboard.
Let’s now look at a few common issues I see in front end code. These are issues where the site works fine with a mouse, but has problems with the keyboard and/or screen reader.
When people don’t test with their keyboards, they miss it when obvious problems exist like a flyout menu not closing on tab out.
When people don’t test with their keyboards, they miss it when obvious problems exist like a flyout menu not closing on tab out.
When a user launches a modal window, the first focus should be on the modal’s close button.
The alternate text on the close button should say “Close” or “Dismiss” – not “X”. (Text should be determined by a copywriter).
Tabbing should now be restricted to within the modal content. The user should not be able to tab out of, or behind, the modal window, without closing it.
The escape button should also dismiss the modal.
When the user dismisses the modal, keyboard focus should be placed on the element that launched the modal.
Use role=“dialog” and label the dialog title.
This is the MOST COMMON error I see in front end development. These icons are designed for sighted users only.
Form validation paradigms:
Reactive/Traditional: Users can tab through form fields, filling them out, then hit the submit button at the end. At that point, the form will be validated, and error messages will appear on any fields that have issues. The user can try to submit the form at any time because the submit button is always enabled.
Proactive: Each form field is validated as the user leaves the field. Typically a visually highlighted error message will appear next to the field that has the issue. The submit button is not available (it is disabled) until all form fields are free of errors.This method of form validation is not accessible because non-sighted users may not notice the error messaging, and they will not be able to submit because the button is disabled. Disabled buttons never get keyboard focus. For this paradigm, design the disabled state in CSS but do not disable the button.
The problem with WAI-ARIA is that too many developers are using it the wrong way. Respected accessibility service provider WebAIM recently analyzed the home pages for the top one million websites (read more about the WebAIM million) and among their other results, they discovered that home pages with ARIA present averaged 11.2 more detectable errors than pages without ARIA.
Misuse of ARIA roles can make websites impossible to navigate. Relying on ARIA when simple, semantic HTML will suffice is a mistake, because some screen reader/browser combinations do not support ARIA.
When should I use ARIA?
For custom controls (e.g. styled select menus)
For tabs, or other interface elements that can provide context to a user when described
To describe labels that are otherwise vague
Anytime semantic HTML and CSS cannot provide an accessible experience on their own
When should I NOT use ARIA?
Anytime you could accomplish the same thing with semantic HTML and CSS
Screen readers use the caption element and scope attributes to help non-sighted people understand how a data table is organized.
TABLE DO’s AND DON’Ts:
DO use the table heading in the caption element.
DO use the <th> element for table headings.
DO define the scope of a heading as belonging to a column or row.
DON’T make insanely complex tables without trying to help a designer to simplify them. Some screen readers can’t handle merged rows or columns, for example.
DON’T use <div> elements to mark up tabular data.
Jquery initial release Aug. 26 2006
React initial release March 2013
Screen readers use the caption element and scope attributes to help non-sighted people understand how a data table is organized.
TABLE DO’s AND DON’Ts:
DO use the table heading in the caption element.
DO use the <th> element for table headings.
DO define the scope of a heading as belonging to a column or row.
DON’T make insanely complex tables without trying to help a designer to simplify them. Some screen readers can’t handle merged rows or columns, for example.
DON’T use <div> elements to mark up tabular data (unless you apply the appropriate ARIA roles).
Jquery initial release Aug. 26 2006
React initial release March 2013
Is my calendar accessible?
Can I tab through the dates with my keyboard?
Are the dates read out in an understandable way by the screen reader? (“Monday, June 6,” not “J-U-N Mo 6”)
Can I select a date or date range in an intuitive way with my keyboard?
If none of that is true, can I simply type the date into a text field?
In order to type the date into a text field, is the date format provided within the field’s label?
EXAMPLE: http://airbnb.io/react-dates/
Most of these things should be part of the specifications provided to us in wireframes.
But even if we knew none of these rules, the most important thing is for us to always test with our keyboards and screen readers.
These are free browser plugins you can download.
This matters. A lot of times our QA team or the client’s UAT testers do this wrong. Ask what is being used. Valid/intended combinations work best.
Today I’ve talked about the most common code-related accessibility issues that I see on web experiences every day that make it impossible for a person with disabilities to access content and to really be part of our community. I wanted to empower all of you to understand the extra steps we must take as developers to enable accessible experiences so that you could bring these skills to your daily work.
I conduct screen reader training internally and with clients at Publicis Sapient, and the most impactful moment during the session is when I invite the class to do some online shopping.
I let them choose any online retailer and any product, then let them loose to try to purchase that product with their keyboard and screen readers alone.
I always make sure they notice that I do not constrain their choices – I let them pick any online store. That’s how confident I am that no e-commerce experience will be accessible.
We’ve tried many popular retailers and they are getting better, but it is still all to rare that someone gets through the checkout.
A positive way of looking at this is that there is a massive opportunity in this area.
I like to imagine the amazing impact as developers like us continue to learn how to implement websites in an accessible way, and to influence our respective agencies and through them, our clients. Imagine the top ecommerce and content websites becoming truly accessible, and what it will mean to so many people. Thanks again for having me here today.