Accessibility checks | Pinegrow Web Editor

Scan the rendered page with the axe accessibility engine, review confirmed problems and items that need a person’s judgement, and fix them with guided fixes or AI Assistant.

Requires Pinegrow 10

Accessibility checks test your page the way it renders, with its styles and layout applied, and help you fix what they find in the page source. Pinegrow runs the axe accessibility engine inside the page views of your page and lists confirmed problems together with items that need a person to judge.

Accessibility checks are new in Pinegrow 10 and are available in Pinegrow Desktop and Pinegrow Online.

Automated checks are a first pass. They find many common problems, but they cannot prove that a page is accessible or that it meets WCAG. Always follow up with keyboard testing, screen reader testing and human review.

Start a check

Open a page, then do one of the following:

Choose Page › Check accessibility… to check the whole page.
Right-click an element and choose Check accessibility… to check only that element and its content.
In the command palette, run Check accessibility on page or Check accessibility on selected element.
In the Page Health window, click Open full accessibility scan….

The Pinegrow Page menu is open. Below Get free stock photos from Unsplash it lists Check accessibility..., followed by Spell check page..., Spell check language, Check page health... and Check for broken links.... — Choose Page › Check accessibility… to scan the current page.

The Accessibility Check window opens and the scan starts right away. While it runs, the window shows which page and view is being scanned.

Choose the scope and options

To scan again with different settings, change them and click Scan accessibility. The refresh icon next to Accessibility findings repeats the scan.

The Accessibility Check window with Options expanded: Rules set to WCAG 2.2 level AA, Minimum impact set to All impacts, and Include needs-review findings and Scan all views both checked. Below, Check scope is Page with a Scan accessibility button. The findings summary reads 3 confirmed, 3 need review, followed by rows for button.icon-btn Button name, img Image alt and input#email Label, all Critical and Confirmed, and div.seal Color contrast, Serious. — The Accessibility Check window: rules and filters under Options, the scope and Scan accessibility button, and the findings.

Check scope sets what is scanned:

Selected elements: the elements selected on the page.
Page: the current page.
All open pages: every page you have open. Each finding shows the name of its page.

Expand Options to change the rules and filters:

Rules: WCAG 2.2 level AA (the default) checks the WCAG 2.0, 2.1 and 2.2 level A and AA rules. WCAG 2.2 AA + best practices adds axe's best-practice rules, which are recommendations rather than WCAG requirements.
Minimum impact: show all findings, or only Moderate and higher, Serious and critical, or Critical only. The filter applies to confirmed problems. Items that need review stay in the list.
Include needs-review findings: also list checks where axe cannot decide on its own and a person has to confirm the result. On by default.
Scan all views: scan every page view of the page, for example when you show the page at several widths side by side. When this is off, only the active page view is scanned. On by default.

A problem can appear at one width and not at another. When the same problem is found in several page views, Pinegrow lists it once and shows all the views where it occurs.

Read the findings

The summary at the top counts confirmed problems and items that need review. Each row shows the Element, the Issue (the axe rule) and the Severity: Critical, Serious, Moderate or Minor, marked Confirmed or Review. Hover over an issue to see a short explanation.

Click the arrow next to an issue to open its details: what failed, the rule ID, the page views where it was found, and a Rule guidance link to the rule's documentation. Click the element name to select that element on the page.

The Image alt finding for an img element is expanded. It explains that the element has no alt attribute, aria-label, aria-labelledby or title, and shows Rule: image-alt, View: SM (1264px), a Rule guidance link and a Guided fix button. On the page, the hero photo of a coastal villa is selected. — Expand a finding to see what failed. Click the element name to select it on the page.

Findings for content that exists only when the page runs, such as elements added by a script, say that no direct source fix is available.

Fix problems with a guided fix

Many common problems have a Guided fix button in their details. It opens a dialog that explains the change and asks for what Pinegrow cannot know, such as a description or a label.

Open the finding's details and click Guided fix.
Fill in the fields.
Click Apply fix.

