Everyone — regardless of ability — should be able to use and interact with all digital content produced by the university. When web pages have accessibility errors, people with visual, auditory, motor, or cognitive impairments cannot fully use and understand your web page.
Providing accessible content to everyone at ETSU is an ethical imperative, a university policy requirement, and a federal legal obligation.
Learn More about ETSU's Approach to Accessibility
As of fall 2024, all ETSU web pages must pass an accessibility check. Errors must be resolved or the page cannot be published.
Identifying and resolving these issues doesn't have to be an overwhelming task. By following guidelines and best practices, you can ensure your site provides an inclusive experience for all users, regardless of their abilities.
Web editors have the proper access to fix any of the accessibility errors that arise on their page.
Examples of common accessibility errors, what they mean, and how to fix them:
-
"Headings Should Not Be Empty"
The Error Message:
<h2> </h2> (or h3, h4, etc.)
What This Means:
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.
How to Fix It:
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 show blocks button in the toolbar:
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.
Also, check the 2nd Row Content area of the webpage for an empty heading, even if the area doesn't look like it has content. Example below shows empty heading selected:
-
"Headings Should Not Be Empty" - Subtitle
The Error Message:
<h2 class="hero__subtitle"> </h2> or <h2 class="hero__subtitle"> </h2>
What This Means:
There is either a blank space OR a non-breaking space (&nsbp;) in your page's sub-header.
How to Fix It:
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 there's an empty space:
-
"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>
Why This Happens:
Think of headings like a book with a table of contents. 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.
How to Fix It:
Use the show blocks button in your toolbar when editing a page. This will make it easier to find the offending heading level error.
Heading levels must go in order starting with H2 down through heading levels down your page. As you can see from this screenshot, an H3 is above an H2, thus causing the accessibility error.
With your show blocks turned on, scroll through your page and make sure all your headings are in proper heading-level order.
-
"YouTube Component must have an accessible title/name"
The Error Message:
<iframe src="https://www.youtube.com/embed/bO8uC6mz83s?&autoplay=1&loop=1&mute=1&controls=0&modestbranding=1" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
Why This Happens:
The YouTube component does not have a title. We have corrected this error by adding a Title field to the YouTube component, but some pages that already had the component on them must be fixed manually.
How to Fix It:
Edit the page and scroll to the YouTube 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.
-
"Frames must have an accessible title/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>
Why This Happens:
The YouTube component does not have a title. We have corrected this error by adding a Title field to the YouTube component, but some pages that already had the component on them must be fixed manually.
How to Fix It:
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.
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.
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.