Labels ensure that form controls are announced properly by assistive technologies like screen readers. A label is a piece of text that is associated with a form control, such as a text input, checkbox, or dropdown list. When a screen reader encounters a form control, it looks for its associated label and reads the label aloud to the user. This allows the user to understand what the form control is for and how to use it.
-
- Dark mode
- Confirmation modals
- Usage of red color in UI
- Empty states
- Do not use the hex values from the Figma
- Tailwind classes and Tailwind CSS variables should not be used for theme-related CSS properties
- Consistency in the way we are showing the delete option
- Enter or Command + Enter should submit the form
- Move the triple-dot menu to the first column in the table
- Opening a link in a new tab using Command + Enter is not working at a lot of places
- Handling bulk actions items in table
- Move toggle switch before the label
- Fix Table inconsistencies
- In some cases tooltip is not enough
- Remove CSS font-smoothing: antialiased to improve the text contrast
- When to use thumbs-up messages vs full success messages
- Side panel best practices
- When to store data in local storage as user is typing so that message is not lost
- Disable auto-close in error Toaster
- Use "small" or "nano" size header for inner pages
- In the table use the three-dot menu as opposed to side-by-side icon placements
- Fix the shrinking of 3 dots in first column
- Table columns not respecting the column widths
- Links need to be clear and predictable
- Using TableWrapper to avoid dynamic height computation
- AutoFocus on any field in an overlay (Modal/Pane)
- Handling UI markup inside email templates
- Ensure ideal line length
-
- General HTML best practices
- What is a screen reader?
- What is Semantic HTML?
- HTML semantic tags for text
- HTML semantic tags for structure
- What HTML tags are non-semantic?
- Accessibility guidelines
- Insert an element into the tab order
- Correctly set the visibility of offscreen content
- Keyboard access fundamentals
- Focus and the tab order
- Arrange elements in the DOM to be in logical order
- Use semantic HTML for easy keyboard wins
- Maximizing User Experience with Buttons
- Why links matter for keyboard navigation
- Control focus with tabindex
- Remove an element from the tab order
- Avoid tabindex > 0
- How to make buttons accessible with meaningful names
- Write accessible link texts
- Add alternative text to images
- Ensure form elements have associated labels
- How to add labels to form elements
- Understand the difference between block and inline elements
- Reducing markup
- SCSS 7-1 pattern
- Variables, Mixins & Extend
- CSS Architecture
- BEM Naming Convention
- Why should we consider BEM?
- SCSS and BEM
- CSS best practices
- When is it ok to disable text selection?
- Viewport best practices
- Character encoding best practices
- VSCode Recommended Extensions - TailwindCSS
Ensure form elements have associated labels
Can't find what you're looking for?
Open
Enter
Move
Close
Esc