SlideShare a Scribd company logo
1 of 87
Download to read offline
Rachel Cherry
@bamadesigner

bamadesigner.com
wpcampus.org
HOW TO CREATE
ACCESSIBLE
WEBSITES
#a11ysummit @bamadesigner
• Intro to accessibility, universal design, and why it’s important

• WCAG accessibility standards and legal concerns

• How to add accessibility testing to your workflow

• Common accessibility issues and how to address them

• Easy accessibility fixes that make a big impact
This workshop will cover:
Everything from this workshop:
https://bamadesigner.com/a11ysummit/
#a11ysummit @bamadesigner
Web accessibility refers to 

the inclusive practice of 

removing barriers that prevent
interaction with, or access to,
websites by people with disabilities.
#a11ysummit @bamadesigner
Data shows 1 in 5 people have a disability. 

You could be excluding 20%
of your students (and humanity) from
access to education and information.
Why is accessibility important?
Information wants to be free
ACCESSIBLE
Information needs to be
#a11ysummit
How do we ensure the
digital world is accessible?
VISUAL HEARING
MOTOR COGNITIVE
Deafness and hard-of-hearingBlindness, low vision, color-blindness
Inability to use a mouse, 

slow response time, 

limited fine motor control
Learning disabilities, inability to
remember or focus on large
amounts of information
#a11ysummit @bamadesigner
The four principles of accessibility:
• Perceivable
• Operable
• Understandable
• Robust
#a11ysummit @bamadesigner
Perceivable:
Information (and user interface components)
must be presentable to users in ways they can
perceive.
Must be available to the senses either through
the browser or through assistive technologies
(e.g. screen readers, screen enlargers, etc.)
Perceivable:
• Provide text alternatives for non-text
content, like images, video, and audio
• Offer captions, transcripts, and audio
descriptions for audio and video
• Design content to be easy to read and
listened to, e.g. good contrast, volume
control
#a11ysummit @bamadesigner
Operable:
User interface components and navigation
cannot require interaction that a user cannot
perform.
Users can interact with all functionality using
either the mouse, keyboard, or an assistive
device.
Operable:
• All functionality should be available using a
keyboard
• There should be enough time to read
content and perform functionality
• Avoid designing content that might cause
seizures
• Help users navigate and find content
#a11ysummit @bamadesigner
Understandable:
Users must be able to understand the
information as well as the operation of the user
interface.
Content is clear and limits confusion and
ambiguity.

#a11ysummit @bamadesigner
• Write easy-to-read text with assistive
technologies in mind
• Design content and the interface to behave
in predictable ways
• Help users to avoid and correct mistakes
when entering input
Understandable:
#a11ysummit @bamadesigner
Robust:
Content must be robust enough that it can be
interpreted reliably by as many web browsers
and agents as possible, including assistive
technologies.
Users must be able to access the content as
technologies advance.
How do we create 

ACCESSIBLE 

websites?
#a11ysummit
The challenge:
Change your
perspective.
Universal design is the design of products and
environments to be usable by all people, to the
greatest extent possible, without the need for
adaptation or specialized design.
RONALD L. MACE, FOUNDER OF THE CENTER FOR UNIVERSAL DESIGN
UNIVERSAL DESIGN
New perspective:
#a11ysummit @bamadesigner
Where accessible design considers 

the needs of people with disabilities.
Universal design considers 

the needs of a diverse human
population.
Everyone uses technology

DIFFERENTLY.
#a11ysummit
#a11ysummit @bamadesigner
To achieve universal design (and provide
accessible technology), we have to
consider diverse needs during
every step of a project.
#a11ysummit @bamadesigner
Much easier and cheaper 

to design for (and maintain)
accessibility during your project
than to handle after the fact.
#a11ysummit @bamadesigner
Working together during every step:
PLANNING CONTENT
DESIGN (UI/UX) ENGINEERING
MAINTENANCE
DEAN DECIDES THEY 

WANT A SLIDER
1. Focus on high quality UX and valid HTML markup
• Follow web standards to provide robust experience
2. Learn web accessibility standards and understand
common barriers
• Adopt checklists into every step of your workflow
3. Use tools to test for violations, priority on user testing
• Software really helps, but human experience is king
How to create accessible websites:
• Web accessibility is more prominent in higher education 

