The document provides an overview of key learnings about accessibility from testing a website. It describes common accessibility issues found like missing alt text, unlabeled headings, empty links, and color contrast problems. It also outlines fixes made such as adding skip navigation, proper labeling of elements, and moving content to semantic landmarks. The testing uncovered issues that were addressed by modifying theme and plugin code to improve the user experience for people with disabilities.

1. Key Learnings about Accessibility
Kelli Wise

2. Website Accessibility
The 4 principals of website accessibility
• Perceivable
• Operable
• Understandable
• Robust

3. Perceivable
• The message should not depend on the
presentaAon
• InformaAon should have semanAc structure
• Colors, graphics and sounds should not
interfere with the content

4. Operable
• Web content should not be mouse dependent
• Users should be able to navigate and interact
with the content.

5. Understandable
• The website should be easy to understand for
all users, regardless of their familiarity with
technology.
• The website should embody the KISS
principles of design.
• Content should be placed where it is expected
• DirecAons and icons should be clear

6. Robust
• The website should work on the devices and
technologies that users have
• Websites should not be designed to ‘look best
on’ any parAcular device or browser
– This does not mean that the site is designed to
work on very old browsers and devices, but
should support a baseline and be as future proof
as possible.

7. Specs & Standards
• WCAG (Web Content Accessibility Guidelines)
2.0
• Level A is the minimum
• Level AA is most common
• Level AAA is highest conformance
hRps://www.w3.org/TR/WCAG20/

8. Specs & Standards
• Government sites:
• SecAon 508
• Expected to conform to WCAG 2.0 Level AA
hRps://www.secAon508.gov/content/build/
website-accessibility-improvement

9. Project Overview
• Client’s website was recently redesigned (< 2
years ago)
• In that Ame, numerous lawsuits have been
filed
• Client wanted a website that would be
accessible and prevent lawsuits
• Determined that client site would need to
conform to WCAG 2.0 Level AA

10. TesAng Done
• Budget did not allow for 3rd party verificaAon
– This tesAng starts at $5,000 for small (5 page)
staAc site
– TesAng typically costs $10-40k

11. Online tools used
FuncAonal Accessibility Tester
hRps://fae.disability.illinois.edu
aChecker
hRps://achecker.ca/checker/index.php
WEB Aim
hRp://wave.webaim.org/
hRps://webaim.org/resources/contrastchecker/
Toptal
hRps://www.toptal.com/designers/colorfilter

12. IniAal tesAng results - FAIL
• Images missing ALT tags
• Heading nesAng
• Use of bold where a header should be used
• Empty headings
• Empty links
• Link text does not describe target
• Color Contrast problems with the shade of green used in
backgrounds and buRons
• Content not properly located inside landmarks
• Iframe elements require proper names
• Embedded pdf documents embedding duplicate landmark areas
• No Skip NavigaAon

13. Images missing ALT tags
• Simple to fix
• Client must be diligent in the future
• ALT tags should describe the image.
– Remember that the descripAon is being read
aloud by someone who cannot see it and should
convey what the image’s content and purpose
are.

14. Heading NesAng
• Headings should be used as indicators of
secAon headings and subheadings within a
document, not as formadng elements. Screen
readers in parAcular may just scan a page for
appropriate H1, H2 and H3 elements.
• Empty Headings should not be used to provide
padding around elements

15. Heading NesAng
Correct
• H2
– H3
• H2
• H2
– H3
• H4
Incorrect
• H2
– H3
• H2
• H4
– H3
• H4

16. Use of Headings
• Use of bold or italic where a heading should
be used.
– Visual readers are able to idenAfy headings by
scanning pages for text of a larger size or a
different color/font face. Blind users on a screen
reader are not able to see these visual changes, so
increasing the font size is not a sufficient cue.

17. Empty links
• Most commonly caused when
adding images
– ARachment “Link To” set to
source file of image
• Make sure ARachment Display
Sedngs set to Link To None

18. Link text does not describe target
• Link text should describe the link target.
– Instead of “Click Here”, use “Click here to read
more about our services”
• Help your users understand where the link will
take them or what acAon will occur.

19. Iframe elements require proper names
• Add a Atle=“describe what’s in the iframe” to
the iframe opening tag
<iframe src="https://www.google.com/maps/
embed?pb= ..." frameborder="0" style="border:
0" allowfullscreen="" title=”Our location
Google Map"></iframe>

