When the topic of website accessibility comes up, the only picture that comes to my mind is the one of a user regardless of their environment (poor internet connection, less sophisticated devices, different devices, etc) or existing condition like illness, injury, health condition can navigate your website with ease.
The success of your site, and in turn, your service, is dependent on how well you can achieve having visitors stroll your website seamlessly and in style. Let’s get more specific.
Web accessibility is among the most remarkable digital concerns nowadays, with influence on every business. Due to this fact, marketers are now putting in efforts to ensure that their websites offer equal opportunities for everyone, adapt to complex Web Content Accessibility Guidelines (WCAG), and comply with global accessibility standards.
To understand this topic better and how you can implement it, this article is written to guide you through all you need to know about website accessibility.
What is Website Accessibility?
Website accessibility is about making a website and its content accessible to site visitors with limitations such as disabilities, impairments, and others.
And it’s important to develop accessible websites since, according to the World Health Organization’s (WHO) 2022 world report on disabilities, an estimated 1.3 billion people, or 16% of the global population experience a significant disability.
As a marketer, don’t even try to convince yourself that this doesn’t concern you; it does greatly affect you as a business owner.
If your website isn’t accessible, people with disabilities will have difficulty finding or using your products, and if they can’t do that? They will go elsewhere where they best meet their needs.
So the right thing to do as a business is to make your website accessible, as it also gives you access to an additional 20% of the market share.
How to Make Your Website Accessible?
#1. Ensure Your Website Allows Keyboard Navigation
One of the keystones of an accessible website is keyboard navigation. To be considered accessible, visitors must be able to navigate your website without a mouse.
This is because many assistive technologies rely on keyboard-only navigation.
Therefore, you should ensure that visitors can navigate and browse your site using only a keyboard. This includes accessing pages, clicking on links, and more.
#2. Provide Alt Text for Images That Describe
If you use images on your site, ensure to provide alternative text that describes the image. This way, visitors who are unable to see the image can understand the content of the page when utilizing assistive technologies such as dictation software.
#3. Select a Content Management System (CMS) That Supports Accessibility.
There are many content management systems (CMS) available to help you build your website. Common examples of CMS software include Drupal and WordPress, but there are many other alternatives available.
Once you have selected a CMS that suits your needs, ensure to choose a theme/template that is accessible.
Turn to the theme’s documentation for notes on accessibility and suggestions for creating accessible content and layouts for that theme. Ensure to follow the same guidelines when choosing modules, plugins, or widgets.
For elements like editing toolbars and video players, ensure that they support creating accessible content. For instance, editing toolbars should include alternatives for headings and accessible video players and tables should include closed captioning.
The CMS administration alternatives (such as creating a blog article or posting a comment) should be accessible as well.
#4. Leverage Heading Hierarchies to Structure and Organize your Content
Breaking up your content into smaller segments can make it easier to read. That is why using headlines and lists to organize information on your pages can boost web accessibility.
Clear headings can enable screen readers to understand and interpret your pages. This also helps in-page navigation and also helps those using assistive technologies to browse the contents of your page.
WordPress recommends utilizing a set heading hierarchy, which includes using one H1 per page (commonly for the title) and H2s and H3s for sub-segments:
#5. Include Captions and Transcripts to Videos
If you add videos to your website, you will want to provide captions or transcripts so that visitors who are deaf or hard of hearing can still enjoy your content.
Closed captioning and text transcripts allow those using screen readers to consume your content without having to depend on the audio alone or visual imagery.
#6. Give your links distinctive and descriptive names.
When adding links to your content, use text that correctly describes where the link will go. Saying something like “click here” is not considered descriptive enough, and is ineffective for a screen reader visitor.
Just like sighted visitors scan the page for linked text, visually-impaired visitors can use their screen readers to scan for links.
As a result, screen reader users many times do not read the link within the context of the rest of the page. Using descriptive text correctly explains the context of links to the screen reader user.
The most distinctive content of the link should be presented first, as screen reader visitors will often navigate the links list by searching through the first letter.
For instance, if you are pointing visitors to a page titled “About Us”:
Try not to sound like this: “Click here to read about our company”.
Rather, say: “To learn more about our company, read About Us”.
#7. Design forms for accessibility.
When form fields are not labeled accordingly, the screen reader visitor does not have the same cues available as the sighted visitor. It may be impractical to tell what type of content should be entered into a form field.
All fields in your form should have a well-positioned descriptive label. For instance, if the field is for a person’s name, it should be labeled accordingly as either “Full Name” or have two different fields labeled as “Last Name.” and First Name”
As you are going through a form field, a user should be able to tab through the form and fill out all the fields before reaching the “Submit” button, or they may not even realize that more fields exist. Importantly, the tab order should follow the visual order.
If you have fields that are similar or related, consider grouping them using fieldsets. For instance, fields like “Date of Birth” and “Full Name” could be grouped jointly as “Personal Information.”
This type of form organization can help a screen reader visitor keep track of progress, and can provide the context that might be missing while filling out the form.
If certain form fields are mandatory, the field should be labeled appropriately and configured to inform the screen reader user.
Commonly, mandatory fields are noted as such with an asterisk, which may not be spoken by some screen readers.
Asterisks should still be used for sighted users, users with learning disabilities, or users who speak English as a second language.
I recommend adding any error counts in the page title (after the web user has submitted), so the user will immediately be well informed that there are errors on the page.
If a person submits a form with mistakes, the user should be brought to a submission page that shows what the errors are, and offer an easy way to navigate to those errors.
Finally, the use of CAPTCHA is inaccessible and should not be used to authenticate submissions.
#8. Ensure that all content can be accessed with the keyboard solely in a logical way.
People with mobility disabilities, including repetitive stress injuries, may not use a mouse or trackpad. These users can access content via the use of a keyboard by pressing the “arrow” or “tab” keys, or via the use of alternative input devices such as mouth stick or single-switch input.
As a result, the tab order should match the visual order, so keyboard-only users can logically navigate through the website content.
Long pages with so much content should be broken up with anchor links, allowing keyboard-only users to skip to applicable portions of the page without having to negotiate through other content.
“Skip to main content” should be provided at the top of every page, so keyboard-only users won’t have to tab through the page navigation to get the main content.
For pages with local menus and various levels and sub-items, the menus should be configured so that every menu item can be accessed with the keyboard. Design forms for accessibility.
Do not use components that only activate when a user hovers over items with a mouse, as screen readers or keyboard-only users cannot activate them.
#9. Ensure dynamic content is accessible.
When content updates dynamically (without a page refresh), screen readers may not be aware of the update.
This includes screen overlays, lightboxes, popups, in-page updates, and modal dialogs. Keyboard-only users may be trapped in these page overlays.
Magnification software users might be zoomed in on the wrong area of the page.
Make sure that video players do not auto-play and that the players can be used with a keyboard. Additionally, all videos must have alternatives for closed captioning and transcripts for the hearing-impaired.
If your website contains a slideshow, ensure that each photo has alt text and can be navigated through the keyboard.
If you are using any unique widgets (such as drag-and-drops or calendar pickers), be sure to test for accessibility.
#10. Make Use of High-Contrast Colors
Some web users may have difficulty seeing text if the color contrast is low. Therefore, I recommend utilizing colors that have a high contrast ratio, such as black and white or yellow and black.
The color contrast throughout your website should ensure that all components are distinguishable on the page. For example, the text should stand out instead of blending into the background.
There are a handful of online tools you can leverage to help you boost visual accessibility. For instance, you might find Contrast Checker beneficial when choosing your website’s color palette.
Why Is Web Accessibility Important?
According to the World Health Organization’s (WHO) 2022 world report on disabilities, an estimated 1.3 billion people or 16% of the global population experience a significant disability.
The numbers vary slightly depending on one`s definition of “disability,” however, they all point to the same conclusion: if you have a site or app, it matters very much that it works for the user.
It’s good for business as more people will buy from your company if they can easily access your website or app from any device, so there is an economic incentive for ensuring those technologies are available everywhere possible.
It benefits your SEO efforts. Using web accessibility tools, like alt text with useful keywords for images, optimizes your content and will rank higher in searches.
Why is Web Accessibility Vital for SEO?
Web accessibility plays a major role in SEO because it helps make the content more accessible for users (and web crawlers).
Accessibility enables your content to be found and understood easily by everyone, notwithstanding any disabilities. You will provide the best user experience by making your website perceivable, operable, and understandable.
By following the four accessibility principles, you will also work towards increasing your website’s organic visibility.
Google is also shifting focus on rewarding websites that offer a good user experience.
What’s more, improving the user experience helps increase brand awareness and loyalty.
When websites are not designed with accessibility in mind, it is challenging for some users to perform tasks or find beneficial information.
Conclusion
Continued enhancements in web accessibility are a reason to celebrate. After all, if you run a website, you likely want to reach as many people as possible, including those with impairments or disabilities. Fortunately, designing your website with accessibility in mind is becoming easier and easier.
In this blog post, we discussed many strategies you can use when designing an accessible website. For example, you can ensure that your website is keyboard-navigation friendly to be suitable with assistive technologies.
You can also utilize alt text and video transcriptions for all your visual media