because the only laws that exist are for
organizations that receive federal funding.
Legal implications/standards
The only laws that exist are for
organizations that receive federal funding.
The only laws that exist are for
organizations that receive federal funding.
• Web accessibility is more prominent in higher education 

because the only laws that exist are for
organizations that receive federal funding.
• There is one set of web standards: WCAG 2.0.
• There used to be two. We’ll talk about that in a minute.
Legal implications/standards
• Section 508 web standards were issued in 2000.
• Requires all electronic and information technology
developed, procured, maintained, or used by federal
agencies to be accessible.
• Including computer hardware and software,
websites, phone systems, and copiers.
Federal law: Section 508
From 2000 - 2017, Section 508 had its own set
of web standards.*
Federal law: Section 508
SECTION 508 WCAG
*Was very similar to, but not the same as, WCAG.
As of January 2018, Section 508 said “nevermind” and
declared that websites have to meet WCAG 2.0.
• Much less confusing!
Federal law: Section 508
Other businesses and organizations are not required by law,
but still receive civil suits. To name a few:
What about other businesses?
Do universities get sued?
• Web Accessibility Laws & Policies
• https://www.w3.org/WAI/policies/
• Introduction to Laws Throughout the World
• https://webaim.org/articles/laws/world/
What about other countries?
The Web Content Accessibility Guidelines (WCAG) are
published by the Web Accessibility Initiative (WAI) of the
World Wide Web Consortium (W3C).
• WCAG has 3 levels: A, AA, and AAA
• WCAG version 2.0 AA is the industry standard
• Current version was published in December 2008
• WCAG is drafting version 2.1 to be released June 2018
Web accessibility standards:
WCAG 2.0 Quick Reference

https://www.w3.org/WAI/WCAG20/quickref/
Walks you through techniques and failures!
WCAG 2.0 Checklists:

• http://webaim.org/standards/wcag/checklist
• https://a11yproject.com/checklist
• https://www.wuhcag.com/wcag-checklist/
• Create your own!
Pages without proper heading structure/order
• Are your headers in order? h1, h2, h3, etc.
• Allows content to be readable without a stylesheet, for
those who do not navigate visually.
Common website barriers:
Non-text content without a text equivalent
• Provide alt attributes or captions for images
• Provide captions and audio descriptions for videos
• Provide transcripts for audio recordings
Common website barriers:
Without alternative text, life-saving information in this 

graphic is not available to visually impaired users.
.screen-reader-text {

clip: rect(1px, 1px, 1px, 1px);
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
position: absolute !important;
white-space: nowrap;
height: 1px;
width: 1px;
overflow: hidden;
}
How to hide content visually:
The point of providing a text
equivalent is to convey the same
information and context as people 

who can see the image.
DO NOT: Simply write “red car”.
DO: Ask yourself “why is this picture 

of a red car on the page?
PRO TIP for writing image alt text:
Being unable to access functionality by keyboard
• Can you access all actions, functionality and content?
• Can you open “popups”, interact with them, close them?
• Does any functionality have keyboard trap?
Common website barriers:
Unable to visually determine if an element has focus
• If someone is navigating your site by keyboard, could they
determine where they are on the page?
• Could they determine which form field has focus?
• Could they determine if a button can be pressed?
Common website barriers:
NEVER: Remove :focus CSS styles
EASY FIX: 

Search your CSS for usage of :hover.
Test those elements on your site and
make sure there are equivalent :focus
styles.
PRO TIP to ensure element focus:
PRO TIP to ensure element focus:
button {
background-color: #d8d8d8;
color: #222;
&:focus,
&:hover {
background: #222;
color: #fff;
}
}
Unable to skip large blocks of repeatable content
• The most common barriers for guests are having to tab
through the header and menu on every page.
• Do you use ARIA to help label sections of your page?
Common website barriers:
<a id=“skip” href="#content">Skip to Main Content</a>
#skip {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
#skip:focus {
position: static;
width: auto;
height: auto;
}
How to provide “Skip to content”:
Actions without defined purpose or context
• Do your actions (links and buttons) provide clear context
about what’s going to happen? Never use “click here”.
• Is the HTML markup for your actions valid?
• Are you using a link when you should be using a button?
Common website barriers:
Using color to convey information / insufficient contrast
• Is there clear contrast between the color of your text 

