Rea11y Simple A11y

A Focused Workshop

 by Chris DeMars

@saltnburnem ✯ cdemars86@gmail.com ✯ chrisdemars.com

About Me

@talesftscript & tftscript.com

Let's Be Friends

  1. What's your name?
  2. Where are you from?
  3. What are you looking to get out of this workshop?

Schedule

  • 1:30pm - 1:40pm Intros
  • 1:40pm - 2:40pm Concepts & Code
  • 2:40pm - 3:05pm Final run through and Lighthouse audit.

Setup

# clone the repo to your machine OR download the the .zip
https://github.com/chrisdemars/simple-a11y.git

# cd in to the folder if you cloned it
cd simple-ally

# switch to the starter branch - this is the branch 
# you are going to work in through the whole workshop
git checkout starter

Why does accessibility matter?

Goals for today

  • Learn about accessibility
  • Fix an inaccessible site
  • Achieve a score of 100 in Lighthouse

Overview

Semantic Markup

<main>

    <header>
        <nav>

        </nav>
    </header>

    <section>

    </section>

    <section>

    </section>

    <section>

    </section>

</main>

<footer>

</footer>

Code It!

Images & Alt Attributes

<img src="image.jpg|gif|svg|png" alt="SOME DESCRIPTIVE TEXT">

Code It!

ARIA

(Accessible Rich Internet Applications)

Roles & Labels

Code It!

Color Contrast

https://bit.ly/2RmYPcW

Fix It!

(Choose any colors you want that pass level AA guidelines)

Thank You!