“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” - Tim Berners-Lee, Inventor of the World Wide Web
We’re excited to announce some improvements we have made to the accessibility of VGS Collect. But first some background on the topic of accessibility.
What is Web Accessibility?
Web accessibility — often abbreviated as the numeronym a11y — refers to taking those with various disabilities into consideration when designing and developing websites, tools, and technologies. When creating online services for your customers, it’s important to keep in mind their ability to perceive, understand, navigate, interact, and contribute to the web. In other words, your web page should provide equal access and equal opportunity to people with diverse needs.
To assist with web accessibility, the World Wide Web Consortium (W3C) constructed Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA). These technical specifications provide rules and best practices to create accessible and usable web content.
Although adjusting your website to fit additional guidelines may seem daunting at first, rest assured that the extra steps can be very beneficial and are simple to implement through VGS Collect.
Taking a Look at the Numbers
According to statistics, more than 18% of the US population lives with some form of disability, with roughly 12% of this group experiencing a form of severe disability. To better visualize, the graph below shows the number of people in the United States with a variety of impairments.
From a business perspective, approximately 18% of potential US customers may not be able to use your application properly or achieve the best experience using your product. For all of these people, it can be challenging to use a web application if developers didn’t rely on WAI-ARIA rules while thinking about accessibility.
In terms of your bottom line, making your site more accessible can attract more customers, resulting in a potentially significant increase in profits.
Learn More About Accessibility
Did you ever wonder how a person with a disability can use your application? To get an idea, try to navigate through the web page using keyboard-only, launch VoiceOver, or install NVDA (or any screen reader).
Other use accessibility tools include:
-
Firefox Accessibility Inspector
Provides hints and tips on how to improve web page accessibility.A Chrome browser extension that works as a screen reader for visually impaired users.
-
Chrome DevTools Accessibility Audit
Delivers a report that gives various tips on how to improve a page’s accessibility. -
Udacity Course
Free learning materials on how to make pages more accessible and why accessibility is important.
Quick Tips for Increased Accessibility
There are a few easy steps you can take right now to improve application a11y:
- Think about the design for people with visual impairments. Try to utilize contrasting colors.
- Semantic markup was invented for a reason. Semantic tags make it clear to the browser the meaning of a page and its content.
- Content flow should be clear and accessible from the keyboard.
- Don’t forget about alt for
<img>. <label for = ”someInput” >+< input id = ”someInput”> = love.- Read about WAI-ARIA tags.
While there are a number of different approaches for obtaining sufficient web accessibility, these are a good start. The guidelines established by WAI-ARIA are not particularly difficult to implement, but once set, we recommend continuing the practice each time new features are added.
A11y in VGS Collect
With the latest release, VGS Collect is accessible to more people, ensuring there are fewer barriers to prevent your customers from using your secure forms.
Forms are one of the ways customers interact with an application. We needed to be sure that people clearly understand what information fields contain in order to fill in values correctly, that’s why we have improved our product to provide equal conditions for all users.
Since adding a label for an input is one of the key rules for a11y, VGS Collect now includes the option to set an ‘ariaLabel’ attribute to the input, which allows descriptors to go alongside labels that just use visual cues. We’ve defined default values inside the library, but you have a chance to change them to describe the field purpose better. For example:
f.field({
name: ‘credit-card’,
type: ‘cc-number’,
ariaLabel: ‘Credit card number’,
});
In addition, we addressed the ‘inputmode’, ‘aria-invalid,’ and ‘aria-placeholder’ landmark for all input types, which can prove to be incredibly useful for those using screen readers. Now, the typical VGS Collect input field looks like the following:
<input type="text" class="css-0" placeholder="Joe Business" aria-label="Text input" aria-placeholder="Joe Business" aria-invalid="false" inputmode="text">
Here at VGS our goal is to make our products as accessible to as many people as possible, so that everyone can enjoy the benefits of secure forms and VGS Collect. We’d love to hear your feedback on these changes, and also any other suggestions on ways we can continue to improve our accessibility.
