Skip to content

Latest commit

 

History

History
168 lines (153 loc) · 6.49 KB

3.6 Style.md

File metadata and controls

168 lines (153 loc) · 6.49 KB

Accessibility- Style

Source: Accesibility - Udacity Front End Web Development Nanodegree

Goals

  • How frequently is this piece of User Interface (UI) used?
  • How badly does this accessibility issue affect users?
  • How expensive is going to be to fix the issue?

a. Working with focus styles

  • The pseudo code focus only matchend when an element has focus:
:focus {
//Use the "outline " property to change the appeareance of the focus ring
outline: 1 pc dotted #fff; 
}

NOTE: This is a MAJOR anti-pattern

  • Without a focus indicator, a user does not know which keyboard element to interact with.
:focus {
outline: 0; 
}

Alternatives are:

  1. Give your element the same hover focussed styles
button:hover,
button: focus {
background: #e91e63;
color: #fff;
text-decoration: underline;
}
  1. Use a specific focus pseudo class in CSS (to get a consistent indicator across browsers)
button: focus {
outline: 0;
box-shadow: 0 0 8px 3 px;
rgba (255, 255, 255, 0.8);
}
  1. Delete default focus indicator, use focus style
.radio:focus {
outline: 0;
}

.radio:focus::before {
box-shadow: 0 o 1px 2 px #5b9dd9;
}
  • Leave the default focus ring in place.
  • If you want to change, use the :focus pseudo class to create your own styled focus indicator.
  • Exercice

Resources

b. Input Modality:

<div class="btn"
role= "button"
tabindex="0">
Click me!
</div>

Resources

c. Styling with Aria

  • Styling with ARIA ==> use ARIA attribute as an attribute selector. To set the aria state properly, so it is visually reflected.

  • When building custom controls be sure to include tabindex so keyboard users can easily interact with the elements.

  • A huge benefit to styling with ARIA: it provides visual feedback, which can act as a safeguard when testing and debugging code.

  • HTML not toggled:

<div class="toggle"
role= "button"
aria-labelledby="muteLbl"
aria-pressed="false"
tabindex="0">
Mute
</div>
  • HTML toggled:
<div class="toggle pressed"
role= "button"
aria-labelledby="muteLbl"
aria-pressed="true"
tabindex="0">
Mute
</div>
  • CSS toggled:
.toggle.pressed{
// transition to
// pressed state
}
  • CSS toggled- with aria attr:
.toggle[aria-pressed= "true"]{
// transition to
// pressed state
}

Resources

d. Responsive design for multiple-devices:

  • On older browsers (Mobile Safari) developers would add user-scaleable=no because it disables the 350ms click delay in that browser. - As of Safari 9.1 this is no longer the case, and using width=device-width in your viewport will handle removing that click delay.
  • Meta viewport tag: <meta name="viewport" content="width=device-width, initial-scale=1">
  • In meta viewport tag: don't use user-scalable=no ==> prevent user from zooming the screen.
  • Use relative CSS units.
  • Use appropriate size touch targets:
    • Minimum touch target size: 48 px.
    • If touch target (icons) <48 px, add padding.
    • To avoid overlapping, leave margin around touch target. Minimum 32px.

Resources

e. Mobile Screen Readers:

f. Color & Contrast Requierements

  • Don't convey info with color alone, as 1 of 20 men and 1 in 200 women suffer from some sort of color blindness.

  • Use color together with text, underline, audio, and aria-live.

  • Color Contrast:

    • Body text (less than 18.66px) ==> Contrast ratio minimum 4.5:1
    • Large Text (more than 18.66px) or (24px) ==> Contrast ratio minimum 3:1

Resources

  • WebAim 1.4.3 Minimum.

  • Color Contrast ratio:

    • Body text (less than 18.66px) ==> Contrast ratio minimum 7:1
    • Large Text (more than 18.66px) or (24px) ==> Contrast ratio minimum 4.5:1

Resources

  • WebAim1.4.6 Enhanced.

  • Accessibility Audit:

    • Check contrast ratios/see recommendations/try Live at Dev tools
    • Experience color blindness vision, enhance use of color to convey info
    • Check how UI appear for high contrast users

Resources