As web designers, it is important to prioritise making our websites accessible to as many users as possible. While Elementor has made great strides in improving accessibility, we cannot solely rely on any page builder to do all the work for us. It is our responsibility to contribute and enhance the accessibility of our websites.
WebAIM, identifies five types of disabilities that we should consider when building websites: visual, auditory, motor, cognitive, and seizure and vestibular disorders. Each of these disabilities presents unique challenges that need to be addressed to ensure inclusivity in web design.
In this article, we focus primarily on visual disability, specifically targeting users who rely on screen readers. It is essential to create a well-structured website to facilitate the browsing experience for assistive technology users. Imagine opening a book with no clear structure – no chapter or section titles, no page numbers, no table of contents. It would be incredibly challenging to find the information you are looking for.
Similarly, in web design, we need to establish a proper structure for screen readers and search engines to navigate through our websites efficiently. The page structure regions are usually referred to as landmark regions, such as <header>, <nav>, <main>, <aside>, <footer>, and more.
The header region is a critical part of a website and typically includes elements like the site logo or name, navigation menus, search bars, and sometimes a cart element for e-commerce websites. In a recent YouTube video, I touched upon these elements, specifically the navigation element.
By default, the Hello theme in conjunction with Elementor Pro does not include the proper landmark regions. In my latest YouTube video, I demonstrate how you can add these essential landmark regions to your website, improving its structure for users who rely on screen readers.
I encourage you to watch the video and learn how to improve the accessibility of your Elementor websites. Together, we can create inclusive web designs that adopt a user-centred approach. Also, learn to test your websites with a screen reader to make sure it is accessible. Don’t always rely on online accessibility tools to do the job for you.
Thanks for reading! I hope this article has been helpful. If you have any questions, please feel free to leave a comment below.