Skip to content.

A Note About Website Navigation

Skip to main menu.

For users of screen readers, depending on the screen resolution, the two checkboxes are for opening and closing the side menus that appear to the left and right side of the screen. This is designed both for large screens and for mobile devices with a touch screen. Checking either the main menu or sidebar checkboxes causes the menu to open from the left or right side of the screen, respectively. Clearing the checkox in either the main menu or sidebar closes the menu. The checkboxes are visible to screen readers such as JAWS and NVDA for Windows, Voiceover for Mac, and Orca screen reader for Linux. When a screen reader says "clickable" for both main menu and sidebar, that is for the respective checkboxes. End of explaination.

Full Article

New CSS Property For Web Developers: backdrop-filter

While browsing through Twitter as a progressive web application in my Android smartphone, I saw the blur effect in the header of the Twitter page. I like what I saw, so I did a search and came across backdrop-filter, which only work with Chrome-based browsers at the moment and Firefox does not have support for it. For those with eyesight, here’s what it looks like:

An image of my website running in Google Chrome with a blurred background for articles.
This image shows a website running in Google Chrome. Google Chrome supports a backdrop-filter property with a blur radius set to 5 pixels.

Mozilla Firefox (as of 96) does not support backdrop-filter CSS property.

An image of my website running in Mozilla Firefox with no blurred background for articles.
This image shows a website running in Mozilla Firefox. Firefox does not support a backdrop-filter property.

An example of how the backdrop-filter property is shown below:

main article {
  backdrop-filter: blur(5px);
}

Until Firefox supports the backdrop-filter filter right out of the box, I’m going to leave it off for now so both major browsers look the same.

Blog Post Created:

Leave a Reply

Your email address will not be published. Required fields are marked *