Key learnings from accessibility updates on a website.

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