diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 2225b7a..f9350f0 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -10,6 +10,10 @@ updates:
       typescript-eslint:
         patterns:
         - "@typescript-eslint/*"
+      playwright:
+        patterns:
+        - "@playwright/*"
+        - "playwright"
 
   - package-ecosystem: "github-actions"
     directory: "/"
diff --git a/package-lock.json b/package-lock.json
index ce70531..e5603d3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "vue": "^3.3.4"
       },
       "devDependencies": {
+        "@axe-core/playwright": "^4.7.3",
         "@fullhuman/postcss-purgecss": "^5.0.0",
         "@playwright/test": "^1.36.1",
         "@testing-library/vue": "^7.0.0",
@@ -27,7 +28,7 @@
         "eslint-plugin-prettier": "^4.2.1",
         "eslint-plugin-vue": "^9.15.1",
         "jsdom": "^22.1.0",
-        "playwright": "^1.35.1",
+        "playwright": "^1.36.1",
         "prettier": "^2.8.8",
         "sass": "^1.63.6",
         "typescript": "^5.1.6",
@@ -49,6 +50,18 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@axe-core/playwright": {
+      "version": "4.7.3",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.7.3.tgz",
+      "integrity": "sha512-v2PRgAyGvop7bamrTpNJtc5b1R7giAPnMzZXrS/VDZBCY5+uwVYtCNgDvBsqp5P1QMZxUMoBN+CERJUTMjFN0A==",
+      "dev": true,
+      "dependencies": {
+        "axe-core": "^4.7.0"
+      },
+      "peerDependencies": {
+        "playwright-core": ">= 1.0.0"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.21.4",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
@@ -2437,18 +2450,6 @@
         "fsevents": "2.3.2"
       }
     },
-    "node_modules/@playwright/test/node_modules/playwright-core": {
-      "version": "1.36.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.36.1.tgz",
-      "integrity": "sha512-7+tmPuMcEW4xeCL9cp9KxmYpQYHKkyjwoXRnoeTowaeNat8PoBMk/HwCYhqkH2fRkshfKEOiVus/IhID2Pg8kg==",
-      "dev": true,
-      "bin": {
-        "playwright-core": "cli.js"
-      },
-      "engines": {
-        "node": ">=16"
-      }
-    },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -3328,6 +3329,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axe-core": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.2.tgz",
+      "integrity": "sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/babel-plugin-polyfill-corejs2": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.3.tgz",
@@ -6175,13 +6185,13 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.35.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.35.1.tgz",
-      "integrity": "sha512-NbwBeGJLu5m7VGM0+xtlmLAH9VUfWwYOhUi/lSEDyGg46r1CA9RWlvoc5yywxR9AzQb0mOCm7bWtOXV7/w43ZA==",
+      "version": "1.36.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.36.1.tgz",
+      "integrity": "sha512-2ZqHpD0U0COKR8bqR3W5IkyIAAM0mT9FgGJB9xWCI1qAUkqLxJskA1ueeQOTH2Qfz3+oxdwwf2EzdOX+RkZmmQ==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
-        "playwright-core": "1.35.1"
+        "playwright-core": "1.36.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -6191,9 +6201,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.35.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.35.1.tgz",
-      "integrity": "sha512-pNXb6CQ7OqmGDRspEjlxE49w+4YtR6a3X6mT1hZXeJHWmsEz7SunmvZeiG/+y1yyMZdHnnn73WKYdtV1er0Xyg==",
+      "version": "1.36.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.36.1.tgz",
+      "integrity": "sha512-7+tmPuMcEW4xeCL9cp9KxmYpQYHKkyjwoXRnoeTowaeNat8PoBMk/HwCYhqkH2fRkshfKEOiVus/IhID2Pg8kg==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
@@ -8190,6 +8200,15 @@
         "@jridgewell/trace-mapping": "^0.3.9"
       }
     },
+    "@axe-core/playwright": {
+      "version": "4.7.3",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.7.3.tgz",
+      "integrity": "sha512-v2PRgAyGvop7bamrTpNJtc5b1R7giAPnMzZXrS/VDZBCY5+uwVYtCNgDvBsqp5P1QMZxUMoBN+CERJUTMjFN0A==",
+      "dev": true,
+      "requires": {
+        "axe-core": "^4.7.0"
+      }
+    },
     "@babel/code-frame": {
       "version": "7.21.4",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
@@ -9784,14 +9803,6 @@
         "@types/node": "*",
         "fsevents": "2.3.2",
         "playwright-core": "1.36.1"
-      },
-      "dependencies": {
-        "playwright-core": {
-          "version": "1.36.1",
-          "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.36.1.tgz",
-          "integrity": "sha512-7+tmPuMcEW4xeCL9cp9KxmYpQYHKkyjwoXRnoeTowaeNat8PoBMk/HwCYhqkH2fRkshfKEOiVus/IhID2Pg8kg==",
-          "dev": true
-        }
       }
     },
     "@popperjs/core": {
@@ -10445,6 +10456,12 @@
       "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
       "dev": true
     },