and its background color? Minimum: 4.5:1
• If a guest is color blind, would they have the same
experience as any other guest?
Common website barriers:
Web accessibility means that
people with disabilities can
perceive, understand, navigate,
interact with, and contribute to
the Web.
If color is the only method for conveying a link:
The link is invisible to those who can’t see blue:
Web accessibility means that
people with disabilities can
perceive, understand, navigate,
interact with, and contribute to
the Web.
Web accessibility means that
people with disabilities can
perceive, understand, navigate,
interact with, and contribute to
the Web.
If a different color AND an underline is used:
Then the link would become visible:
Web accessibility means that
people with disabilities can
perceive, understand, navigate,
interact with, and contribute to
the Web.
While not an official standard, responsive
web design is important to ensure your site
can be viewed on assistive devices of
various sizes.
Other considerations:
Another important consideration is
download speeds/order to ensure access
to those who don’t have access to high
speed Internet.
Other considerations:
Be mindful of your language. Avoid
sentences like “See our home page for
more information”. Use non-sensory
language instead, e.g. “Visit our home
page”.
Other considerations:
Spec created to improve accessibility of
applications by providing extra information
to screen readers via HTML attributes.*
ARIA (Assistive Rich Internet Applications)
* Too bad the ARIA workshop is happening 

right now in the other room.
** I think it’s being filmed, though.
*** If not, ¯_(ツ)_/¯.
**** JK. There are tons of resources online.
<div role="contentinfo">
<p>The Web Accessibility Summit is a one-day 

conference about all things website accessibility in 

higher education and beyond.</p>
</div>
<div role="alert">
<p>Its really hot outside today. Maybe don’t 

go outside.</p>
</div>
ARIA example:
GOOD MARKUP
The foundation for good accessibility is
#a11ysummit
Which also improves your SEO!
CHALLENGE!
It’s time for a good ole’ fashioned
#a11ysummit #youbetterwork
1.Open your website’s home page
2.Navigate to every action element on the page
3.Interact with all functionality on the page
4.BUT YOU CAN’T USE YOUR MOUSE
5.Document any issues.
Challenge #1
an accessibility evaluation tool from WebAIM
http://wave.webaim.org
• Free in-browser testing
• Free Chrome extension
• Premium API
TESTS FOR: Section 508 and WCAG 2.0 A/AA
an accessibility visualization toolkit
http://khan.github.io/tota11y
• Alt text and confusing link text
• Color contrast
• Heading structure
• Form labels
• ARIA landmarks
TESTS FOR:
• Javascript file that
places button on site
• Free Chrome
extension
client-side script that checks HTML source code
and detects violations of a defined coding standard
http://squizlabs.github.io/HTML_CodeSniffer
• Copy/paste code for quick testing
• Free bookmarklet for in-browser testing
TESTS FOR: Section 508 and WCAG 2.0 A/AA/AAA
an automated accessibility testing library
http://pa11y.org
• Section508
• WCAG 2.0 A/AA/AAA
TESTS FOR:
• Web dashboard
• JSON web service
• Command line
PROVIDES:
Javascript library that executes automated accessibility
testing inside your testing framework or browser of choice
http://www.deque.com/products/axe
• Free Javascript library
• Free Chrome extension
Material Design:

Color Tool
https://material.io/color/
Allows you to measure 

the accessibility level of 

any color combination.
wA11y - The Web Accessibility Toolbox

https://wordpress.org/plugins/wa11y/
WORDPRESS PLUGINS
WORDPRESS PLUGINS
BROWSER TOOLS
BROWSER TOOLS
BROWSER TOOLS
Take advantage of 

in-browser testing tools to
evaluate product demos
before you purchase.
ACCESSIBILITY PRO TIP:
#a11ysummit
1. Open https://bamadesigner.com/a11ysummit/
2. Install at least 2 different tools
3. Use them to test your website’s home page
4. Document common and surprising issues
Challenge #2
1. List out the major steps for your website
projects, e.g. planning, design, content, etc.
2. For each step, write 1-2 new 

items/considerations that will help 

