Checking Under�The Hood
Auditing Your Website For A Smooth Ride
WordCamp Minneapolis | August 2020
Checking Under the Hood | 1
Who Am I?
4
Co-Organizer of A11yTalks
Mentor for Open Source Contributions
CWG - Community Health team
amyjune@kanopi.com
AmyJune Hineline (she/her)
Community Ambassador
QA Engineer
KANOPI STUDIOS
PRESENTATION TITLE | 4
We’re hiring!
https://kanopi.com/careers/
Kanopi
kan·o·pi | \ˈka-nə-pē
Kanopi designs, builds �and supports websites for clients that want to make a positive impact.
Our holistic approach infuses strategy and creative thinking through all stages of your site’s lifecycle, providing the tools �you need to nourish, support, and grow your business.
Checking Under the Hood | 5
KANOPI STUDIOS
PRESENTATION TITLE | 6
Why Audit?
Slow to Load
Site pages take more than 3 seconds to load.
8
Checking Under the Hood | 8
Not Responsive
The site doesn't display well on different devices.
9
Checking Under the Hood | 9
Content Woes
Updating content is a difficult and frustrating process.
10
Checking Under the Hood | 10
Confused Users
Site visitors can't find what they need.
11
Checking Under the Hood | 11
Troubles Using Site
Visitors can't use your site with assistive technology.
12
Checking Under the Hood | 12
Disastrous Experience
Bugs keep crashing the site.
13
Checking Under the Hood | 13
Nothing New
The design of the site hasn't changed.
14
Checking Under the Hood | 14
Unsecure
The site isn't loading over HTTPS.
15
Checking Under the Hood | 15
Hacked
The site has been compromised.
16
Checking Under the Hood | 16
Is it really that important for me to address these issues?
Checking Under the Hood | 17
YES!
A website that isn't working optimally can dramatically affect your bottom line.
Checking Under the Hood | 18
Time Passes
Damage Credibility
Some issues can break trust in site visitors making them not want to return.
Checking Under the Hood | 20
Seem Out of Touch
As people grow with technology so should businesses.
21
Checking Under the Hood | 21
Cost Customers
Unhappy customers end up looking for other places to complete their business.
22
Checking Under the Hood | 22
Website Audit
Pausing for a moment to hold space for
#BlackLivesMatter
Checking Under the Hood | 24
Strong Foundations
With smart user experience design combined with a strong technical foundation, we have optimal website health.
Checking Under the Hood | 25
User Experience
Audit
Understanding the purpose of the site and how to help users accomplish their goals.
Checking Under the Hood | 26
Technical Audit
Understanding the underlying foundation of how the site operates.
Checking Under the Hood | 27
Accessibility
Audit
Understanding exactly who the site can effectively and correctly communicate with.
Checking Under the Hood | 28
Unpacking It All
Preliminary Work
Checking Under the Hood | 30
Examine The Theme
Checking Under the Hood | 31
Check Site SEO
Checking Under the Hood | 32
Review Custom Code
Checking Under the Hood | 33
Assess Code Quality
Checking Under the Hood | 34
Test Your Accessibility
Ensure all your users, regardless of abilities, can interact in a meaningful way.
Checking Under the Hood | 35
Push Your Performance
You are only as strong as your weakest link.
Checking Under the Hood | 36
Performance
Be sure all images, videos, and visual information have alternative text.
37
Checking Under the Hood | 37
Read The Docs
Checking Under the Hood | 38
Accessibility
Why design for accessibility?
Include a wider consumer base for your content, you don’t want to exclude people from using your products and services.
It’s the law!
Of people living in the United States live with a disability
26%
Checking Under the Hood | 40
Can Keyboard users navigate your site? Are there any keyboard traps?
1
Checking Under the Hood | 41
Can Keyboard users navigate your site? Are there any keyboard traps?
Does the page have sufficient means to skip features in an application?
1
2
Checking Under the Hood | 42
Can Keyboard users navigate your site? Are there any keyboard traps?
Do all elements which should receive focus, receive keyboard focus?
Does the page have sufficient means to skip features in an application?
1
2
3
Checking Under the Hood | 43
Can Keyboard users navigate your site? Are there any keyboard traps?
Do all elements which should receive focus receive keyboard focus?
Does the page have sufficient means to skip features in an application?
Do all of your images contain alt text? Are any of your images of text?
1
2
3
4
Checking Under the Hood | 44
Can Keyboard users navigate your site? Are there any keyboard traps?
Are tables used for more than tabular data?
Do all elements which should receive focus receive keyboard focus?
Does the page have sufficient means to skip features in an application?
Do all of your images contain alt text? Are any of your images of text?
1
2
3
4
5
Checking Under the Hood | 45
Can Keyboard users navigate your site? Are there any keyboard traps?
Are tables used for more than tabular data?
Do all elements which should receive focus receive keyboard focus?
Does the screen reader read all content as presented on screen?
Does the page have sufficient means to skip features in an application?
Do all of your images contain alt text? Are any of your images of text?
1
2
3
4
5
6
Checking Under the Hood | 46
Can Keyboard users navigate your site? Are there any keyboard traps?
Are tables used for more than tabular data?
Do all elements which should receive focus receive keyboard focus?
Does the screen reader read all content as presented on screen?
Does the page have sufficient means to skip features in an application?
Do all of your images contain alt text? Are any of your images of text?
Can text be resized without obscuring any content?
1
2
3
4
5
6
7
Checking Under the Hood | 47
Are landmark regions properly defined between ARIA and HTML5?
Can Keyboard users navigate your site? Are there any keyboard traps?
Are tables used for more than tabular data?
Do all elements which should receive focus receive keyboard focus?
Does the screen reader read all content as presented on screen?
Does the page have sufficient means to skip features in an application?
Do all of your images contain alt text? Are any of your images of text?
Can text be resized without obscuring any content?
8
1
2
3
4
5
6
7
Checking Under the Hood | 48
VISUAL NEEDS
Make it easy to see, accommodate visual needs.
1
Checking Under the Hood | 49
VISUAL NEEDS
Make it easy to see, accommodate visual needs.
1
2
Checking Under the Hood | 50
VISUAL NEEDS
Make it easy to see, accommodate visual needs.
1
MOTOR NEEDS
Make it easy to interact, accommodate motor needs.
2
AUDITORY NEEDS
Make it easy to interact, accommodate motor needs.
3
Checking Under the Hood | 51
VISUAL NEEDS
Make it easy to see, accommodate visual needs.
1
MOTOR NEEDS
Make it easy to interact, accommodate motor needs.
2
AUDITORY NEEDS
Make it easy to interact, accommodate motor needs.
3
COGNITIVE NEEDS
Make it easy to understand, accommodate cognitive needs.
4
Checking Under the Hood | 52
Accessibility
54
Global Stage
Checking Under the Hood | 54
Plain language
Strive to use language that more people will understand.
55
Checking Under the Hood | 55
Inclusive language
Strive to use constructive language that reflects social and cultural diversity in a positive and accurate way.
56
Checking Under the Hood | 56
Captions, subtitles, and alt text
Be sure all images, videos, and visual information have alternative text.
57
Checking Under the Hood | 57
Headings
Headings are for organizing content, not for style
58
Checking Under the Hood | 58
Wrapping It Up
60
Wrapping Up
Checking Under the Hood | 60
Performance
61
Checking Under the Hood | 61
Accessibility
62
Checking Under the Hood | 62
More Questions?
Join me at Pantheon’s Virtual Booth after my session to chat more and to join their raffle!
You can find the booth link on the Hallway track: https://minneapolis.wordcamp.org/2020/session/hallway-track/
No this is not going to show up in Presentation Mode
PANTHEON.IO
Thank you!
Reach out anytime.
amyjune@kanopi.com
@volkswagenchick
Checking Under the Hood | 64