Hacker News new | past | comments | ask | show | jobs | submit login

Any reason it is bad to use divs with aria attributes over <input> for a radio button choice? Because radio buttons are a pain to style and require all sorts of hacks to look nice. And in a real job you sometimes get asked to brand things, not just let the default styles come through.

Aria attributes aren’t enough to make an element accessible. You still need to set up listeners for keyboard navigation, you need to make the element focusable, you need to remember the aria attributes for labeling, etc. Chances are you are going to miss some of these. Better use a battle tested third party library for these, or—better yet—the native `<input type="radio">`.

Edit: Radio buttons are not hard to style[1]. Just use `appearance: none`[2] and style them as you wish with custom background colors and svg masks and whatnot.


1. https://codepen.io/anon/pen/qGeJWL

2. https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

Yes, the First Rule of ARIA Use is first for a reason. [0]

Also for styling, visually hiding the <input type="radio"> and using a custom radio-like icon with its associated <label> can be a decent option. Use a CSS selector like this to "check" an icon with the label: #radio1:checked + label::before

[0] https://www.w3.org/TR/using-aria/#rule1

Yes the `input[type="radio"]:checked + label::before` selector was for sure used a lot in the past for greater browser compatibility.

But in 2019 I think it is safe to style the radio element directly along with vendor prefixed `appearance: none;` possibly inside an `@supports` rule so that IE users will fall back to the native style while users of modern browsers get a custom style.

No, not unless you are for some reason doing something the intended audience’s browser may not support

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact