Core How-Tos

Check page info and accessibility

DevTools+ by URLflows has two tools under Inspect for checking a page as a whole: Page info reads its tags, structure and speed, and Accessibility check tests it against WCAG. Both run on your computer; nothing is sent anywhere.

Read a page with Page info

  1. Open the page, click the DevTools+ icon in the toolbar and click Page info.
  2. It reads the page straight away and shows the results in groups.
  3. Press the refresh button (Check again) after the page changes, or the copy button (Copy as Markdown) to paste everything into a ticket or a doc.

Everything is read from the page that's already loaded; nothing is fetched again.

What Page info shows

  • Page: the title and description with their lengths, language, canonical, robots, viewport (or "Not set (not mobile friendly)"), charset, theme color, a web app manifest, and whether a service worker controls the page.
  • Share preview: the card a chat app would show from the Open Graph and Twitter tags, and which og: tags are missing.
  • Headings: the count at each level and the outline, with a note when there's no h1 or more than one.
  • Speed: Server response, First paint, Largest paint and Layout shift, each rated Good, Needs work or Poor; DOM ready, Loaded, the number of requests and bytes over the network, the protocol, and the JS heap.
  • Content: links (and how many go to other sites or are nofollow), images (without alt, lazy, much larger than shown), scripts, stylesheets, forms, frames, the number of elements and how deep they go, landmarks, and JSON-LD structured data types.
  • Built with: the frameworks, libraries and services it recognizes, such as React, Next.js, Vue, Angular, Svelte, jQuery, Tailwind CSS, WordPress, Shopify, Google Analytics and Sentry, with versions where the page exposes them.

Run an accessibility check

  1. Open the page in the state you want to test (a menu open, a form filled in), then click Accessibility check in the toolbar panel.
  2. Press Check this page. It checks the page against WCAG with axe-core 4.10, on this computer.
  3. The summary counts the issues and the elements they're on, with how many are critical, serious, moderate and minor. If there are none, it says No violations found and how many rules passed.
  4. Press Check again after you fix something.

Work through the issues

  • Each issue shows its impact, what's wrong and how many elements have it. Open it to read the description and the WCAG success criterion and level it falls under.
  • How to fix it opens axe-core's explanation of the rule in a new tab.
  • Each element is listed by its selector with what needs to change. Press Show to scroll the page to it and outline it for a moment.
  • Copy report copies the issues and elements as Markdown. Save JSON saves the full result, including the checks that need a person to look (contrast over images, for example).

Automated checks find about a third of the problems. Try the page with the keyboard and a screen reader too, and use Emulate for vision deficiencies, contrast and reduced motion. Content inside frames isn't checked.

Pages it can't read

Chrome keeps its own pages and the Chrome Web Store off limits to every extension, so neither tool runs there. A page that was open before you installed DevTools+ may need a reload first.

Related guides

Next, read Inspect an element and copy a container, Pick colors, measure and switch page modes or Emulate devices, networks and preferences.