Skip to Content Skip to Navigation

Refocusing the Modal

19 April 2016

Plugins and libraries are pretty neat. They can help developers save loads of time on their projects and include features otherwise too difficult or costly to develop – all with great results. They’ve enabled our industry to expand and adapt at a faster rate than ever before.

What sometimes holds back this space, however, is a lack of emphasis on the really important things – namely accessibility and supporting users who require assistive technologies.

We noticed this most in the modal/dialogue window plugin space. Accessible modal plugins were few and far between, and they lacked the right mix of quality, flexibility and aesthetics.

So we set ourselves the challenge: to create a modal plugin that is, first and foremost, accessible at a WCAG2.0 Level AA standard. One we would be proud and happy to use in our own client work and something we could share with the community to further the accessibility cause.

So… why another modal plugin?

There are some excellent modal plugins out there but none of them ticked the right boxes for us in terms of how we would use them or how well they meet our accessibility goal of WCAG 2.0 Level AA.

It ultimately made sense for us to develop our own plugin, something highly accessible that we could use in our own projects, which could also be tailored to suit the needs of a digital agency or independent developer.

Presenting Modaal

Today, we’re proud to release this to the community:

An accessible modal plugin for all humans.

For the better part of 3 months, we experimented with this plugin before actively implementing it in a variety of projects (some that are already out in the wild).

Using Modaal in our own client work has provided us with the opportunity to test it in a variety of environments, and shape it as a plugin for how it may be used by other developers.

Our primary focus was accessibility. We really wanted to make sure we did right by the standards. Finally, we can say Modaal offers:

  • WCAG 2.0 Level AA Support
  • Saving page focus state on modal open
  • Switching focus state to new content on modal open
  • Switching focus back to original state on modal close (eg. button clicked)
  • Maintained tab scope to modal content
  • ARIA support and customisation for modal title
  • Keyboard control for closing an open modal
  • Keyboard control for gallery next and previous
  • Default color contrast support optimised for readability
  • Accessible <button> close element with ARIA attribute
  • Optimised image gallery for assistive technologies
  • Compatibility with Screen Readers

Massive thanks go out to Julie Grundy and Isabel Brison for taking time out of their busy schedules to assist us with accessibility testing and helping shape Modaal to what it is today.

Other features in the Modaal plugin include:

  • Support for various content types:
    • Inline
    • Ajax
    • iFrame
    • Video
    • Single image
    • Gallery images (associated by rel attribute)
    • Embedded Instagram photo
  • Customisable CSS with SASS options
  • Support for inline attribute configuration such as ‘data-modaal-option-name’ attribute using a default class of ‘modaal’. (Currently does not in include support for callback events or methods)
  • Fully responsive behaviour
  • Full-screen/viewport mode
  • Flexible close options and methods
  • Option to start with the Modaal open on page load
  • Callback events for before and after Modaal open and close
  • Callback events for before and after image change in Gallery.

The biggest lesson

There is always space to provide accessible options for our users. That’s it.

Sure, there may be some instances where it’s more difficult but, where possible, we should strive to make our products usable for our whole audience.

Sometimes as designers and developers, we take for granted the work others have put into plugins and libraries because they do the job for what we need aesthetically and from an interaction standpoint. After all, we’re always on a deadline. The component that is often overlooked however is just how accessible some of these solutions are, and how that directly fits with our project requirements and goals.

In an ideal world, project budgets are big enough to allow for fancy transitions, animations and all the accessibility support we can muster, but we know this rarely happens.

Because of this, we want to be part of the crowd that produces something you can pick up to get one step closer to all of these goals.

Evolution of Modaal is definitely on the horizon, along with support and maintenance. If you find yourself using the plugin, thank you! Please let us know how you go (comment here or by email or on github). And keep an eye open for future updates.

View Modaal on Github

Like this post? Keep up with us on Twitter and Instagram.