Library: Best practices for accessibility: Libguides

Content styling

Don't use color as a way to convey meaning or importance. Color blind users and screen readers may not pick up on the differences.
Don't mix font types. Stick to the default.
Avoid changing font size. If you need headers within a text box, use Heading 3 and Heading 4 in the rich text editor.
Do not underline text that is not a hyperlink. It causes confusion.
In general, do not center text in your boxes. Left-justified is easier to read.

Copying and pasting

Be careful when you copy text from another source and paste it into a rich text box. It often has hidden code which will junk up your box. Better to use the paste as plain text button or use the paste from Word function if that's where you got your text.

Headings

Use rich text Headings as indicators for sections and sub-sections in your guide. This not only provides heirarchical organization and formatting but also makes it easy for screen readers to scan and jump to different content areas.

The first heading in a floating box is <h2>. Since the box title isn't there. <h1> and <h2> are disabled, but you can insert them by editing the html.

Youtube

If you are embedding a video from Youtube, edit the widget to make it accessible.

<div class="resp-container">

title="Youtube embedded video introduction to searching"></iframe> </div>

A couple notes

Don't use the Google Scholar widget. Prefer a link.

If you are adding a book from the catalog, do not use cover art from Amazon. If there is no Syndetics image, upload a cover image to the storage guide and link to it as "other."

Documents: As of right now, 3/2019, document URLs are set to _Blank. I can't figure out how to get them to open in the same window, so, upload the document. View Source on the page to see the URL of the uploaded document, and add it to your box as a link rather than a file. That link will open in the same window and not make the accessibility checker mad.

Images

All images must have an ALT tag for screen readers. Put the tag in when you insert the image.

If you want to check an image that has already been inserted, in edit mode, highlight the image and then click the image properties box.

If an image is purely decorative, you can tell the screen reader to skip it by putting in an empty ALT tag. The code looks like this:

ALT=" "

But you can simply put a space in the alternative text box in image properties.

A full explanation of the uses of the ALT attribute can be found at WebAIM.

Links

Links should open in the same window. That is the system default. If for some reason it is opening in a different tab, check the code and delete target="blank"

<a href="https://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>

If you insert a link that is an asset (not as rich text), or a database, make sure the option to display description is checked:

Make sure linked text makes sense out of context. Do not use "click HERE." If a screen reader is skipping from link to link, "here" will not be helpful.

Bad: Click here to see our Research and Citing guide.

Good: Check out our Research and Citing guide.

Note that 2 links going to different places on the same page can't have the same link text. For example you can't have 2 links that say "video transcript." Instead use the title of each video in the link to differentiate: "Introduction to Galileo transcript" and "Finding a cited article transcript."