<select> clarifications for forms page

[18f]

clarifications for forms page

from accessibility.

Comments (12)

Scotchester commented on July 19, 2024

/cc my colleague @contolini, developer of that page.

meiqimichelle commented on July 19, 2024

Thanks, @Scotchester and @contolini, for any insight! For background, I'm looking to collect/create nice, 508- and WCAG-AA-compliant (and visually-skinned) form elements so we have them on hand for our frontend development. I have a project in particular I'm working on right now, but I plan to document as a guide for future copy-and-paste delight. If y'all have already done this at CFPB, this would be fantastic!

contolini commented on July 19, 2024

@meiqimichelle Thanks for bringing this up. The HTML on the HMDA page is generated by chosen and we need to revisit our use of that plugin. @himedlooff made some accessible selects that we use in projects like Owning a Home. Eventually, they'll be merged into Capital Framework, our pattern library.

Here's a standalone demo of the OAH selects if you're curious.

nickbristow commented on July 19, 2024

@meiqimichelle yeah that first page you linked to, those selects aren't accessible. Just tried it with a screen reader and it didn't give me any indication it was a select box.

meiqimichelle commented on July 19, 2024

Thanks @contolini for the info! Excited to see that work merged into the Capital Framework -- thanks for the link to the section for forms! What I want for our team is basically that, plus a little extra HTML that includes more context around 508/AA required info, plus info on proper checkboxes/radio buttons. I will see if it makes sense to fork your work somehow (with the understanding that CF does a lot more than that page! so -- maybe it doesn't make sense, we'll see. Would rather use what you've started if I can).

@nickbristow Thanks!

contolini commented on July 19, 2024

@meiqimichelle Thanks for doing all this research! We have already learned a lot from this accessibility repo. And don't be afraid to hit us up if you have any more concerns/questions about any of our sites. Transparency and accessibility are important to us.

shawnbot commented on July 19, 2024

Another option we should consider is making some accessibility contributions to Chosen. We're using it in several projects already, so it might behoove us to make whatever tweaks are necessary to bring it into compliance. @nickbristow, what would that take?

contolini commented on July 19, 2024

@shawnbot AFAIK there are hacks to make it more accessible but the official maintainers haven't prioritized accessibility. 😢 And given the number of open PRs, the library appears to be abandoned. Let me know if y'all want to fork it and fix it -- I'd be down to help.

meiqimichelle commented on July 19, 2024

@shawnbot I haven't used chosen before so I don't know how much the library controls but...as for making it accessible, it seems like it would work if we switched the hide the doubled-content <select> from display: none to an accessible "move this way off screen left."

I say "not sure how much the library controls" because I'm not sure if the hidden <select> is built in, or if that's something that was added separately. Either way, it should work, tho of course double-check with @nickbristow .

shawnbot commented on July 19, 2024

@contolini a fork might be in order. We use it in Tock, and I know that we've got a couple of other projects using it as well. I've asked some of the other frontend-y folks at 18F to weigh in too.

Select2 is apparently (according to this comment) a fork of Chosen, and though it has lots of open issues it's being actively developed and there are also only a handful regarding accessibility. Might be worth a look too?

andrewmaier commented on July 19, 2024

I've used this in the past with success: https://github.com/filamentgroup/select

mgwalker commented on July 19, 2024

Closing as stale, on the assumption that the need will resurface if it still exists.

Related Issues (20)

• Broken Link on the 18F Accessibility Guide Home Page
• Redirected or Broken Links on the 18F Accessibility Guide Tools Page
• Redirected Link and Confusing Text on the 18F Accessibility Guide Color Page
• Incorrect LABEL FOR and INPUT Field ID on the 18F Accessibility Guide Forms Page HOT 1
• Possible Heading Numbering Issue on the 18F Accessibility Headings Page
• Content Correction on the 18F Accessibility Guide Hidden Content Page
• Redirected Link on the 18F Accessibility Guide Hadden Content Page
• Confusing Content on the 18F Accessibility guide Language Page
• Different Content Styling on the 18F Accessibility Guide Tables Page
• Code Items Need Code Tag on Them on the 18F Accessibility Guide Tables Page
• Incorrect Table Caption on the 18F Accessibility Guide Tables Page
• Correct Content on the 18F Accessibility Guide iframes Page HOT 2
• Confusing Text on the 18F Accessibility Guide Links Page
• Wrong Skip Navigation Link Anchor Code in Example on the 18F Accessibility Guide Links and Repetitive Content Page
• Are Plugins Necessary on the 18F Accessibility Guide? HOT 1
• Incorrect Capitalization on the 18F Accessibility Guide Writing Guide Page
• Page Navigation Highlighting is Missing on the 18F Accessibility Guide Writing Guide Page HOT 1
• Instructions for generating and running site locally are out of date HOT 1
• pa11y fails when running in GitHub HOT 1
• 508 Compliance for web interface HOT 3

Recommend Projects

• React

  A declarative, efficient, and flexible JavaScript library for building user interfaces.

• Vue.js

  🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

• Typescript

  TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

• TensorFlow

  An Open Source Machine Learning Framework for Everyone

• Django

  The Web framework for perfectionists with deadlines.

• Laravel

  A PHP framework for web artisans

• D3

  Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

• javascript

  JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

• web

  Some thing interesting about web. New door for the world.

• server

  A server is a program made to process requests and deliver data to clients.

• Machine learning

  Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

• Visualization

  Some thing interesting about visualization, use data art

• Game

  Some thing interesting about game, make everyone happy.

Recommend Org

• Facebook

  We are working to build community through open source technology. NB: members must have two-factor auth.

• Microsoft

  Open source projects and samples from Microsoft.

• Google

  Google ❤️ Open Source for everyone.

• Alibaba

  Alibaba Open Source for everyone

• D3

  Data-Driven Documents codes.

• Tencent

  China tencent open source team.

Friends: ProductDiscover

Copyright © 2024 Giter Site ❤️ Mail to me

[Scotchester]

/cc my colleague @contolini, developer of that page.

[meiqimichelle]

Thanks, @Scotchester and @contolini, for any insight! For background, I'm looking to collect/create nice, 508- and WCAG-AA-compliant (and visually-skinned) form elements so we have them on hand for our frontend development. I have a project in particular I'm working on right now, but I plan to document as a guide for future copy-and-paste delight. If y'all have already done this at CFPB, this would be fantastic!

[contolini]

@meiqimichelle Thanks for bringing this up. The HTML on the HMDA page is generated by chosen and we need to revisit our use of that plugin. @himedlooff made some accessible selects that we use in projects like Owning a Home. Eventually, they'll be merged into Capital Framework, our pattern library.

Here's a standalone demo of the OAH selects if you're curious.

[nickbristow]

@meiqimichelle yeah that first page you linked to, those selects aren't accessible. Just tried it with a screen reader and it didn't give me any indication it was a select box.

[meiqimichelle]

Thanks @contolini for the info! Excited to see that work merged into the Capital Framework -- thanks for the link to the section for forms! What I want for our team is basically that, plus a little extra HTML that includes more context around 508/AA required info, plus info on proper checkboxes/radio buttons. I will see if it makes sense to fork your work somehow (with the understanding that CF does a lot more than that page! so -- maybe it doesn't make sense, we'll see. Would rather use what you've started if I can).

@nickbristow Thanks!

[contolini]

@meiqimichelle Thanks for doing all this research! We have already learned a lot from this accessibility repo. And don't be afraid to hit us up if you have any more concerns/questions about any of our sites. Transparency and accessibility are important to us.

[shawnbot]

Another option we should consider is making some accessibility contributions to Chosen. We're using it in several projects already, so it might behoove us to make whatever tweaks are necessary to bring it into compliance. @nickbristow, what would that take?

[contolini]

@shawnbot AFAIK there are hacks to make it more accessible but the official maintainers haven't prioritized accessibility. 😢 And given the number of open PRs, the library appears to be abandoned. Let me know if y'all want to fork it and fix it -- I'd be down to help.

[meiqimichelle]

@shawnbot I haven't used chosen before so I don't know how much the library controls but...as for making it accessible, it seems like it would work if we switched the hide the doubled-content <select> from display: none to an accessible "move this way off screen left."

I say "not sure how much the library controls" because I'm not sure if the hidden <select> is built in, or if that's something that was added separately. Either way, it should work, tho of course double-check with @nickbristow .

[shawnbot]

@contolini a fork might be in order. We use it in Tock, and I know that we've got a couple of other projects using it as well. I've asked some of the other frontend-y folks at 18F to weigh in too.

Select2 is apparently (according to this comment) a fork of Chosen, and though it has lots of open issues it's being actively developed and there are also only a handful regarding accessibility. Might be worth a look too?

[andrewmaier]

I've used this in the past with success: https://github.com/filamentgroup/select

[mgwalker]

Closing as stale, on the assumption that the need will resurface if it still exists.