Development TipsTagged , , , ,

New Year, New Vision: Website Accessibility Tips

As 2021 approaches, you and your business should begin to create a list of goals for the new year. What do you hope to accomplish? What can you improve upon from the previous year?

One very attainable and undervalued goal that every business should set for themselves is making their website is more accessible. What does “making a website more accessible” mean? Simply put – it is making sure everyone can interact with and obtain the same information from a website, regardless of any disability (visual impairment, limited motor skills, hearing impairment, etc.).

The National Center on Birth Defects and Developmental Disabilities reported roughly 26% of adults in the U.S. having some sort of disability, which is one of the many reasons why web accessibility is a vital concern to address. Not only is it the right thing to do so that you are not creating barriers that hold back certain groups of people, there is also a lot of sales opportunity being missed when you neglect to address this issue. Did you know the total disposable income for working-age people with disabilities is recorded at roughly $490 billion? With all those potential sales opportunities on your company’s radar, lets touch on just a few key ideas to keep in mind when it comes to web accessibility:

1. Don’t use meaningless phrases like “click here” or “more” as entire link text.
For those with visual impairments that use screen readers, the portion of the text that is hyperlinked is what is used to tell the user what the page they will be redirected to is about. Thinking about that concept from the user’s perspective, you can understand how phrases used as entire links like “click here”, “more”, etc. are completely meaningless. These phrases don’t tell them anything since they are not descriptive. Compare those sentences to accessible solutions such as “click here to enter our upcoming sweepstakes” or “learn more about our company’s mission statement”. These phrases give the user a clearer picture about what will happen when they click on the link.

2. Allow users to tab through inputs/links in a proper order.
Some people with limited motor skills may have difficulties using a mouse in a precise manner. This can create a huge inconvenience for someone that wants to fill out a contact form, someone filling out their personal information when shopping online, click on a certain CTA button, etc. Allowing users to tab through forms/links in a logical order is extremely helpful to those that have difficulties clicking into inputs or for quickly jumping to links on a page. Utilizing the “tabindex” attribute can help you get closer to becoming more accessible in this area.

3. Make sure your videos have captions/subtitles.
While this is more so something that would be done when creating a video, we thought it was an important aspect of accessibility that shouldn’t get overlooked. Those with hearing impairment may have difficulties hearing and ultimately comprehending any videos on your website even with their volume all the way up. Adding in your own captions can be done in your video editor by adding in what is being said with text boxes. Another great option is provided if you are uploading a YouTube video where you can add your video’s transcript. Utilizing captions will allow users to read what is being said in the video if they cannot hear it.

4. Keep “ID” values unique.
While this is also a best practice in web development in general, it can also help with web accessibility. Giving more than one element the same “ID” is known to cause problems for assistive technologies when they go through and parse content. “ID”s are attributes given to one element in order to specifically target it for styling, JavaScript manipulation, etc. For example, an <h2> with an “ID” of “animation-header” might be set to animate when hovered over. If you wanted to have multiple headers do this, instead of giving all the headers an “ID” of “animation-header”, you could give them all the same “class” and target them that way. Remember that “ID” values are supposed to be unique to a single element. Utilizing “classes” is a great way to help you resolve this accessibility issue.

5. Don’t leave image “alt” attributes empty.

Have you ever seen this broken image icon before on a website and wondered what the image was supposed to be? This is the same feeling someone that uses a screen reader has anytime you omit the “alt” attribute when uploading an image for your website. The “alt” attribute is a piece of code that provides alternative information for an image if a user can’t view it. Reasons someone might not be able to view an image is it was moved in your library and the path is now different, a slow user connection, or the use of a screen reader. By simply including a few words about what the image is when you upload it you can help make your website more accessible. Having alt text that says “Small dog running in a park” is extremely helpful for someone to visualize what the image is about rather than the image essentially being invisible to them.

These five tips just scratch the surface when it comes to making your website a place for everyone and following best practices for web accessibility. Are you interested in learning more about this topic or about getting some help to improve your website’s accessibility? Contact iMedia today!