Skip to main content

A11yInspect Bookmarklets

Simplify accessibility checks with visual, screen-reader friendly bookmarklets.

Understanding the accessibility of a webpage can be complex. A11yInspect Bookmarklets simplify this process by providing quick, visual insights into accessibility information. These bookmarklets are also designed to be usable with screen readers, ensuring equal access for all.

With A11yInspect Bookmarklets, you can:

  • Identify structural elements such as headings, landmarks, links, images, and lists.
  • Review ARIA attributes, form labels, text spacing, focus order, and target sizes.
  • Simulate user experiences, such as viewing the page in grayscale or navigating by tab order.
  • Validate whether elements are semantically correct, properly labelled, and accessible

Headings Bookmarklet​

The Headings Bookmarklet highlights the heading structure of a webpage, from native HTML headings (<h1> to <h6>) to custom headings defined using role="heading" and aria-level attributes. Maintaining a proper heading hierarchy improves readability, ensures logical navigation, and helps screen reader users understand the content structure effectively.

Accessibility Checks:

  • Identifies and highlights all headings on the page.
  • Displays heading levels to verify hierarchy.
  • Supports validation of semantic structure.

Landmarks / Iframes Bookmarklet​

The Landmarks / Iframes Bookmarklet identifies ARIA landmarks and Iframe elements on a webpage. Landmarks provide structure to a page, improving navigation for users of assistive technologies. Correct use of Iframes ensures meaningful labelling and context.

Accessibility Checks:

  • Identifies HTML tags & ARIA landmark roles, including header, footer, navigation, main, aside, complementary and more for complete page structure coverage.
  • Displays accessible names for each landmark region.
  • Helps you Verifies that regions are properly defined and semantically accurate.
  • Highlights Iframe elements on the page.
  • Confirms Iframe titles are descriptive and meaningful.

Page Title / Language Bookmarklet​

The Page Title / Language Bookmarklet helps users check essential metadata for accessibility. It ensures that pages have appropriate titles and language attributes, which assist screen readers and other assistive technologies in providing correct context and navigation cues.

Accessibility Checks:

  • Detects the page has a <title> element defined.
  • Verifies the presence of the lang attribute on various elements.
  • Helps you validate that the language attribute matches the expected language of the page content.
  • Helps ensure that page metadata provides proper context and supports multilingual accessibility.

The Links Bookmarklet identifies all the links on a webpage and displays their accessible names. This helps ensure that links are descriptive, unique, and provide meaningful contexts for all users, including those relying on screen readers. Clear and accessible link text improves navigation and overall usability.

Accessibility Checks:

  • Identifies all links on the webpage and displays their accessible names.
  • Helps you verify that link text is descriptive and meaningful.
  • Ensures links provide sufficient context when read independently.
  • Confirms that links are unique and distinguishable for assistive technology users.

Images Bookmarklet​

The Images Bookmarklet scans a webpage and highlights all images, displaying details such as their associated accessible names or indicating when it is missing. This helps ensure that images have meaningful descriptions so users relying on screen readers can understand the content and purpose of images.

Accessibility Checks:

  • Identifies all images on the webpage.
  • Displays accessible names associated with each image.
  • Highlights images with missing alt text, indicating an accessibility failure.
  • Highlights images with empty alt text, indicating a decorative image.
  • Helps you verify whether the provided descriptions are appropriate and meaningful.

Hidden / Presentation Bookmarklet​

The Hidden / Presentation bookmarklet identifies and visually highlights elements on a webpage that have attributes commonly associated with hidden or purely presentational content. Proper use of these attributes ensures that assistive technologies can correctly interpret the page content.

Accessibility Checks:

  • Detects elements with role="presentation" and role="none".
  • Detects elements with aria-hidden="true".
  • Detects elements with tabindex="-1".
  • Highlights elements that match these attributes for easy visual inspection.
  • Helps ensure that non-interactive or hidden content does not interfere with screen reader navigation.

Lists Bookmarklet​

