How to Install and Use Accessibility Bookmarklets?
A bookmarklet is a link that contains Javascript that you can run on any web page. It is a bookmark that runs javascript on the current page instead of taking you to a new page.
Bookmarklets help web developers and designers see the entire perspective on website, it helps view hidden accessibility information in web pages.
For Example:
- Bookmarklets shows the hidden accessibility features on web pages (like ARIA landmarks, roles, labels and descriptions and alternative text for non-text objects) more visible.
- Shows whether HTML markup (like lists, headings, label elements, and appropriate landmark roles) is used with proper semantics for accessibility.
- Flags elements or regions on web pages where information that could improve
They are also useful for manual inspection of web pages for functional accessibility features. Bookmarks are especially useful if a web page is very long and hard to observe.
One way of making bookmarklet is writing javascript, let us see the steps involved:
- Write javascript code that you want in a bookmarklet (using the console)
- Put javascript: in front of the code
- Wrap everything in an IIFE
But, The most common and easy way of installing a bookmarklet is to drag and drop the bookmarklet link into your browser’s bookmarks or favourite toolbar. The shortcut for toggling the display of the bookmarks toolbar in Chrome, Firefox and Safari is Shift + Ctrl/Cmd + B.
There are alternative, browser-specific installation methods such as copying the link location of the bookmarklet link and pasting it into the Location field of a bookmark that you create using your browser’s Bookmark Manager or Show All Bookmarks feature.
Let us find out about this in more detail:
Installation and Usage
- Choose the item for testing Eg: Headings, Forms, Images etc.
- Drag the bookmarklet on to your browser bookmarks bar.
- Each bookmarklet link must be installed separately, but you can successively install any combination of them to suit your needs.
- Now open the page to be tested on the browser.
- Click the item to be tested from your bookmarks. Eg If you want to check the heading structure of the page activate the heading bookmarklet.
Let’s discuss about the labels in brief:
- Landmarks: Highlights all ARIA landmarks, including HTML5 tags that are interpreted as landmarks
- Headings: Highlights all H1 through H6 elements on a page
- List: Highlights every ordered list, unordered list, and definition list on a given page, along with how many list items exist for each list
- Images : Highlights the types of images on a page, along with their alt text
- Forms: Highlights form-related elements and provides information on their associated labelling techniques, grouping labels and ARIA roles
How to Use Accessibility Bookmarklets?
Once installed, these bookmarklets can interact with most web pages.
- To activate, click a bookmarklet in your bookmarks or favorites bar
- To de-activate, simply click it again or refresh your page
- It will also de-activate when you resize your window or navigate to another page
You can run multiple bookmarklets on the same page at the same time.
Some web pages have Content Security Policies that do not allow web browsers to run inline scripts. Because bookmarklets are functionally equivalent to inline scripts (when activated, they are inserted into the DOM of the web page), the browser will prevent any and all bookmarklets from running on such pages.
Supported Browsers
The drag-and-drop installation works on modern desktop browsers including:
- Chrome, Firefox, Opera, and Internet Explorer 9+ on Windows 7, 8.x, and 10
- Chrome, Firefox, Safari, and Opera on OS X
- Bookmarklets are also supported on iOS and Android mobile devices
Installation using Various Browsers
As we had learned earlier that Bookmarklets works on most of the browsers, let us discuss in detail about the Installation steps on each of these browsers.
Chrome
To show the Bookmarks Bar in Chrome, press Ctrl + Shift + B.
To Install bookmarklet on Chrome using the keyboard:
- Press Ctrl + Shift + O to bring up Bookmark Manager.
- Select the “Organize” button menu.
- Select “Add New Bookmark”.
- Name the bookmark
- Copy and paste the JavaScript URL
- Press Save
Edge
To show the Favorites Bar in Edge (Chromium), press Ctrl + Shift + B.
To Install Bookmarklet on Edge (Chromium) using the keyboard:
- Press Ctrl + Shift + O to bring up Bookmark Manager.
- Select the “Organize” button menu.
- Select “Add New Bookmark”.
- Name the bookmark
- Copy and paste the JavaScript URL
- Press Save
Firefox
To show the Bookmarks Bar in Firefox, Press (Alt + V), select Toolbars, then “Bookmarks Toolbar”.
To Install Bookmarklet on Firefox using the keyboard:
- Right click on the link Ctrl + Shift + F10
- Select “Bookmark This Link”
Internet Explorer
To show the Favorites Bar in Internet Explorer, Press Alt + V, select Toolbars, then “Favorites Bar”.
To Install ANDI on Internet Explorer using the keyboard:
- Right click the link Ctrl + Shift + F10
- Select “Add to favorites bar”
Safari
To show the Favorites Bar in Safari, Press Command + Shift + B.
Unfortunately, Safari does not offer a simple keyboard accessible alternative to set a JavaScript favelet link as a favorite.
Accessibility bookmarklets are convenient tools for swiftly testing specific aspects of web accessibility. While they are widely used, developers and accessibility professionals often employ various methods to assess webpage accessibility. Moreover, there are comprehensive solutions like browser extensions that scan entire pages, providing detailed accessibility reports.
Related Articles
- How to Perform Accessibility Testing on iOS Apps
- How to Perform Accessibility Testing on Android Apps
- How to Perform Web Accessibility Testing
Discover our curated collection of tools tailored for designers, developers, and testers to enhance web accessibility.
