Web Accessibility

Testing guidelines

  • Tab through the content to see if :focus is added
  • Focus order is correct
  • Add role if element is not semantic eg. div for button
  • Add labels – text alternative for not visible (form, buttons)
  • Form inputs have associated text labels
  • Add Page Title on the logo image
  • Empty alt text on images that also have accompanying heading/title – not to repeat it
  • Zoom the page to see how items align – min 200%

Test screen reader

http://udacity.github.io/ud891/lesson1-overview/06-experiencing-screen-reader/
http://udacity.github.io/ud891/lesson3-semantics-built-in/02-chromevox-lite/
http://udacity.github.io/ud891/lesson5-semantics-aria/19-aria-live/

Chrome plugins

NoCoffee https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl
Accessibility Developer Tools https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb
High Contrast https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph?hl=en

Firefox plugin

https://addons.mozilla.org/en-US/firefox/addon/web-developer/

Checklist

Web Content Accessibility Guidelines 2.0 (WCAG https://www.w3.org/TR/WCAG20/
Web Aim Checklist for WCAG 2.0 https://webaim.org/standards/wcag/checklist

POUR

  • Perceivable – Web content is made available to the senses – sight, hearing, and/or touch
  • Operable – Interface forms, controls, and navigation are operable
  • Understandable – Content and interface are understandable
  • Robust – Content can be used reliably by a wide variety of user agents, including assistive technologies

Navigate pages with keyboard

Focus on input field, button, select – all interactive elements

  • TAB will move focus forward
  • SHIFT – TAB will move focus backwards
  • Arrow keys can be used to navigate inside of a component

Tab order

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

Better to move content up in the dom than to change the taborder. Use default taborder 0.

# natural tab order - use this!
<div tabindex="0">Focus</div>

Managing Focus

add taborder -1 and on click programatically focus the item (usually header)

# offscreen focus() method
<div tabindex="-1">Focus</div>

document.querySelector('h2').focus();

Skip links

https://developers.google.com/web/updates/2016/03/focus-start-point?hl=en

<a href="#maincontent" class="skip-link">Skip to main content</a>


<main id="maincontent" tabindex="-1">
</main>


.skip-link {
position: absolute;
top:-40px;
left:0;
z-index:100;
}

.skip-link:focus {
    top:0;
}

Offscreen Content

https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement

var curElement = document.activeElement;

Chrome Accessibility Developer Tools Extension
https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en

Adds Accessibility option in audits panel.

# off screen 
display: none
# or
visiblity: hidden

# onscreen
display: block
#or
visibility: visible

Trap focus

Code: https://classroom.udacity.com/courses/ud891/lessons/7962031279/concepts/79621414230923

Semantics

Role, Name, State, Value

  • Round trip, selected, radio button
  • Full name, edit text
  • Search, button
  • Your email address, Edit text

A11y tree

Devised from DOM.

Role

The button role should be used for clickable elements that trigger a response when activated by the user.

<div class="button" role="button" id="wombats-button">Give me wombats</div>

Label

<label>
        <input type="checkbox" checked name="jLetter">
        Get offers
</label>

OR

        <input type="checkbox" checked name="jLetter" id="letter">
        <label for="letter">Get offers</label>

Alt

<img src="image.jpg" alt="Cat" />

Empty alt attribute removes the image from the accessibility tree.

<img src="image.jpg" alt="" />

figcaption

Providing extra description

<figure>
        <img alt ="wallaby" src="wallaby.png" title="This is wallaby">
        <figcaption> My favourite animal </figaption>
</figure>

headings

var hs = document.querySelectorAll('h1,h2,h3,h4,h5,h6');
for (var i = 0; i < hs.length; i++) {
   console.log(hs[i].textContent.trim() + " " +  
               hs[i].tagName,
               hs[i]);
}

Push headings offscreen

<h2> Menu</h2>

h2 {
    position: absolute;
    top: -9999px;
}

Access keys

<input type="text" id="name" accesskey="n">
<a href="home.htm" accesskey="1 h">Home</a>

Links

<a href="#internal">Link</a>

Or add a button

<button class="link" onclick="doSomething()"> Do something! </button>

<a href="#internal">
    <img alt="Udacity" src="logo.svg">
</a>

Don’t use “Learn more” but “Learn more about responsive layouts”

Landmarks

in HTML – semantics of larger
* header
* nav
* article
* section it usually has it’s own header
* aside
* main
* footer

Dialog element

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

<dialog open>
  <p>Greetings, one and all!</p>
</dialog>

ARIA – Accessible Rich Internet Applications

Modifies accessibility tree

https://www.w3.org/TR/wai-aria-practices/
https://www.w3.org/TR/wai-aria-practices-1.1/

Add semantics

<div role="checkbox" aria-checked="true" />

Modify semantics

<button role=""switch" aria-checked="true" class="toggle">Enable </button>

Express more UI patterns

role='tree"
role="treeitem" aria-expanded="true"
role="group"

Extra labels and descriptions

<button class="glyph" aria-label="Filter">
            <div class="menu-glyph"></div>
</button>

Relationships

Roleplaying

ARIA 1.0 roles: https://www.w3.org/TR/wai-aria/roles
ARIA 1.1 roles (draft): https://www.w3.org/TR/wai-aria-1.1/#roles
ARIA 1.1 practices guide (draft): https://www.w3.org/TR/wai-aria-practices-1.1/

Role is a shorthand for a particular UI pattern

role="checkbox" tabindex="0"
role="banner"
role="navigation"
role="main"
role="complementary"
role="dialog"
role="search"
role="contentinfo"

Aria labels

aria-label
aria-labelledby
aria-describedby

<button aria-label="menu" class="hamburger"></button>

<button aria-label="Close"></button

<span id="rg-label"> Drink options </span>
<div role="radiogroup" aria-labelledby="rg-label">

</div>

aria-labeledby vs label

<div role="radio" aria-labeledby="lb01"></div>
<span id="lb01">Coffee</span>

# better use label as you can click on the label to select the item
<input type="radio" id="rb01">
<label for="rb01">Coffee</label>

ARIA relationships

ARIA 1.0 relationship attributes: https://www.w3.org/TR/wai-aria/states_and_properties#attrs_relationships
ARIA 1.1 relationship attributes: https://www.w3.org/TR/wai-aria-1.1/#attrs_relationships

aria-labeledby

<div role="radio" aria-labelledby+"lb01"></div>
<span id="lb01">Coffee</span>

aria-owns

aria-describedby

<label for="pw">Password:</label>
<input type="password" id="pw" aria-describedby="pw-help">
<div id="pw-help"> Password must be at least 12 Characters long </div>

aria-live

<div class="alertbar" aria-live="assertive">
Could not connect!
</div>

aria-atomic=”false | true”
aria-relevant=”additions | removals | text”

Styling and visual design

Hidden in accessibility tree

<button style="visibility: hidden;">
<div style="dysplay: none;">
<span hidden>
aria-hidden="true"

In accessibility tree

.screenreader {
    position: absolute;
    left: -10000px;
    width: 1px
    height: 1px;
    overflow: hidden;
}

:focus styles

:focus {
    outline: 1px dotted #fff;
}

Alternative

button:focus,
button:hover {
    background: red;
    color: white;
    text-decoration: underline; 
}

button:focus {
    outline: 0;
    box-shadow: 0 0 8px 3px rgba(255,255,255, 0.8);
}

For radio buttons

.radio:focus {
        outline: 0;
}

.radio:focus::before {
        box-shadow: 0 0 1px 2px red;
}

Style with ARIA

.toggle[aria-pressed="true"] {

}

Color contrast

Contrast Ratio Examples
Contrast Ratio examples

ARIA difines minimum contrast ratio 4.5:1 or 7:1 for visually impared

Check Accessibility properties

Accessibility properties in Elements tab

It shows contrast ratio and also suggest values to use to adhere to the requirements.

Source: Udacity Web Accesibility Course

Category: Accessibility Tags: , , , ,