L'Accessibilité Web chez CleverConnect : Comment nous garantissons une expérience inclusive

En tant que QA Manager chez CleverConnect, j'ai la chance de travailler au cœur de l'innovation technologique. Notre engagement en faveur de l'accessibilité web est un élément clé de notre approche, et je suis ravi de vous présenter comment nous garantissons une expérience web inclusive.

Les Standards WCAG 2.0/2.1/2.2 - Niveau A et AA

Chez CleverConnect, nous mettons en œuvre les normes WCAG 2.0/2.1/2.2 au niveau A et AA pour garantir une accessibilité optimale. Ces normes définissent des directives précises pour rendre les sites web utilisables par un large éventail de personnes, y compris celles ayant des besoins spécifiques.

Examen approfondi avec Playwright

Nous utilisons Playwright pour inspecter nos sites, page par page. L'injection de cookies et l'utilisation des états de page pour l'auto-authentification sont des méthodes essentielles qui garantissent que toutes les pages de nos sites sont bien analysées. La documentation officielle de Playwright offre de bons examples d'authentification via des state.json.

Axe Core pour l'Analyse

Axe Core est notre outil de prédilection pour analyser chaque page. Nous traitons les règles WCAG une par une, en utilisant TestNG pour gérer efficacement ces tests et suivre leurs évolutions. Cette approche nous permet de garantir la conformité de chaque page à chaque règle, assurant ainsi une expérience utilisateur sans faille.

La Technique de Mise en Évidence

Pour faciliter le travail de nos développeurs, nous avons mis en place une technique simple mais puissante pour mettre en évidence les violations des règles.

Après l'analyse d'une page par Axe Core, nous récupérons les règles violées à l'aide de la méthode getViolations(). Nous utilisons ensuite getNodes() pour obtenir la liste des composants UI affectés par chaque violation et getTarget() pour obtenir le sélecteur CSS correspondant. En utilisant cette information, nous utilisons page.evaluate() pour mettre en évidence le composant en question en lui appliquant une bordure rouge.

Grâce à cette méthode, nous obtenons un rapport qui nous permet de visualiser en un seul coup d'œil toutes les violations d'accessibilité sur une page.

private void ruleChecker(String ruleId) {
    boolean isFailed = getRuleIds(accessibilityScanResults.getViolations()).contains(ruleId);
    String errorMessage = "";
    ArrayList<String> selectorToReset = new ArrayList<>();
    if (isFailed) {
        for (Rule rule : getAllRules(accessibilityScanResults)) {
            if (ruleId.equalsIgnoreCase(rule.getId())) {
                errorMessage = rule.getDescription()
                        + ".\nOccurrence in the page : " + rule.getNodes().size()
                        + ".\nHelp Url : " + rule.getHelpUrl()
                        + ".\nHelp : " + rule.getHelp()
                        + "\n";
                nodesRelatedToRule(String.valueOf(rule.getNodes().size()));
                    for (CheckedNode node : rule.getNodes()) {
                        printElement("Node : " + node.getTarget());
                        String cssSelector = removeFirstAndLastSquareBrackets(node.getTarget().toString());
                        try {
                            page.evaluate("(selector) => { document.querySelector(selector).style.border = '5px solid red'; }", cssSelector);
                            selectorToReset.add(cssSelector);
                        } catch (IndexOutOfBoundsException | PlaywrightException e) {
                            errorScreenshot(cssSelector);
                        }
                    }
                if (!rule.getNodes().isEmpty())
                    saveScreenshot(page.screenshot(new Page.ScreenshotOptions()
                            .setType(ScreenshotType.JPEG)
                            .setFullPage(true)
                            .setQuality(20)
                    ));
                break;
            }
        }
        resetSelectorBorder(selectorToReset);
    }
    assertFalse(isFailed, "Could not satisfy this rule : " + ruleId + ".\n" + errorMessage);
}        

Reporting grâce à Allure

Le reporting joue un rôle crucial dans notre démarche. Nous utilisons Allure pour générer des rapports complets qui nous permettent de garder une trace de l'historique de nos exécutions. Cela signifie que nous pouvons suivre l'évolution de l'accessibilité web au fil du temps et apporter des améliorations continues.

En conclusion, l'accessibilité web est une priorité chez CleverConnect. Nous croyons en une expérience web inclusive et nous mettons en œuvre des méthodes et des outils avancés pour y parvenir. En partageant notre approche, nous espérons inspirer d'autres entreprises à prendre des mesures similaires pour rendre le web accessible à tous.

N'hésitez pas à poser des questions ou à partager vos propres expériences en matière d'accessibilité web. Ensemble, nous pouvons créer un web plus inclusif pour tous.