HTML5辅助功能：如何指示在网格布局和列表布局之间切换？

Question

I want to create buttons to switch between grid and list layout for displaying table of images:

<div>
    <span>Layout:</span>
    <button ng-click="$ctrl.switchToList()">
        <span class="fa fa-list" aria-hidden="true"></span>
        <span class="sr-only">Set list layout</span>
    </button>
    <button ng-click="$ctrl.switchToGrid()">
        <span class="fa fa-th" aria-hidden="true"></span>
        <span class="sr-only">Set grid layout</span>
    </button>
</div>

And if list is chosen layout looks like regular table ( <tr> and image data in separated <td> s, no thumbnail), when grid is chosen it looks like grid of thumbnail. But I don't know how to label to screen readers / search engines that Layout label describes this 2 possibilities. It's easy if it comes to radios/checkboxes cause then fieldset / legend approach can be used, but there is no form. It looks like there is 2 possible solutions: aria-describedby or aria-labelledby . But they quite similar and IMO they do not fit in 100% to my problem - cause I need something like fieldset / legend to indicate possible values rather than aditional description, I think. Is there something which can help me, something like fieldset / legend but not for forms? Thank you in advance for every answer.

Answer 1

You could use fieldset / legend without a form .

But do you need to do anything in the first place? The button elements already have descriptive labels (their content), and can stand on their own. An additional label like "Layout" doesn't really add anything, as the buttons already make clear that they set the layout.

You could consider to use the menu role ("A type of widget that offers a list of choices to the user."), and give each button the menuitem role :

An option in a group of choices contained by a menu or menubar .

Note that you can't use menu on a fieldset element. You could use something like this:

<div role="menu">
  <button type="button" role="menuitem">Set grid layout</button>
  <button type="button" role="menuitem" disabled>Set list layout</button>
</div>

(Note that I added type="button" ; otherwise the buttons are considered to be submit buttons.)