Skip to Main Content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.

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


Rich text box ponting out how to change from normal text to heading 3Use 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">

<iframe width="490" height="245class="resp-iframe" src="//www.youtube.com/embed/qEMA30WUfVA" frameborder="0" allowfullscreen 

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.   Image properties 

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

Athens Campus Library: 706.355.5020 | Elbert County: 706.213.2116  | Walton County: 706.552.0909 | Greene County: 706.453.0536
email: Library Webmaster

adobe logo This site links to pdf documents. Click this link to get Adobe reader