Skip to Main Content

General

Anything not mentioned hasn't been tested. If you do want to use something that isn't mentioned, please email Magen Bednar first!

Rich Text / HTML

This section will focus on using the LibGuides rich text editor. You will want to refer to the Digital Accessibility guide for general guidelines on creating accessible content. You can also refer to the Typography Reference page of this guide to see what various headings and styles will look like. Some styles have been modified and will look different on the guide than they do in the rich text editor.

Headings

  1. Set headings using the Paragraph Format dropdown menu.
  2. Do not change the formatting of the headings - don't make them larger or smaller, italicize them, or anything like that. It is important that these remain consistent.
  3. Follow general guidelines for creating accessible headings.

Styles

  1. Use Italic Title only when creating a level 2 heading for a floating box.
  2. Never use: Subtitle, Big, or Typewriter. Subtitle creates a level 3 heading, but subtitles are not headings. Subtitle also causes color contrast errors. Big and Typewriter are deprecated.
  3. Use Special Container only for formatting. It will not provide any information to screen reader users.
  4. Marker currently does not do anything.
  5. Small should not make text too small, but use it with care, as the text will be harder to read.
  6. Use the following only for their stated purpose, but do not expect them to provide any information to screen reader users.
    1. Computer Code
    2. Keyboard Phrase
    3. Sample Text
    4. Variable
    5. Cited Work
    6. Inline Quotation
  7. Deleted Text and Inserted Text will inform screen reader users when they start and end. Only use them for their stated purpose.
  8. RTL and LTR indicate whether the text in question is written in a language that should be read from right to left or from left to right (default is LTR). Applying these when writing content in another language can make it easier to edit the HTML to indicate the correct language. If you are writing content in another language, refer to Identifying Languages in the Accessibility Reference LibGuide.

Font and Formatting

  1. When changing font formatting, follow general accessibility guidelines for accessible text formatting.
  2. The font size in the rich text editor will appear small, but the actual page will apply a larger font size, so you will probably not need to change font size.
  3. If you want to use strikethrough, be aware that the LibGuides template has been modified so that strikethrough will be announced to screen readers.
  4. If you have formatted text that you want to revert to standard, you can press the "Remove Format" button next to the strikethrough button. This will remove most styles from the Styles menu. It will also remove font changes, font size changes, font color changes, bold, italics, and strikethrough. It will not change semantic structure like headings, lists, or links.

Lists, Quotes, and Links

  1. Use the Numbered List and Bulleted List buttons when creating lists.
  2. Use Block Quote only for the actual content of a quote. The attribution should not be included within the blockquote element.
  3. When creating a link in the rich text editor, keep in mind that the link will open in the same tab by default. If you want it to open in a new tab, you will have to set the target manually. These links will also not be checked by the LibGuides link checker tool. Remember to check these manually occasionally.
  4. Refer to general accessibility guidelines for naming links.
  5. You can set an added link as a link to a URL, a same-page link (link to anchor in the text), a phone number, or an email address.
  6. Use the Anchor button (flag icon) if you want to link to a section of a page that is within a box. Boxes already have a box link, so an anchor is not needed if you want to link to a box. If you want to link to an anchor you created, you can change the link type from URL to Link to anchor in the text.

Images

  1. Refer to the Images section of the Digital Accessibility guide for more information about using images and adding alt text. 
  2. To insert an image, place the cursor where you want the image to go and click on the Image button.
  3. In the Image Properties window, you'll need to provide a description of the image in the Alternative Text box. This is called the alt text for your image (highlighted by the blue arrowhead with lines). There are many things to consider when writing alt text. The Digital Accessibility guide has a recommended tutorial that you can reference when writing alt text for different types of images.
  4. If you want the image to fill the whole width of the box, click on the lock icon to unlock the dimensions and then set the width to 100% and leave the height blank (highlighted by the pink arrowhead with squares). 
  5. If your image has a white background or another light color, you can put a border around the image to define it more from the guide. All the images in this guide have borders set to 1 (highlighted by the green arrowhead with circles). 
  6. If you need to add a link to your image, you'll be able to add the URL in the Image Properties window. 
    1. If you add a link to your image, do not leave the alt text blank. The image alt text needs to describe the link so that screen reader users know where it will take them. Do not describe the image itself unless it is adding important information. The Functional Images page in the recommended tutorial (from the Digital Accessibility guide) has more information about using images as links.

Screenshot of the image settings for Rich Text/HTML content as described above.

Tables

  1. Refer to general guidelines for creating accessible tables.
  2. Always set the table headers. In most cases, this will be the first row, but the editor also provides options for the first column and for both the first row and column. If you want to add a more complicated table, you will have to edit the HTML source code directly.
  3. The caption provides text that will be displayed above the table. This can be useful for both sighted users and screen reader users. In most cases, you will at least want to provide the title of the table in the caption.
  4. The summary will only be provided to screen reader users. If there is any important information about the table that blind or low-vision users are unlikely to get, this is a good place to provide that, but keep it relatively short.
  5. Keep the default class. The table styles have been modified for accessibility, so changing the class should not actually change anything.

