Introduction to Web Accessibility

Logan Franken

	Logan Franken
	@loganfranken
	http://goo.gl/SdH3vK
	http://goo.gl/7vq4yg

How to Make a Website Accessible?

For the most part

A Good Website is an Accessible Website

Tip #1

Order Content Meaningfully

Dont

<nav><!-- Main Navigation --></nav>

<aside><!-- Sidebar --></aside>

<h1>Student Resources</h1>

<main><!-- Main Content --></main>

Do

<h1>Student Resources</h1>

<nav><!-- Main Navigation --></nav>

<main><!-- Main Content --></main>

<aside><!-- Sidebar --></aside>

Tip #2

Organize Content Consistently

Tip #3

"lang" Attribute

<html lang="en">

Tip #4

Clear, Descriptive Title

Tip #5

Most Important Part of Title First

Dont

<!-- Which section? -->
<title>Lorem Ipsum Department</title>

<!-- Which website? -->
<title>About</title>

<!-- Important information last -->
<title>Lorem Ispum Department - UCSB - About</title>

Do

<title>
   About - Lorem Ipsum Department
</title>

Tip #6

Clear and Descriptive

Dont

<h1>This is how to apply</h1>

<h2>First</h2>

<h2>Next</h2>

Do

<h1>How to Apply</h1>

<h2>Before You Apply</h2>

<h2>Step 1: Federal Application</h2>

Tip #7

Nest Headings Correctly

Dont

<h1>How to Apply</h1>

<h3>Before You Apply</h3>

<h3>What You Will Need</h3>

Do

<h1>How to Apply</h1>

<h2>Before You Apply</h2>

<h3>What You Will Need</h3>

Tip #8

Don't Use Heading Elements For Styling

Dont

<p>
   Complete the
   <h3>Federal Application</h3>
</p>

Do

<p>
   Complete the
   <strong>Federal Application</strong>
</p>

Tip #9

Only One h1

Dont

<h1>About Us</h1>

<h1>Who Are We?</h1>

<h1>Where Are We Located?</h1>

Do

<h1>About Us</h1>

<h2>Who Are We?</h2>

<h2>Where Are We Located?</h2>

Tip #10

Use the "alt" attribute

Do

<img
   src="butterfly.jpg"
   alt="A butterfly sitting on a leaf"
/>

Tip #11

"Null" alt text

Dont

<img
   src="bullet.gif"
/>

Do

<img
   src="bullet.gif"
   alt=""
/>

Tip #12

Use HTML for Text

Dont

<a href="/download">
   <img
      src="download-btn.png"
      alt="Download Now"
   />
</a>

Do

<a href="/download"
   class="download-btn">
      Download Now
</a>

Do

.download-btn
{
   background: #8EC957;
   background: linear-gradient(to bottom,  #8EC957 0%,#71A341 100%);
   border-bottom: 3px solid #4A6E29;
   border-radius: 8px;
   box-shadow: 0 3px 10px #CCE8B3;
   color: #FFF;
   font-size: 1.5em;
   padding: 15px;
   text-decoration: none;
   text-shadow: 0 2px 0 #67963B;
}

Tip #13

Use CSS for Decoration

Dont

<h1>
   Welcome!
   <img src="images/wave.png">
</h1>

Do

<h1 class="welcome-header">
   Welcome!
</h1>

Do

.welcome-header
{
   background: url('../images/wave.png') no-repeat top right;
   color: #555;
   font: italic normal 3.5em Georgia, serif;
   margin: 0 auto;
   padding-top: 50px;
   text-align: left;
   width: 70%;
}

Tip #14

Use Labels with Inputs

Do

<label for="new-username">
  Username:
</label>
<input
   type="text"
   name="username"
   id="new-username"
/>

Tip #15

Use CSS for "Invisible" Labels

Dont

<form class="search-form">
   <input type="text" name="query" id="search-query" />
   <input type="submit" value="Search" />
</form>

Do

<form class="search-form">
   <label for="search-query">Search Query:</label>
   <input type="text" name="query" id="search-query" />
   <input type="submit" value="Search" />
</form>

Do

.search-form label
{
   left: -9999px;
   overflow: hidden;
   position: absolute;
}

Tip #16

Use descriptive text for links

Dont

For more information, visit the Department of Education website at http://www.ed.gov/.

Dont

For more information, click here to visit the Department of Education website.

Dont

For more information, visit the Department of Education's website.

Do

For more information, visit the Department of Education's website.

Do

The Department of Education can provide more information.

Tip #17

Avoid opening new windows

Tip #18

4.5:1 Color Ratio on Large Text

Tip #19

3:1 Color Ratio on Small Text

WebAIM: Color Contrast Checker

Tip #20

Don't Rely Solely on Color

Dont

Do

Tip #21

Don't Use Tables for Layout

Tip #22

Use Tables for Tabular Data

Tip #23

Denote Required Fields

Tip #24

Define Required Format

Tip #25

Explain How and Why Validation Failed

Tip #26

Ensure Keyboard Support

Tip #27

Avoid Adjusting "tabindex"

Dont

<a href="/mainmenu" tabindex="2">
   Return to Main Menu
</a>
<button tabindex="1">
   Place Order
</button>

Do

<button>
   Place Order
</button>
<a href="/mainmenu">
   Return to Main Menu
</a>

Tip #28

Provide "Skip Links"

<a href="#content">
   Skip to Main Content
</a>

<nav><!-- Navigation --></nav>
<aside><!-- Sidebar --></aside>

<main id="content">
   <!-- Main Content -->
</main>