Skip to Main Content

Research guides: Best practices for design & accessibility

Alt-text for images

All images on your LibGuides need to contain alternative text (alt text) to ensure that users with screen readers can engage with them. Exception: If the alt text duplicates information you are already providing via text on the page, the image is "decorative" and you can use the null tag, which is  two quotation marks with no space between them (alt text = "") 

Adding images and alt text to LibGuides

  • Click Add/Reorder and select Rich Text 
  • From the Rich Text editor, select the Image icon from the ribbon at the top of the screen (it looks like a mountain landscape) 
  • Click on Browse Server
  • To use an image that is already in your Image bank, click the Image (landscape) icon under the image you want to use
  • Enter your alt text in the space provided

Image properties screen in LibGuides highlighting the space provided for Alternative Text.

Tips for writing alt text

  • Consider removing images that are purely decorative and serve no educational or communications purpose
  • If you must include a decorative image on your guide, use the null tag ("")
  • Keep alt text concise (no more than 125 characters if possible) because a user has to listen to it - too wordy and it can be overwhelming 
  • Do not include "image of" or "photo of," etc.
  • Highlight what matters for the context. Harvard University provides an excellent example of this on their Digital Accessibility page - scroll down to Example of Alt Text with Various Contexts
  • Use punctuation in your alt-text (e.g., make sure to put a period at the end of your sentences) - punctuation helps screen readers pace.
  • Infographics require longer descriptions - see the NYU LibGuide on Accessibility for guidance on infographics

Alt text for specific types of images

  • Icons: Alt text for icons should be equivalent to the information intended by the icon, such as "Open access"
  • Images as links: If the image is being used to link to another page (e.g., the link is embedded directly into the image) the alt text should describe what will happen when it is clicked rather than the contents of the image. For example, if you are using a question mark to link to a "Ask Us" page, the alt text should be "Ask us" rather than "Question mark." 
  • Books from the catalog book covers: Alt text should read Cover art or Book cover and should have a period at the end. The title of the book is not required because that information is provided elsewhere in the asset. You can also use the null tag ("") since the book cover does not include new information.

Alt text for screenshots

  • If you have marked-up screenshots in your guides to explain how to use an online service or system be aware that the text or arrows you add to that image won’t be available to a screen reader
  • The best practice is to write out the information or directions in the body text of your guide, not just on an image, so it is accessible to everyone
  • Having directions in your body text makes writing the alt-text for that image and keeping to the 140 characters much easier

Video & title frames

Videos embedded in LibGuides need the following attributes to be accessible:

  • closed captions and/or transcript 
  • a title, if using the embed code

If you embed a video, each FRAME and IFRAME element needs a title attribute. Without it, screen readers read out the file name, which can be meaningless. This is not always provided in the embed code, so please add a descriptive title.

Example: 

Screenshot of adding a youtube video to libguide with red box around title of video in the embed code.

 

This box is copied verbatim with permission from the LibGuides Accessibility Best Practices Guide created by Samantha McClellan at Sacramento State University.

Captions: Audio & video

Add videos using the Media/Widget asset tool

This will allow you to embed content from YouTube or other sources that you can reuse across multiple guides and update more easily using the Asset bank.

  • Click Add/Reorder 
  • Select Media/Widget
  • Give the video a name
  • Copy the embed code from the source and paste it into the box provided - for videos from YouTube, the code can be found by clicking Share and selecting Embed

All videos added to your LibGuides should be captioned

  • When possible, they should also include a transcript
  • Dal Libraries' YouTube video tutorials are all captioned accurately and include transcripts
  • When including non-Dal videos, ensure that they are captioned and that the captions are accurate
  • If you embed videos, the transcript will not be available from the media widget viewer. Include a link to the video directly and add a description for that link that indicates to the user that captions, transcripts, audio description, etc. can be found at the link (see example video on Finding Print Books in Novanet below)  

YouTube vs. Panopto

