CodeX
Published in

CodeX

Introducing Accessibility to Spearmint

simply testing your application

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

TIM BERNERS-LEE, Creator of World Wide Web

Spearmint is an open-source developer tool that simplifies the testing of your application and has recently launched its fifth-generation product. Earlier versions of the application have provided the developer a user-friendly GUI that dynamically converts user inputs into executable React, Redux, Hooks, Endpoint and Puppeteer test-code for testing throughout the development cycle.

Spearmint now delivers an accessibility testing suite, supporting the developer in implementing testing of applications against established accessibility standards with the same simplicity as earlier iterations. Spearmint’s test generation now leverages the Deque Labs Axe-Core accessibility testing engine and library in the Jest and Puppeteer frameworks to provide the open-source community a simpler way to execute a test-driven development of our applications to deliver universal access of the user experience.

What is Accessibility?

As developers, we are consistently seeking ways to improve our applications. Whether it’s by implementing a new and exciting feature or deploying an application employing the latest technologies, to optimizing the time complexity of our algorithms — we might often-times end up with an amazing product that unfortunately is inaccessible to portions of the general public. In developing accessible applications, it is important to note that testing against accessibility standards within current technologies may be unable to address every situation and that some amount of manual review is a necessary part of quality assurance but for the purposes of this discussion, let’s broadly define the subject of accessibility by referencing a very familiar resource to the developer community — MDN documentation. “Accessibility is the practice of making your websites usable by as many people as possible.”

Influential metrics will likely vary between projects and clients, however a goal in your product’s development should be to reach as many people as possible. Varying degrees of opinions towards this assertion likely exist but there can be both pragmatic and ethical drivers to developing more accessible products.

Why Address Accessibility

Ideally the amazing applications we develop would provide a homogenous user experience to as many people as possible. Niche demographic targets aside, this ideal isn’t a matter of accessibility but simply a matter of economics. Pragmatically speaking, some combination of our engineering drive and client expectations will dictate that we efficiently and effectively deliver to the user our content and message — as designed, to as many people that enter our domains, thereby maximizing our product’s reach and ultimately profit. The reality is that there are disadvantaged segments of the population that may experience our software differently from the majority. Perhaps a user may have an impairment or require assistive technologies to access web content.

Reading between the lines… there’s a fair chance that developers may create a User eXperience that doesn’t take into consideration all the perspectives that come into play out in the wild. We get it! We‘re all creatives — when the inspiration hits, you go after it. But the empathetic engineers always need to consider the edge cases!

For the pragmatic programmer, developing a more accessible application has practical implications as well. Just as there is legislation providing for accessible entry into buildings, Website Content Accessibility Guidelines (WCAG) provides the developing community the technical specifications needed to improve the accessibility of web-based applications. While not all issues can be addressed, the U.S. Information and Communication Technology (ICT) Accessibility Section 508’s Standards of the Rehabilitation Act are aligned with WCAG guidelines and recognizes them as the voluntary consensus standard for web content and ICT. WCAG compliance is measured against success criteria for digital accessibility covering principles of Perceivable, Operable, Understandable, and Robust content.

Simply put, accessibility of websites is regulated by legislation and there has been an accelerated rise in lawsuits citing violations in web content. Per Usablenet’s tracking of cases in the US for 2020, “web accessibility cases are up almost 25% year-on-year. December saw an almost 100% rise over January.” Legislative considerations aside, perhaps the most pragmatic reason to be creating accessible content is that this approach not only broadens the reach of the audience experiencing your content, ultimately enhancing the bottom-line, but also delivers the strength of universality by creating a diverse and extended depth of experiences consuming your product.

Spearmint Now Delivers Accessibility Testing

Tim Berners-Lee states that the power of the web is in its universality and that an essential aspect to that universality is “access by everyone regardless of disability.” The web is meant to be accessed by everyone, so its applications should be developed that way. Spearmint’s latest launch introduces a new accessibility testing suite to provide developers with dynamic generation of Jest and Puppeteer test-code.

Spearmint’s Accessibility Test Suite

The new suite integrates Axe-Core from Deque Labs, a fast, secure, and lightweight testing library to generate test code for automated accessibility auditing alongside the testing functionality already provided by Spearmint. Configuration options currently allow the developer to test HTML, React components and URL’s against any or all of the accessibility standards built into Axe along with the ability to filter by content.

Showcasing the New Spearmint
An Introduction to Spearmint

A Note from the Spearmint Team

Above all else, the Spearmint Team hopes that the developer community continues to integrate accessibility into their design decisions. While the main goal of this project was to provide ease of integration for accessibility testing, we also hope that these new additions to our developer tool help continue the conversation towards more inclusive web experiences. This product is under continuous development by OS Labs. We welcome and encourage any feedback from the community!

Get the Product!
SpearmintJS
Github — -> Star us on github!!! For each star, the spearmint team will dedicate 5 hours of time towards continued development

the spearmint team:

> Annie [LinkedIn](https://github.com/annieshinn)
> Sharon [LinkedIn](https://github.com/sharon-zhu)
> Gabriel [LinkedIn](https://github.com/bielchristo)
> Tolan [LinkedIn](https://github.com/taoantaoan)
> Alfred [LinkedIn](https://github.com/astaiglesia)

References:
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility

https://medium.com/@jylglim/a-simpler-way-to-test-your-react-application-61fd2e02e8ab

https://www.pwag.org/resources/general-web-design-and-accessibility/collection-of-web-accessibility-quotes-gathered-by-jojo-esposa/

https://github.com/dequelabs/axe-core

https://www.deque.com/axe/

https://www.access-board.gov/ict/

https://www.section508.gov/manage/laws-and-policies

https://www.w3.org/TR/WCAG21/

https://blog.usablenet.com/a-record-breaking-year-for-ada-digital-accessibility-lawsuits

--

--

--

Everything connected with Tech & Code. Follow to join our 900K+ monthly readers

Recommended from Medium

The Definitive Guide To Choosing The Right Programming Language To Learn

What is Linting? How does a linter work?

Convert Your Old Laptop Into a Security Monitoring & URL Filtering Server (Part 3)

New Rewards with Pulse Farms on Ref Finance

Enhancing Istio Operations with Kong Istio Gateway

Script Communication in Unity3D using GetComponent

YeSQL? How a Spanner changes the toolbox

What is an interface?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alfred Sta. Iglesia

Alfred Sta. Iglesia

More from Medium

Don’t let this one problem ruin your user’s experience

What is ReportWebVitals.js?

Testing forms for accessibility using React Testing Library

Do You React or Respond to Life’s Challenges?