ensure your website is accessible.
Challenge #3
1. Focus on high quality UX and valid HTML markup
• Follow web standards to provide robust experience
2. Learn web accessibility standards and understand
common barriers
• Adopt checklists into every step of your workflow
3. Use tools to test for violations, priority on user testing
• Software really helps, but human experience is king
How to create accessible websites:
#a11ysummit @bamadesigner
The foundation of good accessibility is
good design, markup, and UX
which creates a high quality experience
for everyone.
#a11ysummit @bamadesigner
Where accessible design considers 

the needs of people with disabilities.
Universal design considers 

the needs of a diverse human
population.
#a11ysummit @bamadesigner
When you plan for accessibility,
YOU WON’T WORK HARDER.
YOU’LL WORK SMARTER.
Everything from this workshop:
https://bamadesigner.com/a11ysummit/
https://a11y.store/collections/a11y-cats
A community and conference for web
professionals, educators and people
dedicated to the confluence of
WordPress in higher education.
https://wpcampus.org

@wpcampusorg / #WPCampus
WPCAMPUS

will be in
St. Louis

July 12-14!
TICKETS STILL
AVAILABLE
2018.wpcampus.org
Rachel Cherry
@bamadesigner

bamadesigner.com
wpcampus.org
ANY
QUESTIONS?
#a11ysummit

More Related Content

What's hot

What's hot (20)

My talk at Riga 2016 Web Accessibility Meetup
My talk at Riga 2016 Web Accessibility MeetupMy talk at Riga 2016 Web Accessibility Meetup
My talk at Riga 2016 Web Accessibility Meetup
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
Web Content Accessibility Guidelines
Web Content Accessibility GuidelinesWeb Content Accessibility Guidelines
Web Content Accessibility Guidelines
 
Tools And Techniques For Evaluating Accessibility
Tools And Techniques For Evaluating AccessibilityTools And Techniques For Evaluating Accessibility
Tools And Techniques For Evaluating Accessibility
 
Web accessibility workshop 1
Web accessibility workshop 1Web accessibility workshop 1
Web accessibility workshop 1
 
Rapid Introduction to Web Accessibility
Rapid Introduction to Web AccessibilityRapid Introduction to Web Accessibility
Rapid Introduction to Web Accessibility
 
A Half Day Workshop on Building Accessible Websites For People With Disabilities
A Half Day Workshop on Building Accessible Websites For People With DisabilitiesA Half Day Workshop on Building Accessible Websites For People With Disabilities
A Half Day Workshop on Building Accessible Websites For People With Disabilities
 
Marketing Without Barriers: Considering Digital Accessibility for Customers a...
Marketing Without Barriers: Considering Digital Accessibility for Customers a...Marketing Without Barriers: Considering Digital Accessibility for Customers a...
Marketing Without Barriers: Considering Digital Accessibility for Customers a...
 
Don't Panic! How to perform an accessibility evaluation with limited resources
Don't Panic! How to perform an accessibility evaluation with limited resourcesDon't Panic! How to perform an accessibility evaluation with limited resources
Don't Panic! How to perform an accessibility evaluation with limited resources
 
WCAG
WCAGWCAG
WCAG
 
Planning & Designing for Accessible Experiences
Planning & Designing for Accessible ExperiencesPlanning & Designing for Accessible Experiences
Planning & Designing for Accessible Experiences
 
Basics of Web Accessibility
Basics of Web AccessibilityBasics of Web Accessibility
Basics of Web Accessibility
 
Web Accessibility for Web Developers
Web Accessibility for Web DevelopersWeb Accessibility for Web Developers
Web Accessibility for Web Developers
 
Website Accessibility: The Internet is for Everyone
Website Accessibility: The Internet is for EveryoneWebsite Accessibility: The Internet is for Everyone
Website Accessibility: The Internet is for Everyone
 
Designing for Accessibility (SOFLUX)
Designing for Accessibility (SOFLUX)Designing for Accessibility (SOFLUX)
Designing for Accessibility (SOFLUX)
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibility
 
Practical First Steps for Achieving Web Accessibility and Avoiding Liability
Practical First Steps for Achieving Web Accessibility and Avoiding Liability Practical First Steps for Achieving Web Accessibility and Avoiding Liability
Practical First Steps for Achieving Web Accessibility and Avoiding Liability
 
