By: Jay Wyant, Chief Information Accessibility Officer

In the Harry Potter series, first-year students get their wand before they even know how to use them. How well a student uses their wand depends on how much time and effort they put into practice and learning new commands. But everyone shares the same basic skills. Hermione Granger was able to do more with her wand than most of her peers not because she had more magical powers, but because she took the time to learn and practice new spells.

Digital accessibility is similar – everyone should know enough to perform the elemental skills. While not everyone will be a Hermione, everyone has the same access to more knowledge and skill development. 

You use tools when you create digital content like: 

• sending an email 
• writing a document
• posting on social media
• designing a website
• programming a web application 

Consider the tool you need to use as your wand. Maybe you started using your tool without any training. Then you learned tips from co-workers. Maybe you found a tutorial online. 

As you build your skills, take time to ensure that what you do is accessible. Regardless of whether you’re writing a document or building a web application, make sure you use the basic building blocks of digital accessibility.

Accessibility basics

Structure

Use headings wherever possible to chunk your content. Think of headings as your outline – don’t skip heading levels.

Bullets, tables, and lists add meaning to your content. Each tells the reader something about the content even before reading the information.

• Bullets say these items or issues are part of a group.
• Lists say this is a group of related items. Numbered lists say there is an order to the items.
• Tables say there’s data about a particular topic.

Images and colors

Images are powerful communication tools. Use them and ensure that people who may not see the image will still get the information through alt text. Focus on the message you’re conveying. Suppose you post an article about groundwater contamination and include a picture of creek. Which is more meaningful alt text?

• Creek
• Creek discolored with weeds and other aquatic plants.

Like images, colors help convey meaning. Using red text can alert users to a needed step, such as completing a required form field. But the red needs to have sufficient contrast. You also need to have a way for people who can’t see the color to get the same information, such as through symbols (asterisk), text (“required”), or other elements. 

Good color contrast example

This shade of red provides good color contrast.
(Hex red #C00000 on white background  #FFFFFF, 6.5:1)

Insuffient color contrast example

This popular shade of red does not have sufficient color contrast.
(Hex red #FF0000 on white background #FFFFFF, 4:1)

Links

Use meaningful text for links. Use words that define the reason for the link and make that selectable, rather than the listing the URL.

The links below navigate to the same website. Which is easier to understand?

• A great WebAIM article on links and hypertext
• Read more
• https://webaim.org/techniques/hypertext/link_text

Readability

Accessibility isn’t just for assistive technology users. It impacts everyone. Readability is a great example of this. How many times have your eyes glazed over a legal disclaimer? You know you should read it, but you just can’t muster the energy. This issue becomes even more critical for some people with disabilities.

For more on what you can do, check out Kendall Johnson’s and Jennie Delisi’s excellent blog on readability.

Identify gaps

So you’ve got your “wand” – the tool you use to do your job, whether it’s writing a document or coding an application. Do you know how to ensure your work is accessible?

For example, you may post content on your organization’s web page. Do you know what level heading to use? If your website’s content management editor takes care of that for you, take a moment to thank the staff for doing that. 

Also, are you sure that your tool is doing the right thing? For example, if you’re using “no code software,” is it producing fundamentally sound HTML5 code, or is it adding a whole bunch of extra code such as ARIA that may not be necessary?   As you assemble your page or application, test as you go. For example:

• Check tab order and focus. Is it predictable and easy to follow?
• Ensure your form’s labels align with form names.
• Look at the code. Are headings, links, and labels in HTML?

What about new stuff?

Now, suppose you learn about this cool new tool that makes your job easier. Ask yourself – does it improve my ability to support digital accessibility?

“But I’m not an expert!” you cry. “How can I tell if it supports accessibility?”

Again, you can start with what you know, then ask questions and request help for the rest. 

All tools should have an Accessibility Conformance Report (ACR), sometimes called a completed Voluntary Product Accessibility Template (VPAT^®). Check out the Procurement page on the Office of Accessibility website for more information on VPATs and ACRs. 

Vendors should provide guidance or training on how to ensure your output is accessible. If they don’t, ask them why not. If you can’t get a good answer, ask yourself if it’s worth it to use this tool if you can’t ensure digital accessibility.

After all, would you use a wand that didn’t let you learn new spells?