Here are some tips to making libguides WCAG compliant.
Images
ALT TEXT
Think about if you're on the phone with someone and how you would describe images!
- Image for fun or decoration
- use the alt-text provided in the libguide image editor
- provide BRIEF description of image
- use context if it's important: "Photo of" "illustration of", "diagram of" etc ... although "image of" is never used
- use "" to indicate null attribute and the screen reader will ignore it
- *if you're adding alt text in the source code, use alt = “”
- Infographics or images with lots of content
- leave alt-text blank
- INSTEAD, include visible text commentary that covers all the infographic content
- OR include full-content screen-readable alt-text added in the source code
- Code: <div class="sr-only"> replace this text with full content </div>
Responsive Size
- It's best to use a smaller image, less than 1200 pixels wide (as a maximum) - easier to load on devices
- reduce size in another program - making it smaller within libguides doesn't actually reduce size
- For height and width, use %, not pixels. That makes the image responsive for mobile devices
- Example: If you want the image to take up half of your box, use 50% width and height
Colors
- Font and background color should be pretty high contrast. (In fact, as of June 2020, the GHC web developer said the default Libguides blue with the white font does not meet the newly-released standards.)
- GHC blue is 002B7F
- GHC orange is E87511
- White on GHC blue is the absolute best option, orange on blue acceptable, white on orange not good, blue on orange not good
Fonts
- The fonts should be able to be zoomed in by 200% without adaptive technology. I think most standard fonts do this, but double check if you use the funky stuff. 8-)
Audio / Video
- Provide an alternative for equivalent information
- If you have an audio-only clip (like a podcast) there should be a visible full-text transcription
- If you have a video-only clip there should be an audio track or a screen-readable full text transcription (either coded or visible)
- If you have an audio/video clip (like most of our content) there should be captioning or a transcript
- Responsive size for Embedded Video
- YouTube embed code is not responsive. We've added some custom code to the admin side, and to make a youtube video responsive you need to put a "wrapper" around the YouTube code which will go out and "grab" that admin code we added.
- How to add the code:
- Copy your code in YouTube and paste it in the embed code are for the libguide box
- In FRONT of that code, paste:
<div class="youtube-container" style="max-width:560px;"> <div class="youtube-responsive-container">
-
AFTER the Youtube embed code, paste: </div> </div>
