Create an Accessible Website in Minutes With Figuration

First there was Skeleton, Zurb’s Foundation, Bootstrap and then all the others. Skeleton has been around for almost a decade, and the other two aren’t much younger either, and while technically Skeleton was never a framework, they all had something in common: poor accessibility support.

Luckily, there are more and more accessible web frameworks and libraries available for developers and designers, most of which I am not going to go into in this article, however I have very recently had the opportunity to review a new set of components released by CAST — Figuration — which I believe has great potential and should be a viable option especially for website developers.

Figuration, as CAST put it is “a feature rich, responsive, mobile first, accessible, front-end framework.” I would argue that it’s more of a library, or a kitchen-sink of components, than an actual framework, but I realise that’s semantics for most folks. Now, of course I cannot dismiss the reality that there are a myriad of similar component libraries out there, but what this one offers that the others don’t is accessibility. Accessibility is what sets Figuration apart from all the others, and is, in my opinion, their strongest selling point and key differentiator.

Another great aspect of Figuration is that it provides ready to ship components. You can literally take each of them, drop into a codebase and push it live to an environment. In that regard it’s extremely similar to Bootstrap and those who have used that in the past will find it very familiar both from a design and developer perspective. Unfortunately Bootstrap is not accessible, so this is a great alternative.

How accessible is Figuration?

I’ve reviewed the entire list of components — 15 to be more exact — and what Figuration seems to leverage very well is semantic HTML, with a couple of exceptions, such as the progress bar to which they have a more opinionated approach. Traditionally you’d use the <progress> tag, but I can see why Figuration is choosing to go with div and use aria instead. It makes the component more versatile and should anyone want to reuse the code in say a React or Angular application, can still very easily do so.

<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

All 15 components are very clean, easy to digest, relying mostly on semantic HTML and aria. These components are probably the least impressive feature of Figuration, and for a second there I must admit I was unimpressed. What wasn’t immediately obvious to me was the fact that there is another set of elements called widgets. These are what you would call interactive components, and they rely on jQuery.

Note: I wish component libraries such as this and many others would try and avoid jQuery. Maybe this is me being a snob, but over the years, the more I used vanilla JavaScript, the less I felt the need to pull in jQuery for my vanilla projects. Also, using jQuery makes this library a much less preferable candidate for web apps, where trends tend to show either veering towards web components, React, Svelte, Vue or Angular type development that relies on data and state.

Was it not for jQuery, it could have given libraries like Material UI a serious run for their money.

Having said that, I’ll admit Figuration’s set of interactive components are quite impressive, and some of them hard to find in any other library in a truly accessible form. One that I found particularly interesting and useful was the accessible scrollspy.

Of course, it seems, just like everyone else, they’ve shied away from the combobox — a long-time favourite of mine and a component that seems to have become an elusive accessibility unicorn.

Based on some brief testing commonly used widgets such as modal, tooltip and popover, all work as expected. One aspect I am always nit-picky about is being able to close these via the esc key and return the focus to the initial trigger component — both of which seem to work well. It would be interesting to see how these could be done as React, Svelte, Vue or Angular components, as that is something that tends to be come an issue with reusable components in a single page application.

The wish-list:

From an accessibility perspective there are none, none that I could find with the existing components anyway, as they all seem to adhere to the WCAG 2.1 specs quite closely. Having said that I would like to see:

• support for a vanilla JavaScript implementation
• more components like image-maps, tables (especially complex ones), etc
• more complex widgets like sortable tables, combobox, etc
• a React or Angular implementation — but perhaps that could become an open-source project?
• more support for modern single-page app development

The pros:

Now, of course don’t let the cons deter you from using this library, which is why I chose to end on a positive note.

• great documentation, easy to follow with well structured code examples, very reminiscent of Bootstrap
• a nice set of components and widgets catering for almost all types of sites
• it has the scrollspy widget, an accessible component I have not yet seen anywhere else
• if you know jQuery you’re going to be able to put together an accessible site in mere minutes — like 30 or so
• due to having jQuery under the hood, it’s beginner developer friendly, allowing more newbies in web development to start taking accessibility seriously from day one
• it’s free to use and comes with a set of utilities as well

CAST’s Figuration is a valiant effort to make the web a better place, a more accessible and inclusive platform for the modern world. It has great potential to become one of the most popular accessible component libraries if it starts catering for app developers who use libraries and frameworks such as React and Angular. All in all, a component library well-worth the attention!

Attila Vago — Sr. Software Engineer building amazing educational software. Cool nerd since forever, writer of codes since 2012. Web accessibility advocate. Lego fan. Loves craft beer!

HackerNoon, HMH Engineering, GitConnected and Quora writer.