Link

  1. Refer to general accessibility guidelines for naming links.
  2. Choose whatever you like for window target. If the target is a new window, the template will add an external link icon and screen reader information indicating that that the link opens in a new tab.
  3. Do not use More Info. Put any additional information under Description, instead (highlighted by the orange arrowhead with lines). More Info creates an ambiguous link name (more...) that should not actually be a link at all.
  4. Always set Description Display to Display beneath item title (highlighted by the yellow arrowhead with circles). Providing the description on hover makes it inaccessible for many users.
  5. Do not assign resource icons.
  6. If adding a thumbnail image, leave the alt text blank unless the image is adding important information (highlighted by the red arrowhead with the triangles). Note that perfectly square thumbnail images look best at 40 or 50 width and height. Rectangular thumbnail images look best at 60 width and 30 height.

Screenshot of the link editing box as described in the steps above.

Media / Widget

The accessibility for these is dependent on the accessibility of what you are embedding. Refer to general accessibility guidelines and test any content you want to embed.

  1. The Name is what your Media/Widget will be listed as in LibGuides' Asset list (highlighted by the blue arrowhead with the lines). It will not be read by screen readers on the public side of your research guide. (To make it easier on to find in the asset list, if your media/widget is a video, it is recommended using the title of the video as the name for your media/widget.)
  2. Paste the embed code for the media/widget you want to add to research guide (highlighted by the yellow arrowhead with the circles).
  3. When you embed media into your research guide, make sure you identify it for screen reader users. The easy and effective way to do this is updating the title of the iframe.
    1. Once your embed code is pasted into the box, scroll through the box until you see <iframe ... title="some text">. This will be different depending on the platform generating the embed code. If you are using MyMedia, it will most likely be "Kaltura Player".
    2. The title text should be short and informative. If it already is, you may not need to change anything.
    3. Assuming the title is not both short and sufficiently informative, replace the default text and add in the title of the video or media you are embedding. If the title does not exist at all, you can add one (to keep this simply, you may want to add it immediately after the iframe begins: <iframe title="some text" ... >.
    4. In the example video that is embedded below the screenshot, the new title for the iframe is, "Why Do We Cite Sources Tutorial Video" (highlighted by the red arrowhead with triangles). Note that this text includes both the title of the video and the word video so that screen reader users know exactly what to expect.

Screenshot of the media/widget editing box as described in the steps above.

Why Do We Cite Sources Tutorial Video

This video is an example of an accessible media/widget. It uses captions and provides a text alternative like the transcript text file users can download.

Book from the Catalog

  1. Limit the length of the included description. If the generated text is long, consider shortening it to highlight only key information.
  2. Always set Description Display to Display beneath item title. Providing the description on hover makes it inaccessible for many users.
  3. If including cover art, leave the alt text blank unless the image is adding important information. If the phrase "Cover Art" is generated, always delete this.
  4. Do not assign resource icons.

Generated Descriptions for Books from Catalog

This is an example of an accessible book from the catalog. The descriptions that will be automatically generated for the books most likely need to be shortened. The description for Peer-assisted Learning in Academic Libraries was significantly shortened. 

Orignal description: 

Written specifically for academic librarians and library administrators, this book identifies the myriad benefits of peer-assisted learning, exploring how the implementation of peer-assisted learning benefits information literacy instruction, cocurricular outreach, and reference services.  In this era of accountability--and stretched budgets--in higher education, librarians need to make instructional programming both highly effective and sustainable. Peer-assisted learning is a methodology that has long been accepted in teaching but is relatively new as applied to academic library instruction, outreach, and reference. This book brings together the most innovative applications of peer-assisted learning in these contexts, explaining specific ways to apply peer-assisted learning in a variety of academic library settings for maximum benefit.  This guidebook begins with an extensive literature review of the theoretical underpinnings of peer-assisted learning and the various benefits these programs can provide academic librarians and peer mentors. The bulk of the book's content is organized into three sections that address the subjects of information literacy instruction, cocurricular outreach, and reference services separately. Each section showcases real-world examples of peer-assisted learning at a variety of academic institutions. Through these case studies, readers can fully understand the development, implementation, and assessment of a peer-assisted learning program, and librarians and administrators will see the practical benefits of enriching the experiences of student employees. Practitioners will receive inspiration and guidance through chapters that discuss training activities, identify lessons learned, and explain the implications for further research.  Introduces readers to a well-established and effective practice in higher education and demonstrates how it can be used in library-initiated programs Provides the means to extend library staff resources by incorporating student employees in instruction, outreach, and reference services Supplies practical examples--complete with assessments, administrative justifications and lessons learned--for training and assessing student peer mentors Offers justification for how peer-assisted learning programs provide student employees with rewarding and enriching opportunities that can benefit them academically, personally, and professionally.

Shortened description: 

Written specifically for academic librarians and library administrators, this book identifies the myriad benefits of peer-assisted learning, exploring how the implementation of peer-assisted learning benefits information literacy instruction, cocurricular outreach, and reference services.

Document / File

  1. Much of the accessibility is dependent on whether or not the file itself is accessible. Refer to general accessibility guidelines for documents.
  2. Always specify in the text that this is a link for a file. If the link automatically downloads the file, make sure to specify that as well.
    1. Example of a PDF named Being Awesome that opens in the browser: Being Awesome (PDF)
    2. Example of a Word (docx) file named Being Awesome that automatically downloads: Download Being Awesome (docx)
  3. Always set Description Display to Display beneath item title. Providing the description on hover makes it inaccessible for many users.
  4. Password has not been tested.
  5. Do not assign resource icons.
  6. Refer to the Link section for adding thumbnail images.

Guide List

If you want to link to other LibGuides from your guide, you can add a Guide List. The only option that you won't be able to use is the Guides by Group option.

Note that the link to the guide owner will be removed on the actual page, so you won't be spamming repetitive links if you link to a lot of guides