New accessibility features in AlloyEditor

As many of you know, a while ago we presented AlloyEditor as the result of our quest for a delightful and productive editing experience. Alloy Editor was included by default as the rich editor in Liferay 7 (Yay!)

 

While we stand by it, our search for simplicity has inadvertently complicated some previously trivial tasks such as adding an alt attribute to an image. You can still add it editing the source code directly as shown in the following animation, but this is far from an ideal experience.

 

alloyeditor_sin_alt.gif

 

This attribute is essential to provide proper accessibility and SEO to your contents. Furthermore, some may even be mandatory for some projects and public institutions. Accessibility is very important to us so we have given high priority to solving this issue.

The solution

The solution has been to add a simple but useful button to support this option. As you can see below, the button only shows when the user selects an image, without cluttering the rest of the UI.

 

alloyeditor_con_alt.gif

 

Thanks to the new extensibility features of the platform, we’ve developed a module that automatically adds this button and configures the editor to show it on the image toolbar.

 

You can already use this new button in Liferay DE Fix-Pack-4 and it will be bundled in the next GAs of Liferay Portal.

 

What’s coming next?

On top of this simple addition, we’ve been researching on a more general approach to make creating accessible content as easy and enjoyable as possible. This includes:

  • Automatic detection of accessibility problems as you type.

  • Hints and auto-fixing mechanisms to easily improve the contents.

  • Configurable set of rules and severities to focus on what matters most.

 

We’d love to hear some feedback from all of you regarding what are your most pressing needs and how you’d imagine they could be solved.

Blogs