Kiểm tra khả năng truy cập API

Kiểm tra URL hoặc HTML theo WCAG 2.2 A / AA bằng axe-core: thiếu alt ảnh, nhãn form, tên link và nút, lỗi ARIA, thứ tự heading và nhiều lỗi khác.

Tham số

Ví dụ

curl -X POST "https://apibox.io.vn/v1/a11y-check" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"html":"<!doctype html><html><head><title>Shop</title></head><body><img src=\"logo.png\"><a href=\"/cart\"></a><form><input type=\"email\" placeholder=\"Email\"><button></button></form></body></html>"}'

const res = await fetch('https://apibox.io.vn/v1/a11y-check', {
  method: 'POST',
  headers: {
    Authorization: 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    "html": "<!doctype html><html><head><title>Shop</title></head><body><img src=\"logo.png\"><a href=\"/cart\"></a><form><input type=\"email\" placeholder=\"Email\"><button></button></form></body></html>"
  }),
});
const data = await res.json();
console.log(data);

import requests

res = requests.post(
    "https://apibox.io.vn/v1/a11y-check",
    headers={"Authorization": "Bearer YOUR_API_KEY"},
    json={"html": "<!doctype html><html><head><title>Shop</title></head><body><img src=\"logo.png\"><a href=\"/cart\"></a><form><input type=\"email\" placeholder=\"Email\"><button></button></form></body></html>"},
    timeout=30,
)
print(res.json())

<?php
$ch = curl_init('https://apibox.io.vn/v1/a11y-check');
curl_setopt_array($ch, [
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_CUSTOMREQUEST => 'POST',
    CURLOPT_HTTPHEADER => ['Authorization: Bearer YOUR_API_KEY', 'Content-Type: application/json'],
    CURLOPT_POSTFIELDS => '{"html":"<!doctype html><html><head><title>Shop</title></head><body><img src=\\"logo.png\\"><a href=\\"/cart\\"></a><form><input type=\\"email\\" placeholder=\\"Email\\"><button></button></form></body></html>"}',
]);
$response = curl_exec($ch);
print_r(json_decode($response, true));

Kết quả trả về

{
  "source": "html",
  "url": null,
  "level": "AA",
  "score": 75,
  "issues": 8,
  "by_impact": {
    "critical": 2,
    "serious": 2,
    "moderate": 4,
    "minor": 0
  },
  "rules": {
    "checked": 83,
    "failed": 7,
    "needs_review": 1,
    "not_checked": 8
  },
  "violations": [
    {
      "rule": "button-name",
      "impact": "critical",
      "level": "A",
      "wcag": [
        "4.1.2"
      ],
      "best_practice": false,
      "help": "Buttons must have discernible text",
      "description": "Ensure buttons have discernible text",
      "help_url": "https://dequeuniversity.com/rules/axe/4.14/button-name?application=axeAPI",
      "count": 1,
      "nodes": [
        {
          "target": "button",
          "html": "<button></button>",
          "failure": "Element does not have inner text that is visible to screen readers | aria-label attribute does not exist or is empty | …"
        }
      ]
    },
    {
      "rule": "image-alt",
      "impact": "critical",
      "level": "A",
      "wcag": [
        "1.1.1"
      ],
      "best_practice": false,
      "help": "Images must have alternative text",
      "description": "Ensure <img> elements have alternative text or a role of none or presentation",
      "help_url": "https://dequeuniversity.com/rules/axe/4.14/image-alt?application=axeAPI",
      "count": 1,
      "nodes": [
        {
          "target": "img",
          "html": "<img src=\"logo.png\">",
          "failure": "Element does not have an alt attribute | …"
        }
      ]
    },
    "…"
  ],
  "needs_review": [
    {
      "rule": "bypass",
      "impact": "serious",
      "help": "Page must have means to bypass repeated blocks",
      "wcag": [
        "2.4.1"
      ],
      "…": "…"
    }
  ],
  "not_checked": [
    {
      "rule": "avoid-inline-spacing",
      "wcag": [
        "1.4.12"
      ],
      "reason": "needs the CSS object model"
    },
    {
      "rule": "color-contrast",
      "wcag": [
        "1.4.3"
      ],
      "reason": "needs rendered colours and layout"
    },
    "…"
  ],
  "engine": "axe-core 4.14.0 (static DOM, no layout)",
  "ms": 34,
  "note": "Static check without a browser: colour contrast, target size, focus order and anything that depends on CSS layout or scripts are not tested. …"
}

Ứng dụng

• Kiểm tra trang trước khi ra mắt theo Đạo luật Tiếp cận châu Âu hoặc yêu cầu của cơ quan nhà nước
• Thêm bước kiểm tra khả năng truy cập vào CI cho site tĩnh và template
• Tìm ảnh thiếu alt và ô nhập liệu không có nhãn trên toàn site
• Lập danh sách lỗi WCAG cho báo cáo đánh giá gửi khách hàng

Hỏi đáp

API liên quan