When most people think about accessibility, they think about HTML as the foundation for accessibility. It makes perfect sense -- strong semantic HTML has a huge impact on a visually impaired person using a screen reader. But, what about people with other disabilities? In order to provide the best of user experience to people of all abilities, we must move beyond “write great HTML and you’ll be accessible.” To do that, we use CSS. In this session, we’ll share with you some of the most significant accessibility challenges we face when it comes to the web today and share with you solutions for addressing those head on with the CSS you write. You’ll learn all about the issues, AND know what to do about them. Learn: - the accessibility issues with using CSS background images - how to wrangle the potential negative effects of your animations and parallax - how to ensure sighted keyboard users don’t get lost on your site or app - the implications of responsive web design on accessibility - strategies for ensuring your site works well with custom user stylesheets and browser settings

1. CSS
Accessibility
and YOU
#a11yCSS
@feather Derek Featherstone

4. GROUP CLOSELY RELATED ITEMS

5. The Principle of Proximity.

6. PROBLEM
Multi-column layouts make using an
interface very challenging for
someone with low-vision.

7. Check In
1. Are you a U.S. citizen?
2. Have you ever been denied entry to the U.S.?
Yes No
Yes No
3. Do you have a TSA Redress Number?
4. If yes, please enter it:
Yes No
Quit << Previous Next >>

9. Check In
1. Are you a U.S. citizen?
2. Have you ever been denied entry to the U.S.?
Yes No
Yes No
3. Do you have a TSA Redress Number?
4. If yes, please enter it:
Yes No
Quit << Previous Next >>

10. Check In
1. Are you a U.S. citizen?
Yes No
2. Have you ever been denied entry to the U.S.?
Yes No
3. Do you have a TSA Redress Number?
Yes No
4. If yes, please enter it:
Next >>
Quit or Go Back
Not sure?

12. SOLUTION
Use the straw test to find layout and
design challenges for people with
low-vision.

13. • blind
• low-vision
• hearing
• mobility/dexterity
(fine motor control,
low-strength, single-handedness)
• cognitive (attention,
memory-related, literacy,
routines/predictability)
• vestibular issues
• speech

14. 3 types of relationships

15. 1
2
3
Explicit, implicit and content based relationships.
sateach.es/3-rel

16. Screen reader compatible ≠ Accessible

17. PROBLEM
Background images are over-used,
abused, and often cause accessibility
issues for non-screen reader users.

20. <a href=“#theThing">!
!
Flip!
!
</a>

21. <a href=“#theThing">!
!
Details for Ibura Sport Coupe!
!
</a>

22. <a href=“#theThing">!
!
Flip to see details for Ibura Sport Coupe!
!
</a>

24. What’s the call to action?

25. <a href="javascript:void(0);">!
<img src=“images/homepage_tool_programs.png”!
alt=“visit">!
</a>

26. Calls to action must match!

27. SOLUTION
Alt text that reflects the call to action.
Image and text alternative in the same layer.
Use SVG

28. Background images

30. Windows High Contrast Mode: background images disappear.

31. PROBLEM
When CSS background images are
off, what content, functionality, or
affordances are missing?

43. SOLUTION
Rethink your use of background images.
Keep your meaning out of CSS.
Apply a different stylesheet.

44. var inputSelectors = [!
! ! 'select',!
! ! 'input:checkbox',!
which elements?
! ! 'input:radio'!
! ],!
! backgroundColors = [!
! ! '#fff',!
! ! '#ffffff',!
! ! 'rgb(255, 255, 255)',!
! ! 'white'!
! ],!
! textColors = [!
! ! '#333',!
! ! '#484641',!
! ! 'rgb(72, 70, 65)'!
! ],!
! fontSize = '14px',!
! pageBgColor = $('body').css('background-color'),!
! pageTextColor = $('body').css('color'),!
! pageFontSize = $('body').css('font-size');!
!
// Only run uniform.js if no modifications have been made to !
// the background color, text color, or font size!
!
if(backgroundColors.indexOf(pageBgColor) !== -1 &&
textColors.indexOf(pageTextColor) !== -1 && pageFontSize === '14px') {!
! $(inputSelectors.join(',')).uniform();!
}
expected background colours
expected text colours
expected font size

45. If the computed background colour, text colour, or
font size isn’t what you expected, consider applying a
different set of styles.
!
One of more of these is true:
• High Contrast Mode is on.
• A custom font-size is set.
• Custom colours are set.
• They are using a user style sheet.

46. PROBLEM
When using generated content, what
content, functionality, or affordances
are missing?

48. #cssmenu ul ul li.has-sub > a::after {!
! display: block;!
! position: absolute;!
! content: "";!
! width: 5px;!
! height: 5px;!
! right: 20px;!
! z-index: 10;!
! top: 11.5px;!
! border-top: 2px solid #eeeeee;!
! border-left: 2px solid #eeeeee;!
! transform: rotate(-135deg);!
}!
!
!
<li class="has-sub"><a href="#"><span>Product 1</span></a>!
<ul>!
<li><a href="#"><span>Sub Product</span></a></li>!
<li class="last"><a href="#"><span>Sub Product</
span></a></li>!
</ul>!
</li>!

50. <li class=“has-sub" aria-expanded=“true”>!
<a href="#">Product 1</a>!
</li>!

51. SOLUTION
When generated content provides
meaning, provide the same with
hidden text, or ARIA.

52. PROBLEM
Sighted keyboard users must have
a High Visibility Focus Indicator.

56. SOLUTION
DESIGN a high visibility focus indicator
that works with your site instead of relying
on the default user agent focus indicator.

57. PROBLEM
Just because something isn’t
visible, doesn’t mean it isn’t there.

61. SOLUTION
Elements that are off-screen or not visible
should be hidden using a combination of
display:none and aria-hidden=“true”

62. PROBLEM
CSS animations and parallax effects can
cause pain, discomfort, nausea and other
effects on people with vestibular issues.

63. sateach.es/vestibular

64. SOLUTION
Allow for user control of animations
including auto-rotating carousels,
parallax or motion.

65. SUMMARY
5 point diagnostic

66. Look for all of these in your CSS:
!
• cursor: pointer
• outline: none
• :hover without :focus
• background: url(..) or background-image
• ::before and ::after

67. Derek Featherstone
feather@simplyaccessible.com
@feather