2 ms·

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,

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 https://codepen.io/anon/pen/qGeJWL 2. https://developer.mozilla.org/en-US/docs/Web/CSS/appearance https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

extra88 7y ago
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 https://www.w3.org/TR/using-aria/#rule1
- runarberg 7y ago
  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.