Scenario:
We have a set of radio button cards grouped together, which we want to arrange differently for small and large screens. I am looking for a solution that allows us to achieve this without duplicating the HTML code and maintain accessibility.
Preferred layout for large screens:
|Large|Medium|Small|
Preferred layout for small screens:
|Small|
|Medium|
|Large|
Expected accessibility behavior:
In a typical radio group, users would expect to navigate through options using the tab key to select the first option and then arrow keys to move between options.
Approaches attempted:
I've experimented with utilizing display:flex and adjusting the flex-direction based on screen breakpoints (either row or
column-reverse</code). Additionally, I added <code>tabindexHere's a simplified example:
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<p>Standard view:</p>
<div style="display:flex;">
<div>
<input type="radio" id="featured" name="tier2" value="featured" tabindex="1">
<label for="featured">Featured</label><br>
</div>
<div>
<input type="radio" id="standard" name="tier2" value="standard" tabindex="2">
<label for="standard">Standard</label><br>
</div>
<div>
<input type="radio" id="basic" name="tier2" value="basic" tabindex="3">
<label for="basic">Basic</label>
</div>
</div>
<p>Mobile view:</p>
<div style="display:flex; flex-direction:column-reverse">
<div>
<input type="radio" id="featured" name="tier" value="featured" tabindex="3">
<label for="featured">Featured</label><br>
</div>
<div>
<input type="radio" id="standard" name="tier" value="standard" tabindex="2">
<label for="standard">Standard</label><br>
</div>
<div>
<input type="radio" id="basic" name="tier" value="basic" tabindex="1">
<label for="basic">Basic</label>
</div>
</div>
</body>
</html>
Inquiries:
- Are there other attributes similar to
tabindexthat dictate the arrow key navigation order? - Is there an alternative method to achieve this without redundant HTML?
Appreciate the insights!