Unless you have a disability, are closely related to someone who has a disability, or work with people who have disabilities, you probably don’t give a lot of thought to navigating the Internet or website accessibility. You simply open your preferred web browser and start clicking.
And when it comes to your company’s website, you want a beautiful modern design that functions as intended. Of course these things are important for attracting users and influencing their behavior. But is your website truly accessible?
At Unity, we love to help our clients create beautiful and functional designs that are also accessible to all Internet users. But we also want to convey the message that website accessibility is a team effort. In this article, we discuss five easy tips that anyone with a website can implement quickly.
What does accessibility really mean?
Before we jump into website accessibility tips, we want to be on the same page about accessibility. If we are seriously interested in making the Internet truly inclusive, it makes sense to consult experts and agree to a common set of guidelines for website accessibility that meets the needs of all people around the globe.
This is exactly the goal of the Web Accessibility Initiative. According to the Web Content Accessibility Guidelines (WCAG), there are four principles of website content accessibility. These principles lay the foundation for what’s necessary to be able to use Web content.
The 4 Principles of Website Accessibility:
- Perceivable: Information and the components used for navigating the site must be presented in ways that all users can perceive.
- Operable: The components used to interact with and navigate the site must be operable and cannot require interaction that any users cannot perform.
- Understandable: Content and operation of the site cannot be beyond the understanding of any users.
- Robust: The website must be robust enough to be reliably interpreted by a wide variety of user interfaces, including assistive technologies. This also requires that users will have access to the content as technology evolves.
Keeping these four principles in mind whenever you create content — whether it’s text, video, audio, infographics, etc. — is the first step to making your website more accessible. But what does this look like in practice?
The best way to make sure your website is in compliance with the highest standards of website accessibility is to connect with us to schedule a free consultation. In the meantime, there are several easy changes you can do yourself to make your website more accessible today.
5 Easy Steps to Website Accessibility
When it comes to website accessibility, there are different levels of compliance. If you already take the following steps, good for you! We love to see businesses taking the initiative to make the Web more inclusive. If your website could use some work, these five steps are designed to help you get started. Let’s dig in!
1. Use Headings to Organize Your Website.
Headings are especially crucial for helping users who navigate the Web using assistive devices, such as screen readers. Screen readers are typically used by individuals who have certain visual impairments, low literacy, or other disabilities that make it difficult to scroll through websites.
Screen readers use heading structure to navigate your website. If you use headings (
<h2>, etc.) correctly and strategically, not only will your website be more optimized for search engines, but it will be more easily navigatable by screen readers.
Do not place text inside a heading tag just because it may look good there. Instead use CSS (Cascading Style Sheets) to separate the presentation from the structure of the page. If you aren’t familiar with using CSS, here’s a quick CSS tutorial for WordPress users.
How to properly use headings:
- Only use
<h1>once per page. Do not use an <
h1>for anything other than the title of the website or an individual page.
<h3>headings to organize your content’s structure hierarchically.
- Do not go from an
<h3>or otherwise skip heading levels as screen reader users may wonder if some content is missing.
2. Include Descriptive Alt Text for Images.
Fill in the alt text for all images, so that screen reader users can perceive the information presented by the image. This is particularly important for informational images such as infographics, charts, or graphs. When you create the alt text, make sure it contains the essence of the information conveyed through the image. If the text is embedded in the image, include that exact text in the alt.
The only exception to this rule is if you use an image purely for decoration. In this case, you should leave the alt text blank, so that the screen reader user is not distracted from the content on the page. You might want to ask yourself why you are even using an image anyway.
It is especially important to provide alt text for an image used as a link. If alt text is not provided, the screen reader will read the file name letter-by-letter. How annoying!
3. Describe Your Links.
Speaking of links, when placing a link within a post, it’s important to describe the link, instead of simply telling a reader to “click here.” For instance, instead of writing “to learn more about website accessibility, click here,” try, “to learn more about website accessibility check out Unity’s article, Website Accessibility for All.”
In addition, whenever possible, make your links stand out. Website usability guidelines suggest that links (and only links) should be underlined. Additionally, make sure there is a high contrast between the color of linked text and regular text. This helps users with color-blindness or low vision find links immediately without having to go on a scavenger hunt with their cursors.
4. Add Periods to Abbreviations.
When abbreviating in your writing, put periods between each letter. For instance, if you’re referring to the Federal Bureau of Investigation, write it out as F.B.I., rather than FBI. Otherwise, a screen reader may not recognize the abbreviation and will instead read it phonetically as a word, which is confusing.
5. Stop Setting Interactive Elements to Automatic.
Finally, there are interactive items on a website that may be set to automatic. For example, you may have an introductory video or audio clip set to play as soon as a user lands on your home page. Or you may have an embedded slideshow that automatically moves to the next slide. It is better to enable users to control these multimedia elements as much as possible. Some users might need extra time before moving to another slide, for instance.
Looking for more help with website accessibility?
For more resources and tools to get you started, check out our previous blog post on Website Accessibility for All.
As a digital agency, focused on empowering our partners to inspire action, we think A LOT about how people navigate the Web. Not only do we consider the most logical way to influence your users to navigate from all possible entry points to your target action, we also consider website performance from all angles. We would love to talk with you about your website accessibility and other digital marketing goals. Contact us today to schedule your free consultation!
Editor’s note: Thanks to rawpixel for the free stock image.