Universal Reading Order Checker

WHAT IT DOES

Universal Reading Order Checker helps you understand how a page is structured for keyboard navigation and screen reader users. The script analyzes the logical reading order of page content by evaluating the DOM structure, tabindex attributes, and focusable elements. Numbered overlays appear on interactive and content elements, showing the order in which they would be encountered. Elements that appear out of sequence are highlighted, helping you identify non-intuitive tab orders. Keyboard traps are automatically detected, showing where focus can get stuck. The script identifies skip links and ARIA landmarks that aid navigation. Suggestions are provided for improving reading order—proper heading hierarchy, correct tabindex values, and missing landmarks. Focusable elements are highlighted, showing exactly what a keyboard user would be able to interact with.

WHERE IT RUNS

This script runs on every website (matching all URLs), analyzing reading order across the entire web. It works on any page with interactive elements—forms, menus, modals, complex applications, and simple content pages. The script automatically adapts to each page and handles both static and dynamically loaded content.

HOW TO USE

After installing through the BotGentz extension, simply navigate to any webpage. The script automatically analyzes the page's reading order and displays numbered overlays on interactive elements. Use the configuration panel to customize your experience: toggle numbered overlays on or off, show or hide tab order, enable keyboard trap detection, show or hide suggestions, highlight focusable elements, and enable automatic scanning. The panel displays real-time statistics including number of focusable elements, landmarks, keyboard traps detected, and heading issues. Use the "Scan Page" button to manually rescan, or "Clear Overlays" to remove all numbered indicators.

DOM-ORDER ANALYSIS WITH KEYBOARD FOCUS DETECTION

This script implements a comprehensive reading order analysis engine using DOM traversal and focus detection. The engine first identifies all focusable elements using a multi-selector strategy covering all standard interactive elements (a[href], button, input, select, textarea, details, summary, iframe, audio/video controls, contenteditable, and elements with tabindex). The reading order algorithm respects tabindex values—elements with positive tabindex are ordered by their tabindex value, then elements with the same tabindex follow DOM order, and finally elements without tabindex follow DOM order. This accurately matches browser keyboard navigation behavior. Keyboard trap detection scans for elements with tabindex="-1" inside modal containers (role="dialog", role="alertdialog", .modal) that could trap keyboard users. Landmark detection identifies ARIA landmarks and semantic HTML5 elements that provide navigation context. The heading hierarchy check ensures proper heading structure (h1 followed by h2, etc.), a critical factor for screen reader navigation.

THE PANEL

The configuration panel is fully draggable and remembers its position per-site using GM_setValue. It snaps to screen edges when dragged near them, collapses to a compact bubble when minimized, and supports Escape key for quick collapse. All settings—including overlay visibility, tab order display, trap detection, suggestions, highlighting, and automatic scanning—are persisted across sessions.

PLEASE NOTE

This script requires the free BotGentz extension to run. The script runs on all websites and reads page content to analyze reading order. It does not capture, store, or transmit any personal information. All analysis occurs locally in your browser. The script provides suggestions for improving accessibility but does not automatically modify the page. Always test accessibility changes in multiple browsers and screen readers. This tool is designed to help identify potential accessibility issues and is not a substitute for comprehensive accessibility testing.