Make card items in Cwicly Cloud Library accessible


I was looking at card items (query loop cards) and noticed it will be better to structure the text before the image and then use flex order to make the image appear before.

Checkout Kevin video from 36 minute.

Here are my thoughts:

  • Always depends on the individual card content and design, so there is no pattern which could be introduced for a unified experience

  • Users will be confused and can’t follow what’s happening with their blocks and have no clue why it doesn’t reflect the Navigator item order

  • There are plenty of ways to address accessibility in this case. Removing predefined or default stuff is annoying just to add your own way which fits your requirements or needs

  • It rather provides a better user experience than it’s something crucial accessibility related

I think there could be a discussion about it if the card would be a pre-built block, which fortunately isn’t the case with Cwicly.
If necessary, implement it by yourself. It’s more straightforward than checking first what has already been done in that regard and then adjust things or even scrap them and add your own stuff.

Accessibility is an important topic but shouldn’t be overdone with predefined styles or attributes at the cost of other important topics.
Especially not when we have direct access to everything and there is no interaction in form of JS involved.
In this cases, it’s not the job of Cwicly, it’s yours.

But maybe it’s more of a hint in terms of the missing flex order property, who knows :man_shrugging:

Curious to find out about other opinions.

1 Like

Hi @Marius,

Thank you for sharing your thoughts! I understand that this part of accessibility has to be done on the user side and not from the builder end. I was clear about it. My suggestion was only to make the examples (cards) more accessible. But I see how it can be confusing for the users when the navigator order is different. I guess the way to go is to import them and change the order yourself.

Yes. We need the flex order property in the editor. But it’s fine for now with custom css.

1 Like

What I would find useful, is the ability to add a class or classes to an element when (keyboard) focusing, which could act like an actual user interaction (click).

This would be real added value in terms of accessibility experience.
A bit off topic and probably not be the best example, but just want to point out that there might be more important areas to care about in first place.


@Marius I think this can be tackled by the interaction library. Add / remove classes are a major features of most libraries I have checked. Ability to define an action like keyboard input will be amazing to have.

Yeah, that would be definitely interaction related @dranzer.

Good point, glad you mentioned it. This is a very important part.
Just as a basic example: If an element holds class X, then remove class Y with ESC key.
Plus the ability to add/remove/toggle any attribute and value.

Having these options available, one is able to create almost every element possible, with all important areas covered, like accessibility, etc.

I currently do avoid the interaction feature with a few exceptions for basic functionality.
In most of my use cases it is required to define additional attributes, which is not possible currently.

But I’m very optimistic we will have a very powerful solution at some point in Cwicly.

1 Like