Re: Open-UI popups

Thank you for sharing this, John. Great point about the layout. Maybe the shifting behavior is not a pattern that’s out of place on Web content, where we’ve become used to “reflow” (hence why I overlooked it), but it does run up against usability constraints in systems that use e-ink and in paginated UIs that are common in ebook readers.

Mateus


From: John Foliot <john@foliot.ca>
Date: Wednesday, July 14, 2021 at 9:02 AM
To: "Teixeira, Mateus" <mteixeira@wwnorton.com>
Cc: John Foliot <john@foliot.ca>, "Siegman, Tzviya" <tsiegman@wiley.com>, W3C Publishing Business Group <public-publishingbg@w3.org>, "public-publishingcg@w3.org" <public-publishingcg@w3.org>
Subject: Re: Open-UI popups


EXTERNAL EMAIL
Hi Mateus,

Yep, that seems to be the 'common' solution today (using <details>), but with it comes the fact that content on the 'page' moves (expands/contracts to expose the extended description) which has what some may consider negative implications on the layout.

Many years ago (when I was up to my neck fighting the @longdesc battle at HTML5), I had a colleague spin up a Proof of Concept demo that used jQuery and the longdesc attribute in a 'solution' that did not impact the layout of a page. See: http://blog.ginader.de/dev/jquery/longdesc/examples/webaim/index.php<https://nam12.safelinks.protection.outlook.com/?url=http%3A%2F%2Fblog.ginader.de%2Fdev%2Fjquery%2Flongdesc%2Fexamples%2Fwebaim%2Findex.php&data=04%7C01%7C%7C99d456372a7f4388432608d946e0d849%7C2916ea148f244be68a2d3afc0c7a4892%7C0%7C0%7C637618753789821173%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=Mpei9luXOdG1SZHVOXqNCJVw4ESgwJfXj0zkzf2S3UM%3D&reserved=0>

(There remain a few accessibility issues with this PoC, but the quick and dirty is to "click" on the "i in the circle" icon in the bottom right corner)

FWIW.

JF

On Wed, Jul 14, 2021 at 11:43 AM Teixeira, Mateus <mteixeira@wwnorton.com<mailto:mteixeira@wwnorton.com>> wrote:
One of my engineering colleagues here at Norton (Evan Yamanishi) worked with DIAGRAM on this exact problem at the Web4All code sprint—their solution did use <details>, but it would be an interesting idea to iterate on: https://github.com/diagram-codesprint/ExtendedImageDescriptions<https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fdiagram-codesprint%2FExtendedImageDescriptions&data=04%7C01%7C%7C99d456372a7f4388432608d946e0d849%7C2916ea148f244be68a2d3afc0c7a4892%7C0%7C0%7C637618753789831129%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=dwi4ToE3NG8yCZYXTBwoIy2UUKQpE3IgyyZm%2FXRTHPc%3D&reserved=0>

Evan maintains Norton’s open-source design system, which might be another useful source of examples (in that it’s made by a publisher with ebook use cases): https://wwnorton.github.io/design-system/<https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwwnorton.github.io%2Fdesign-system%2F&data=04%7C01%7C%7C99d456372a7f4388432608d946e0d849%7C2916ea148f244be68a2d3afc0c7a4892%7C0%7C0%7C637618753789831129%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=DcAHZZJ%2FeJQSYLZLJlgErfsvndnhIT8o51w2ZdC3Nq4%3D&reserved=0>

Will share this with him, as well.

Thanks,
Mateus


From: John Foliot <john@foliot.ca<mailto:john@foliot.ca>>
Date: Wednesday, July 14, 2021 at 8:20 AM
To: "Siegman, Tzviya" <tsiegman@wiley.com<mailto:tsiegman@wiley.com>>
Cc: W3C Publishing Business Group <public-publishingbg@w3.org<mailto:public-publishingbg@w3.org>>, "public-publishingcg@w3.org<mailto:public-publishingcg@w3.org>" <public-publishingcg@w3.org<mailto:public-publishingcg@w3.org>>
Subject: Re: Open-UI popups
Resent-From: <public-publishingcg@w3.org<mailto:public-publishingcg@w3.org>>
Resent-Date: Wednesday, July 14, 2021 at 8:20 AM


EXTERNAL EMAIL
Hi Tzviya,

My initial reaction was "...for rendering extended image descriptions"? (aka "longdesc" et. al.) - click on a complex image and launch a popup with the longer text? Without any user-testing at this point, it *may* nonetheless be a better experience than what we currently see/have with <details>. (???)

Just a thought.

JF

On Wed, Jul 14, 2021 at 10:46 AM Siegman, Tzviya <tsiegman@wiley.com<mailto:tsiegman@wiley.com>> wrote:
Hi All,

Open UI is a bunch of implementors coming together to design some extensible components for the Web. Here is their work on popups [1], which in the greater web context often refers to things like popup ads. We should take a look and see if there is anything we can add or use.

[1] https://open-ui.org/components/popup.research<https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fopen-ui.org%2Fcomponents%2Fpopup.research&data=04%7C01%7C%7C99d456372a7f4388432608d946e0d849%7C2916ea148f244be68a2d3afc0c7a4892%7C0%7C0%7C637618753789841087%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=hcrlk4Nv%2Fae9GNNCXNm7Pu6IYqtvCa1v1Ux8LnkByS0%3D&reserved=0>

Tzviya Siegman
Information Standards Principal
Wiley
201-748-6884
tsiegman@wiley.com<mailto:tsiegman@wiley.com>



--
John Foliot | Senior Industry Specialist, Digital Accessibility
"I made this so long because I did not have time to make it shorter." - Pascal "links go places, buttons do things"


--
John Foliot | Senior Industry Specialist, Digital Accessibility
"I made this so long because I did not have time to make it shorter." - Pascal "links go places, buttons do things"