search

wordplaydev / wordplay

An accessible, language-inclusive programming language and IDE for creating interactive typography on the web.
Other
60 stars 22 forks source link

Content Discussion on why Words Tilt when Hovered Over #476

Closed elianna-b closed 4 months ago

elianna-b commented 4 months ago

What's the problem?

Why do highlighted words tilt when hovered over? I understand this is an intentional feature, but I would like to know the thoughts behind it. I love the hover feature for aesthetics, but I have learned that it is usually inaccessible by more users (phones, screenreaders, etc.) and can be detrimental to a user's experience with the layout shifts, potentially pushing all the text down, etc (can further test this).

image

From INFO 340: "While neat looking, in general modifying page appearance based on the :hover property is not a great idea and should be used sparingly if at all. The :hover property doesn't work with mobile devices...and changing element styling on hover...can cause cascading effects on the rest of the page...that will make the page harder to read and interact with" (https://info340.github.io/css-selectors.html).

Mentioned in WCAG: I might be understanding this incorrectly, but the hover and tilt tool is not mentioned and is not an applicable accessibility or enhancing use of hover. image

image

What's the design idea?

I propose removing this feature entirely and keeping the highlighted differentiations to notify the user it is clickable/draggable. Want to discuss and my opinion is not set in stone at all :)

What do you propose to change or add to address the problem above? Describe some functionality, a design concept, a redesign, or alternative designs that might address the problem. Provide as much detail about the idea as you currently have, but no need to provide an exact design specification if you don't have one. (That goes below).

Design specification

Reporters can leave this blank. Designers should write a detailed, precise description of what is to be built. If images are necessary to convey this precisely, make sure to include image descriptions, so everyone can see what is in the image. Do not link to external documents; everything should be embedded here. Once the design is approved, we will remove the needs design tag and replace it with the buildable tag, signaling that it can be built.

amyjko commented 4 months ago

The rationale for this feature is whimsy, to align with the platform's broader goal of signaling programming as playful, and not serious.

While Joel's guidance and the WCAG guidance is correct, they don't apply this in this case: there is no functionality or content that this hover effect exposes or influences, and so it not being available on mobile has no impact, and it not being visible to screen readers does no harm. It also does not cause layout shifts, because it is not changing the dimensions of the link or its layout, only the rotation at which it is rendered.

If you can point to a concrete harm from the whimsy, then we can decide how to balance the two. But I don't see evidence of harm.

elianna-b commented 4 months ago

Closed: Design reasoning: whimsy. Questions were answered and did a check of the functionality on a variety of screen sizes and different devices, no harm.