Skip to content
Advertisement

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

Advertisement