Flickr

P

erceivable

O

perable

nderstandable

U

R

obust

P

erceivable

O

perable

nderstandable

U

R

obust

P

erceivable

O

perable

nderstandable

U

R

obust

P

erceivable

O

perable

nderstandable

U

R

obust

TutsPlus

<header role="banner">
    Website Header
</header>

<nav role="navigation">
    <ul>
        <li>Home</li>
        <li>About Us</li>
        <li>Contact Us</li>
    </ul>
</nav>

<div role="main">
    Main Content
</div>

<div role="complementary">
    Sidebar
</div>

<footer role="contentinfo">
    Summary of page
</footer>

Brolik

Typekit

Button Mobile

<a href="#" tabindex="1">First item</a>

<a href="#" tabindex="2">Second item</a>

Icon Finder

<a href="#" tabindex="-1">Can't tab to here</a>

<div tabindex="0">
    Will calculate tab order, 
    can be used on non-selectable 
    items such as <p> and <hx>
</div>

Example link

Example link

a {
    color: red;
}

a:hover,
a:focus,
a:active {
  color: blue;
  background-color: yellow;
  text-decoration: none;
}

Thanks!

@rhianaheath

https://slides.com/rhianaheath

Credits

Diversity of Web Users

W3C Accessibility Checklist

Select ARIA Roles for Screen readers

Accessible Mobile Guidelines

Accessible Tabindexes

Colour Contrast Accessibility - Bootstrap

Accessibility Colour Wheel