Web Accessibility Tips

Web Accessibility Practices

Web Accessibility is best understood with one simple word, efficiency. Special attention, focus on content, and the goal to produce the best clear understanding of content is key to why we pride ourselves in what we do as web content providers. Below, we offer many more accessibility practices to help you with this goal to create the best we can for our clients. 

It is not good practice to mimic, style, or augment a web page to replicate another medium; print, posters, advertisements, announcements, etc. Web page(s) are in itself it's own medium, just like print, audio, video, etc. With this said, many content providers mistakenly assume that PDF files are replacements for web pages. This is emphatically not the case. If you choose to use PDF files, they must at least comply with minimal acceptable ADA accessibility compliance requirements.

Do not use verbiage such as click here, learn more, here, read more, etc. when hyper-referencing on the web. It does not offer information to a client, it is not Search Engine Optimization friendly, nor is it Accessibility friendly. Another tip to ponder, mobile devices don't have mouses to "click" anything, right?

Do not bold header tags, they're used for semantically organizing a web page's content and they're bold by default and/or by styles sheets.

It is not good practice to hyper-reference HTML header tags, not even to give the appearance of noticeable differentiating from normal content. They are for intended for organizational and semantic structure of a web page.

It is generally not good practice to center align content. Sites that are designed with responsive technologically in mind, may create issues when centering content on a page.

Do not bold, underline, augment, or change hyper-references; style sheets should accommodate this requirement, especially for Accessibility compliance.

Common Accessibility Mistakes

Below are some of the most common accessibility mistakes when writing content for web pages. In addition to each item are accessibility tips that may help you when developing web pages for American with Disabilities Act (ADA) Compliancy.

Images

Google Developer Image Optimization describes many facets when incorporating images in web pages. Here is a great note of importance to consider from the article:

If you ever find yourself encoding text in an image asset, stop and reconsider. Great typography is critical to good design, branding, and readability, but text-in-images delivers a poor user experience: the text is not selectable, not searchable, not zoomable, not accessible, and not friendly for high-DPI devices. The use of web fonts requires its own set of optimizations, but it addresses all of these concerns and is always a better choice for displaying text.

All HTML img elements are required to contain either the alt tag or the longdesc attribute. Decorative images should probably contain alt text information. Some screen reader users prefer empty alt content as these do not notify a user that there is nothing significant about the image. Images that contain verbiage; verbiage, phrases, words, etc.; should have alt text that includes the same verbiage, and image links should contain alt information that identifies the function of the link's destination; i. e. the page title of where the link is referenced or referred . See W3C's H45: Using alt attributes on <img> elements and H50: Using longdesc.
HTML Code Examples:

<img src="#" width="50" height="80" alt="John Smith" />
	
<img src="#" width="526" height="353" alt="Percentage of total U.S. non-institutionalized population age 16-64 declaring one or more disabilities" longdesc="description.htm" />

<frame> and <iframe> HTML Elements

All frame and iframe elements are required to contain element content.
See jimthatcher.com - Side by side Web Content Accessibility Guidelines (WCAG) vs. 508.
HTML Code Example:

<iframe src="#" width="40%" height="80" title="John Smith Dissertation">
<p>If you can see this text, your browser does not support <iframe> HTML elements.
<a href="#">View the content of John Smith Dissertation in this inline frame</a> within your browser.</p>
</iframe>

Use title attribute to describe the contents of an inline frame.
See W3C's H643: Using the title attribute of the frame and iframe elements
HTML Code Example: (see #3 above).

Provide a link to download accessible plug-ins.
HTML Code Example:

<a href="#">Adobe PDF Reader</a> (<a href="https://get.adobe.com/reader/" title="Download the latest version of Adobe Reader"><img height="17" width="17" alt="Download the latest version of Adobe Reader" src="#" /></a>)

Make sure users can skip repetitive links. See "Skip Navigation" Links article from WebAIM.

Forms

Each form control should have associated text. To improve a web form's accessibility, make good use of the HTML LABEL element. Labels associate form controls with their text descriptions.
See WebAIM Creating Accessible Forms.
HTML Code Example:

<input type="radio" name="radFriendship" value="Not_Applicable" id="b"/>
 <label for="b">Not-Applicable</label>

Header 1 / Headings

Every web page should contain one and only one header 1  tag. This header 1 should match exactly the page title property.

Subheading elements that follow the last h1 require properly nested headings.

Identify headers for the table rows and columns in data tables.
HTML Code Example:

<table>
   <caption>Shelly's Daughters</caption>
   <tr>
      <th scope="col">Name</th>
      <th scope="col">Age</th>
      <th scope="col">Birthday</th>
   </tr>
   <tr>
      <th scope="row">Jackie</th>
      <td>5</td>
      <td>April 5</td>
   </tr>
   <tr>
      <th scope="row">Beth</th>
      <td>8</td>
      <td>January 14</td>
   </tr>
</table>

With HTML abbreviations, screen readers attempt at reading abbreviations as if it were reading content. See WebAIM: Writing Clearly and Simply - Acronyms for clarification.
HTML Code Example:

... No Child Left Behind (<abbr title="No Child Left Behind">NCLB</abbr>) Act...