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>
- use native
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?
Source: stackoverflow.com
Related Query
- How to connect form to its result
- How to connect simple Formik form with Redux store and dispatch an action?
- How to display result from two states after submitting a form
- How to connect a ReactJS Form to a Django model to automatically obtain fields (foreignkeys, choices etc.)
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- how to pass a child component's validated data (as a formik form) to its parent component and handle form submission in parent
- How to connect button to form submission using Material UI Cards?
- React.JS component's onClick function, how to be more specific with its result
- How to convert a React Element from its Object form back to Tag form when printing
- React - How to get a form to communicate with its children (form inputs)
- How to memoize a component or its result if its getting used twice on same parent component?
- How to connect component in html props in react-tippy to redux form
- How to hide "react-bootstrap modal" form that has preventDefault() inside its onSubmit?
- How to connect flask rest API output to react and display result
- How to submit a form and pop up a modal to display the result in React
- How to edit a form in wizard and save its state for wizard
- Redux - How to get form values in its submit handler and call event.preventDefault()?
- How to reset a result state to its initial value in react hook
- How to pass state value from form to its child modal?
- How to pass data from child component to its parent in ReactJS?
- How to generate unique IDs for form labels in React?
- How to submit a form using Enter key in react.js?
- How to get simple dispatch from this.props using connect w/ Redux?
- How do I add validation to the form in my React component?
- react-router: How to disable a <Link>, if its active?
- Formik - How to reset form after confirmation
- React formik form validation: How to initially have submit button disabled
- How to implement a dynamic form with controlled components in ReactJS?
- How to submit form from a button outside that component in React?
- How to connect Threejs to React?
More Query from same tag
- How to use Custom font for @react-pdf/renderer
- React: How can I import a Title-Component which will be commonly used
- Start at current date, and continue increment 5 days at a time
- Create New Line after each Array Element
- React Redux one-page app: handle an API 404 with full page render
- Passing current input value to parent compnent
- Jquery plugins giving errors $(...).ionRangeSlider not a function
- Unable to download the @react-navigation/stack
- How to sum values of an array with products and values and order from smallest to largest?
- Having a react jsx component in state, Best practice
- Redux + Reselect: Preventing selector recalculation when GPS data updates
- React server is not running through npm start
- React: onClick on button not working
- I want to change className of a div after push
- Seeking advice: Reason for maximum update depth exceed
- fp-ts Option, Typescript and undefined
- Show the values of each arc on doughtnut chart of chart.js
- How to test conditional rendering of components using Jest and Enzyme
- Rendering a component in order/after one has rendered (React)
- My React app is using values from the .env file instead of the .env.local file
- (React fetch data)what is the difference between these two
- Gatsby serve - Issue with canvas on initial render
- How to query from mongo db in react based on URL parameters
- How do I change a Formik TextField value from the outside of the From?
- Add production into development React Webpack config
- Change react version
- MUI Autocomplete not updating selected value when switching selected values between 2 autocomplete components
- ReactJS + Axios + NodeJS - _id: Cannot read property 'ownerDocument' of null
- How to get index value from mapping function in JSX passing single parameter or zero parameter
- How to compare /give codition for Array map -react js