Needs Accessibility Review

[mgifford]

The demo looks great, but points to the need of a serious accessibility review.

There is an open issue in the Drupal community looking at this, and we are working on a good pattern.

The start though is having elements be focus-able for keyboard only users.

[artf]

Thanks Mike for pointing this out, I definitely add this to the Roadmap (#74)

[ankx06]

@artf just wanted to check about the timeline to add this feature.
I see that you have moved it to backlog, so what is the plan to support focus on each component via keyboard.

[mgifford]

GatsbyJS has made a great commitment to accessibility. Might be worth checking them out @ankx06

[ankx06]

@mgifford thanks for the quick reply. I am still not able to navigate to all components in canvas. My expectation is to navigate to all the components using keyboard tab. Currently, keyboard focus goes to map and html native elements only.

Is there some configuration that is required to enable accessibility?

[mgifford]

I doubt it.. This isn't something you can just "turn on".

[artf]

GatsbyJS has made a great commitment to accessibility. Might be worth checking them out

@mgifford GatsbyJS itself is just a static site generator, not a kind of "site builder application", so what do you mean exactly with your statement?

I am still not able to navigate to all components in canvas. My expectation is to navigate to all the components using keyboard tab

You can actually move around components (once a component is selected in canvas) by using "W" (previous component), "S" (next component), "A" (parent component) and "D" (child component).
Default shortcuts are defined here and you can update them by using Keymaps API

[mgifford]

Ya, sorry.. Been a while since I posted this link in 2017.. Had kinda forgotten what the focus of GrapeJS is. But ya, as I said 5 days ago, accessibility "isn't something you can just 'turn on'."

[artf]

@mgifford no problem
BTW I'm not that much in a11y and unfortunately, I invest my time in other things so any help, from anyone, is highly appreciated

[mgifford]

There's so much else in the tech world to look at @artf totally understand.

One of the easiest ways to get started is to just us http://wave.webaim.org/

Load up one of your sites and see if there are errors. There's a nice browser extension for it that is quite handy.

You can then get into incorporating something like axe-core into it https://github.com/dequelabs/axe-core

Most sites care about SEO. Google cares about having good user experience. So using tools like this are also useful:
https://developers.google.com/web/tools/lighthouse/

Hope this helps.

[lexoyo]

For the records, here is a discussion about accessibility in grapesjs

https://www.reddit.com/r/accessibility/comments/15vbnxn/freelibre_website_builder_looking_forward_to_get/