README

Table of Content

• Introduction
• Installation
• Usage
• Report Structure
  • Color Contrast Errors
  • Heading Structure Errors
  • Image Accessibility Errors
  • Link Accessibility Errors
• Development
• Contributors

Introduction

This is a Web Accessibility testing suite that evaluates the HTML string extracted from Content Management Systems. This is not meant to be an exhaustive accessibility check, but it aims to bring severe accessibility issues to light, as well as generate awareness for accessibility in general.

Currently, this is being developed with the goal to analyze body texts from Drupal Nodes. However, algorithms used in these programs may be useful for developing a more general purpose solution.

Categories

1. Color Contrast: Since low color contrast can cause readability issues, this program will go through all the elements in the HTML and compare its text color with the background to see if its contrast level adheres to WCAG 2.0 standard. Currently, it will only analyze inline styles, and will ignore the property 'opacity' due to the complexity it entails.

2. Heading Structure: For screen readers or other devices that do not render the page as the developers had intended, we owe it to them to make sure information on the page can be parsed correctly on their devices, too. Since Heading Structure (<h1> through <h6>) is pivotal in building the hierarchy for the page, this program will check if there are any headings that are skipped or misplaced. Additionally, because of the recommendation that there exists only 1 <h1> per page, by default the check for multiple <h1> will be on, but can be turned off.

3. Image Accessibility: We have to assume that people using the screen readers cannot see anything on the page (only hear it), and this includes pictures. Thus, images that are integral to the content must also contain a description in its 'alt' attribute. This program will raise errors for <img> that do not have alt attributes and will raise warnings for <img> that has an empty alt attribute (because it is possible for a picture to be there simply for aesthetics).

4. Link Accessibility: This checks 2 things: whether links are dead/unoptimized, and whether link texts are clear and descriptive. In particular, link text is also important for screen readers because usually there is an option to list all the links on a particular page; if all the links reads click here or more detail, then it becomes impossible for the user to know whether the link is useful without actually accessing it. (In previous versions, HEAD requests were used; however, it turns out not all servers may implement HEAD requests correctly, or allow it at all, thus a regular GET request is used now, trading data size for consistency)

Installation

This package is available through Composer, and can be installed by entering:

$ composer require p1ho/accessibility-checker

Usage

configurations

example:

<?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);

Report Structure

In general, the reporting schematics will take the following structure:

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

Color Contrast Errors

Invalid Style Properties

Bad Color Contrast

Heading Structure Errors

Heading Unallowed

Heading Inside Heading

Heading Skipped

Heading Too Shallow

Heading Too Deep

Heading Misplaced

Invalid Heading

Image Accessibility Errors

No Alt Text (Error)

Filename Alt Text (Error)

Empty Alt Text (Warning)

Link Accessibility Errors

Redirect

Dead

Domain Overlap

Note: This is to make sure other pages in the same domain are linked via relative paths instead of absolute paths.

Slow Connection

Note: The checker uses the HEAD request to fetch meta data for a page, this should not take long; thus, if the checker times out after 5 seconds, the checker will deem the link as slow.

Poor Link Text

Note: at least 2/3 of the words in the text are in the black list.

Black List:

• check
• click
• detail
• details
• download
• find
• go
• here
• info
• information
• it
• learn
• link
• more
• now
• other
• page
• read
• see
• this
• view
• visit

Url Link Text

Text Too Long

Note: The current limit is 100 characters.

Unclear PDF Link

Unclear Download Link

Development

• $ composer install to install all dependencies

• $ composer test will run all the tests (use $ composer test-win on Windows). To enable coverage analysis, a code coverage driver is needed. I used Xdebug when developing on Windows. Afterwards, run $ composer phpcov-merge (use $ composer phpcov-merge-win on Windows) to merge build/cov/coverage.cov with build/logs/clover.xml as instructed on php-coveralls doc.

• Run $ composer style-fix-download to download the latest php-cs-fixer file to project directory. Afterwards, you can run $ composer style-fix to auto style fix all your code.

Contributors

p1ho	oburk