TPAC 2019

ARIA & WebDriver

Promoting accessibility by incentivizing web developers with tools that simplify testing accessible applications

This presentation is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

About us

Bocoup, a technical consultancy specializing in web platform interoperability

Valerie Young (@spectranaut)

Simon Pieters (@zcorpan)

Mike Pennisi (@jugglinmike)

ARIA & WebDriver

Developer incentives

Less test code

Improved test stability

Improved test resiliency

Accessibility verified

Developer incentives

Less test code

    const radios = await webdriver.findElements(
      By.css('[role="radio"]')
    );
    for (const radio of radios) {
      if (await radio.getText() === 'Thin crust') {
        await radio.click();
      }
    }
  

Developer incentives

Less test code (continued)

    function accessibleName(el) { /* ... */ }
    function focus(el) { /* ... */ }
    const radios = await webdriver.findElements(
      By.css('[role="radio"]')
    );
    for (const radio of radios) {
      if (await accessibleName(radio) === 'Thin crust') {
        await focus(radio);
        await radio.sendKeys(Key.ENTER);
      }
    }
  

    webdriver.setRadio('Thin crust');
  

Developer incentives

Improved test stability

    const opener = await webdriver.findElement(
      By.css('[aria-haspopup]')
    );
    await opener.click();
    await webdriver.findElement('[role="menu"] button');
                    ^ NoSuchElementError: An element could not
                                          be located on the page
                                          using the given search
                                          parameters.
  

    await webdriver.openPopup();
    await webdriver.findElement('[role="menu"] button');
  

Developer incentives

Improved test resiliency

    const closeBtn = await webdriver.findElement(
      By.css('#modal button.close')
    );
    await closeBtn.click();
  

webdriver.closeModal();

Developer incentives

Accessibility verified

    element.pushButton();
            ^ Error: Accessible name of toggle button
                     inappropriately changed following push
  

Demonstration

ariadriver - A Node.js library for testing web applications using WebDriver and ARIA (see also: API documentation)

"Push Button" - a WebDriver extension command abstracting user interaction with the APG "Button" widget

Discussion

Stale element references

"Preferred input mode"

Guideline stability

Publication