Hacker News·22wPikaday
Most forms don't need JavaScript date pickers. Native HTML date/time inputs handle accessibility, performance, and internationalization automatically. For better usability, consider separate inputs for day/month/year, select dropdowns for limited options, or masked inputs with validation. Complex calendar widgets lead to more errors and accessibility issues. Keep forms simple by using native browser features and basic HTML elements that are easier to use and test.
Lobsters·22wReimagine the Date Picker
The creator of Pikaday, a popular JavaScript date picker library from 2012, has archived the project and transformed it into a guide advocating against calendar widgets. The new resource encourages developers to use native HTML date inputs or simpler alternatives, arguing that complex calendar UIs lead to errors and poor usability. The guide challenges the assumption that date pickers need elaborate JavaScript libraries, emphasizing user-friendly interfaces over technically accessible but complicated components.
GitHub Blog·21wLevel up design-to-code collaboration with GitHub’s open source Annotation Toolkit
GitHub open sourced the Annotation Toolkit, a Figma library that improves design-to-code handoffs by embedding accessibility documentation directly into design files. The toolkit uses numbered annotation stamps to document design intent, WCAG compliance requirements, and interactive behaviors, preventing accessibility issues before they reach production. GitHub's internal data showed 48% of accessibility audit issues could have been prevented with better upfront documentation. The toolkit is available on Figma Community and GitHub, includes interactive checklists and WCAG guidance, and accepts community contributions.
Cloud Four·22wSimple One-Time Passcode Inputs
Build fully functional one-time passcode (OTP) inputs using semantic HTML with proper attributes like inputmode, autocomplete, and pattern validation. The approach demonstrates how to create accessible, progressively enhanced OTP forms without complex JavaScript frameworks or multiple input elements, using a single text input with clear labeling and optional styling enhancements through CSS and lightweight web components.
TkDodo·21wTooltip Components Should Not Exist
Standalone tooltip components in design systems often lead to accessibility problems and inconsistent user experiences. The core issue is that low-level tooltip components allow developers to attach tooltips to non-interactive elements, breaking keyboard navigation and creating unpredictable UX patterns. Instead of exposing a generic Tooltip component, design systems should provide higher-level pattern components like IconButton with required titles, InfoIcon components, and InfoText elements that enforce accessible, consistent tooltip behavior by design. This restrictive approach ensures keyboard interactivity, visual discoverability, and proper accessibility labeling while preventing common misuse patterns.
CodePen·21wChris’ Corner: Cursors
CSS provides built-in cursor styles that can enhance user experience when applied thoughtfully. OS-supplied cursors support accessibility features like size adjustments, while custom cursors can create problems. The article explores cursor best practices, highlighting how tools like Figma extend cursor functionality with contextual information, preview states, and collaborative features without replacing the default cursor entirely.
CSS-Tricks·22wHeadings: Semantics, Fluidity, and Styling — Oh My!
Explores three key aspects of HTML headings: proper semantic placement of h1 elements relative to header and main landmarks for screen reader accessibility, implementing fluid typography using clamp() with viewport-relative units while maintaining zoom accessibility, and the new CSS :heading pseudo-class in Firefox Nightly that simplifies heading selection beyond traditional element selectors.
CSS-Tricks·23wExplaining the Accessible Benefits of Using Semantic HTML Elements
Semantic HTML elements like <button> provide built-in accessibility features that generic <div> elements lack, including proper role exposure, automatic focus management, keyboard support for Space and Return keys, and accessible labeling. While developers might choose <div> for easier styling, recreating these native behaviors requires significant JavaScript and ARIA attributes. Browser DevTools can inspect these semantic differences directly, revealing how assistive technologies interpret elements differently.