https://github.com/schne324/accessible-custom-form-controls

mobile-friendly, accessible custom form controls
https://github.com/schne324/accessible-custom-form-controls

Last synced: about 2 months ago
JSON representation

mobile-friendly, accessible custom form controls

• Host: GitHub
• URL: https://github.com/schne324/accessible-custom-form-controls
• Owner: schne324
• License: mit
• Created: 2014-12-29T15:21:46.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2015-01-22T15:14:48.000Z (almost 10 years ago)
• Last Synced: 2024-04-24T10:24:48.818Z (9 months ago)
• Language: JavaScript
• Homepage:
• Size: 215 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
accessible-custom-form-controls

====================

Accessible Custom Form Controls with full keyboard support and proper accessibility roles/attributes/properties

## Custom Checkboxes

 - each custom checkbox receives the following roles/attributes/properties:

   - `role="checkbox`

   - `aria-labelledby="the-id-of-the-label-element"`

   - `aria-checked="true/false"`

   - `aria-setsize="(the amount of checkboxes in the group)"`

   - `aria-posinset="(the current index of the given checkbox"`

   - `

## Custom Radios

 - The group (`
`) receives:

   - `role="radiogroup"`

   - `aria-required="true"`

   - `aria-labelledby="the-id-of-the-common-label"`

 - Each custom radio receives:

   - `role="radio"`

   - `aria-labelledby="the-id-of-the-label-element"`

   - `aria-checked="true"` when the radio is selected

   - `tabindex="0"` when the radio is selected

   - `aria-checked="false"` when the radio is NOT selected

   - `tabindex="-1"` when the radio is NOT selected