So you’ve read our previous blog on
Section 508 Standards are and how to test for them and next thought “Gosh, that’s nice, but how do I make a page 508 Compliant?” Or you stumbled upon this blog from a quick search. Either way, if you’re looking for quick and easy tips on how to make your site more 508 Compliant, you’re in the right place! We’ll cover a few common 508 Standards and give basic html examples on how to meet compliancy.
What is Section 508?
To reviewfrom our previous 508 post, the Section 508 Standards refer to an amendment passed in 1998 of the Workforce Rehabilitation Act of 1973. It specifically establishes guidelines for electronic and information technology to be accessible by people with disabilities.
As a quick history lesson, Section 508 Standards were originally added as an amendent in 1986. This is shortly after the Internet was spreading and becoming widely used, so it’s not a surprise that the original 508 Standards had to be replaced in 1998 by the Federal Electronic and Information Technology Accessibility and Compliance Act, which are now the new Section 508 Standards. This goes to show that accesibility has always been on people’s minds!
Why Section 508 Standards Are Important
The aim of having any site be 508 compliant is so that those with disabilities may use the site as effectively as someone without any impairments. This is huge considering that the Internet is one of the greatest tools available to us!
When you begin digging around for Section 508 Standards, you may come accross World Wide Web Consortium’s (W3C) site. They were responsible for launching the Web Accessibility Initiative (WAI) in 1997 with endorsement from the White House and helped shape the current 508 Standards.
In fact, their site goes further in depth when it comes to anything regarding accessibility, as it should. W3C does provide a Checklist of Checkpoints for Web Content Accessibility Guidline, but we’re going to focus on a format friendly checklist provided by WebAIM that was extracted from the same set of rules.
Implementing Section 508 Standards
Below we’ll go over some of the more common standards that you would have to account for when building a front-end for a website.
Provide Alt Tags on Images
When you add an alt tag on an image, it provides screen readers with a text explanation for those images.
<img src="cat.jpg" alt="Picture of a cat.">
Wrap the Input Field with its Explanation Text in a Label with a Correlating for and id Attribute
This logically groups together fields which allows for screen readers to recite chunks of user input controls together. Leaving this out may result in a screen reader dictating the label to a user input control, but leaving out what the user previously inputted.
<label for="firstName">
<p> First Name: </p>
<input type="text" id="firstName">
</label>
You could also implement this in the following way:
<fieldset>
<legend>Do you have a middle name?</legend>
<input type="radio" id="yesMiddleName" name="middleName"/>
<label for="yesMiddleName"> Yes </label>
<input type="radio" id="noMiddleName" name="middleName"/>
<label for="noMiddleName"> No </label>
</fieldset>
Hide a “Skip to Main Content” Link at the Very Top of Each Page
Having a “skip to main content” link allows screen readers to skip over secondary information and snap to the main landing area where eyes are usually drawn to. A common use is to skip over navigational bars (home, contact us, feedback, etc.) that hold multiple links. Users will still be able to go back and navigate to this area if they so please.
<a href=".MainContent">
<…>
<…>
<div class="MainContent">
You could also implement this in the following way:
<a href="#MainContent">
<…>
<…>
<a name="MainContent">
Required Fields have Asterisks Next to Them if there are Non-required Fields As Well
The main goal behind this is to allow the {{cta(‘b8b979d0-8719-49fe-912b-ce4349253041′,’justifyright’)}}screen reader to verbally indicate that input fields are required. You can accomplish this by using asterisks or you can put the word “required” next to the field. Just be sure to not use only color or another form of formatting to indicate that a field is required without a screen reader friendly indicator.
<label for="firstName">
<p>*What is your first name?</p>
<input type="text" id="firstName" name="first name"/>
</label>
<label for="favColor">
<p>What is your favorite color?</p>
<input type="text" id="favColor" name="favorite color"/>
</label>
Assign Value Attributes to Push Buttons
Value attributes on buttons are read by screen readers, which gives users context as to what clicking the button will do.
<input type="submit" value="Save information">
Assign Value Attributes to Options in Drop-down/Select Boxes
Most screen readers will read the text assigned to an option, but just to be on the safe side, you’ll also want to assign values to options to ensure that screen readers have something to dictate.
<label for="stateSelect">
<p>What state do you live in?</p>
<select name="select resident state" id="stateSelect">
<option value="MD"> Maryland </option>
<option value="VA"> Virginia </option>
</select>
</label>
Tables Should Have a Caption or a Summary as Well as Header Tags
Screen readers are able to recognize tables and all tags associated with them. This allows the user to jump from table to table on screen and have the screen reader logically traverse the table cells. Attaching as much information as you can, such as descriptive captions and row headings, gives the user a more authentic experience.
<table>
<caption> State Abbreviations </caption>
<tr>
<th>Full Name</th>
<th>Abbreviation</th>
</tr>
<tr>
<td>Maryland</td>
<td>MD</td>
</tr>
</table>
Use Header Tags to Enlarge Titles Instead of CSS Stylings
As with tables, some screen readers are able to present users with the headings on a page to allow them to jump from one logical grouping to another.
<h4>Required User Information</h4>
The Wrap-Up
You’re probably very familiar with the techniques discussed above, but you may not have known they had such an impact on visually impaired users and their experience. Section 508 is extremely important in this day and age when having an inability to access information over the web can be a huge disadvantage. With these basic tips, you’ll be able to equip your front-end with the essential hooks that allow screen readers to effectively assist all users who visit your page.
What other Section 508 standards are important to create a good user experience for users? Share your wisdom with us in the comments below!
Found this blog post useful? Make yourself comfortable and check out our blog home page to explore other technologies we use on a daily basis and the fixes we’ve solved in our day to day work. To make your life easier, subscribe to our blog to get instant updates sent straight to your inbox:
{{cta(‘33985992-7ced-4ebd-b7c8-4fcb88ae3da4′,’justifycenter’)}}
