Skip to Main Content

Omeka Content Manager Accessibility Guidelines

This LibGuide is designed to be utilized by Omeka (both Omeka Classic and Omeka S) content managers at IU Libraries. Currently, the LibGuide has information on accessibility measures. However, the guide will be expanded to include user guidance on creatin

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. 

Screenshot of empty heading example in Siteimprove

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. 

Screenshot of Siteimprove suggested HTML code for Empty Headings

Screenshot of HTML code of Omeka page with empty heading issue

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.

Screenshot of source code for empty heading example

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. 

Screenshot of Siteimprove HTML code

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). 

Screenshot of the Item Type Metadata page in Omeka Classic

You can then add a title attribute and copy and paste from the metadata:

Screenshot of Source Code in Omeka Classic

 

 

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.

Screenshot of list of issues in Siteimprove with an arrow to link missing a text alternative

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).

Screenshot of highlighted issue in Siteimprove

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.

Screenshot of Omeka S backend with arrow pointing to 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.

Screenshot of Omeka S backend with arrow pointing to edit item button

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.

Screenshot of flagged issue in Siteimprove for image missing alt text

 

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.

Screenshot of HTML code for image missing alt text in Siteimprove

Screenshot of code example for image missing alt text in Siteimprove

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.

Screenshot of Omeka S HTML box with arrow pointing to the source code

When you click the source code icon, find the code for the image.

screenshot of HTML code for image example

Once you find the code for your image, enter the suggested alt text code with your alt text.

Screenshot of HTML code in Omeka S with arrow pointing to 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.

 

 

Getting Started with Siteimprove