Insights

Why Should Your Website be Accessible? And How to Get There

j
By Brittany Caudill
}
04.08.2021
Why Should Your Website be Accessible? And How to Get There

BlueSky Commerce Blog

Featured

Related Posts

Core Web Vitals: What are They?

There’s been a big buzz in the industry in the past year since Google announced that Core Web Vitals are going to be an official Google ranking factor this month. So what are they and how do we assess them?

read more

Overcoming Bad Strategy: Creating a Better Future

I have been in leadership positions with organizations large and small for the past 25 years. In business, it is often assumed all leaders understand what strategy is and how to develop one for their team, department, or company. More times than not, strategy has been...

read more

Have Questions?

Get In Touch

About the Author

Brittany Caudill

Brittany Caudill

Brittany serves as a Customer Experience Consultant in BlueSky's Marketing Division.
View Brittany's Latest Articles:

Follow Us

Home > BlueSky Insights > Why Should Your Website be Accessible? And How to Get There

Why Should Your Website be Accessible? And How to Get There

What is ADA and section 508?

ADA means Americans with Disabilities Act. ADA was enforced by the US Equal Employment Opportunity Commission, or EEOC for short, and designed to prohibit discrimination against people with disabilities and provide equal opportunity. Section 508 is specific to information technology or digital accessibility. Like ADA, Section 508 puts a legal framework in place for citizens with disabilities to achieve remediation. 

Here are some quick numbers for you to see why ADA/508 is so crucial to your website and possibly your sales if you belong in the world of eCommerce. There are over 4.57 billion internet users.  In the US alone, users spend approximately $517.36 billion online; $490 billion of that is from users with a disability of some kind (no hearing, no mouse, no sight, low or tunnel vision, or cognitive disability). If your website is not accessible, you may be excluding 60 million Americans. You could be losing 69% of your customers with disabilities instantly by not meeting their needs, and 80% of customers with disabilities have stated they are willing to spend more on a website that can.

What are some guidelines for meeting compliance?

There are levels and guidelines you’ll want to meet. The best resource for detailed information, including successes and failures, on all guidelines, are the WCAG 2.1 Guidelines.  

Here you’ll follow POUR (perceivable, operable, understandable, robust).

  • Perceivable: Content is presented in an easily perceivable manner.
  • Operable: Navigation is easy to operate.
  • Understandable: Content is easy to understand.
  • Robust: Your website content can be interpreted by various devices and platforms.

There are 3 levels of accessibility acceptance to meet customers’ needs and keep your website compliant.  

  • Level A – this meets minimum requirements
  • Level AA – acceptable compliance (this is what you want to strive for)
  • Level AAA – optimal compliance (while this is desirable, it is often hard to reach)

Changes you can make now to meet compliance.

Clean, semantic HTML for screen readers 

Screen Readers read in the order in which the HTML is written. Divide the page into page sections (H1-H6), landmarks (complementaries, navigations, etc.), and ARIA labels (an accessibility attribute, and used in cases where a text label is not visible on-screen). 

When using images, video, or audio – create alt tags. Alt tags are used to describe content users may not be otherwise able to view. Alt tags were literally created for accessibility meaning “alternative to the image,” and to work together with screenreaders.

Include a Skip Navigation link

A “Skip Navigation Link” provides a way for users to skip over navigation entirely and go straight to the main content; they are hidden until the user hits the tab key. Without this option, you’ll leave users tabbing through numerous navigation options to be able to finally get to their main content. Can you imagine a user tabbing through Amazon’s navigation? Yikes. Weather.com does a really great job at its use of the Skip Navigation link. The best part for developers is that this implements relatively quickly with a small snippet of code you can find here

Prioritize color contrast and typography

Given the number of tools that exist to help check these items, there is really not a huge case to not have these items already compliant; these items have more to do with visual impairments and are easy to check. For text, a user should be able to increase their browser size by 200% and still reliably use your website. For color contrast (including text), a contrast ratio of 4.5:1 or higher should be met for text over background (4.47:1 is not 4.5, please do not round up). Text ratio should be at least 7:1 ratio to be unmistakable legible.

Here are a few tools you can use to check color contrast (click here for a complete list):

  • STARK (integrates with XD, Figma, and Sketch). This can scan your mockup to make sure everything is at least meeting Level AA requirements. Free for minimum features, $60 annually for all features (with more to come).
  • If your website has a live space – check out Toptal’s color filter. This will allow you to see variations in different levels of colorblindness, and it’s free.
  • Analyze color contrast ratios by using Color & Contrast Picker. It’s free.

Provide transcripts for video and audio content

With video and audio content on the rise, it’s more important than ever to make sure everyone has equal access to it. According to HubSpot, 72% of customers would instead consume learning about their new product or service through video. A couple of reasons you should provide transcripts for audio-video are not everyone can see and hear videos or podcasts, and COVID-19 raised the stakes for more people shopping online, doctor visits, and online social events. It has now become the standard to provide captions and written transcripts.

Stay tuned for an upcoming blog on how you can make your social media more accessible! 

Start the Conversation

BlueSky’s unmatched commerce expertise allows us to help our clients understand how to utilize omnichannel and business solutions to reach, attract, engage, and grow customers.

Related Posts

How to Take Your B2B Brand Direct-to-Consumer

How to Take Your B2B Brand Direct-to-Consumer

For manufacturers and distributors, it isn’t easy to transition from selling business-to-business (B2B) to selling directly to consumers. That’s why we're sharing How to Take Your B2B Brand Direct-to-Consumer. This guide, put together by BigCommerce, contains...

Innovation: A Customer-Centric Path to Growth

Innovation: A Customer-Centric Path to Growth

Introduction Like so many industry “buzzwords”, Innovation gets thrown around a lot as a way to appease shareholders, inspire teams and attract customers - However, many companies and leaders use it interchangeably with ideation, which misses the mark completely. ...

User-Generated Content: Video

User-Generated Content: Video

I (Lori here) have been selling for over twenty-five years (maybe more if you consider the bags of dirt I used to sell to my neighbors when I was five years old). I moved into sales training early in my career and found that the number one challenge of sales...