Image Accessibility Bookmarklet
This tool audits your page for missing Alt Text.
Example of the tool in use.
How to use the Image Accessibility Bookmarklet
- Drag the above blue button on to the bookmarks bar of your preferred browser.
- Navigate to the page you would like to evaluate, either the published version or in Author (but see note below).
- Click the bookmark while you are on that page.
- A new frame will appear to the right of your page, listing all the images on the page, and highlighting any that lack Alt Text or have just a space (" ").
- Click any of those highlighted images to jump to that part of your Web page.
Run This Tool On a Sitemap
To make a quick audit of your site, build a temporary page in author and load a Sitemap of your pages. The tool will show counts in red (images with no Alt Text) and orange (images with a space). But beware, any pages checked 'Hide in Sitemap' in their Page Properties will not be listed.
Additional notes for pages loaded in Author,
- The frame should show any images that are on your page. If none are listed, make sure the "cf#/" is removed from the page's URL in your browser's location bar.
- e.g. https://ubcms-author.buffalo.edu/content/www/cmshelp/help/stewardship/legal-considerations.html
NOT https://ubcms-author.buffalo.edu/cf#/content/www/cmshelp/help/stewardship/legal-considerations.html
- e.g. https://ubcms-author.buffalo.edu/content/www/cmshelp/help/stewardship/legal-considerations.html
- The tool will flag images that are not shown on your published page, such as the placeholder icons loaded for unmodified components, unused parts of Flex Modules, and the gray bars for the Content Optimization Container. To avoid this, switch to Preview Mode.
- The tool will flag images that are part of teasers (e.g. in Lists) regardless of Alt Text associated with the original images on the linked pages. There is no workaround.
- The tool will flag images in the Photo Gallery because these images have no Alt Text. There is no workaround.