The Internet has grown so wide that websites are now an essential part of our everyday lives. And in 2021, it’s not enough to have a website. In today’s world, you need to have a good website!
A website that can reach people all over the world. A website that offers equal access to its users regardless of their abilities, economic situation, age, or education. I’m sure you already know how to create a Joomla site, but today let’s talk about how to create an accessible one.
Fortunately, there are several website accessibility guidelines that we can easily follow to make sure we are creating a website that is usable for more people. And we have compiled a list of those guidelines in this article to make your Joomla site more accessible. So without further ado, let’s get started!
What is Web Accessibility?
Before we start, let’s talk about what exactly is web accessibility.
Web accessibility in very simple terms means making your website accessible to all users regardless of disability. That includes individuals with visual, motor, auditory, speech, or cognitive disabilities.
This ensures all users have equal access to the functionalities and information of your website. Accessibility is very important these days, especially for government sites, and is required by law in many situations.
Why Should You Care About It?
So why should you care about web accessibility? As a website owner, it is your responsibility to make your content accessible to all regardless of ability, context, or situation.
Putting aside the responsibility, a website offers one of the easiest ways to communicate and do business with people who suffer from a disability. Examples of this are people who cannot physically get to a shop.
There’s more! Following the Web Content Accessibility Guidelines (WCAG) will also ensure ease of use, better search result, more SEO friendly. A win, win!
Guidelines for an Accessible Joomla Site
Building an accessible Joomla website from scratch is a lot easier than fixing an inaccessible one. If you’re building a new Joomla site, you should implement the following guidelines from the get-go. But if you already have an inaccessible site, that’s okay. We can fix that too.
Check Your Accessibility Score
Start by checking the accessibility of your Joomla site using the AXE Chrome Extension. This extension will show you the list of issues you need to solve, the issue description, where they’re located, and how to fix them.
Add Sufficient Color Contrast
Add enough color contrast between the text and the background. It will make it easier for people with low vision to distinguish between page elements. If you are a Mac user, you can check contrast using the color picker in real-time with the Contrast tool.
Keyboard Accessibility (Usable Focus States)
Many people use their keyboards to navigate through the web. Keyboard accessibility helps a person know which element has the keyboard focus. Elements like links, form fields, widgets, buttons, and menu items need to have a focus indicator ( blue outline ) to indicate the keyboard focus. Read more about focus visible HERE.
Alt Text for Images
Alt text helps visually impaired people or people with other cognitive disabilities access and understand visual content such as images, charts, and graphs. This text helps screen-reading tools describe images and also allows search engines to better crawl and rank your website. So, always use them!
Use Default HTML Tags
Did you know a great deal of web content can be made accessible just by using the correct Hypertext Markup Language elements for the correct purpose? An excellent content structure with the correct heading, paragraphs, lists, etc. can aid a screen reader to navigate through the content effortlessly. Always use the correct element for the job, ex: button for the button.
The Proper Headers Structure
Headings are much more than a bold title. It’s a structure that should be defined properly so that it’s not only visual but also screen readers can read it out.
In total, there are six levels of headings you can use to structure sections of content on the page (<h1> through to <h6>).
H1 typically corresponds to the title of the page. You should have a single Heading 1 on each page. Each H2 creates a section of content. For a sub-section of the H2 – H3 is suitable, and so on.
Use Meaningful Link Text
Link text should be meaningful to help users who use screen readers to know something about their destination if they click on it. Link text needs to make sense alone without the surrounding context. It should be easy to speak out loud and also convey the function and purpose of the link. Avoid link text like “Click Here,” “Read More”, etc.
Make Audio and Video Media Accessible
Provide captions/subtitles so that people who are Deaf and hard-of-hearing get a text version of the speech and non-speech audio information needed to understand the content. Also, provide a transcript that includes a text description of the visual information.
Use Accessibility-ready Joomla Templates and Extensions
Choosing an accessibility-ready Joomla template or extension to build your Joomla site is important. Generally, all our Joomla templates and extensions are accessibility-ready. But there’s room for improvements. Designing for accessibility is something we try to improve all the time.
But what we can promise you, the upcoming Helix Ultimate 2.0 will be even more WCAG friendly. Beta 2 of Helix Ultimate 2.0 is already here and the stable version is just around the corner. Excited? We all are!
Wrapping Up
The goal isn’t all or nothing. Every improvement you can make following the above guidelines will help the cause of accessibility. Let’s develop our websites responsibly and make our web content accessible to all regardless of any disability.
Did we miss anything? Let us know what else you do to make your web content more accessible in the comments. Happy developing!
