E-mail List Archives
Thread: Alternatives to a custom listbox
Number of posts in this thread: 4 (In chronological order)
From: jeffgutsell@fuse.net
Date: Fri, Feb 02 2024 11:01AM
Subject: Alternatives to a custom listbox
No previous message | Next message →
Hi All,
A developer friend has quizzed me bout creating a custom popup listbox that needs to contain images next to each text option. I pointed him to the W3 authoring guidelines page on listboxes as well as the whatsock.com site.
But I got to thinking that this widget apparently will only have a handful of options. So I am wondering whether there would be a problem with just putting a standard radio buttons group in a <div> popup?I am not sure exactly what the options will be. He just said this would have been perfect for a <select> control accept for the need for pictures.
Jeff Gutsell
From: Steve Green
Date: Fri, Feb 02 2024 11:39AM
Subject: Re: Alternatives to a custom listbox
← Previous message | Next message →
You could do that as long as you add the appropriate ARIA attributes and keyboard event handlers. I generally recommend using <details> and <summary> elements because all the accessibility requirements are baked-in and no JavaScript is needed.
Steve Green
Managing Director
Test Partners Ltd
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of = EMAIL ADDRESS REMOVED =
Sent: Friday, February 2, 2024 6:01 PM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] Alternatives to a custom listbox
Hi All,
A developer friend has quizzed me bout creating a custom popup listbox that needs to contain images next to each text option. I pointed him to the W3 authoring guidelines page on listboxes as well as the whatsock.com site.
But I got to thinking that this widget apparently will only have a handful of options. So I am wondering whether there would be a problem with just putting a standard radio buttons group in a <div> popup?I am not sure exactly what the options will be. He just said this would have been perfect for a <select> control accept for the need for pictures.
Jeff Gutsell
From: Laurence Lewis
Date: Fri, Feb 02 2024 2:05PM
Subject: Re: Alternatives to a custom listbox
← Previous message | Next message →
Hi Jeff
This is purely experimental, but a Popover could work. The functionality
enables creating a popover that expands to a list of options with image and
text. It displays a detailed view with a larger image and description when
a link in the popover container is clicked..
Working example on Codepen
https://codepen.io/Deafinitive/live/OJqZRYK
From: jeffgutsell@fuse.net
Date: Fri, Feb 02 2024 2:49PM
Subject: Re: Alternatives to a custom listbox
← Previous message | No next message
Thanks, Lawrence and Steve,
I will look into both ideas tomorrow.
Some background: My friend was doing C++ projects when I worked with him in the 90s. After I retired, I learned that he was doing Web work and complained bitterly about being told to make an accessible navigation menu. I showed him how to make that more or less painless and he has gradually gravitated to the cause
I enjoy keeping him moving in the right direction.
Jeff
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Laurence Lewis
Sent: Friday, February 2, 2024 4:05 PM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Alternatives to a custom listbox
Hi Jeff
This is purely experimental, but a Popover could work. The functionality enables creating a popover that expands to a list of options with image and text. It displays a detailed view with a larger image and description when a link in the popover container is clicked..
Working example on Codepen
https://codepen.io/Deafinitive/live/OJqZRYK