You may have seen it mentioned on our home, or read about why it’s important, but we haven’t really gone over WHAT it is. So let’s dig a little deeper into the question, “What is digital accessibility?“, shall we?

What is digital accessibility?

It is also called eAccessibility or web accessibility. At it’s core and as it relates to websites, it is making sure that your website is accessible to people with visual, auditory, motor or cognitive disabilities. There are a variety of things that we look at to make this happen. We want to design a site that is usable by every user that may come across it. If you have PDF or other types of document downloads, these also fall under the digital accessibility umbrella since they are accessed digitally or via the internet.

For those with visual impairment, they utilize several different types of applications and devices to help them navigate a world made for site. These include but may not be limited to screen reader software, screen magnification tools, Braille output devices. Our accessibility partner, Rob, is blind and tests every website we build with four different screen reader software tools to ensure that it is able to navigated with ease.

For those with physical impairments, they may use devices that read their eye movement or a keyboard to navigate through your navigation links on your website. For example, is your site usable without a mouse?

What is the goal of digital accessibility?

The primary goal, as it pertains to your website, is to make it as user friendly for any and every user that may access your site.

OUR goal at S. Barnes Designs is to make digital accessibility something you don’t even have to think about for your website. Shawna designs every site with accessibility in mind and using the current accepted standards as provided by WCAG (Web Content Accessibility Guidelines).

Top digital accessibility errors.

There are several errors that account for more than 80% of all flagged issues for accessibility that you can easily rectify with a little bit of planning.

The first most common error has to do with alt text.

Alt text (aka text alternatives) is the text that is used to describe the image. This doesn’t just help a person with disabilities. If a person is on a slow internet connection or the photo is having trouble loading, the alt text describes what the image is to help provide context. Alt text is different than a description or a caption. Not every image requires alt text. Your logo does not need it, but we believe it’s good practice to at least label the image as your brand/business logo. If an image is purely decorate and does absolutely nothing to aid in the understanding of the content, you do not need alt text. Alt text should be succinct, to the point, but accurately describe the picture. You want to try for 120-150 characters. Keep in mind, folks that use screen readers will be listening to these descriptions. If you have a complex or detailed picture (like one of these from NASA – they hired someone to write the alt text because they believe that everyone should be able to experience space)

The second most common is that of color contrast.

For websites to meet AA WCAG 2.0 standards, the contrast should be at least 4.5:1. There are a variety of tools that you can use to check your contrast. One of the easier ones we’ve found is a Chrome extension from Accessible Web. If you use Adobe, Adobe Color has a great contrast checker. Another great tool that anyone can use is a web browser color contrast checker by Coolers. The contrast ratio of 4.5:1 is the current AA standard. If you want to “future proof” your site, the AAA (or high-speed as we’d say in the Army) standard is a ratio of 7:1. We do our best to go above and beyond what requirements are while still keeping true to our clients’ aesthetics.

Many believe that designing for accessibility when it comes to color means you can’t have fun with color. I beg to differ. It makes a designer be more creative to find solutions that work for all.

The third most common error is inaccurate heading structures.

Heading structures act like a table of contents or an outline for someone using assistive technology. If your heading structure is out of whack, so may be their understanding of the importance of the topics you’re explaining. For example, if you were to look at this blog post, “What is the goal of digital accessibility” is coded as a “h1” or a Heading 1. “Top digital accessibility errors” is a “h2” or a Heading 2. And the errors listed as headings are a “h3” or a Heading 3. If the next heading were a H2, then I would get an inaccurate heading structure error when testing for accessibility. I could continue with H3 or go to H4 for the next one.

Digital accessibility might be required by some, but it benefits all.

As you can see, there’s a lot that you can do to improve the usability – and accessibility – of your website. If this seems all to daunting, the team here at S. Barnes Designs is ready, willing, and able to help. A great place to start is with a simple accessibility review so you know where to start.

What questions do you have about digital accessibility?