2022-01-18 13:57:01 +00:00
<!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 = "https://www.gnusocial.rocks//assets/css/reset.css" >
< link rel = "stylesheet" href = "https://www.gnusocial.rocks//assets/css/blog.css" >
< link rel = 'stylesheet' type = 'text/css' href = "https://www.gnusocial.rocks//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" >
< a class = "menu-heading" href = "https://gnusocial.rocks/" >
< img src = "../assets/img/gnu-social-logo-invert.svg" alt = "GNU social" >
< b > gnu< / b > social
< / a >
< / div >
< div class = "sidebar" >
< 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 —
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 14:15:23 +00:00
2022-01-18 13:57:01 +00:00
<!-- text end -->
<!-- entry end -->
< / div >
< / div > < / div >
< footer class = "footer l-box is-center" >
This site's source is
< a href = "https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks" > hosted here< / a > .
< / footer > < / body > < / html >
