Get a library card
```
It has four problems that automated checks can find: the logo has no `alt`, the email field has no label (the “Email” paragraph isn’t associated with it), the hint text is light gray on white, and the submit button holds only a hidden icon.
## Run axe-core in a Playwright test
*AxeTests.cs · Deque.AxeCore.Playwright 4.14.0*
```
using Deque.AxeCore.Commons;
using Deque.AxeCore.Playwright;
using Microsoft.Playwright.NUnit;
namespace A11yTests;
public class AxeTests : PageTest
{
[Test]
public async Task SignupPageHasNoAxeViolations()
{
// In your suite this is your app's URL; here it is a local file
await Page.GotoAsync(new Uri(Path.Combine(AppContext.BaseDirectory, "signup.html")).AbsoluteUri);
AxeResult results = await Page.RunAxe();
foreach (AxeResultItem violation in results.Violations)
{
TestContext.Out.WriteLine($"{violation.Id} ({violation.Impact}): {violation.Help}");
foreach (AxeResultNode node in violation.Nodes)
{
TestContext.Out.WriteLine($" {node.Target}");
}
}
Assert.That(results.Violations, Is.Empty);
}
}
```
Running `dotnet test` fails the test, and it prints:
*Test output · axe-core 4.14*
```
button-name (critical): Buttons must have discernible text
button
color-contrast (serious): Elements must meet minimum color contrast ratio thresholds
.hint
image-alt (critical): Images must have alternative text
img
label (critical): Form elements must have labels
input[type="email"]
```
- `PageTest` comes from Microsoft.Playwright.NUnit and gives each test a `Page` to drive.
- `RunAxe` works on a `Page` or on a `Locator`, for part of a page. `AxeRunOptions` limits the run to tags such as `wcag2aa` or switches rules off ([Deque.AxeCore.Playwright README](https://github.com/dequelabs/axe-core-nuget/blob/develop/packages/playwright/README.md)).
- The package version follows axe-core: 4.14.x runs axe-core 4.14. It targets .NET Standard 2.1 and is MIT-licensed, and it depends on `Deque.AxeCore.Commons`, which is licensed MPL-2.0 ([NuGet](https://www.nuget.org/packages/Deque.AxeCore.Playwright/4.14.0), [Commons on NuGet](https://www.nuget.org/packages/Deque.AxeCore.Commons/4.14.0)).
## Check the same page with onehtml
The onehtml checker reads HTML, not a live page. `Page.ContentAsync()` gives it the DOM as the browser holds it, after any script has run:
*OneHtmlTests.cs · onehtml 1.0.0*
```
using Microsoft.Playwright.NUnit;
using RecursiveAI.OneHtml;
using RecursiveAI.OneHtml.Accessibility.Validation;
using RecursiveAI.OneHtml.Accessibility.Validation.Catalogue;
namespace A11yTests;
public class OneHtmlTests : PageTest
{
[Test]
public async Task SignupPageMeetsWcag22AA()
{
await Page.GotoAsync(new Uri(Path.Combine(AppContext.BaseDirectory, "signup.html")).AbsoluteUri);
// The DOM as the browser has it now, after any script ran
Document doc = Document.Parse(await Page.ContentAsync());
CheckReport report = new Checker().Check(doc, new CheckOptions { Profile = ValidationProfile.Wcag22AA });
foreach (RuleResult failure in report.WithOutcome(Outcome.Failed))
{
TestContext.Out.WriteLine($"{failure.RuleId} at {failure.Locator}: {failure.Message}");
}
TestContext.Out.WriteLine($"Needs review: {report.Count(Outcome.NeedsReview)}, needs render: {report.Count(Outcome.NeedsRender)}");
// SARIF 2.1.0 for code scanning
File.WriteAllText("signup.sarif", report.ToSarifJson(new ExportOptions { Url = "signup.html", Indented = true }));
Assert.That(report.Count(Outcome.Failed), Is.Zero);
}
}
```
*Test output · onehtml 1.0.0*
```
button-name at button: The button has no accessible name.
color-contrast at form > p:nth-of-type(2): The text has a contrast ratio of 2.84:1; 4.50:1 is needed.
image-alt at img: The image has no accessible name.
label at input[name="email"]: The form field has no accessible name.
Needs review: 6, needs render: 3
```
- **The same four failures,** each with a CSS locator that is unique in the page and a message. The contrast ratio is computed from the cascade here, because nothing in the page can move the text off its plain background.
- **Nothing runs inside the page.** The check happens in your test process, on the serialized DOM, so it can’t interfere with the app under test.
- **Profiles** select rules for a standard: `Wcag20AA`, `Wcag21AA`, `Wcag22AA`, or `All`, which adds best practices. A profile selects rules; it isn’t a statement about legal compliance.
- **Undecided results are labeled, not guessed.** `NeedsReview` means a person has to judge, for example whether the title describes the page. `NeedsRender` means the rule needs layout. Here all three are `target-size`, which needs the size of each control and its neighbors. The next section supplies that.
- **`signup.sarif`** is SARIF 2.1.0, ready for GitHub code scanning or any SARIF viewer. Its line numbers refer to the DOM Playwright serialized, not to your source file. `report.ToAxeJson()` gives axe-compatible JSON if your tooling already reads axe results. [SARIF export](https://recursiveai.org/onehtml/docs/sarif/) and [Results](https://recursiveai.org/onehtml/docs/results/) describe both.
## Add Chrome’s layout with a DOMSnapshot
Rules such as target size need the boxes the browser laid out. Playwright can open a Chrome DevTools Protocol session on Chromium ([BrowserContext.NewCDPSessionAsync](https://playwright.dev/dotnet/docs/api/class-browsercontext): “CDP sessions are only supported on Chromium-based browsers”), and the protocol’s [`DOMSnapshot.captureSnapshot`](https://chromedevtools.github.io/devtools-protocol/tot/DOMSnapshot/) returns every node’s layout. onehtml maps that snapshot onto its parse of the same DOM as rendered facts:
*RenderedFactsTests.cs · onehtml 1.0.0 · Chromium*
```
using System.Text.Json;
using Microsoft.Playwright;
using Microsoft.Playwright.NUnit;
using RecursiveAI.OneHtml;
using RecursiveAI.OneHtml.Accessibility.Rendered;
using RecursiveAI.OneHtml.Accessibility.Validation;
using RecursiveAI.OneHtml.Accessibility.Validation.Catalogue;
namespace A11yTests;
public class RenderedFactsTests : PageTest
{
// Computed styles Chrome adds to each layout box in the snapshot
private static readonly string[] Styles =
{ "display", "visibility", "position", "float", "overflow-x", "overflow-y", "border-top-style", "border-top-width" };
[Test]
public async Task SignupPageMeetsWcag22AAWithLayout()
{
await Page.SetViewportSizeAsync(1280, 800);
await Page.GotoAsync(new Uri(Path.Combine(AppContext.BaseDirectory, "signup.html")).AbsoluteUri);
// Serialize the DOM and capture Chrome's layout of that same DOM (Chromium only: CDP)
Document doc = Document.Parse(await Page.ContentAsync());
ICDPSession cdp = await Page.Context.NewCDPSessionAsync(Page);
JsonElement? capture = await cdp.SendAsync("DOMSnapshot.captureSnapshot", new Dictionary