score:0

it's fine to have both the form and the table on the same page.

the form itself should be accessible which means you'll need:

  • labels associated with each form element
  • appropriate handling of error messages

the table itself should be accessible which means you'll need:

  • proper table structure
    • use native <table>
    • use native <tr>
    • use native <th scope="col"> and <th scope="row">
    • use native <td>

and the final piece is the communication of when the filters are applied and the table updates. what happens visually? is it just the contents of the table are updated? do you have any other text on the screen that updates such as "x results found"?

if only the table updates, then you'll want to have a "hidden" message that is announced for screen reader users. sighted users will see the table update but you should communicate that to non-visual users too. that can be done with "live" regions. it's pretty easy. you just have a container (<div>) that is visually hidden but can be updated with text. something like:

<div class="sr-only" aria-live="polite">
</div>

when the table is updated, it would look like this:

<div class="sr-only" aria-live="polite">
  table has updated.
</div>

(the actual message should probably be better than that. discuss that with your designer.)

the "sr-only" class is not something that is built in. you'd have to define it. that's just a common name to use for a class that is used to create text that is for "screen readers only" (sr-only). see what is sr-only in bootstrap 3?


Related Query

More Query from same tag