Making websites accessible to users with disabilities is not only the right thing to do, but also a legal requirement. Accessibility errors can prevent users with visual, auditory, motor, or cognitive impairments from being able to fully use and understand your website.
However, identifying and resolving these issues doesn't have to be an overwhelming task. By following some key guidelines and best practices, you can ensure your site provides an inclusive experience for all users, regardless of their abilities. In this guide, we'll walk through common accessibility pitfalls and provide practical steps to fix them, helping you create a web presence that is truly open to everyone.
Please note: ETSU web pages must pass accessibility check to be published, exceptions don't count as problems that need to be resolved for the page to pass. When you run page or final check is run, exceptions are listed in a separate tab.
Examples of common accessibility errors, how to fix them, and why they occur:
-
in Subtitle
The Error Message:
<h2 class="hero__subtitle"> </h2>
How to fix:
When you have the page checked out, go to Properties rather than Edit. Scroll down in the properties of the page until you find the subtitle area filled in with “ ” and clear that out and save the change. If there is not a " " seen in the subtitle - there maybe a hidden space. Place your cursor in the cell and backspace and/or delete.
Or if empty space:
Why this happens:
An old error that was not resolved and is now detected by the accessibility checker.
-
Empty Heading Tags
The Error Message:
<h2 xmlns:ouc="https://omniupdate.com/XSL/Variables"> </h2>
How to fix:
Use the show blocks button in your toolbar when editing a page. You can see if there are empty headings on your page that can be deleted. This causes a common accessibility error. Here’s a screenshot of the blocks showing the empty tags:
If you are having difficulty deleting the Empty Heading Tags: Put your curser on the offending area and in the toolbar to the left of styles you will see Heading 2, 3,4,5,or 6. Click on the dropdown and select Paragraph. You should then be able to delete the extra space.
Why this happens:
This happens when you leave the block style tool on a Heading and hit return to start a new paragraph. It is set to a heading rather than a paragraph on the new line, and is left blank. Then you create more text and content below it without realizing what it is set to.
-
Frames must have an accessible name
The Error Message:
<iframe xmlns:ouc="https://omniupdate.com/XSL/Variables" style="border: 0px #ffffff none;" src="https://rss.app/embed/v1/carousel/_lIaBPa4Bc5HVqN7r" name="myiFrame" width="100%" height="400" frameborder="1" marginwidth="0px" marginheight="0px" scrolling="no" allowfullscreen="allowfullscreen">
or
<iframe src="https://www.youtube.com/embed/bO8uC6mz83s?&autoplay=1&loop=1&mute=1&controls=0&modestbranding=1" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
How to fix:
Edit the page and scroll to the iframe component. Click near the bottom and select the pencil. the Component will will open to edit and will have a field for you to add a title.
Why this happens:
With the new accessibility checker that Modern Campus has implemented it has found this error. We have corrected the error by adding the Title field to the iframe and YouTube components. In the future when adding these components you will have to add a title - it is not optional.
-
Heading levels should only increase by one
The Error Message:
<h4><span style="font-size: 100%;">Text will be here</span> <!-- BIO, can have links. --></h4>
How to fix:
Use the show blocks button in your toolbar when editing a page. You will see where the htag is skipped, Heading levels must go in order starting with H2 down through heading levels down your page. This causes a common accessibility error. Here’s a screenshot of the blocks showing the empty tags:
Why this happens:
The proper use of headings (H1 [the page heading is a H1], H2, H3, etc.) structures content in a way that is intuitive for all users to navigate and comprehend. Skipping heading levels breaks this hierarchical outline and creates confusion.
When publishing a page:
The Accessibility checker will automatically run when you click on publish. If the accessibility flags an error you need to fix that error before you will be allowed to publish.
Do not click "RUN ALL CHECKS."
W3C Validation may be skipped and does not require fixing.
