Accessibility

It’s something we’ve all likely heard about and understand the intent behind it when it comes to physical accessibility. Things like access to businesses via a ramp, elevator, or other means to allow mobility impaired users into the facility. Providing interpreters for the hearing impaired. These are topics that we are met with almost daily. And to be honest, it is a topic that I (Shawna) encounter on a regular basis due to several of my own disabilities. But that’s another post for another day.

Today we’re talking about accessibility as it relates to your website. According to Siteimprove, digital accessibility is “the principle of designing websites to ensure that users with diverse abilities can enjoy a smooth and easy online experience.”. Sounds easy enough right? It can be. If you know the things that make a website easy to navigate.

Digital Accessibility

Digital accessibility leads us to ask ourselves questions like, how would a blind person enjoy the content on our site? Or a person with color blindness? What about a person that experiences seizures as a result of photosensitivity (Hi, I’m one of those people too). Accessible design is necessary for some but helpful for all. Since digital accessibility has been such an under rated “thing” that gets attention in the web design process, often by website designers or developers who just don’t know any better, there is an entire segment of the global (yes..global) population – and at least 25% of the Americans that the US Census Bureau says claim a disability –  that may be unable to access your site. With that comes a loss of potential revenue. On top of it just being the right thing that when you know better, you do better.

I’ll admit it. Until I acquired a basketful of chronic health and disabling conditions after my service in the Army, there were many of these things that I was ignorant to as well. You just don’t know what you don’t know. So part of our mission here at S.Barnes Designs is to bridge that gap. So not knowing is no longer an excuse. In 2018, the Americans with Disabilities Act (ADA) and the amendment to Section 508 of the Rehabilitation Act of 1973 extended the scope of anti-discrimination laws to…yup you guessed it – websites and online domains. So if you have a website, you can be held liable for accessibility issues.

Different Types of Disability

When we think about how a person interacts with our website, there are five (5) different types of disabilities that we should be thinking about.

• Auditory – these types of disabilities range from mild to moderate hearing loss to total deafness in one or both ears (this applies if you have music, sound of any kind, a video, a podcast, etc;)
• Cognitive, Learning, and/or Neurological – these types of disabilities include those on the autism spectrum, memory impairments like dementia, seizure disorders, anything that includes “brain fog”, etc. They affect how a person moves, sees, speaks, hears, and comprehends information (do you use flashy graphics that can be distracting or seizure triggering, for example?)
• Physical – this is the type of disability that most people tend to be most familiar with. It can include those with missing limbs, diseases that affect mobility like arthritis or muscular dystrophy, involuntary movements like Parkinson’s or intentional tremors, or any other limitation of physical dexterity.
• Speech – these types of disabilities include difficulties producing speech. Stuttering, apraxia, mutism, hypophonation, etc. It can make voice activation elements of websites difficult.
• Visual – these disabilities include total blindness, color blindness, low vision, double vision and/or astigmatism

Web Content Accessibility Guidelines (WCAG)

The WCAG is a set of internationally accepted standards that provide a starting point for designing inclusive websites. The standards are built on four (4) key principles that take into account each user’s online experience. Those principles are perceivable, operable, understandable, and robust.

• Is the information on your website presented in a way that is easily perceived? This is done through how easily the text displayed can be read, the images or videos have “alt-text” that describes the nature of the multimedia, and/or that the site is clear and responsive.
• Are all the components of your website easy to operate with a variety of tools? Having complex interactive elements is a huge no-go for accessibility standards for example.
• Do you present the information on your website in a clear way that is easily understandable for all users?
• Is it robust, meaning can it dependably be interpreted by a wide variety of users?

Just like with most things, there are varying degrees or levels of compliance/conformance. For WCAG, there are three (3) – Level A, Level AA, and Level AAA. Most accessibility legislation requires organizations meet level AA guidelines. Level A is the bare bones minimum; if we were to put a letter grade to it I would put it as a D+ – you are not failing but you’re not trying either. Level AA would be a solid B, you meet and maybe even slightly exceed standards; you are working towards being as accessible as you can be. Level AAA would be an A, you exceed all expectations and meet the highest level of accessibility compliance.

There are several different organizations that provide free checklists if you want to check your own accessibility status. W3 (Web Accessibility Initiative) has a fantastic one (it shows every element for how to compliant across all three (3) levels). Yale University has one that is less overwhelming to look at. You can also run your site through the checker at Siteimprove to see where you are at currently. I am proud to say that we at S.Barnes Designs has an AA-Level of 100/100. But we do have room to improve and plan to continue to do so. One of the things that I really like about Siteimprove is that it breaks down WHERE on your website improvements can be made and under which principle it may fall.

Implement Digital Accessibility

So now that we know what it is and why we should do it, I bet you’re wondering what some easy ways are to start implementing it? I’ve touched on a few already. Alt-text tags are a BIG one. If you have an image you need a description about what is in that image. It enables users who access your site through screen readers or with poor internet connections to know what the image is.

Organizing content in a very easy to read format like this blog post. Did you notice the short paragraphs and bulleted lists? Writing for the web is much different than writing that school term paper. Shorter sentences, shorter paragraphs, larger text (I like to use at least a 20px size for body text myself, with about a 1.5 line spacing), and the use of sub headings. When you’re writing for the web, you want to use only one “heading 1 (h1)” element per page/post. All the rest should be subheadings.

When a screen reader grabs this, it acts as an outline to let people know the topic that is going to be covered next. Not to mention, it catches the skimmers. Most people only read about 20% of what you actually write. The subheadings help the skimmers know the content in that section and whether they should slow down and actually read what you write.

Another thing that can make your content easier to consume is the use of contrasting text. I know fun colors are just that – fun. But when it comes to legibility, you want high contrast. Black on white for example. Do NOT use red on green (red-green color blindness is one of the most common types). Frilly script fonts can be fun as well, but save those for decoration. They should not be used for things you actually want people to read. A sans serif font is a good standard. The font you’re reading here? It’s Lato.

Do you have audio that is anything other than instrumental? Get a transcript. Transcripts are great for everyone, like the person scrolling in the middle of the night on their phone without headphones and doesn’t want to wake their child/partner. This includes music, video, podcasts, etc.

Do you have buttons that say “click here” or “read more”? Ditch ‘m. Be more descriptive in what the action will be taken. “Click Here to Sign Up for Our Waitlist” for example.

Why We Care

As I mentioned earlier, I have some disabilities that make this topic hit home. I have a seizure disorder and I am photo sensitive. For those on various social media platforms, have you seen the flashy videos that look like you’re in the disco? Or where pictures change very quickly so it looks “flashy”? I personally have to scroll right on by. If your business has an ad that has these types of elements in it, I won’t watch it. If that’s the only content you put out and don’t include a written summary of what it is about, over time I will just unfollow and not refer people to you or your business.

Do you have policies in place that require a customer to call in to assess or troubleshoot an issue? You’ve lost me there too. I have a neuromuscular autoimmune disease called myasthenia gravis. There are days that I am unable to speak because my vocal cords are affected. I’ve been unable to use a business’ services because of this verbal requirement.

And these are just two personal examples of why we value accessibility. We include some of these basic accessibility behind the scenes features as part of our normal web design process. It’s that important. When we tell you that we’ve got your back, we mean that we’ve got your back. We want to see you and your business succeed, which means making you as accessible to as many people as possible.

Digital accessibility is important. Does your site “pass muster”? Talk to your web guy/gal and find out. Or do a check yourself using the link for the checker on Siteimprove.

What questions do you have about digital accessibility? Let us know below!