HTML Tagging for improved Accessibility
Why are these HTML tags important?
By adding some simple tagging to the backend of each OER:
- Print/PDF users will be able to access the weblink/URL of external resources easily
- Users and assistive tech will be able to recognize links that take them away from the original book/window, or into specialized software
- Unnecessary images will be removed from print/PDF versions, reducing file size/number of pages
To complete these improvements to the OER you’re working on, you will need to identify the following elements in the page you’re working on:
- Links that point to external websites (sites that are not other pages/sections of this book)
- Links that open in a new tab or window (Pressbooks default is to open in the same window/tab)
- Links that open a different file type, such as PDF, PPT, Word, RTF
- Any images that are purely decorative and do not convey meaning or context on the page
Video Demonstration
Watch Enhanced HTML: Pressbooks on Screencast-o-matic (8 mins)
Video source: “Enhanced HTML: Pressbooks” by Jen Booth is licensed under CC BY-NC 4.0, except where otherwise noted.
Process to add Accessibility tagging in Pressbooks
| Step |
Description | Time stamp |
Editor | Code snippet/Sample Text |
| 1 | Preview the page to identify the links that need to be displayed to offline users, links that open in a new tab or new software, and any decorative images on your page. | 1:42 | Visual | |
| 2 | Switch to text view and add the external class to all links that need to be displayed in PDF version | 3:16 | Text | <a class=”external” href=”http://library.georgiancollege.ca/”> |
| 3 | Add [New tab] to any links that open in a new tab. | 4:26 | Visual | [New tab] Need to make a link open in a new tab? use <a class=”_blank” href=”URL here”> tagging |
| 4 | Add [PDF] or other file type to any links that open in a different program – *adjust as needed | 4:51 | Visual | [PDF], [Word], [PPT] etc |
| 5 | Add the div class to any images that do not convey meaning. Ask for help if you’re not sure! | 5:40 | Visual | <div class=”hide-print-img“><img src=….></div> |
| 6 | Save & preview in your browser | Browser |
To tag or not to tag – Attribution Statements
- Don’t apply class=”external” to attribution statements for decorative images – these won’t be shown in the PDF, so attribution doesn’t make sense
- Do apply class=”external” to the first link in an image attribution statement for images that are not tagged to be hidden in PDF (images that convey meaning)
- Do apply class=”external” to the first link in an end of page or activity source attribution statement
- Do apply class=”external” to video “Watch” statements. The embedded video will be not be shown in the PDF, but the Watch statement will.
Suggested tagging for attribution statements – examples
- Except where otherwise noted, this chapter is adapted from “Connect with your Instructor” In University 101: Study, Strategize and Succeed by Megan Robertson, Kwantlen Polytechnic University Learning Centres licensed under CC BY-SA 4.0.
- “Connect With Your Instructor” by Rawia Inaim is licensed under CC BY-SA .
- Activity Source: “Acting Professional in an Online Environment” In Learning to Learn Online by Bailey Csabai; Bilal Sohail; Jykee Pavo; Kristen Swiatoschik; Maryam Odeh; and Nitin Ramesh, licensed under CC BY-SA 4.0.
Tag the first link (highlighted) that gives the most direct link to the page level source of the content, if possible. In order to keep the print PDF size down and avoid redundancy, we don’t need to tag the second link to the larger OER source, just at the page level (which will also give access to the larger OER, the creator’s profile, etc). The CC license link is a common and easy to find page online, and is available from the first link that’s provided.
The Finished Product – Web version
Decorative images vs. those that convey meaning
What does it look like in PDF?
- View the finished product in PDF format [PDF]
If you look closely, you’ll see:
- The links we marked as external are written out after they occur, so print users can access them
- The video has been removed and replaced with a link (I also marked this class=”external”)
- The decorative image does not display
Resources
- Clippings – Firefox Plugin – download/install if desired
Attribution & References
Except where otherwise noted, “HTML Tagging for improved Accessibility by Jen Booth” is licensed under CC BY-NC 4.0.
References
BC Campus OER Production Team. (2021, June 29). Custom Styles (CSS). BCcampus Open Education Publishing Style Guide. https://opentextbc.ca/publishingstyleguide/chapter/custom-styles/
BC Campus OER Production Team. (2021, June 29). Standard practices and workaround. BCcampus Open Education Publishing Style Guide.https://opentextbc.ca/publishingstyleguide/chapter/standard-practices-and-workarounds/