Including Everyone: Web Accessibility 101
Including Everyone: Web Accessibility 101Including Everyone: Web Accessibility 101
Including Everyone: Web Accessibility 101
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can build
 

Similar to How to create accessible websites - Web Accessibility Summit

Wordcamp buffalo
Wordcamp buffaloWordcamp buffalo
Wordcamp buffalo
thegeniusca
 

Similar to How to create accessible websites - Web Accessibility Summit (20)

Website Accessibility Workshop
Website Accessibility WorkshopWebsite Accessibility Workshop
Website Accessibility Workshop
 
Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009
 
#Wtf is web accessibility
#Wtf is web accessibility#Wtf is web accessibility
#Wtf is web accessibility
 
Do the right thing: accessibility and inclusive design (with Drupal)
Do the right thing: accessibility and inclusive design (with Drupal)Do the right thing: accessibility and inclusive design (with Drupal)
Do the right thing: accessibility and inclusive design (with Drupal)
 
Web Accessibility Overview
Web Accessibility OverviewWeb Accessibility Overview
Web Accessibility Overview
 
Do you have a website? Do you want to get sued?
Do you have a website?  Do you want to get sued?Do you have a website?  Do you want to get sued?
Do you have a website? Do you want to get sued?
 
ATAGTR2017 SPEAKING EYE for differently abled people to see the web content
ATAGTR2017 SPEAKING EYE for differently abled people to see the web contentATAGTR2017 SPEAKING EYE for differently abled people to see the web content
ATAGTR2017 SPEAKING EYE for differently abled people to see the web content
 
What’s Next with Accessibility?
What’s Next with Accessibility?What’s Next with Accessibility?
What’s Next with Accessibility?
 
Maximising Online Resource Effectiveness Workshop Session 3/8 Priority issues
Maximising Online Resource Effectiveness Workshop Session 3/8 Priority issuesMaximising Online Resource Effectiveness Workshop Session 3/8 Priority issues
Maximising Online Resource Effectiveness Workshop Session 3/8 Priority issues
 
Accessible Web Design
Accessible Web DesignAccessible Web Design
Accessible Web Design
 
LouiseGruenbergFFWD2015
LouiseGruenbergFFWD2015LouiseGruenbergFFWD2015
LouiseGruenbergFFWD2015
 
WEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptxWEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptx
 
ADA Compliance & Website Accessibility
ADA Compliance & Website AccessibilityADA Compliance & Website Accessibility
ADA Compliance & Website Accessibility
 
Accessibility Quick Wins
Accessibility Quick WinsAccessibility Quick Wins
Accessibility Quick Wins
 
Wordcamp buffalo
Wordcamp buffaloWordcamp buffalo
Wordcamp buffalo
 
eCommerce & Accessibility Webinar: How Accessibility can Boost Conversion Rates
eCommerce & Accessibility Webinar: How Accessibility can Boost Conversion RateseCommerce & Accessibility Webinar: How Accessibility can Boost Conversion Rates
eCommerce & Accessibility Webinar: How Accessibility can Boost Conversion Rates
 
Web accessibility is everyone's job
Web accessibility is everyone's jobWeb accessibility is everyone's job
Web accessibility is everyone's job
 
Accessibility for Fun and Profit
Accessibility for Fun and ProfitAccessibility for Fun and Profit
Accessibility for Fun and Profit
 
Web accessibility for APEX developers
Web accessibility for APEX developersWeb accessibility for APEX developers
Web accessibility for APEX developers
 
Introduction web tech
Introduction web techIntroduction web tech
Introduction web tech
 

Recently uploaded

Recently uploaded (20)

Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří Karpíšek
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
THE BEST IPTV in GERMANY for 2024: IPTVreel
THE BEST IPTV in  GERMANY for 2024: IPTVreelTHE BEST IPTV in  GERMANY for 2024: IPTVreel
THE BEST IPTV in GERMANY for 2024: IPTVreel
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
 

