README

目录

• 简介
• 安装
• 用法
• 报告结构
  • 颜色对比错误
  • 标题结构错误
  • 图像可用性错误
  • 链接可用性错误
• 开发
• 贡献者

简介

这是一个评估从内容管理系统提取的HTML字符串的Web可用性测试套件。这并不是一个详尽的可用性检查，而是旨在揭示严重可用性问题，以及提高对可用性的一般认识。

目前，这个项目正在开发中，目标是分析来自Drupal节点的正文文本。然而，这些程序中使用的算法可能对开发更通用的解决方案也很有用。

类别

1. 颜色对比：由于低对比度颜色可能引起可读性问题，此程序将遍历HTML中的所有元素，比较其文本颜色与背景颜色，以查看其对比度是否符合WCAG 2.0标准。目前，它只会分析内联样式，并会忽略由于复杂性而包含的 'opacity' 属性。

2. 标题结构：为了确保屏幕阅读器或其他设备能够像开发者预期的那样正确解析页面上的信息，我们必须确保它们也能正确解析。由于标题结构（从<h1>到<h6>）在构建页面层次结构中起着关键作用，因此此程序将检查是否存在跳过的或放置不正确的标题。此外，由于建议每个页面只存在一个<h1>，默认情况下将开启对多个<h1>的检查，但可以关闭。

3. 图像可用性：我们必须假设使用屏幕阅读器的人无法看到页面上的任何内容（只能听到），这包括图片。因此，对于内容中不可或缺的图片，也必须在它的 'alt' 属性中包含描述。此程序将对没有alt属性的<img>标记引发错误，并将对具有空alt属性的<img>标记引发警告（因为图片可能仅仅是为了美观而存在）。

4. 链接可访问性：这检查两个事项：链接是否无效/未优化，以及链接文本是否清晰且描述性。特别是，链接文本对于屏幕阅读器也很重要，因为通常有一个选项可以列出特定页面上的所有链接；如果所有链接都读取为 点击此处 或 更多信息，那么用户在没有实际访问它的情况下，将无法知道该链接是否有用。（在之前的版本中使用了 HEAD 请求；然而，结果显示并非所有服务器都能正确实现 HEAD 请求，或者根本不允许使用，因此现在使用常规 GET 请求，以牺牲数据大小来换取一致性）

安装

此包可通过 Composer 获取，并可以通过输入以下命令进行安装：

$ composer require p1ho/accessibility-checker

使用方法

配置

示例

<?php

require_once __DIR__ . '/vendor/autoload.php';

use P1ho\AccessibilityChecker\ColorContrast;
use P1ho\AccessibilityChecker\HeadingStructure;
use P1ho\AccessibilityChecker\ImageAccessibility;
use P1ho\AccessibilityChecker\LinkAccessibility;

// initialize accessibility checkers
$color_contrast_checker     = new ColorContrast\Checker();
$heading_structure_checker  = new HeadingStructure\Checker();
$img_accessibility_checker  = new ImageAccessibility\Checker();
$link_accessibility_checker = new LinkAccessibility\Checker();

$html = "<p>Enter your html here</p>";
$dom = new DOMDocument();
libxml_use_internal_errors(true);
$dom->loadHTML($html);

$page_url = "url-where-page-is-taken-from"; // this is to check relative links.

$color_contrast_result      = $color_contrast_checker->evaluate($dom);
$heading_structure_result   = $heading_structure_checker->evaluate($dom);
$image_accessibility_result = $img_accessibility_checker->evaluate($dom);
$link_accessibility_result  = $link_accessibility_checker->evaluate($dom, $page_url);

报告结构

通常，报告方案将采用以下结构

{
  "passed": true | false,
  "errors": [
    // list of objects with error details
  ],
  // for image accessibility checker
  "warnings": [
    // list of objects with warning details
  ]
}

颜色对比度错误

无效样式属性

糟糕的颜色对比度

标题结构错误

不允许的标题

标题嵌套在标题中

跳过的标题

标题层级太浅

标题层级太深

标题位置错误

无效标题

图像可访问性错误

无替代文本（错误）

文件名替代文本（错误）

空替代文本（警告）

链接可访问性错误

重定向

死链接

域名冲突

注意：这是为了保证同一域内的其他页面通过相对路径而不是绝对路径进行链接。

慢速连接

注意：检查器使用 HEAD 请求获取页面的元数据，这不应花费很长时间；因此，如果检查器在 5 秒后超时，检查器将认为该链接速度较慢。

差的链接文本

注意：文本中的至少 2/3 的单词在黑名单中。

黑名单:

• 检查
• 点击
• 详情
• 详细信息
• 下载
• 查找
• 去
• 这里
• 信息
• 信息
• 它
• 学习
• 链接
• 更多
• 现在
• 其他
• 页面
• 阅读
• 查看
• 这个
• 查看
• 访问

URL链接文本

文本过长

注意：当前限制为100个字符。

不明确的PDF链接

不明确的下载链接

开发

• $ composer install 安装所有依赖项

• $ composer test 将运行所有测试（在Windows上使用 $ composer test-win）。要启用覆盖率分析，需要一个代码覆盖率驱动程序。我在Windows上开发时使用了 Xdebug。之后，运行 $ composer phpcov-merge（在Windows上使用 $ composer phpcov-merge-win），按照php-coveralls文档的说明，将 build/cov/coverage.cov 与 build/logs/clover.xml 合并。

• 运行 $ composer style-fix-download 将最新的php-cs-fixer文件下载到项目目录。之后，您可以运行 $ composer style-fix来自动修复所有代码的风格。

贡献者

p1ho	oburk