How to Use BDD Testing Framework to Improve Accessibility

Behavior driven development and the BDD testing framework Cucumber offer a variety of benefits for product teams. Development becomes more intuitive, and test cases can be written in simple grammar using a language appropriately named Gherkin. While Cucumber is written in Ruby, it can be used to validate code performance in Ruby along with Python, Java, C#, and others.

Development teams understand the importance of quality control and why it is mandatory for any company trying to build sound digital products. Thanks to evolution in the quality assurance discipline, teams can employ a number of means to test functionality against acceptance criteria. Quality control can be completed manually, or it can be automated. Both types of testing can be completed using a variety of strategies.

Top Testing Strategies

Analyzing the current state of software testing and how teams must adapt.

Behavior Driven Development with Cucumber expands these offerings. Quality specialists, quality engineers, or software developers can validate code functionality and performance using the BDD testing framework.

What is the BDD Testing Framework?

Behavior-driven development is an extension of test-driven development (TDD), that makes use of simple, domain-specific scripting language. While TDD focuses more on the testing of a code unit or component, BDD focuses more on testing against customer needs (“desired behavior”.) This shift has been driven by the influence of the Agile software development process. Using TDD to validate, teams move through the following steps.

• Define a test
• Fail the test
• Write the code
• Pass the test

Using BDD, teams move through the same steps with the addition of “define desired behavior.”

What is Cucumber?

Cucumber is one of the widely used domain-specific scripting languages used in BDD. Some of the benefits it provides include:

• A big community
• Translates naturally to writing behavior
• Can run on many platforms and frameworks

Below I’ve included one of the cucumber examples representative of its application to BDD testing frameworks.

```cucumber
Feature: Login functionality
  As a customer
  In order to use the application
  I want to login with email and password

Scenario: Logging in with invalid credentials
 Given I am at the Account/Login page
  When I fill the account email textbox with value '[email protected]'
   And I fill the password textbox with value 'incorrectpassword'
   And I click the login button
  Then a text 'Can't login! Wrong email or password.' should appear in the validation errors region

Scenario: Logging in with valid credentials
 Given I am at the Account/Login page
  When I fill the account email textbox with value '[email protected]'
   And I fill the password textbox with value 'mypassword'
   And I click the login button
  Then I should be at the home page
```

SpecFlow? Cucumber in .NET

SpecFlow is a .NET framework used to parse Cucumber files. SpecFlow is open source and provided under a BSD license. As part of the Cucumber family, SpecFlow uses the official Gherkin parser and supports the .NET framework, Xamarin and Mono. It can be run within a .NET framework project together with a Selenium driver. There is also a paid version called SpecFlow+, that adds some extra functionality and components. SpecFlow has good integration with Visual Studio. It supports popular testing frameworks like: MSTest, NUnit (2 and 3), xUnit 2, and MbUnit.

Developing in Compliance with Accessibility Standards

Web applications developed in compliance with the Web Content Accessibility Guidelines (WCAG) 2.0, means the product team has taken care to follow a set of rules ensuring that they are creating an inclusive experience for a diverse range of users. For example, teams who add a page title, write image alternative text, and set aria and role attributes have taken steps to ensure a screen reader can represent the content to individuals with low-sight.

Example of a screen reader describing an accessibility compliant Login page:

“On the Login page, there is a Login title, account email textbox with hint Email, password textbox with hint Password and a Login button.”

The way a page is read depends more on the screen reader itself, but I’ve included descriptions for relevant elements in an html page below.

```html
<html lang="en">
<head>
  <title>Login page</title>
</head>
<body>
  <h1 aria-label="Login title">Login</h1>
  <form action="account/login" role="form">
    <input name="Email"    placeholder="Email"    aria-label="account email" role="textbox" /><br />
    <input name="Password" placeholder="Password" aria-label="password"      role="textbox" /><br />
    <button type="submit" aria-label="login" role="button">Login</button>
  </form>
  <div hidden aria-label="validation errors" role="region"></div>
</body>
</html>
```

Validating the accessibility of our product has aligned our work with BDD testing frameworks and behavior driven development more generally as we have anticipated the “desired behavior” of our users and made the accomodations within our product to match.

As an aside, product teams can use different tools like Pa11y or different browser extensions such as WAVE to ensure a given property is web accessibility compliant.

Bind Accessibility Attributes to Cucumber

Next, we must define SpecFlow bindings to enable our Cucumber BDD example (that we created earlier) to work/test against our web accessibility compliant page. The SpecFlow bindings are a set of rules that help describe how Cucumber should be understood, by the BDD testing framework. Here is our binding class.

```csharp
   [Binding]
   public class StepDefinitions
   {
       [Given(@"I am at the (.+) page")]
       public void GivenAtPage(string page) =>
           WebBrowser.Url = WebBrowser.GetUrl(page);

       [When(@"I fill the (.+) (.+) with value '(.+)'")]
       public void WhenFillValue(string label, string role, string value) =>
           WebBrowser.FindByAria(label, role)
                     .SendKeys(value);

       [When(@"I click the (.+) (.+)")]
       public void WhenPress(string label, string role) =>
           WebBrowser.FindByAria(label, role)
                     .Click();

       [Then(@"a text '(.+)' should appear in the (.+) (.+)")]
       public void ThenTextShouldAppear(string text, string label, string role) =>
           Assert.AreEqual(
               text,
               WebBrowser.FindByAria(label, role).Text);

       [Then("I should be at the (.+) page")]
       public void ThenShouldBeAtPage(string expectedPage) =>
           Assert.AreEqual(
               WebBrowser.GetUrl(expectedPage),
               WebBrowser.Url);

       [AfterScenario]
       public void Destroy() =>
           WebBrowser.Current
                     .Quit();
   }
```

The web browser is just a Selenium wrapper class, you can find the entire code example at this repository.

What's the Definition of Accessible UI/UX?

Review these UX terms, speak the same language as your design team, and build software that your users actually want to use.

Web Accessibility, Experience, and Cucumber

Using Cucumber, one of the more popular BBD testing frameworks, development teams can increase the ease of validation and improve the accessibility of the end product. It’s a step forward for the quality assurance discipline while creating more inclusion for users.

Image Source: Unsplash, Franzie Allen