Pinegrow changes the page source, shows Accessibility fix applied. Use Undo to revert it. and scans again, so fixed findings disappear from the list.

Guided fixes are available for problems such as missing alternative text, controls and links without a name, form fields without a label, a missing page title or language, frame titles, autocomplete values, table header scope, heading order, list items outside a list, duplicate IDs, invalid ARIA attributes and values, a missing page heading or skip link, missing caption tracks for video and audio, and page zoom that is blocked in the viewport settings.

Describe an image

For an image without alternative text, the dialog asks for Alternative text. If the image is purely decorative, check This image is decorative instead, and Pinegrow adds an empty alt attribute so assistive technology skips it.

To get a suggestion, open the menu next to the Alternative text label and choose Generate alt text. This uses AI Assistant. Check that the suggestion describes the image and its purpose, click Apply, then click Apply fix.

The Set alternative text dialog for the image-alt rule, with an Alt text window on top. The window shows a thumbnail of the coastal photo, the note Check that the text describes this image and its purpose, then Apply, the suggestion Sunset over a coastal villa and rugged cliffs along Portugal's south coast, a checked Use surrounding content option, and Apply, Regenerate and Cancel buttons. — The guided fix for a missing image description. Generate alt text suggests a description; check it, then apply it.

Name a control or label a field

For a button or link without a name, enter the Accessible name and choose How to add the name. Add visible text puts the name inside the element. Set aria-label adds an aria-label attribute, which gives an icon-only button a name without changing its design. Visible text is preferred when it fits the design.

The Set an accessible name dialog for the button-name rule. Accessible name is Search, How to add the name is Set aria-label, with Cancel and Apply fix buttons. — For an icon-only button, enter a name and choose how to add it. Set aria-label names the button without changing the design.

For a form field without a label, the guided fix adds a visible label element linked to the field.

Fix problems with AI Assistant

When AI Assistant is active, each finding has an Ask AI to fix this finding button, and Fix selected with AI sends all checked findings. The AI receives the rule, the failure details and the rendered HTML, inspects the page and edits the source. It is instructed to verify needs-review findings before changing anything, and to explain instead of editing when the problem cannot be fixed in the source.

Findings are sent in batches of up to 10 per page, with a maximum of 50 findings and 5 AI tasks at a time. When the AI tasks finish, Pinegrow scans again. Review the AI's changes before you keep them. See Review AI changes.

Review what automation cannot decide

Findings marked Review need your judgement. For example, axe often cannot work out the background color of text placed over a photo or a gradient, so it cannot calculate the contrast. Check these items yourself, or hand them to AI Assistant.

The findings summary reads 0 confirmed, 3 need review. Two Color contrast rows for div.seal and div.image-caption are marked Serious and Review. The expanded one says the element's background color could not be determined due to a pseudo element. A Fix selected with AI button is above the list. — After the fixes, only items that need a person's judgement remain, such as text contrast over an image.

Then test the page yourself: use it with the keyboard only, listen to it with a screen reader, and have a person review the content and interactions.

Fixes are normal page edits. Undo them like any other edit, and save the page with File › Save or Cmd/Ctrl+S.

Limits and messages

Results are out of date. Run the check to refresh them. The page, its CSS or its page views changed after the scan. Guided fixes and AI fixes are available only on current results, so run the scan again.
The scan finished with partial results. A scan stops at safety limits: 25 pages, 100 page views, 100 selected elements, 500 findings or about two minutes. The notice lists the limit that was reached. Narrow the scope and scan again.
No rendered views could be scanned. The page views could not be loaded. Refresh the page and scan again.
Content inside iframe elements is not scanned. The results include a note when a page contains frames. Check that content separately.
Activate the AI assistant to use Fix with AI. The AI fix buttons need an active AI Assistant.

Accessibility checks and Page Health

Page Health checks the HTML itself: element nesting, document essentials such as the title and language, duplicate IDs, and references from labels, ARIA attributes and links to IDs that do not exist. Accessibility checks test the rendered page against axe's accessibility rules, in each page view. Use both: they find different problems.