10 Ways to Make Your Code More Accessible – Proper Alt Tags – Incorrect

View Github Repository Open presentation in a new window

ryanburgess

See all presentation from ryanburgess

10 Ways to Make Your Code More Accessible – Proper Alt Tags – Incorrect

0 0

a11y-talk

On Github ryanburgess / a11y-talk

10 Ways to Make Your Code More Accessible

Disabilities for the web

  • Blind
  • Low-vision
  • Hearing
  • Mobile/Dexterity (fine motor control, low strength, single handed)
  • Cognitive (attention memory-related, literacy, routines/predictability)
  • Vestibular issues
  • Speech
  • Cognitive hardest one to deal with and understand

1. Semantic HTML

Validate your markup

W3C Validator

2. Proper ordered heading tags

Incorrect

<h1>Heading</h1>
<h4>Heading</h4>
<h3>Heading</h3>
<h2>Heading</h2>

Correct

<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>

3. Add alternative text for images

Proper Alt Tags

Incorrect

<img src="image.jpg">
<img src="image.jpg" alt="">

Correct

<img src="image.jpg" alt="image alt desecribed here">

Use Descriptive ALT Tags

<img src="barack-obama-1.jpg" alt="Barack Obama eating a enormous piece of pizza">

Alternative text for background images

<a href="#" class="twitter">Evernote on Twitter</a>
<a href="#" class="facebook">Evernote Facebook page</a>
<a href="#" class="google-plus">Evernote on Google Plus</a>
<a href="#" class="youtube">Evernote YouTube channel</a>

4. Add Focus

There is a focus state added to the footer links to indicate where a user is while they tab through the content

4. Add Focus

In the bottom left you can see tabbing through the links but there's no visual indication for the user to where they are on the page

5. Add a skip link for navigation

6. Avoid ambiguous link text

Incorrect

<a href="/prices">Click here</a> for prices

Correct

<a href="/prices">Prices</a>

7. Use form labels

<label for="name">Name</label>
<input type="text" id="name">

8. Use fieldsets and legends

<form>
	<fieldset>
		<legend>Personal Information</legend>
		<label for="name">Name</label>
		<input type="text" id="name">
		<label for="email">Email</label>
		<input type="email" id="email">
	</fieldset>
</form>

9. Hide content appropriately

Hidden from screen readers

display:none;
visability:hidden;

Accessible by screen readers

position: relative;
text-indent: -99999px;

10. Use ARIA landmark roles

Landmark roles help assistive technologies like screenreader users orient themselves around a page

Banner

<header role="banner">
	<h1>Evernote</h1>
</header>

Navigation

<nav role="navigation">
	<ul>
		<li><a href="/">Home</a></li>
		<li><a href="/store">Store</a></li>
		<li><a href="/contact">Contact</a></li>
	</ul>
</nav>

Main

<div id="content" role="main">
	<h1>Article title</h1>
	<p>Content...</p>
</div>

Complementary

<aside action="/?search" role="complementary">
	<h3>More articles</h3>
	...
</aside>

Footer

<footer role="contentinfo">
	...
</footer>

Search

<form action="/?search" role="search">
	<label for="search">Search</label>
	<input type="text" id="search">
</form>

Tools

Thank you

Questions?