Can your students access YouTube?

  • Most Dal Libraries' online tutorials are on YouTube
  • Depending on where they live, some international distance students may have trouble accessing videos on YouTube
  • Videos can be created in Panopto or uploaded to Panopto so that students can access them in Brightspace
  • When linking to Brightspace videos from a LibGuide, use a Link asset instead of Media/Widget

Fonts

  • We have used custom CSS to increase the default font size in LibGuides - please do not adjust the default font size.
  • Use bold to emphasize text rather than italics
  • Do not use coloured text to convey meaning. Users with low vision or visual disabilities can miss important context this way.
  • Keep fonts consistent - do not adjust the default font style

Colours

Colour combinations between text and background are important elements in the accessibility of your LibGuide. Colour is particularly important when thinking of users with low vision or visual, cognitive, learning, or neurological disabilities.

  • The default tab and box colours have been checked for contrast and accessibility - please do not adjust these colours
  • Use high-contrast colour combinations for text and background - a safe choice is black text on white background, like you see here
  • Avoid using red/green or blue/yellow combinations as they can be problematic for users who are colour blind
  • Avoid using colour to convey meaning, an action, or a response; instead, use a symbol, pattern, or some other means to signify importance
  • Colour contrast in the background, text, and images must meet the WCAG 2.1 Colour Contrast Ratios - you can check your colour contrast ratios using the WebAIM Contrast Checker tool

Headings

Please use Headings rather than simply bolding or enlarging your text! Heading are important when organizing your content on a page. They improve readability, are helpful for screen readers and improve search engine optimization. In LibGuides, headings are already marked in the html code. The page name and titles are the H1 headings. H2 headings correspond with box names. H3-6 headings are what you are able to assign in the LibGuide rich text editor.

To add Rich Text to a box on your guide
  • Click Add/Reorder
  • Select Rich Text
To add a heading
  • Open the dropdown menu set to Normal
  • Select Heading 3 - Heading 6, depending on which heading you want to use

LibGuides rich text editor. The "Normal" dropdown menu is open, displaying options for Normal, Heading 3, Heading 4, Heading 5, and Heading 6

 

This is an example of Heading 3

Followed by some normal text

This is an example of Heading 4

Followed by some normal text

This is an example of Heading 5

Followed by some normal text

This is an example of Heading 6

Followed by some normal text

Resource descriptions

Links or other items that you add to your LibGuides should include brief descriptions. This helps users understand what they are clicking on and why they may want to click on it. Describing the items you are recommending keeps your guide from becoming decontextualized lists of resources that isolate the research tools from the research process (Hicks, 2015).

  • Take the time to write a short, meaningful descriptions of resources
  • Ensure that the description appears below the resource, rather than as a rollover description (this is the default - do not adjust!)
  • If a default database description is too long or not meaningful to your users, you can change it on your guide!
    • Add a Database to your guide
    • Click the dropdown to the right of the Database and select Edit
    • Scroll down to find a Custom Description box
    • Enter a custom description - this will appear on your guide only

Contextual links

Ensure all links on your guide are contextual

  • The display text for a link should let the user know where the link will take them.
  • The text should be informative enough that a user would still know what the link was even if there were no context around it 
  • Best practice is to create a Link asset rather than adding a link via Rich Text, where is where we are more likely to see non-contextual links

Examples of non-contextual (bad) and contextual (good) links:

Why does this matter?

  • "Here" or "Click here" tells users nothing about where that link will take them
  • Contextual links tells users and screen readers exactly where the link goes

 

Broken links

No broken links

  • Broken links negatively impact user experience and decrease your LibGuide's credibilty
  • Check your links regularly using the Link Checker tool
    • From the top of the screen, click the Tools dropdown
    • Select Link Checker
    • Filter by Owner to see a report of your broken links
    • Double-check that they are actually broken - LibGuides sometimes interprets proxied links as broken

LibGuides Help Centre resources

Acknowledgements

This page was closely adapted with permission from Iris Bierlein and Lauren Kohoe's NYU LibGuides Accessibility guide. The Video & title frames box is copied with permission from Samantha McClellan's LibGuides Accessibility: Best Practices guide at Sacramento State University.