About this Page
About this Page:
This page lists common content manager issues that Omeka users will find on their accessibility reports in Siteimprove. Each issue has an explanation with instructions and a video tutorial on how to fix the issue. If you have any questions about this page of the guide, please email jkflemin@iu.edu.
Accessibility Issues in Siteimprove
Empty Heading
Explanation
This means that a page contains one or more "empty" headings (heading tags with no text content). Headings help to break up content and make it easier for visitors to scan a page for information. They need to be set up correctly so that visitors using screen readers can use them in this way. A heading is considered "empty" if there is no text for a screen reader to relay to the user. Image headings are considered empty if no text alternative is available.
Fix the Issue
Video Tutorial
Instructions with Screenshots
Click on the hyperlinked, "Empty heading" in your Siteimprove dashboard. This will bring you to the exact place where the issue is in your Omeka S instance or Omeka site.
On the left side of the screen, click on the "view your code examples" to see Siteimrpove's suggestion for fixing this issue in the HTML code. You can also click, "View HTML" to see the exact place where you need to input the new code in your Omeka S instance or Omeka Classic exhibit.
Log in to the Omeka S instance or Omeka Classic exhibit with the empty heading issue. Then, find the page where the issue appears. Once you get to that page, click on the HTML source icon. Find the code for the empty heading and delete it. Hit okay and make sure to hit save.
Make sure to re-run the check in Siteimprove to make sure the issue has been fixed.
Inline Frame Missing Text Alternative
Explanation
Every inline frame (iframe) should have a text alternative that summarizes its content or purpose. Inline frame (frames) are used to insert or embed content from other parts of the web, and often link to audio or video players, image slide shows, maps, 3D viewers, etc.
A title that summarizes the visual content will help screen reader users to understand the iframe's purpose on the page. Alt text for frames should include a functional description of what is being embedded along with a content description. For example:
- "This is an audio recording of...[description or title of object]"
- "This is a Google slideshow of...[description or title of object]"
Fix the Issue
Video Tutorial
Instructions with Screenshots
To fix this issue, click on the hyperlinked text in Siteimprove, "Inline Frame Missing Text Alternative". That will bring you to a new page in Siteimprove where you'll be able to see exactly where the issue is. If you look at the left side of the screen, you'll see that Siteimprove provides an example of how to fix this issue. In the screenshot below, you will see that the iframe needs a title attribute or aria-label. We recommend going with a title attribute.
In this example, you would then go to the edit page for Miniature Torah, where you would see the "Item Type Metadata" tab an input for the 3rd model. If you click on the HTML source (icon <>), you can edit the iframe tag directly (see screenshot below).
You can then add a title attribute and copy and paste from the metadata:
Link Missing Text Alternative
Explanation
Links should always have a text alternative. The link text can be inserted into the HTML-it does not need to be visible to pass this check.
The text alternative should describe the link's purpose or what visitors can expect to find after they click it.
Fix the Issue
Video Tutorial
Instructions with Screenshots:
To fix this issue, you'll want to click on the hyperlinked words, "link missing a text alternative" in the list of issues in Siteimprove.
Clicking on this link will bring you to a new page with a list of times that this issue appeared on your Omeka site. Choose one of the hyperlinks and Siteimprove will show you exactly where this issue appears on your site. Siteimprove will highlight the issue with a red box (see screenshot below).
Since this issue appears in an Omeka S instance, you can fix this issue by adding alt-text to the linked image. Go to the Omeka S instance and login. You can then find the specific image by searching for it by title in the item search box.
Once you get to the item you're looking for you'll want to click the "edit item" box in the upper right hand corner of the screen.
From there, you'll want to click the
Image missing text alternative
Explanation
**This issue can only be fixed in Omeka S instances. If you have this issue and you have an Omeka Classic exhibition, the developer will work on fixing this issue**
All non-decorative images must have a text alternative (alt-text). Alt text is used to describe images to people who are unable to see them. This includes people who use screen readers to access the web. The alt text should describe the image within the context of the page-letting visitors know what the image means and why it was included.
Fix the Issue
Video Tutorial
Instructions with Screenshots
Go to your Siteimprove dashboard and click the hyperlinked words, "Image missing text alternative". This will bring you to a new page where all of the flagged issues for your Omeka will be. Click on one of the hyperlinked issues and Siteimprove will show you exactly where the missing alt text appears in your Omeka S instance and/or Omeka Classic exhibition.
In this example, the image appears in a text box. This means that the alt text will need to be added in the HTML code. You can click the HTML view in Siteimprove to see exactly where the code needs to be changed. Siteimprove will also show you how to fix the code when you choose "code examples" on the left side of the screen.
Open a new browser tab and log in to the Omeka S instance or Omeka Classic where the issue occurs. Then find the specific page with the issue. In this example, since the image appears in an HTML box, you need to click on the image and choose the HTML source code icon to see all of the HTML code for this text box.
When you click the source code icon, find the code for the image.
Once you find the code for your image, enter the suggested alt text code with your alt text.
Make sure to hit okay and save in Omeka S. Then go back to your Siteimprove dashboard and re-run the check on the issue. If the issue disappears from your list, then it is resolved.