I start by saying that I am not a developer, but I understand the minimum of JS … However I am not managing to solve something that in my view seems very simple (I think it is). Using List.js I was able to configure the filters to filter specific items in the guide-wcag.com/en/ I was able to configure the error
Tag: accessibility
Lazy loading images with accessibility and printer support
I am looking for a proper way to implement lazy loading of images without harming printability and accessibility, and without introducing layout shift (content jump), preferrably using native loading=lazy and a fallback for older browsers. Answers to the question How lazy loading images using JavaScript works? included various solutions none of which completely satisfy all of these requirements. An elegant
Focus trap for multiple modals
I’m working on a trap focus modal functionality and it works well with a single element, but I can’t get it working with multiple elements. It traps focus only on last modal. I know there is something wrong with my loop, I tried to catch activeElement and add a condition if it’s equal to focused element but with no result.
What should be the `aria-role` of an accordion? During accessibility check, my accordions are read as buttons, which may confuse the user
I have a webpage and I have managed to keep few accordions in it as well. Since I have given “role”=”button” on accordions, my accordions are read as ‘button’ during accessibility testing. What should be the aria-parameter values if I wanted my accordions to be read as accordions itself, not buttons? Can someone give an insight on it? Also, it
“Warning: react-modal: App element is not defined. Please use `Modal.setAppElement(el)` or set `appElement={el}`”
How do I fix this warning in console of a React app using the react-modal package: Warning: react-modal: App element is not defined. Please use Modal.setAppElement(el) or set appElement={el} I have not been successful at figuring out what el is supposed to be. Context: in my App.js root component file: Where … indicates code not shown. Everything works fine, but
Accessibility – React Ensure click events have key events
I want to be sure that all my onClick event are next to a onKeyDown event. I will use eslint-plugin-jsx-a11y to ensure this. But in code, It is a way to do this generic. I mean, it will be annoying to do all the time: I would like to have a way to tell an element that in onKeyDown in