How to create accessible websites - Web Accessibility Summit

  • 2. #a11ysummit @bamadesigner • Intro to accessibility, universal design, and why it’s important
 • WCAG accessibility standards and legal concerns
 • How to add accessibility testing to your workflow
 • Common accessibility issues and how to address them
 • Easy accessibility fixes that make a big impact This workshop will cover:
  • 3. Everything from this workshop: https://bamadesigner.com/a11ysummit/
  • 4. #a11ysummit @bamadesigner Web accessibility refers to 
 the inclusive practice of 
 removing barriers that prevent interaction with, or access to, websites by people with disabilities.
  • 5. #a11ysummit @bamadesigner Data shows 1 in 5 people have a disability. 
 You could be excluding 20% of your students (and humanity) from access to education and information. Why is accessibility important?
  • 6. Information wants to be free ACCESSIBLE Information needs to be #a11ysummit
  • 7. How do we ensure the digital world is accessible? VISUAL HEARING MOTOR COGNITIVE Deafness and hard-of-hearingBlindness, low vision, color-blindness Inability to use a mouse, 
 slow response time, 
 limited fine motor control Learning disabilities, inability to remember or focus on large amounts of information
  • 8. #a11ysummit @bamadesigner The four principles of accessibility: • Perceivable • Operable • Understandable • Robust
  • 9. #a11ysummit @bamadesigner Perceivable: Information (and user interface components) must be presentable to users in ways they can perceive. Must be available to the senses either through the browser or through assistive technologies (e.g. screen readers, screen enlargers, etc.)
  • 10. Perceivable: • Provide text alternatives for non-text content, like images, video, and audio • Offer captions, transcripts, and audio descriptions for audio and video • Design content to be easy to read and listened to, e.g. good contrast, volume control
  • 11. #a11ysummit @bamadesigner Operable: User interface components and navigation cannot require interaction that a user cannot perform. Users can interact with all functionality using either the mouse, keyboard, or an assistive device.
  • 12. Operable: • All functionality should be available using a keyboard • There should be enough time to read content and perform functionality • Avoid designing content that might cause seizures • Help users navigate and find content
  • 13. #a11ysummit @bamadesigner Understandable: Users must be able to understand the information as well as the operation of the user interface. Content is clear and limits confusion and ambiguity.

  • 14. #a11ysummit @bamadesigner • Write easy-to-read text with assistive technologies in mind • Design content and the interface to behave in predictable ways • Help users to avoid and correct mistakes when entering input Understandable:
  • 15. #a11ysummit @bamadesigner Robust: Content must be robust enough that it can be interpreted reliably by as many web browsers and agents as possible, including assistive technologies. Users must be able to access the content as technologies advance.
  • 16. How do we create 
 ACCESSIBLE 
 websites? #a11ysummit
  • 18. Universal design is the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design. RONALD L. MACE, FOUNDER OF THE CENTER FOR UNIVERSAL DESIGN UNIVERSAL DESIGN New perspective:
  • 19. #a11ysummit @bamadesigner Where accessible design considers 
 the needs of people with disabilities. Universal design considers 
 the needs of a diverse human population.
  • 21.
  • 22.
  • 23. #a11ysummit @bamadesigner To achieve universal design (and provide accessible technology), we have to consider diverse needs during every step of a project.
  • 24. #a11ysummit @bamadesigner Much easier and cheaper 
 to design for (and maintain) accessibility during your project than to handle after the fact.
  • 25. #a11ysummit @bamadesigner Working together during every step: PLANNING CONTENT DESIGN (UI/UX) ENGINEERING MAINTENANCE DEAN DECIDES THEY 
 WANT A SLIDER
  • 26. 1. Focus on high quality UX and valid HTML markup • Follow web standards to provide robust experience 2. Learn web accessibility standards and understand common barriers • Adopt checklists into every step of your workflow 3. Use tools to test for violations, priority on user testing • Software really helps, but human experience is king How to create accessible websites:
  • 27. • Web accessibility is more prominent in higher education 
 because the only laws that exist are for organizations that receive federal funding. Legal implications/standards
  • 28. The only laws that exist are for organizations that receive federal funding.
  • 29. The only laws that exist are for organizations that receive federal funding.
  • 30. • Web accessibility is more prominent in higher education 
 because the only laws that exist are for organizations that receive federal funding. • There is one set of web standards: WCAG 2.0. • There used to be two. We’ll talk about that in a minute. Legal implications/standards
  • 31. • Section 508 web standards were issued in 2000. • Requires all electronic and information technology developed, procured, maintained, or used by federal agencies to be accessible. • Including computer hardware and software, websites, phone systems, and copiers. Federal law: Section 508
  • 32. From 2000 - 2017, Section 508 had its own set of web standards.* Federal law: Section 508 SECTION 508 WCAG *Was very similar to, but not the same as, WCAG.
  • 33. As of January 2018, Section 508 said “nevermind” and declared that websites have to meet WCAG 2.0. • Much less confusing! Federal law: Section 508
  • 34. Other businesses and organizations are not required by law, but still receive civil suits. To name a few: What about other businesses?
  • 36. • Web Accessibility Laws & Policies • https://www.w3.org/WAI/policies/ • Introduction to Laws Throughout the World • https://webaim.org/articles/laws/world/ What about other countries?
  • 37. The Web Content Accessibility Guidelines (WCAG) are published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C). • WCAG has 3 levels: A, AA, and AAA • WCAG version 2.0 AA is the industry standard • Current version was published in December 2008 • WCAG is drafting version 2.1 to be released June 2018 Web accessibility standards:
  • 38. WCAG 2.0 Quick Reference https://www.w3.org/WAI/WCAG20/quickref/ Walks you through techniques and failures!
  • 39.
  • 40. WCAG 2.0 Checklists: • http://webaim.org/standards/wcag/checklist • https://a11yproject.com/checklist • https://www.wuhcag.com/wcag-checklist/ • Create your own!
  • 41. Pages without proper heading structure/order • Are your headers in order? h1, h2, h3, etc. • Allows content to be readable without a stylesheet, for those who do not navigate visually. Common website barriers:
  • 42. Non-text content without a text equivalent • Provide alt attributes or captions for images • Provide captions and audio descriptions for videos • Provide transcripts for audio recordings Common website barriers:
  • 43. Without alternative text, life-saving information in this 
 graphic is not available to visually impaired users.
  • 44. .screen-reader-text {
 clip: rect(1px, 1px, 1px, 1px); clip-path: polygon(0 0, 0 0, 0 0, 0 0); position: absolute !important; white-space: nowrap; height: 1px; width: 1px; overflow: hidden; } How to hide content visually:
  • 45. The point of providing a text equivalent is to convey the same information and context as people 
 who can see the image. DO NOT: Simply write “red car”. DO: Ask yourself “why is this picture 
 of a red car on the page? PRO TIP for writing image alt text:
  • 46. Being unable to access functionality by keyboard • Can you access all actions, functionality and content? • Can you open “popups”, interact with them, close them? • Does any functionality have keyboard trap? Common website barriers:
  • 47. Unable to visually determine if an element has focus • If someone is navigating your site by keyboard, could they determine where they are on the page? • Could they determine which form field has focus? • Could they determine if a button can be pressed? Common website barriers:
  • 48. NEVER: Remove :focus CSS styles EASY FIX: 
 Search your CSS for usage of :hover. Test those elements on your site and make sure there are equivalent :focus styles. PRO TIP to ensure element focus:
  • 49. PRO TIP to ensure element focus: button { background-color: #d8d8d8; color: #222; &:focus, &:hover { background: #222; color: #fff; } }
  • 50. Unable to skip large blocks of repeatable content • The most common barriers for guests are having to tab through the header and menu on every page. • Do you use ARIA to help label sections of your page? Common website barriers:
  • 51. <a id=“skip” href="#content">Skip to Main Content</a> #skip { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } #skip:focus { position: static; width: auto; height: auto; } How to provide “Skip to content”:
  • 52. Actions without defined purpose or context • Do your actions (links and buttons) provide clear context about what’s going to happen? Never use “click here”. • Is the HTML markup for your actions valid? • Are you using a link when you should be using a button? Common website barriers:
  • 53. Using color to convey information / insufficient contrast • Is there clear contrast between the color of your text 
 and its background color? Minimum: 4.5:1 • If a guest is color blind, would they have the same experience as any other guest? Common website barriers:
  • 54. Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web. If color is the only method for conveying a link:
  • 55. The link is invisible to those who can’t see blue: Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web.
  • 56. Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web. If a different color AND an underline is used:
  • 57. Then the link would become visible: Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web.
  • 58. While not an official standard, responsive web design is important to ensure your site can be viewed on assistive devices of various sizes. Other considerations:
  • 59. Another important consideration is download speeds/order to ensure access to those who don’t have access to high speed Internet. Other considerations:
  • 60. Be mindful of your language. Avoid sentences like “See our home page for more information”. Use non-sensory language instead, e.g. “Visit our home page”. Other considerations:
  • 61. Spec created to improve accessibility of applications by providing extra information to screen readers via HTML attributes.* ARIA (Assistive Rich Internet Applications) * Too bad the ARIA workshop is happening 
 right now in the other room. ** I think it’s being filmed, though. *** If not, ¯_(ツ)_/¯. **** JK. There are tons of resources online.
  • 62. <div role="contentinfo"> <p>The Web Accessibility Summit is a one-day 
 conference about all things website accessibility in 
 higher education and beyond.</p> </div> <div role="alert"> <p>Its really hot outside today. Maybe don’t 
 go outside.</p> </div> ARIA example:
  • 63. GOOD MARKUP The foundation for good accessibility is #a11ysummit Which also improves your SEO!
  • 64. CHALLENGE! It’s time for a good ole’ fashioned #a11ysummit #youbetterwork
  • 65. 1.Open your website’s home page 2.Navigate to every action element on the page 3.Interact with all functionality on the page 4.BUT YOU CAN’T USE YOUR MOUSE 5.Document any issues. Challenge #1
  • 66. an accessibility evaluation tool from WebAIM http://wave.webaim.org • Free in-browser testing • Free Chrome extension • Premium API TESTS FOR: Section 508 and WCAG 2.0 A/AA
  • 67. an accessibility visualization toolkit http://khan.github.io/tota11y • Alt text and confusing link text • Color contrast • Heading structure • Form labels • ARIA landmarks TESTS FOR: • Javascript file that places button on site • Free Chrome extension
  • 68. client-side script that checks HTML source code and detects violations of a defined coding standard http://squizlabs.github.io/HTML_CodeSniffer • Copy/paste code for quick testing • Free bookmarklet for in-browser testing TESTS FOR: Section 508 and WCAG 2.0 A/AA/AAA
  • 69. an automated accessibility testing library http://pa11y.org • Section508 • WCAG 2.0 A/AA/AAA TESTS FOR: • Web dashboard • JSON web service • Command line PROVIDES:
  • 70. Javascript library that executes automated accessibility testing inside your testing framework or browser of choice http://www.deque.com/products/axe • Free Javascript library • Free Chrome extension
  • 71. Material Design:
 Color Tool https://material.io/color/ Allows you to measure 
 the accessibility level of 
 any color combination.
  • 72. wA11y - The Web Accessibility Toolbox
 https://wordpress.org/plugins/wa11y/ WORDPRESS PLUGINS
  • 77. Take advantage of 
 in-browser testing tools to evaluate product demos before you purchase. ACCESSIBILITY PRO TIP: #a11ysummit
  • 78. 1. Open https://bamadesigner.com/a11ysummit/ 2. Install at least 2 different tools 3. Use them to test your website’s home page 4. Document common and surprising issues Challenge #2
  • 79. 1. List out the major steps for your website projects, e.g. planning, design, content, etc. 2. For each step, write 1-2 new 
 items/considerations that will help 
 ensure your website is accessible. Challenge #3
  • 80. 1. Focus on high quality UX and valid HTML markup • Follow web standards to provide robust experience 2. Learn web accessibility standards and understand common barriers • Adopt checklists into every step of your workflow 3. Use tools to test for violations, priority on user testing • Software really helps, but human experience is king How to create accessible websites:
  • 81. #a11ysummit @bamadesigner The foundation of good accessibility is good design, markup, and UX which creates a high quality experience for everyone.
  • 82. #a11ysummit @bamadesigner Where accessible design considers 
 the needs of people with disabilities. Universal design considers 
 the needs of a diverse human population.
  • 83. #a11ysummit @bamadesigner When you plan for accessibility, YOU WON’T WORK HARDER. YOU’LL WORK SMARTER.
  • 84. Everything from this workshop: https://bamadesigner.com/a11ysummit/
  • 86. A community and conference for web professionals, educators and people dedicated to the confluence of WordPress in higher education. https://wpcampus.org
 @wpcampusorg / #WPCampus WPCAMPUS
 will be in St. Louis
 July 12-14! TICKETS STILL AVAILABLE 2018.wpcampus.org