Mike Foskett
London, England
Joined July 2016
- Tweets113
- Following37
- Followers46
- Likes39
@CerovacBogdan Hi, just read the skip-to-content article on your website. Unfortunately the post comment system didn't work. So I'll add it in the nest tweet...
Personally, I recommend pointing the skip-to-content link to the h1 introducing the content rather than a block (main) which may contain other interactive elements:
Accessible skip-to-content link for desktop and mobile: codepen.io/2kool2/pen/bxdzEJ
The reasoning for this came from the UK GDS who created this pull request outlining the issue: github.com/alphagov/govuk_el…
Test browser image format .avif and .webp support, with .jpg fallback [Performance]
Examples: HTML image, CSS background-image, and a JS generated image.
Displays the most performant supported image format for page load speed.
codepen.io/2kool2/pen/NWLqrM…
![[Performance] Test browser image format .avif and .webp support, with .jpg fallback [Swanage]](https://pbs.twimg.com/card_img/2115416183302426624/H4c2dbS5?format=jpg&name=800x419)
One details element open at a time - An accordion
A progressively enhanced accordion using the details element and a small piece of vanilla JavaScript.
codepen.io/2kool2/pen/poOgxK…
Accessible tab navigation to meet WCAG 2.1
An example of an ARIA accessible responsive tab control.
"tabs" can be positioned, it's progressively enhanced, keyboard accessible, and responsive.
No external dependencies, written in vanilla ES6.
codepen.io/2kool2/pen/JjaVMN…
![[a11y] Accessible tab navigation to meet WCAG 2.1 (v7 - 2023)](https://pbs.twimg.com/card_img/2115416183730282496/jYWw_JNm?format=jpg&name=800x419)
Flex-wrap detection
Detects when a flexbox wraps and applies a 'wrapped' class to the flexbox and any wrapped flex items.
It uses a resize observer instead of media queries, and avoids the need for minimum or maximum widths or complex calculations.
codepen.io/2kool2/pen/eYPNaW…
New version of Fluid-Responsive Property Calculator is now live for critique. Final stage before replacing the old "font-size" version:
websemantics.uk/tools/fluid-…
A bookmarklet to help meet WCAG 1.4.12 Text Spacing success criteria:
codepen.io/2kool2/pen/LYzVeL…
I've updated the Fluid-responsive property calculator:
codepen.io/2kool2/pen/porVaV…
The updated feature list is at the bottom of the pen.
Any, and all, feedback appreciated.
I'm hoping to publish later this week.
@patrick_h_lauke
Hey Pat, a bit of a layout issue with Steve's tooltip demo, and he said to pester you!
codepen.io/stevef/pen/eJgXKd…
A JavaScript test to check volume control is available (it isn't on iOS).
codepen.io/2kool2/pen/PobNaq…
Messing about with an audio player for the psychedelically challenged:
websemantics.uk/listening/
CodePens available upon request.