108 lines
3.5 KiB
HTML
108 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
|
|
<link rel="shortcut icon" href="../favicon.ico">
|
|
<link rel="stylesheet" href="../assets/css/reset.css">
|
|
<link rel="stylesheet" href="../assets/css/blog.css">
|
|
<link rel="stylesheet" href="../assets/fonts/opensans/opensans.css">
|
|
<title>Milestone: Automatic Accesibility (A11Y) testing - GNU social V3</title>
|
|
</head><body>
|
|
<header>
|
|
<div class="home-menu menu menu-horizontal menu-fixed">
|
|
<div class="home-menu menu menu-horizontal menu-fixed">
|
|
<a class="header-main" href="/"><img src="../assets/img/gnu-social-logo-invert.svg" alt="GNU social"><b>gnu</b>social</a>
|
|
<ul class="menu-list">
|
|
<li class="menu-item menu-selected"><a href="index.html" class="menu-link">Blog Index</a></li>
|
|
<li class="menu-item"><a href="https://code.gnusocial.rocks/" class="menu-link">Repository</a></li>
|
|
<li class="menu-item"><a href="https://coverage.gnusocial.rocks/" class="menu-link">Code Coverage</a></li>
|
|
<li class="menu-item"><a href="https://docs.gnusocial.rocks/" class="menu-link">Documentation</a></li>
|
|
<li class="menu-item"><a href="https://agile.gnusocial.rocks/" class="menu-link">Wiki</a></li>
|
|
<li class="menu-item"><a href="https://kanban.undefinedhackers.net/?controller=BoardViewController&action=readonly&token=d2293e55cabae7cceff9fb496c651328195357d392b9e61a9f229ed6d463" class="menu-link">Roadmap</a></li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="content-wrapper">
|
|
<div class="content">
|
|
</div>
|
|
<div id="entry-wrapper"><div class="entry-unit">
|
|
<!-- entry begin -->
|
|
<h3><a class="ablack" href="milestone-automatic-accesibility-a11y-testing.html">
|
|
Milestone: Automatic Accesibility (A11Y) testing
|
|
</a></h3>
|
|
<!-- bashblog_timestamp: #202201181356.33# -->
|
|
<div class="subtitle">January 18, 2022 —
|
|
GNU social development team
|
|
</div>
|
|
<!-- text begin -->
|
|
|
|
<p>We use <code>pa11y-ci</code> to run our accesibility testing on all GNU social
|
|
pages. The process of setting this up was a bit of a ride, but the
|
|
results are quite useful:</p>
|
|
|
|
<p><img src="assets/a11y/report.png" alt="Accesibility report generated by Pa11y" title="" /></p>
|
|
|
|
<p>We also take screenshots of all pages and compare them with the
|
|
previous, allowing us to spot (possibly) unintended changes in the UI.</p>
|
|
|
|
<p>The way we do this is by using a <code>docker</code> image derived from <code>node</code>,
|
|
with <code>pa11y-ci</code> installed, which doesn't have an entrypoint. This then
|
|
allows us to spin up a webserver, PHP and Redis containers, mimiking a
|
|
staging environment. <code>pa11y-ci</code> uses a JSON config file to tell it
|
|
what to do, and handles visiting all pages with the given resolution,
|
|
logging in and registering any accesibility violations found.</p>
|
|
|
|
<p><img src="assets/a11y/violations.png" alt="Accesibility violations found by Pa11y" title="" /></p>
|
|
|
|
<p>Note that most of these errors are actually the same.</p>
|
|
|
|
<p>The saved screenshots are then used to detect changes, with
|
|
ImageMagik's <code>compare</code>, to generate a report on visual changes.</p>
|
|
|
|
<p><img src="assets/a11y/compare.png" alt="Screenshot comparisons" title="" /></p>
|
|
|
|
<p>We were already striving for making GNU social accesible, which is
|
|
clear from the really low number of violations found, but there's
|
|
always room for improvement :)</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- text end -->
|
|
<!-- entry end -->
|
|
</div>
|
|
</div></div>
|
|
<footer>
|
|
This site's source is <a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>
|
|
</footer>
|
|
</body></html>
|