Your Website and Web Accessibility in 2020

What is Web Accessibility?

Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can perceive, understand, navigate, and interact with the Web.

There are guidelines that have been put into place for a website to follow, namely the Web Content Accessibility Guidelines(WCAG) 2.0.

As Kris Rivenburgh stated in one of his recent articles, “ current legal prescription exists for web accessibility for private entities in the U.S. but WCAG 2.0 AA is frequently referenced by courts”. What can be done to try and minimize the issues that come up with website accessibility?

What You Can Do to Help with Website Accessibility

Unfortunately, there is no one “quick fix” in order to get a website to WCAG 2.0 AA standards but there are things that can be done on a continual basis to show that you are actively working on making your website compliant. Below are a few areas to be aware of:

Image Descriptions

Images make up a big part of the Web. We love to look at images, especially when looking at a vacation destination. This means having high quality images to appeal to your future guests. Remember that we want to appeal to all future guests so the best way to help with accessibility issues is to explain what your images are.

This can be done with what is called the “alt tag” attribute that goes with web images. Basically it means “alternate text” so when an image can’t be viewed there is text describing what that image is.

We shouldn’t get this confused with the “caption” attribute since they essentially do two different things. The alt attribute goes mostly unnoticed unless the image link is broken or if a potential guest is using a screen reader to navigate your website. Another great thing about using alt tags properly is that they help with SEO, so it’s a win-win to use them.

Here is an example of a bad alt tag image description:

alt="An image of the master bedroom"

Yes, this explains the image to someone who is using a screen reader but does it help them to visualize the image?

Here is a good example of an alt image description:

alt="The master bedroom with light shining through a large side window onto a white king sized bed with accents in orange."

Branden Becker gives us some good reminders in his article on alt text. Here are a few suggestions:

• Describe the image and try to be specific.
  Remember you’re trying to help someone visualize the image.
• Keep your character count under 125.
  Since screen readers won’t read on past that.
• Don’t start alt text with “picture of…” or “image of…”
  Screen reading tools will identify an image from the source code so just worry about describing the image itself.

With our latest CMS version you now have the power to control every aspect of an image on your website. The caption, the alt text, image file name. Be sure to take advantage of these to help keep your website web accessible. If you’re not on the latest version of our CMS, please email us to see how you can upgrade your site.

Videos

If an image is worth a thousand words then a video is worth...1.8 million? In other words, videos are a good thing to have on our websites. There are usually two kinds of videos that will be on a vacation rental website.

1. Hero Video/Landing Page Video
   These videos tend to try and get you involved in the experience of the vacation destination.
   1. Make sure there isn’t any flashing content in the video
   2. Make sure that pause and volume are easily accessible
2. Informational Videos
   Videos describing either attractions or information about the destination are an extremely helpful resource.
   1. Make sure that a video transcription or captioning or subtitling are included especially if these videos are providing needed information.

Video providers such as YouTube and Vimeo make captioning and subtitling easy. Be sure to include these when embedding video content so everyone can enjoy the hard work you’ve put into your videos.

Headings

Use of proper heading tags i.e. <h1>, <h2>, <h3> is important for web accessibility but also can help in SEO since these elements help structure content.

We may be in the habit of using these heading elements as visual cues since there is a size structure to them as well. If we do this, however, it will inevitably confuse screen readers as to the content we are trying to convey.

There are a total of six heading levels:

<h1>

<h2>

<h3>

<h4>

<h5>

<h6>

The way heading elements should be used on a web page or blog post are:

<h1>Best Beaches</h1>

 

 

      <h2>Beach 1</h2>

 

 

            <h3>Restaurants</h3>

 

 

                  <h4>Jimmy's Chicken Shack</h4>

 

 

                        <h5>Jimmy's Menu</h5>

 

 

                              <h6>Jimmy's Healthy Alternative</h6>

 

 

      <h2>Beach 2</h2>

 

 

Visually we can see the importance of properly laying out content with heading elements but when using a screen reader, you really start to understand since hearing visual cues are the only ways to know how the web page is structured and what the content is about. In today’s modern web this is a must, not only for SEO but for a nice user experience for anyone using your website.

Color Palette

Color may be the trickiest out of all accessibility issues. You want your website to stand out from others and one of the easiest ways to accomplish this is with color. Color also goes hand in hand with your branding and identity. Accessibility may not even come into mind when creating your logo and picking out a color palette.

When it comes to web accessibility, color is a key player to user experience for those with visual disabilities. There are a few key things that should drive our color choice as it relates to web accessibility.

Use of Color

Never rely on color alone for a user to have to make a choice or to convey information. An example could be a link that only has color to distinguish that it’s a link:

An example of a link that only uses color:

A useful link for searching on your website.

Here is an example if a user has: Monochromacy/Achromatopsia:

A useful link for searching on your website.

You can see how extremely frustrating this could be for a user with visual disabilities if there was a link hiding in the content with pertinent information or even vital information attached to it in order for a user to make a choice.

Color Contrast

According to the WCAG 2.0 specs, there should be a minimum of 4.5:1 ratio between text and background. Think of white text on a white background being a 1:1 ratio to a 21:1 which would be black text on a white background.

Below is an example of a 4.5:1 ratio:

There looks to be just enough contrast but if it’s at all possible, wouldn’t we want to ensure that we’re making it a great user experience for all of our potential guests? Remember that the 4.5:1 ratio is the bare minimum that should be used.

When picking a designer for your website, remember to ask if they are taking into consideration people with visual disabilities when working on your new color palette or brand.

Policies

Policies help a user to understand what a company’s course of action or plans are.

Most websites today have what’s called a ‘Privacy Policy’ and with vacation rental sites, there is even a ‘Rentals Policy’. These policies are not only preventative measures but also they help a user know exactly how their information is used while visiting your site, along with knowledge of what’s expected on their part if they decide to rent a vacation home.

That being said, it would make sense then to have a Usability Policy on your site as well as a form that could be submitted welcoming user input. This can go a long way to show that you are deeply concerned for all to have a great user experience on your site and that you’re invested in ensuring equal accessibility to all who come looking for a vacation.

Kris Rivenburgh has written a great article about making a website accessibility policy page.

Here is just a quick template guide from Rivenburgh's article:    

1. State your policy.
2. List what standards you strive to meet.
3. Identify specific ways that you meet the standards
4. Detail how you came to incorporate the accessibility measures listed above.
5. State compliance laws/requirements you believe you meet and/or exceed.
6. Invite feedback.
7. Add helpful resources.

Final Thoughts

As we continue through the rest of 2020 and into the future, what it means for a website to be accessible will no doubt continue to change. With that, you will probably get a lot of emails from companies offering a thorough inspection of your website to see if you are ADA compliant. Their intent, although not always, is to scare you into this service for a hefty fee. Remember that even after you pay for an evaluation it’s just that, an evaluation. You will still have to make updates to your site!

The best place to start is with us. We can run website checks and answer any concerns or questions you may have. Remember, even the official ADA government website has accessibility errors on it. So, this will be an ongoing effort.

Scurto Marketing will continue to do our best at keeping your website in line with the latest standards when it comes to web accessibility. Some upgrades, such as to our latest CMS version, may save you time, effort and expenses in the long run. It will take work on both of our ends to provide the best user experience possible to your potential guests and that is really our end goal!