20. Color Contrast
• All images and graphics used on the site
should have enough contrast between
foreground and background elements for both
low vision and colorblind visitors.
hRps://webaim.org/resources/contrastchecker/
hRps://www.toptal.com/designers/colorfilter

23. DOM Errors

24. DOM Errors
• Content not properly located inside landmarks
• Embedded pdf documents embedding
duplicate landmark areas
• No Skip NavigaAon
These require modifica<ons to theme files

25. IniAal Fix
• Enable Genesis Accessibility features
– Adds Skip Nav, proper labeling of Search form,
and more
• Requires ediAng of funcAons.php and style.css

26. funcAons.php
//* Enable Genesis Accessibility Components
add_theme_support( 'genesis-accessibility',
array( '404-page', 'drop-down-menu', 'headings',
'rems', 'search-form', 'skip-links' ) );

27. style.css
/* ## Accessible Menu
--------------------------------------------- */
.menu .menu-item:focus {
position: static;
}
.menu .menu-item > a:focus + ul.sub-menu,
.menu .menu-item.sfHover > ul.sub-menu {
left: auto;
opacity: 1;
}

28. style.css
/* ## Focus Items
--------------------------------------------- */
a:focus {
border:#8888ff solid 2px!important;
}
button:focus {
background-color:#3AA8A8;
}

29. style.css
/* ## Screen reader text
--------------------------------------------- */
.screen-reader-text,
.screen-reader-text span,
.screen-reader-shortcut {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}

30. style.css
.screen-reader-text:focus,
.screen-reader-shortcut:focus,
.genesis-nav-menu .search input[type="submit"]:focus,
.widget_search input[type="submit"]:focus {
clip: auto !important;
height: auto;
width: auto;
display: block;
font-size: 1em;
font-weight: bold;
padding: 15px 23px 14px;
color: #333;
background: #fff;
z-index: 100000; /* Above WP toolbar. */
text-decoration: none;
box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
}
.more-link {
position: relative;
}

31. style.css
/* Visually hidden items for assistive devices */
.visuallyhidden {
border: 0;
clip: rect(0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

32. Visually Hidden?
• Home page has the page Atle hidden
• An H1 had to be inserted into the home page
in a text widget
• Wrapping this H1 in the .visuallyhidden
div would allow it to be read by screen
readers and hidden from screens

33. style.css
/* Skip Links ---------------------------------------- */
.genesis-skip-link {
margin: 0;
}
.genesis-skip-link li {
height: 0;
width: 0;
list-style: none;
}
/* Display outline on focus */
:focus {
color: #333;
outline: #ccc solid 1px;
}

34. Content not properly located inside
landmarks
• Footer widgets were not located inside any
landmark

35. Move Footer widgets to landmark
//* Add aside landmark to footer widgets
function add_footer_widget_landmark_open() {
echo '<aside role="complementary" aria-label="Footer
Sidebar">';
}
add_action( 'genesis_before_footer' ,
'add_footer_widget_landmark_open' , 1 );
function add_footer_widget_landmark_close() {
echo '</aside>';
}
add_action( 'genesis_before_footer' ,
'add_footer_widget_landmark_close' , 99 );

36. <aside role="complementary" aria-label="Footer
Sidebar">Footer widgets content here</aside>

37. Content not properly located inside
landmarks
• Several of the Home page widgets were not
located inside the Content landmark

38. Move the home page widgets inside
Content Landmark
• Was
//* Add home top widgets
add_acAon( 'genesis_aqer_header',
'enterprise_home_top_widgets' );
• Is
//* Add home top widgets
add_acAon( 'genesis_before_loop',
'enterprise_home_top_widgets', 1 );

39. Content not properly located inside
landmarks
• Skip Links not inside any landmark
• Skip Nav should be the located at the opening
of the DOM, before any landmark
• This is a false posiAve and can be ignored

40. Keyboard TesAng
• Tab through your website using only the
keyboard
– Added :focus styling to wrap focused elements
with colored box
• Discovered that accordion plugin used would
not close using keyboard
– Changed plugin used and edited shortcodes

41. Anyone can be an A11y
• Most of this is common sense
• Alt tags
• Link text
• Adding plugins to enable skip links
• Picking contrasAng colors
• TesAng for usability