0

Seeking some insight on what HTML Elements or UI control would be best suited to accomplish the following scenario. The ability to select a range of page numbers that could include a number of selections in a range that could include up to 200 pages. The selection would need to be available in a range, or individual selections at a time. The best scenario is to allow the user to single items, along with being able to shift-click a range of page numbers. Once page numbers have been selected and submitted. Then those pages can not be selected again for selection. I've mocked up an initial example with sort of button/icon selections. Are there alternative methods that I'm overlooking that may accomplish this better?

No selection No Selection Page selection range example Page Selections Disabled Selections with new page selections Disabled Previous Selections and New Page Selections

2
  • a button , but you could use a clickable div or a element as well (either way, you'll need to use JS)
    – Devin
    Feb 2 at 17:24
  • Slightly unrelated, but I would add a MouseEnter event in Javascript that checks if the mouse button is down. That way you can click and drag the mouse to select multiple. Feb 5 at 13:07

1 Answer 1

1

The question which HTML elements to use is only relevant from accessibility perspective and screen reader software in particular, so I'm going to answer with that in mind. If accessibility is not a concern (but it should) then any element can be used for or transformed into doing whatever you want.

To begin with this is a grid of options that can be selected. Because this is a multi-selection, the appropriate semantic element to use is a checkbox. It's basically a checkbox in disguise. The label can be styled as button and the checkbox can be visually hidden. I say "visually" hidden because it must be still visible for Assistive Technology like screen readers.

To make this usable for screen reader users you should make it a list:

The right semantic for this is <ol> since it's an ordered list.

<ol aria-label="Select pages">
    <li>
        <label class="button" for="c1">1</label>
        <input id="c1" type="checkbox" value="1" checked class="screen-reader-only">
    </li>
</ol>

With the display: grid css property this can be easily styled as a grid.

But since this is an enormous amount of checkboxes you can also consider breaking the list up into smaller portions to make it a bit more user friendly. Screen readers allow skipping over lists and for example 10 items per list can make a big difference. So instead stepping over 54 items, you can now step over 5 lists into the 6th and then navigate to the 5th item in a total of 10 steps.

<ol aria-label="Pages 1 to 10">
    ...
</ol>

<ol aria-label="Pages 11 to 20">
    ...
</ol>

Holding shift for selecting ranges seems valid. I don't know how that would work while using a screen reader but that is a bit too specific to dive into here. It is a matter of using the proven semantic elements and lots of testing. NVDA for Windows is free and MacOS has VoiceOver by default installed to do that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.