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
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 >>
8.
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?
11.
12. SOLUTION
Use the straw test to find layout and
design challenges for people with
low-vision.
31. PROBLEM
When CSS background images are
off, what content, functionality, or
affordances are missing?
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
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?
66. Look for all of these in your CSS:
!
• cursor: pointer
• outline: none
• :hover without :focus
• background: url(..) or background-image
• ::before and ::after