Why Accessible Code Matters

At LaunchPad Lab, we put people first. In fact, it’s one of our Company Constants—a founding set of principles that we’ve carried with us since our earliest days—and it’s one of the reasons that we believe in the importance of accessible code and design. 

Building an inclusive experience—whether you’re online or offline—matters. As a team of developers, one of our most important jobs is building digital products that provide a great experience for anyone who uses the app. To accomplish that, accessible code is absolutely vital. 

Why Accessible Code Matters

For many creatives and developers, the visual impact and awe-inspiring functionality of a project takes priority, and accessibility is sometimes overlooked. However, accessibility is a massive issue, especially if the interactivity isn’t developed with accessible code. According to the CDC, 26 percent—or 61 million—of U.S. adults have some type of disability. For adults over the age of 65, this number increases to 40 percent. 

Without inclusive code, users may not be able to interact with the entirety of the website they’re visiting, causing frustration and confusion. Although that’s reason enough to prioritize accessibility in any digital project, writing accessible code comes with a slew of additional benefits as well: 

• Accessible code performs better: Accessible code is more accurate and precise, leading to increased performance. 
• Accessible code is more responsive: Accessible code allows digital apps to be viewed on nearly any device. 
• Accessible code improves SEO performance: Proper semantic HTML improves accessibility but it also improves SEO, making it easily searchable. 

Adaptive Equipment and Accessible Code 

For users with disabilities, screen readers are one of the most common ways to navigate and interact with a digital application. These software programs describe the content on a user’s screen aloud, provide shortcuts to navigation menus, and other interactivity. 

Mac computers come with an internal option called VoiceOver, which includes preset keyboard options that direct the screen reader to read different areas of a page. Our developers often use screen readers as a test of how their code is interpreted by these assistive technologies. 

Tips for Writing Accessible HTML Code 

In general, writing semantic HTML, meaning using the correct elements for their intended purpose, makes the content immediately accessible to a wide range of users. It will be readable by able-bodied users, but it also performs well when paired with assistive technologies, such as screen readers. 

If you’re a developer interested in learning more about writing accessible HTML code, here are a few other key points: 

1. Use Meaningful Text Labels 

For all links, buttons, and form inputs, use a descriptive text label whenever possible to provide additional context. Although it’s tempting to simply use a button called “Click here,” this is not accessible to users with disabilities. Instead, the label should explicitly say what the action will do—and make sense out of context from the rest of the content. 

For example, you might be tempted to say: “Whales are awesome. To find out more about whales, click here.” In that sentence, “click here” would be hyperlinked. However, an example of accessible code would be: “Whales are awesome. Find out more about whales.” In the properly written statement, “Find out more about whales” would be hyperlinked.

2. Accurately Describe Images 

If a user cannot distinguish the content of the images you include on a page, they might rely on a screen reader to tell them what it is. In order for this to work, however, you must include alt text on each image element. This attribute allows you to enter text that describes the image and its purpose.

If the image is only decorative and doesn’t provide any necessary information to the user, you should still include the alt text attribute, but set it to a blank string only. This tells the screen reader it is only presentational and can be skipped over.

3. Try Not To Use Tables to Create Layouts

While screen readers can typically tell the difference between a layout table and a data table, there is a chance your table is interpreted incorrectly. In that case, the user is required to navigate in and out of each cell to discover the content, which can cause confusion and frustration. 

Using tables in your HTML was helpful before CSS was widely supported. However, these days you should try modern HTML5 elements that offer inherent structure—and can be styled easily. Examples include: ‘header,’ ‘nav,’ ‘main,’ ‘aside,’ ‘section,’ and ‘footer.’’ More information about using tables in code can be found on WebAIM’s website.

Accessibility Audit 

Whether you’re a brand wondering if your site is ADA-compliant or a developer with an interest in deepening your skills around accessible code, there are a number of digital tools available to identify any accessibility issues. 

We use a combination of screen readers and SiteImprove, a tool that quickly uncovers accessibility issues. SiteImprove offers a Chrome browser extension that you can install and run on each page of your site—it will scan your code and identify any potential issues. SiteImprove provides options for what level of ADA compliance you might be aiming for. We typically shoot for AA compliance, but some companies might require AAA compliance, for example. 

We’re here to help. 

If you’re looking to transform your digital experience and ensure accessibility at every step of the process, we’d love to talk. Reach out to us now. 

×

Subscribe to Our Newsletter

If you made it this far, you should sign up for our monthly newsletter. Get our latest articles and insights delivered each month.

First Name*

Last Name*

Email*