Read time: 6 minutes
Editors Note: This post was updated and revamped in November 2020 for better accuracy and comprehensiveness.
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 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 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 Four 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 — text, video, audio, infographics, etc. — is the first step to making your website more accessible.
But what does this look like in practice?
Here are several easy and actionable changes you can do 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 follow these steps, good for you! We love to see businesses taking the initiative to make the Web more inclusive.
But 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 internet 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 (<h1>, <h2>, etc.) correctly and strategically, not only will your website be more optimized for search engines, but it will also be easier to navigate for screen readers.
Also, 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 tags (<h1>) once per page. Do not use an H1 tag
for anything other than the title of the website or an individual page. - Use H2 (<h2>) and H3 (<h3>) tags to organize your content's structure hierarchically.
- Do not go from an H1 tag to an H3 tag. Skipping heading levels may have screen reader users wondering 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.
You can imagine how frustrating that can be.
And although many places will now have alt-text boxes available, that's not always the case. You may have to include the alt-text along with your social post or in the captions directly below the photo (and after any credit you provide for the photo).
3. Describe Your 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, make your links stand out whenever possible. 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 blog post on Website Accessibility for All.
As a digital agency, we're focused on empowering our partners to inspire action, and we think A LOT about how people navigate the internet.
Not only do we consider the most logical way to influence your users to navigate from all possible entry points to your target action, but 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.
