As web accessibility becomes increasingly important, at our Design Agency Design Agentur Form und Zeichen in Graz, we are placing a stronger emphasis on fixing accessibility errors on our customer’s websites. A great page builder plugin for WordPress is Elementor. For small Websites, we utilize Elementor most of the time. While Elementor has a great implementation of various accessibility features, we noticed a critical error, that appears when WordPress pages are configured improperly.

In this post, we will explain the “skip to content” error in WordPress Elementor using our client’s website, California Metals.

Moreover, to inspire your web projects, we'd like to inform you that WordPress also supports 3D uploads.

Check your website for the skip to content error

WAVE is a useful plugin available for Chrome, Firefox and Edge. With this tool, we can quickly find critical accessibility errors on the website. When navigating to details, the tool shows that the “skip to content” link is broken.

The reason why the skip to content link is broken, is that two HTML tags from Elementor’s site structure are missing. The missing tag has the id “content”, which the “skip to content” link refers to.

Read the Article about Fixing the skip to content error, if you encountered the same problem.

Loading GLTF models in Elementor

To load a model on a page, we need to use the HTML element of Elementor. On the Three.js examples page, you can find the used script tag by inspecting the website. With a few adoptions, we can use those examples on our Elementor page.

If you're interested in adding 3D models to your website or if you've faced file upload issues, read our blog post on using three.js with Elementor.