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.

Accessibility in the Real World

What are the common problems users face on the web?

Screen reader user survey

Source: WebAIM Screen Reader Survey, October 2017 opens in a new window

How do I code for accessibility?

HTML

• Headings
• Buttons
• Form Labels
• Text Alternatives
• Tab Index
• External link indicators

Semantic HTML

• Use HTML elements that have meaning.
• Elements have default behavior.
• 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.

MDN Document on HTML elements opens in a new window

HTML Headings

• Headings also help all your users understand the content.
• We can think about headings like an outline for a paper.
• Headings should not skip levels

<h1>Most important</h1>
<h2>Next most important</h2>
<h3>Third most important</h3>
<h4>Other heading</h4>

Read more about headings opens in a new window

HTML Buttons

Clickable elements

<button onclick="do something">Do Something</button>

Links are not buttons. Neither are divs and spans. opens in a new window

Links vs. Buttons opens in a new window

Let's Develop It

What is and isn't a button?

Take a look at the button demo codepen opens in a new window

Form Labels

How do they work?

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">

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

Add a label to the form in input field demo codepen opens in a new window.

Other tips for forms

• Don't use placeholder text as the label.
• Provide good instructions, labels, validation, and errors.
• The form should be keyboard accessible.
• Allow the user to easily correct their mistakes.

Creating Accessible Forms opens in a new window

External Links

Provide affordances to warn users of unexpected screen changes

External Links

Let's Develop It

Here's one way of letting users know a link opens in a new tab.

<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>

Tab Index

• 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.
• Don't use tab index values greater than 0
• Read more about tabindex on WebAIM opens in a new window

Tab Index

Let's Develop It

Explore tab index on native (buttons, links, ect.) and non-native elements.

Play with tab index in the tab index demo codepen opens in a new window or try tabbing through this slide

How do I code for accessibility?

CSS

CSS can be used to alter visual appearance, but should never change the structure or ordering of the page content.

• Visually Hidden Content
• Really Hidden
• Background Images

Visually Hidden Content

This is one way to provide data for screen reader users and hide for sighted users

/*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 opens in a new window

Really Hidden

How to show and hide content from all users

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

Places it's tempting to use `display:none`, but don't opens in a new window

Background Images

• Only use decorative images as background images
• No alternative text is available
• Don't forget to consider contrast of text on top of images

Example code

#animalImage {
	background-image: url('animal-drums-copia.jpg');
	background-repeat: no-repeat;
}
			

What else can we do with CSS?

• Implement good color contrast
• Use padding and margins for space instead of using extra markup
• Style focus states for links and buttons

a {
	color: #01a9b4;
}
a:hover, a:focus {
	color: #f3787e;
}
			

How do I code for accessibility?

Accessible Rich
Internet Applications

• Expands HTML's functionality.
• Define behavior of custom widgets.
• Communicates state and purpose to assistive technologies.
• ARIA gives information to screen readers, but doesn't tell browsers or assistive technologies what to do with it.

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

"No ARIA is better than bad ARIA"

Taken directly from the ARIA Authoring Practices opens in a new window

ARIA Core Components

<form role="search">

<input aria-disabled="true">

<input aria-required="true">

Resources

• WebAIM Screen Reader Survey opens in a new window
• Axe Chrome extension opens in a new window, a Chrome extension that does in-browser audits against several.
• Web Developer toolbar opens in a new window, a Firefox extension with helpful tools
• The Accessibility Project opens in a new window
• Using ARIA in HTML opens in a new window
• ARIA is Spackle, Not Rebar opens in a new window

How can I keep learning?

• Come to the Chicago Digital Accessibility and Inclusive Design Meetup opens in a new window
• Follow cool people in the industry on social media.
• Practice! Try designing and creating your own site from scratch.
• Try the accessibility features on your phone or computer.
• Listen to podcasts, such as a11y rules opens in a new window