2 links tagged with all of: accessibility + progressive-enhancement
Click any tag below to further narrow down your results
Links
Safari 27’s customizable select lets you fully style <select> controls without JavaScript, but you must include text or accessible labels for each option. Skipping text breaks keyboard navigation, screen readers, and fallbacks in unsupported browsers—icons or swatches must supplement, not replace, option text.
- Safari 27's customizable select allows full CSS styling of dropdowns while keeping native keyboard/accessibility behavior, but only if every option retains real text or an aria-label.
- Icon-only options (e.g., a hummingbird icon with no label) leave screen readers silent and sighted users guessing, since nothing conveys which option is selected or what it means.
- If CSS fails or a browser lacks support, the control falls back to a default select—so text-less options degrade into a list of blank entries.
- Best practice: wrap custom styles in @supports(appearance: base-select), design with plain text as the foundation, and add icons/swatches as supplements—visually hidden if needed—never as replacements for text.
A contractor rebuilt a utility company’s user sign-up flow with an HTML-first, Astro-based form that works without JavaScript, stores each step server-side, and meets WCAG AA. By using simple form submissions, progressive enhancement, and a tiny web component for validation, form completions doubled overnight and users never lost their data.
- An HTML-first, server-rendered Astro rebuild (each wizard step a real page, plain form POSTs) doubled form completions overnight after a React version with spinners and localStorage-based image storage failed and was rolled back in three days.
- The "missing" users were real all along—JS-based analytics tools had been silently dropping people whose browsers/connections choked on the old JS bundles.
- A 1KB web component (validation-enhancer) added accessible, non-intrusive validation on top of native HTML form validation without sacrificing progressive enhancement or WCAG AA compliance.
- Storing each step's data server-side meant users never lost progress, even resuming an application a month later.