Bibliopolis Help Center

Americans with Disabilities Act Accessibility in Website Content ( ADA )

Updated on

When entering content into the admin of your website, it is sometimes copied from another source where HTML is inserted without your knowledge. That sometimes results in a user of your website not being able access the content properly. We have added some alerts when saving content in the admin that will help guide you on mistakes made.

Don't worry! Your content is still saved when a message appears. These messages are there to help guide you.

Missing or Empty Alt Tags

An alt tag is an attribute added to an image. It should describe what is happening in that graphic, so blind or impaired users can be read what is on the screen. Without these tags you are leaving your site at a disadvantage.

Alt tags are required to be on an image even if the tag is empty.

<img src="/img/example.jpg" alt="" />
Click to copy

The tag should only be empty if the graphic is purely for decoration. If the image has any information that would be helpful to the user, it should be in the alt tag.

<img src="/img/example.jpg" alt="My cat sitting in the grass with reading glasses" />
Click to copy

Fixing empty alt tags

You can edit the alt tag of an image by right clicking on the image it in the editor and selecting Insert/Edit Image.

Enter the text in the Image Description field under the General tab. Then click Update.

Missing Titles on an iframe

Like an image, an iframe can contain other media that will likely be visual and useful to your user in some way. It should always have a title tag describing it.

<iframe title="A map of my bookstore" src="https://www.google.com/maps/embed"></iframe>
Click to copy

Fixing missing titles

The only way to fix a missing title on an iframe is to edit the HTML. You can do this by clicking the icon that says HTML.

Find the text that looks like <iframe. Now you want to add a space then the text title followed by an equals sign. The text you want to describe the image inside double quotes. It would look something like this.

<iframe title="Map of Bibliopolis offices" style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3149.5557908309893!2d-122.29985799999999!3d37.870682999999985!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80857edcac4f5e79%3A0xd76f5cba3e78a4c2!2sBibliopolis!5e0!3m2!1sen!2sus!4v1396042087102" frameborder="0" width="600" height="450"></iframe>
Click to copy

Sometimes you will have inserted an image inside a link, but you forgot to add an alt tag. Links need to have context to them.

<a href="https://www.examplebooksite.com"><img src="/img/example.jpg" alt="" /></a>
Click to copy

Or you could have pasted some text without realizing there is no text inside the link.

<a href="https://www.examplebooksite.com"></a>
Click to copy

Fixing missing label or text in a hyperlink

The only way to fix a missing title on an iframe is to edit the HTML. You can do this by clicking the icon that says HTML.

- Plain text between the <a></a> tags

<a href="https://www.examplebooksite.com">This is my label</a>
Click to copy

- An image with an alt tag between the <a></a> tags

<a href="https://www.examplebooksite.com"><img src="/img/example.jpg" alt="This is my label" /></a>
Click to copy

- When it is a link with only an icon and the design calls for no text, then adding an aria-label attribute works

<a href="https://www.examplebooksite.com" aria-label="This is my label"><i class="fa fa-icon"></i></a>
Click to copy

Duplicate IDs

An element in your content has a duplicate ID attribute. An ID attribute looks something like this:

<p id="example-id"></p>
Click to copy

Fixing duplicate IDs

A duplicate ID error means that there are two or more elements with the same ID. You must change all the IDs, so that none are the same. If the ID is needed to make something look proper, contact [email protected] for help.

The only way to fix a duplicate ID is to edit the HTML. You can do this by clicking the icon that says HTML.

<h1 id="example-id">Header Text</h1>
<p id="example-id">My paragraph text</p>
Click to copy
<h1 id="example-header">Header Text</h1>
<p id="example-id">My paragraph text</p>
Click to copy

Some helpful info on creating accessible PDFs

Previous Article How do I give a link an image?
Next Article How do I create a catalog?
Still Need Help? Contact Us