+    "axe-core": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.2.tgz",
+      "integrity": "sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g==",
+      "dev": true
+    },
     "babel-plugin-polyfill-corejs2": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.3.tgz",
@@ -12542,18 +12559,18 @@
       }
     },
     "playwright": {
-      "version": "1.35.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.35.1.tgz",
-      "integrity": "sha512-NbwBeGJLu5m7VGM0+xtlmLAH9VUfWwYOhUi/lSEDyGg46r1CA9RWlvoc5yywxR9AzQb0mOCm7bWtOXV7/w43ZA==",
+      "version": "1.36.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.36.1.tgz",
+      "integrity": "sha512-2ZqHpD0U0COKR8bqR3W5IkyIAAM0mT9FgGJB9xWCI1qAUkqLxJskA1ueeQOTH2Qfz3+oxdwwf2EzdOX+RkZmmQ==",
       "dev": true,
       "requires": {
-        "playwright-core": "1.35.1"
+        "playwright-core": "1.36.1"
       }
     },
     "playwright-core": {
-      "version": "1.35.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.35.1.tgz",
-      "integrity": "sha512-pNXb6CQ7OqmGDRspEjlxE49w+4YtR6a3X6mT1hZXeJHWmsEz7SunmvZeiG/+y1yyMZdHnnn73WKYdtV1er0Xyg==",
+      "version": "1.36.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.36.1.tgz",
+      "integrity": "sha512-7+tmPuMcEW4xeCL9cp9KxmYpQYHKkyjwoXRnoeTowaeNat8PoBMk/HwCYhqkH2fRkshfKEOiVus/IhID2Pg8kg==",
       "dev": true
     },
     "postcss": {
diff --git a/package.json b/package.json
index 2875900..dc0ee32 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "vue": "^3.3.4"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.7.3",
     "@fullhuman/postcss-purgecss": "^5.0.0",
     "@playwright/test": "^1.36.1",
     "@testing-library/vue": "^7.0.0",
@@ -40,7 +41,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.15.1",
     "jsdom": "^22.1.0",
-    "playwright": "^1.35.1",
+    "playwright": "^1.36.1",
     "prettier": "^2.8.8",
     "sass": "^1.63.6",
     "typescript": "^5.1.6",
diff --git a/src/App.vue b/src/App.vue
index 6dae316..115d920 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,8 @@
 <template>
-  <Hand :hand="hand" @hand-updated="updateHand" />
-  <Solutions :solutions="solutions" @redraw="redraw" />
+  <main>
+    <Hand :hand="hand" @hand-updated="updateHand" />
+    <Solutions :solutions="solutions" @redraw="redraw" />
+  </main>
   <footer class="text-center mt-auto mb-3">
     <small>
       By
diff --git a/src/ReloadPrompt.vue b/src/ReloadPrompt.vue
index 887672d..d38cd1c 100644
--- a/src/ReloadPrompt.vue
+++ b/src/ReloadPrompt.vue
@@ -17,12 +17,14 @@ const { needRefresh, updateServiceWorker } = useRegisterSW({
   <div
     v-if="needRefresh"
     class="toast position-fixed bottom-0 end-0 m-3 rounded show"
-    role="alert"
-    aria-live="assertive"
+    role="dialog"
+    aria-labelledby="toast-title"
+    aria-describedby="toast-description"
+    aria-live="polite"
     aria-atomic="true"
   >
     <div class="toast-header">
-      <strong class="me-auto">Updates available</strong>
+      <strong id="toast-title" class="me-auto">Updates available</strong>
       <button
         type="button"
         class="btn-close"
@@ -31,7 +33,9 @@ const { needRefresh, updateServiceWorker } = useRegisterSW({
       ></button>
     </div>
     <div class="toast-body">
-      <div class="mb-3">Reload to get the latest changes!</div>
+      <div id="toast-description" class="mb-3">
+        Reload to get the latest changes!
+      </div>
       <button
         type="button"
         class="btn btn-primary"
diff --git a/tests/e2e/App.test.ts b/tests/e2e/App.test.ts
index 57ce3c4..4911e8a 100644
--- a/tests/e2e/App.test.ts
+++ b/tests/e2e/App.test.ts
@@ -1,146 +1,191 @@
 import { test, expect } from "@playwright/test";
 
-test("Has title", async ({ page }) => {
-  await page.goto("/");
+import AxeBuilder from "@axe-core/playwright";
 
-  await expect(page).toHaveTitle("24 Solver");
-});
+test.describe("Functionality", () => {
+  test("Has title", async ({ page }) => {
+    await page.goto("/");
 
-test("Renders four random cards", async ({ page }) => {
-  await page.goto("/");
+    await expect(page).toHaveTitle("24 Solver");
+  });
 
-  const titles = await page
-    .getByTestId("card")
-    .getByText(" of ")
-    .allTextContents();
-  expect(titles).toHaveLength(4);
-  expect(new Set(titles).size).toBeGreaterThanOrEqual(2);
+  test("Renders four random cards", async ({ page }) => {
+    await page.goto("/");
 
-  await page.goto("/");
+    const titles = await page
+      .getByTestId("card")
+      .getByText(" of ")
+      .allTextContents();
+    expect(titles).toHaveLength(4);
+    expect(new Set(titles).size).toBeGreaterThanOrEqual(2);
 
-  const newTitles = await page
-    .getByTestId("card")
-    .getByText(" of ")
-    .allTextContents();
-  expect(newTitles).not.toStrictEqual(titles);
-});
+    await page.goto("/");
 
-test("Updates card when asked", async ({ page }) => {
-  await page.goto("/");
-
-  const title = await page
-    .getByTestId("card")
-    .getByText(" of ")
-    .first()
-    .textContent();
-
-  const select = page.getByLabel("Card 1");
-  const currentValue = await select.inputValue();
-  await select.selectOption({ value: `${(Number(currentValue) + 1) % 13}` });
-
-  const newTitle = await page
-    .getByTestId("card")
-    .getByText(" of ")
-    .first()
-    .textContent();
-  expect(newTitle).not.toStrictEqual(title);
-});
+    const newTitles = await page
+      .getByTestId("card")
+      .getByText(" of ")
+      .allTextContents();
+    expect(newTitles).not.toStrictEqual(titles);
+  });
 
-test("Redraws hand when asked", async ({ page }) => {
-  await page.goto("/");
+  test("Updates card when asked", async ({ page }) => {
+    await page.goto("/");
 
-  const titles = await page
-    .getByTestId("card")
-    .getByText(" of ")
-    .allTextContents();
+    const title = await page
+      .getByTestId("card")
+      .getByText(" of ")
+      .first()
+      .textContent();
+
+    const select = page.getByLabel("Card 1");
+    const currentValue = await select.inputValue();
+    await select.selectOption({ value: `${(Number(currentValue) + 1) % 13}` });
+
+    const newTitle = await page
+      .getByTestId("card")
+      .getByText(" of ")
+      .first()
+      .textContent();
+    expect(newTitle).not.toStrictEqual(title);
+  });
+
+  test("Redraws hand when asked", async ({ page }) => {
+    await page.goto("/");
 
-  const button = page.getByRole("button", { name: "Draw again" });
-  await button.click();
+    const titles = await page
+      .getByTestId("card")
+      .getByText(" of ")
+      .allTextContents();
 
-  const newTitles = await page
-    .getByTestId("card")
-    .getByText(" of ")
-    .allTextContents();
-  expect(newTitles).not.toStrictEqual(titles);
-});
+    const button = page.getByRole("button", { name: "Draw again" });
+    await button.click();
 
-test("Displays solutions for the current hand", async ({ page }) => {
-  for (let i = 0; i < 5; i++) {
-    await page.goto("/");
+    const newTitles = await page
+      .getByTestId("card")
+      .getByText(" of ")
+      .allTextContents();
+    expect(newTitles).not.toStrictEqual(titles);
+  });
+
+  test("Displays solutions for the current hand", async ({ page }) => {
+    for (let i = 0; i < 5; i++) {
+      await page.goto("/");
+
+      const button = page.getByRole("button", { name: "Show solutions" });
+      if ((await button.getAttribute("disabled")) === null) {
+        break;
+      }
+    }
 
     const button = page.getByRole("button", { name: "Show solutions" });
-    if ((await button.getAttribute("disabled")) === null) {
-      break;
+    test.fail(
+      (await button.getAttribute("disabled")) !== null,
+      "No solutions after 5 tries"
+    );
+
+    const selects = await page.getByLabel("Card ").all();
+    const values = (
+      await Promise.all(selects.map((select) => select.inputValue()))
+    ).map((value) => Number(value));
+
+    if (values.includes(11) || values.includes(12) || values.includes(13)) {
+      values.push(10);
     }
-  }
-
-  const button = page.getByRole("button", { name: "Show solutions" });
-  test.fail(
-    (await button.getAttribute("disabled")) !== null,
-    "No solutions after 5 tries"
-  );
-
-  const selects = await page.getByLabel("Card ").all();
-  const values = (
-    await Promise.all(selects.map((select) => select.inputValue()))
-  ).map((value) => Number(value));
-
-  if (values.includes(11) || values.includes(12) || values.includes(13)) {
-    values.push(10);
-  }
-  await button.click();
-
-  const solutions = await page.locator("pre").all();
-  const texts = await Promise.all(
-    solutions.map((solution) => solution.innerText())
-  );
-  for (const text of texts) {
-    const numbers = text
-      .split(" ")
-      .map((part) => part.replace(/log_2\((\d+)\)/, "$1"))
-      .map((part) => Number(part))
-      .filter((part) => !Number.isNaN(part));
-
-    for (const number of numbers) {
-      expect(values).toContain(number);
+    await button.click();
+
+    const solutions = await page.locator("pre").all();
+    const texts = await Promise.all(
+      solutions.map((solution) => solution.innerText())
+    );
+    for (const text of texts) {
+      const numbers = text
+        .split(" ")
+        .map((part) => part.replace(/log_2\((\d+)\)/, "$1"))
+        .map((part) => Number(part))
+        .filter((part) => !Number.isNaN(part));
+
+      for (const number of numbers) {
+        expect(values).toContain(number);
+      }
     }
-  }
-});
+  });
 
-test("Updates solutions after hand changes", async ({ page }) => {
-  for (let i = 0; i < 5; i++) {
-    await page.goto("/");
+  test("Updates solutions after hand changes", async ({ page }) => {
+    for (let i = 0; i < 5; i++) {
+      await page.goto("/");
+
+      const button = page.getByRole("button", { name: "Show solutions" });
+      if ((await button.getAttribute("disabled")) === null) {
+        break;
+      }
+    }
 
     const button = page.getByRole("button", { name: "Show solutions" });
-    if ((await button.getAttribute("disabled")) === null) {
-      break;
+    test.fail(
+      (await button.getAttribute("disabled")) !== null,
+      "No solutions after 5 tries"
+    );
+
+    await button.click();
+    const solution = await page.locator("pre").first().textContent();
+
+    for (let i = 0; i < 5; i++) {
+      const redrawButton = page.getByRole("button", { name: "Draw again" });
+      await redrawButton.click();
+
+      const button = page.getByRole("button", { name: "Show solutions" });
+      if ((await button.getAttribute("disabled")) !== null) {
+        continue;
+      }
+      await button.click();
+
+      const newSolution = await page.locator("pre").first().textContent();
+      if (solution !== newSolution) {
+        return;
+      }
     }
-  }
 
-  const button = page.getByRole("button", { name: "Show solutions" });
-  test.fail(
-    (await button.getAttribute("disabled")) !== null,
-    "No solutions after 5 tries"
-  );
+    test.fail(true, "Solutions never changed after 5 redraws");
+  });
+});
+
+test.describe("Accessibility", () => {
+  test("Initial load is accessible", async ({ page }) => {
+    await page.goto("/");
 
-  await button.click();
-  const solution = await page.locator("pre").first().textContent();
+    const { passes, violations } = await new AxeBuilder({ page }).analyze();
 
-  for (let i = 0; i < 5; i++) {
-    const redrawButton = page.getByRole("button", { name: "Draw again" });
-    await redrawButton.click();
+    expect(passes.length).toBeGreaterThan(0);
+    expect(violations.length).toBe(0);
+  });
 
-    const button = page.getByRole("button", { name: "Show solutions" });
-    if ((await button.getAttribute("disabled")) !== null) {
-      continue;
+  test("Solutions are accessible", async ({ page }, { project }) => {
+    test.skip(
+      process.env.CI !== undefined && project.name === "Mobile Safari",
+      "Times out in mobile Safari on CI"
+    );
+
+    await page.goto("/");
+
+    for (let i = 0; i < 5; i++) {
+      await page.goto("/");
+
+      const button = page.getByRole("button", { name: "Show solutions" });
+      if ((await button.getAttribute("disabled")) === null) {
+        break;
+      }
     }
+
+    const button = page.getByRole("button", { name: "Show solutions" });
+    test.fail(
+      (await button.getAttribute("disabled")) !== null,
+      "No solutions after 5 tries"
+    );
     await button.click();
 
-    const newSolution = await page.locator("pre").first().textContent();
-    if (solution !== newSolution) {
-      return;
-    }
-  }
+    const { passes, violations } = await new AxeBuilder({ page }).analyze();
 
-  test.fail(true, "Solutions never changed after 5 redraws");
+    expect(passes.length).toBeGreaterThan(0);
+    expect(violations.length).toBe(0);
+  });
 });