Each bookmarklet puts a colored border, or overlay, around what it highlights (landmarks, headings, etc). In the upper right-hand corner of the overlay, there is a label. When you hover over a label, a tooltip will pop up with additional information. The table below explains what the content of the label and tooltip will be for each bookmarklet.
Accessible name is the name communicated to assistive technologies. It can be computed using many different HTML and ARIA attributes, text content, and mixed content.
Working with Overlays
- The outlined area (e.g., a heading outline with label 'h2') is referred to as an overlay. It has the same geometry as the element it outlines.
- Hovering over the label of an overlay (the solid-color rectangle in the top-right corner) will display a tooltip with information on the underlying element's type, label, text content or accessible name, as detailed above.
- You can move an overlay with mouse drag-and-drop using its label as the drag handle. After moving an overlay, double clicking its label will move the overlay back to its original position.
- The last overlay that was clicked or moved has the highest z-index of all overlays. Thus if the label of one overlay is partially obscured by the label of another, clicking the partially obscured label will expose the entire label.
- In some cases, one overlay may completely obscure another, hiding even the label of the other overlay. We plan to address this issue by adding page-level information that indicates how many overlays of each type were found on the page.
Report a Bug? Want to Contribute?
This open source project welcomes all interested collaborators and contributions. If you have a bug or a feature suggestion, please create an issue in GitHub. If you want to contribute a code fix or new feature, feel free to fork the bookmarket repository in GitHub and submit a pull request.