Incorporating Digital Accessibility into Development

10 min read

In Part 1 of this series, we covered more of the philosophical side of why we should care about accessibility. Now in Part 2, let’s get down to business with some tips on how best to incorporate accessibility into your development.

Skip to main content - HTML

The skip navigation link helps keyboard and screen reader users to get to the content of your site straightaway without having to go through a long list of navigation links, images, etc.

<html>
<body>
<a class="skip-main" href="#main">Skip to main content</a>
<div id="main-content" tabindex="-1">
<h1>Heading></h1>
<p>This is the first paragraph.</p>
</div>

NOTE: tabindex="-1" removes the element from the default navigation flow for programmatic focus.

Skip to main content - CSS

Here’s some CSS for hiding the skip navigation link, however you can use your own code for your custom situation:

a.skip-main:focus, a.skip-main:active {
color: #fff;
background-color:#000;
left: auto;
top: auto;
width: 30%;
height: auto;
overflow:auto;
margin: 10px 35%;
padding:5px;
border-radius: 15px;
border:4px solid yellow;
text-align:center;
font-size:1.2em;
z-index:999;
}
a.skip-main {
left:-999px;
position:absolute;
top:auto;
width:1px;
height:1px;
overflow:hidden;
z-index:-999;
}

Image properties (alt tags):

Understandable and concise alt tags are extremely important to every website for accessibility.
The text provided in the alt tags should be as easy to understand as the image itself.

Good practice:

<img src="..." title="Sears Tower in the Fog" alt="Sears Tower in the Fog" width="..." height="..." />

Bad practice:

<img src="..." title="building" alt="" width="..." height="..." />

Image properties (color and contrast):

Test images to make sure that the meaning isn’t removed when the color is removed.
When images to have color, make sure there is enough contrast in the images for users with color blindness or low-vision.
Try to use text whenever possible instead of images for text.
Do not use graphics that could potentially cause seizures: flash more than 3 times per second, are too small, or too bright.

Form properties:

To use forms on your site, form elements need to be set up properly or they’ll remain unusable for keyboard and screen reader users.

Text inputs:

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

Text Areas:

<label for="address">Enter your address:</label><br>
<textarea id="address" name="addresstext"></textarea>

Checkboxes:

<fieldset>
<legend>Select your pizza toppings:</legend>
<input id="ham" type="checkbox" name="toppings" value="ham">
<label for="ham">Ham</label><br>
<input id="pepperoni" type="checkbox" name="toppings" value="pepperoni">
<label for="pepperoni">Pepperoni</label><br>
</fieldset>

Radio buttons:

<fieldset>
<legend>Choose a shipping method:</legend>
<input id="overnight" type="radio" name="shipping" value="overnight">
<label for="overnight">Overnight</label><br>
<input id="twoday" type="radio" name="shipping" value="twoday">
<label for="twoday">Two day</label><br>
<input id="ground" type="radio" name="shipping" value="ground">
<label for="ground">Ground</label>
</fieldset>

Select menus without optgroups:

<label for="favcity">Choose your favorite city?</label>
<select id="favcity" name="select">
<option value="1">Amsterdam</option>
<option value="2">Buenos Aires</option>
<option value="3">Delhi</option>
<option value="4">Hong Kong</option>
<option value="5">London</option>
</select>

Select menus with optgroups:

<label for="favcity2">Choose your favorite city?</label>
<select id="favcity2" name="favcity2">
<optgroup label="Asia">
<option value="3">Delhi</option>
<option value="4">Hong Kong</option>
<option value="8">Mumbai</option>
<option value="11">Tokyo</option>
</optgroup>
<optgroup label="Europe">
<option value="1">Amsterdam</option>
<option value="5">London</option>
<option value="7">Moscow</option>
</optgroup>
</select>

Buttons:

<input type="submit" name="submit" value="Submit Search">
<input type="reset" name="reset" value="Reset">
<button>Activate</button>

No accessibility information is required for buttons because they’re read by screen readers when accessed.

Image buttons:

<input type="image" name="submitbutton" alt="search" src="submit.png">

An image button, rather than the standard HTML button, needs to have an alt tag added to it in order for it to be accessible.

JavaScript jump menus:

Jump menus are activated when the menu item changes, these menus can cause keyboard accessibility issues because some users cannot scroll through the list without selecting one of the options
Some browsers have options to override this behavior but only if activated by the user
Providing a separate submit button will help with making your form accessible

Table properties:

If a screen reader doesn’t have a table layout properly set, this is an example of what the user will hear:

Table with 10 columns and 7 rows. Department Code, Class Number, Section, Max Enrollment, Current Enrollment, Room Number, Days, Start Time, End Time, Instructor, BIO, 100, 1, 15, 13, 5, Mon,Wed,Fri, 10:00, 11:00, Magde, 100, 2, 15, 7, 5, Tue,Thu, 11:00, 12:30, Indge, 205, 1, 15, 9, 6, Tue,Thu, 09:00, 10:30, Magde, 315, 1, 12, 3, 6, Mon,Wed,Fri, 13:00, 14:00, Indge, BUS, 150, 1, 15, 15, 13, Mon,Wed,Fri, 09:00, 10:00, Roberts, 210, 1, 10, 9, 13, Mon,Wed,Fri, 08:00, 09:00, Rasid.

Not very helpful huh? Well let’s go through some good and bad practices:

Good practice:

<table>
<caption>Katherine’s Favorite David Bowie Albums</caption>
<tr>
<th scope=”col”>Album</th>
<th scope=”col”>Artist</th>
<th scope=”col”>Year Released</th>
<tr>
<th scope="row">Blackstar</th>
<td>David Bowie</td>
<td>January 2016</td>
</tr>
<tr>
<th scope="row">The Next Day</th>
<td>David Bowie</td>
<td>March 2013</td>
</tr>
<tr>
<th scope="row">Low</th>
<td>David Bowie</td>
<td>January 1977</td>
</tr>
</table>

Bad practice:

<table>
<tr>
<td>Album</td>
</tr>
<tr>
<td>Blackstar</td>
</tr>
</table>

Tabindex order (for keyboards):

The tabindex should not be the default property as it’s not ideal.
This is because items that don’t have a tabindex property will not receive focus first.
The tabindex property should only be used when the tab order cannot be rearranged by HTML or CSS in order to give order to HTML properties for keyboards.

Good practice:

<ol>
<a href="/services/" tabindex="1">Services</a>
<a href="/articles/" tabindex="2">Articles</a>
<a href="/resources/" tabindex="3">Resources</a>
<a href="/community/" tabindex="4">Community</a>
</ol>

Bad practice:

<ol>
<a href="/services/">Services</a>
<a href="/articles/" tabindex="2">Articles</a>
<a href="/resources/" tabindex="3">Resources</a>
<a href="/community/">Community</a>
</ol>

Web/Browser Testing Tools:

Automated Accessibility Testing Tools (aka the future):

Pa11y Automated Accessibility Testing

Whether your site is a government site or a company site, an accessible site should be your ultimate goal. I hope that all of the information and tips I’ve included in this blog post will help you to get started on the path to developing in an accessible way in your daily development workflow, as well as gaining a true understanding of why it’s so important for you to do so. The tools for developing in an accessible way are all there for you so on your mark, set, go!

Need help getting started with accessibility compliance? We can help!

Promet Accessibility offers a simple, straightforward path to achieving ADA digital accessibility compliance for your websites, web applications and technical products. Request a free introductory consultation with our Promet Accessibility team.