Girl Develop It

Intro to Web Accessibility

Class 2

Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Some "rules"

  • We are here for you!
  • Every question is important
  • Help each other
  • Have fun

What is accessibility?

  • Accessibility is about making your sites useful to as many people as possible.
  • Accessibility is about overcoming barriers.
  • Accessibility is about helping your users.

What are the common problems?

  • The presence of inaccessible Flash content
  • CAPTCHA - images presenting text used to verify that you are a human user
  • Links or buttons that do not make sense
  • Images with missing or improper descriptions (alt text)
  • Screens or parts of screens that change unexpectedly
  • Complex or difficult forms
  • Lack of keyboard accessibility
  • Missing or improper headings
  • Too many links or navigation items
  • Complex data tables
  • Inaccessible or missing search functionality
  • Lack of "skip to main content" or "skip navigation" links

Source: WebAIM Screen Reader Survey, February 2014 opens in a new window

How do I code for accessibility?

HTML

Wallace & Gromit
  • Headings & Semantic Structure
  • Form Labels & Text Alternatives
  • Tab Index
  • External link indicators

HTML Headings

Semantic structure is one of the most important usability features for screen reader users, as it helps them more easily understand and navigate the page structure. Headings also help all your users can and understand content. Read more about headings opens in a new window.

// Headings should not skip levels until h1-h4 have been established
<h1>Most important</h1>
<h2>Next most important</h2>
<h3>Third most important</h3>
<h4>Other heading</h4>

Tip: use the Firefox Web Developer Toolbar to inspect headings. Look under Information > View Document Outline.

HTML5 Headings

Use with caution

HTML5 Girl

The HTML5 Document Outline opens in a new window
by the Paciello Group

Form Labels

How do they work?

<label for="name-field">Label</label>
<input type="text" id="name-field" name="name-field">

Let's develop it

Add labels to an HTML form

<label for="name-field">Label</label>
<input type="text" id="name-field"
name="name-field" placeholder="Type your name" />

External Links

Provide affordances to warn users.

Don't Make Me Think by Steve Krug WCAG 2.0 Link requirements How I Audit a Website for Accessibility external link indicator

External Links

Let's Look at Some Code


<a href="goofy.html">Goofy page<a>

<a href="http://disney.com" target="_blank"
title="Link opens in a new window"
class="external-link">
Disney.com
<span class="offscreen">
opens in a new window
<span>
</a>

For links that open in new windows, an offscreen span inside the link is most reliable for screen readers, but title="" can also be used.

Tab Index

What is it?

The tabindex attribute explicitly defines the tab order for focusable elements (typically links and form controls) within a page. It can be used to define whether elements should be focusable. (WebAIM opens in a new window)

Focusable Heading

Link focusable only by script
Focusble div

Let's Develop It

Explore tab-index on native and non-native elements

<h1 tabindex="0">Focusable Heading<h1>
<a href="#" tabindex="-1">Link focusable only by script</a>
<div tabindex="1">Div tabbable in new order<div>

Note: tabindex values higher than 0 require managing the entire page's tab order. Use with caution!

How do I code for accessibility?

CSS

  • Visually Hidden Content
  • Really Hidden

Visually Hidden Content

How does it work?

/* Hide only visually, but have it available for screenreaders.
Copied from HTML5 Boilerplate*/

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

Hiding Content for Accessibility

Really Hidden

How to show and hide content from all users

.reallyHidden {
	display: none;
	visibility: hidden;
}
.notHidden {
	display: block;
	visibility: visible;
}

Let's Develop It

Explore keyboard navigation with content that is hidden and offscreen

How do I code for accessibility?

Accessible Rich
Internet Applications

  • Expands HTML's native vocabulary.
  • Communicates state and purpose to assistive technologies.
  • Used mainly for custom widgets and web applications.

What is WAI-ARIA, what does it do for me, and what not? opens in a new window

ARIA Core Components

Roles

What does this thing do?

<form role="search">

States

The current condition of this particular thing

<input aria-disabled="true">

Properties

The nature of the thing

<input aria-required="true">

General Resources