Web Accessibility
Developers wield the power of creating digital environments and as the saying goes, with great power, comes great responsibility. It is up to us to make sure that these environments are inclusive by being accessible to all; including those with disabilities. The Centers for Disease Control and Prevention (CDC) reports that 26% of adults in the United States live with a disability including, but not limited to, visual and hearing impairment. When developing websites and other applications it is important to keep in mind the abilities of all who will have access to your project.
Accessible applications begin with Hypertext Markup Language, or HTML for short. HTML establishes the structure of a website and includes all of the information given in the document. Semantic HTML is relevant to those with physical limitations and cognitive disorders because helpful softwares, like screen- readers, use HTML to deliver the page’s content to its user. Screen- readers traverse the entire document from top to bottom reading to its user the elements on the page. For this reason, content structure is important. If the flow of your content is difficult to follow, the user experience for people using assistive devices will be greatly diminished. The content layout of your webpage should be easy to follow and the language within your document should be easy to understand. Though it is not a complete list of all of the different ways to make your project more agreeable, I will list a few HTML and Cascading Style Sheets (CSS) practices and examples that will increase your website’s accessibility.
- Expand abbreviations and acronyms at least once before committing to its shortened version.
<p>The Centers for Disease Control and Prevention (CDC)....</p>
vs. <p>The CDC ...</p>
- Label all tables, lists, and forms. Each label should make sense inside and outside of context.
<div>
<label for="name">Fill in your name:</label>
<input type="text" id="name" name="name">
</div>
vs. Fill in your name: <input type="text" id="name" name="name">
- Links should be visually different from non-link text.
- Links that open a new window, tab, or file should include an indicator to alert the user.
<a target="_bank" href="https://medium.com/"> Medium (opens in a new window)</a>- Beware of the proximity of interactive content. Clickable features set close together are more difficult to select.
- Images, when able, should have meaningful file names, include <alt text> tags, and text should never be included inside an image.
<img src="fieldofsunflowers.jpg" alt="Large field of yellow sunflowers and a clear blue sky"> The Web Content Accessibility Guidelines (WCAG) was initially published in 2008 and it exists as the standard for web content accessibility globally. Then recognized as WCAG 2.0, it was updated in 2018 and is now recognizable as WCAG 2.1. The new requirements, or “success criteria”, are expected to be included in the 2.2 version scheduled to be published this year. After being updated in 2017, section 508 of the Rehabilitation Act of 1973 required that federal agencies and their associates must make their electronic and information technology accessible to people with disabilities in compliance with WCAG 2.0 A/AA. ‘A’ and ‘AA’ are two of the three tiers of conformance according to WCAG. ‘A’ is the first level and represents basic web accessibility attributes. ‘AA’ is the second level and websites meeting these standards are practical for people with and without disabilities. Private businesses are not required by law to comply with WCAG or any other standard; however, the Americans with Disabilities Act (ADA) almost forces private entities to comply with WCAG in order to avoid lawsuit on the basis of discrimination of disability in places of public accommodation.
As programmers, we are responsible for constructing inclusive web- based environments and that starts with basic HTML. Doing our part has the potential to shape the lives of people world wide.
