Rainbow kitchen sink
-
Soumya
- Account details
- Logout
Radio button
Quick note on accessibility: Use fieldset and legend to wrap radio
button sets. This helps screen readers and is a requirement to fulfill WCAG 2.0.
Checkbox
Card
Simulation Card
Status Texts
Accordion
Select
Alerts
Input
Very helpful label description
If you look at the HTML you'll notice that the * isn't actually added as text. It is created by adding the class "required" to label
Wow! Who knew you could learn so much, so quickly. This is a really long text, isn't it?
This is how you should fix it
Input groups
Lorem ipsum dolor sit amet something something
Lorem ipsum dolor sit amet something something
Accessibility
To make the inputs more accessible when using screen readers, additional ARIA tags should be used.
Lorem ipsum dolor sit amet something something
- Add an ID to these tags: The input itself, prepend label, append label, label description, error message
-
Label: Add
for="input-tag-id" -
Input: Add
aria-describedby="id1 id2 id3". Note how you can add multiple space separated IDs. The IDs listed should be the error, then prepend, then append, then label-description. If no error is provided, drop the error id. -
Input: When there is an error, add
aria-invalid="true"
Input types
Use type="text"
Use type="text", not type="number". To compensate, add inputmode="numeric" and pattern="[0-9]*. For more information why, read this .
Use type="text", not type="number". While it might be tempting to set inputmode to decimal, this can cause some devices to bring up a keypad without a key for the decimal separator. 🤦🏼♂️
Use type="tel". Also add autocomplete="tel". Ideally, don't stop people from using spaces, hyphens, brackets and dashes
Use type="email". Also add autocomplete="email" and spellcheck="false".
Use type="password". If the user is expected to enter a new password, also add autocomplete="new-password"