gnusocial.rocks/v3/milestone-automatic-accesibility-a11y-testing.html

99 lines
3.5 KiB
HTML
Raw Normal View History

<!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">
2022-02-25 21:22:57 +00:00
<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">
2022-02-25 21:22:57 +00:00
<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></div>
<div id="template-wrapper"><div class="template-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 &mdash;
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>
2022-01-18 15:54:02 +00:00
2022-02-25 21:22:57 +00:00
2022-03-27 18:02:29 +01:00
2022-03-28 18:00:58 +01:00
2022-03-28 17:42:56 +01:00
<!-- text end -->
<!-- entry end -->
</div>
</div></div>
2022-02-25 21:22:57 +00:00
<footer>
This site's source is <a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
</footer>
</body></html>