Make custom radio control accessible to screen readers - html

Question

I needed to create a radio control for selecting 1 of 12 pre-defined options. User's needed an overview of all possible options at a glance, and to see the full details of each option on hover/focus/select. There's a lot of detail for each option but they can be grouped together easily (AWS EC2 Instance Types).
Here's what I created:
Except for tabindex, :hover, :focus, :active, the interaction is controlled by JavaScript. After simplifying, the markup looks like this:
<div>
<div>
<h3>General Purpose</h3>
<!-- details... -->
<div>
<span>1x</span>
<!-- others... -->
</div>
</div>
<div>
<h3>Accelerated Computing v2</h3>
<!-- content... -->
</div>
<div>
<h3>Accelerated Computing</h3>
<!-- content... -->
</div>
</div>
It works for well-sighted keyboard/mouse users but I'm not sure how to adjust this input for screen readers.
As an additional wrinkle, we should read just the size & hourly price when previewing an option from the same group the user is already looking at, and I'm not sure how to do this either.
NB: You can only click "1x", "2x", etc. these are the only selectable elements, the highlight around the category is just a visual thing.
Thanks for reading! Can you help?

Answer 1

Follow the "Radio Group" pattern on the WAI-ARIA Authoring Practices 1.1. You basically need a role="radiogroup" (with a label) around the entire container (the parent of your 12 <div>s) and then each radio button should have role="radio". (You'll also need aria-checked and possibly aria-label or aria-labelledby on each radio button, but that is explained in the pattern.)
Note that specifying these ARIA attributes only conveys the semantics of the object to screen readers. It does not give you any behavior of a radio group. That is, when the user selects one radio button, it's up to you (presumably via javascript) to unselect the previous button that was selected.
To answer your question about only reading part of the information, you can use aria-hidden on anything you don't want read, or you can specify an aria-label or aria-labelledby which will override any embedded text in child elements. The example below uses aria-labelledby and points to the heading of each radio button so only that heading will be read when the screen reader tabs to the radio button. However, hiding information from screen readers would fail accessibility compliance (WCAG) if the information is available to sighted users. In your screenshot, if the cost per hour, the GPU, and other info is visible to sighted users but hidden from screen reader users, that would be bad.
Note also that you need to manage the keyboard focus yourself (javascript). Only one of the radio buttons should have tabindex="0" and the others should have tabindex="-1". If the user presses the down arrow, the radio button that used to have tabindex="0" should now have tabindex="-1" and the newly focused radio button should have tabindex="0". The aria-checked attribute should match the tabindex so that the button with tabindex="0" has aria-checked="true" and the buttons with tabindex="-1" should have aria-checked="false".
Here's a rough sample using your original code. Note that the radio buttons are using aria-labelledby pointing to the headings, but this is not recommended because the cost per hour, GPU, etc will be hidden from screen reader users.
<div role="radiogroup" aria-label="your 12 options">
<div role="radio" aria-labelledby="GeneralPurpose" tabindex="0" aria-checked="true">
<h3 id="GeneralPurpose">General Purpose</h3>
<!-- details... -->
<div>
<span>1x</span>
<!-- others... -->
</div>
</div>
<div role="radio" aria-labelledby="AccComputing2" tabindex="-1" aria-checked="false">
<h3 id="AccComputing2">Accelerated Computing v2</h3>
<!-- content... -->
</div>
<div role="radio" aria-labelledby="AccComputing" tabindex="-1" aria-checked="false">
<h3 id="AccComputing">Accelerated Computing</h3>
<!-- content... -->
</div>
</div>