5 simple ways developers can help improve and enforce website accessibility

Three million.

That’s how many forms we serve here at JotForm. Every single day.

Here’s another number for you: According to the Census Bureau, approximately 20% of web users in the US have a disability. And that number is growing.

Obviously, people with a disability rely on online forms—just like everyone else does.

But are online forms as accessible to, for instance, the tens of thousands of visually impaired people who need to access them daily?

Here at JotForm, we want to make sure that they are. Accessibility is a massive priority for us.

After all, by ignoring this issue, we would be ignoring 20% of our customer base.

We approach it in the same way we approach everything: by continuously making small improvements that have a big impact.

Accessibility

What is accessibility?

In this context, it means that everyone is able to use all of a website’s features easily, without running into any problems.

It’s as simple as that.

And we take it pretty seriously.

We all know that building a web page involves making a ton of decisions: graphics, colors, UX, and UI. What can we do to make these features more effective and understandable?

At JotForm, we want to make sure that everyone has the same awesome experience when they visit one of our forms—period. No exceptions.

So, accessibility is a key factor in our decision-making as designers and developers.

Assistive technology

The starting point in this decision-making? Knowing that a one-size-fits-all approach won’t cut it.

Different things work for different people. And there’s more than one alternative when it comes to displaying information on the screen.

That’s where Assistive Technology (AT) comes in. ATIA defines Assistive Technology as any item, piece of equipment, software program, or product system that is used to increase, maintain, or improve the functional capabilities of persons with disabilities.

Related: The ultimate guide to web content accessibility

Some commonly-used assistive technology items include special switches and keyboards, pointing devices, screen readers and other communication programs.

Here, we believe that all forms should be compatible with assistive technology. That’s a given for us.

Here are five things we pay particular attention to:

1. Screen readers

Each one of our forms incorporates a screen reader into its design. This clever piece of technology interprets the code of a page and transforms it into speech. This makes our forms significantly more accessible for people who are visually impaired. And, by testing one out, we can also increase the accuracy of applied improvements.

2. Images

How can people with visual impairments access images? The “alt” attribute on the images used in our forms provides an understandable explanation that the screen reader can read out loud. This has the added benefit of acting as an alternative if the image doesn’t load properly.

3. Mouse or keyboard?

Accessibility goes beyond just HTML structure.

Some people have difficulty using a mouse or a keyboard. And for these people, a web page needs to be able to perform both functions.

How? Anyone who can’t use a mouse can switch to a keyboard while filling out our forms, and visa versa. They can use either—or both.

4. Color

Not everyone perceives color in the same way.

That’s why, while creating new color palettes for JotForm 4.0, we got feedback from a colorblind user to help us assess the readability of the text. On the basis of this feedback, we selected palettes that would be compatible with colorblind users.

You also can improve color contrast by checking foreground and background ratios. For example, to meet the visual contrast for Level AA conformance, the visual presentation of text and images needs to have a contrast ratio of at least 4.5:1 (*). There are various tools available to address any contrast issues.

Developers should also consider font size and font families regarding their spacing and readability.

The most readable fonts are Arial, Courier, and Verdana, according to Software Usability and Research Laboratory.

5. Automating accessibility checks

We test, test, and test again. To analyze our forms in terms of accessibility, we needed an automated accessibility testing tool.

Enter pa11y.

pa11y is a node.js module that has an open-source interface. With pa11y, we’ve been able to monitor our accessibility compliance. It gives the number of errors, warnings, and notices for a given web page.

You can also get detailed information about the issues and errors with the following standards: Section508, WCAG2A, WCAG2AA, and WCAG2AAA.

While running pa11y on a web page, you’ll receive a detailed accessibility report of the incompatibilities with the standard. The process continues by fixing the errors, considering the warnings, and looking up the notices.

While developing JotForm Cards, we applied pa11y to our test cases.

Before every single revision, the accessibility error checking test runs automatically.

And if someone in the developer team breaks one of the accessibility requirements, the build will fail—and she or he will need to review and update their code.

Innovate—but don’t compromise on accessibility

While developing the prototype of the JotForm Cards layout, we’ve aimed to provide a usable interface for all of our visitors. After creating the first prototype, we ran pa11y and got 478 errors and almost 120 warnings in one of our forms. Oh dear.

But, after applying the simple steps above, we decreased this error number to… 0!

Just remember…

Accessibility doesn’t need to be hard or time-consuming. You don’t need to compromise your big, impressive UI. User experience can, and should be, the same for everyone.

We’ve done it—and so can you.

Keep reading about accessibility: Getting started with accessibility user testing.