The Lists Bookmarklet identifies native and custom approach of list on a webpage and displays their structure. Correctly coded lists ensure that screen reader users and other assistive technologies can understand the hierarchy and relationship between items.

Accessibility Checks:

  • Detects native and custom approach of list on the webpage.
  • Highlights list items and their attributes.
  • Helps you verify whether lists are semantically structured.
  • Ensures that list content is appropriately marked up for accessibility.

ARIA (Accessible Rich Internet Application) Bookmarklet​

The ARIA Bookmarklet identifies ARIA attributes present on a webpage and displays them. Correctly implemented ARIA attributes ensure that dynamic content and custom components are accessible to screen reader users and assistive technologies.

Accessibility Checks:

  • Detects ARIA attributes applied across elements.
  • Highlights roles, states, and properties defined with the ARIA approach.

Forms Bookmarklet​

The Forms Bookmarklet identifies form elements and their associated labels, ensuring they are accessible to all users. Well-labelled and properly structured forms are critical for usability with assistive technologies.

Accessibility Checks:

  • Detects input fields, checkboxes, radio buttons, and other form elements.
  • Displays the association between form fields and their labels.
  • Verifies accessible names, descriptions, and auto-complete attribute values.
  • Highlights ARIA roles and attributes applied to form controls.

Table Bookmarklet​

The Table Bookmarklet helps user visually identify and evaluate tables on a webpage. Properly coded tables are crucial for accessibility, as they allow screen readers and other assistive technologies to interpret and navigate tabular data correctly.

Accessibility Checks:

  • Detects table elements on the webpage.
  • Highlights table elements and their structure for easy inspection.
  • Checks for the presence of (<th>, <tr>, <td>) and other elements.
  • Verifies that tables are semantically structured, supporting row and column relationships.
  • Helps ensure that table content is understandable and navigable for users relying on assistive technologies.
  • Supports evaluation through native, custom, and hybrid approaches for flexible auditing.

Grayscale Bookmarklet​

The Grayscale Bookmarklet renders the entire webpage in grayscale. This simulates how content appears without color, helping to confirm that information is not conveyed solely by color.

Accessibility Checks:

  • Converts all content to a grayscale view.
  • Helps verify that color is not the sole method of communication.
  • Ensures important information is communicated through text or other visual indicators in addition to color.

Text Spacing Bookmarklet​

The Text Spacing Bookmarklet adjusts the spacing between letters, words, and lines of text on a webpage. This helps testers identify whether custom text spacing styles impact readability or layout.

Accessibility Checks:

  • Adjusts letter, word, and line spacing on the page.
  • Ensures that text remains visible and readable when spacing is modified.
  • Helps confirm that content does not overlap, get cut off, or lose clarity with increased spacing.

Forced Focus Bookmarklet​

The Forced Focus Bookmarklet adds a visible outline to each element or section that can receive keyboard focus. This makes it easier to verify which items are focusable and whether they are properly exposed for navigation.

Accessibility Checks:

  • Highlights all focusable elements with visible outlines.
  • Ensures that all interactive elements are accessible through keyboard navigation.
  • Confirms that focus indicators are consistently applied across elements.

Target Size Bookmarklet​

The Target Size Bookmarklet checks the dimensions of interactive elements such as buttons, links, and clickable areas. It visually identifies whether these controls are large enough for comfortable interaction.

Accessibility Checks:

  • Detects all interactive elements on the page.
  • Highlights element sizes with distinct shapes and colors:
    • Green circle – Elements that meet the recommended size of 24x24 pixels or larger.
    • Blue square – Elements smaller than 24x24 pixels.
    • Blue triangle – Elements overlapping with other elements.
  • Helps confirm that clickable targets are appropriately sized and not obstructed.

Tab Order Bookmarklet​

The Tab Order Bookmarklet highlights the sequence of focusable elements as a user navigates with the keyboard. This helps ensure that the tab order is logical and supports efficient navigation.

Accessibility Checks:

  • Displays the tab sequence for all focusable elements.
  • Ensures that navigation follows a meaningful and consistent order.
  • Identifies issues caused by incorrect tab order, hidden elements, or improper tab index values.