Mike Foskett

Mike Foskett

[Mike Foskett @webSemanticsUK]

The reasoning for this came from the UK GDS who created this pull request outlining the issue: https://t.co/FUsrEzfY4q

[Mike Foskett @webSemanticsUK]

@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...

[Mike Foskett @webSemanticsUK]

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: https://t.co/EEmulHprnc

[Mike Foskett @webSemanticsUK]

@chsweb Try this version instead: https://t.co/LrrphUrlpS

[Mike Foskett @webSemanticsUK]

@Lena5673 As you're using container queries, this article may be of use to you: https://t.co/MkBOxHsPcE

[Mike Foskett @webSemanticsUK]

New version of Fluid-Responsive Property Calculator is now live for critique. Final stage before replacing the old "font-size" version:
https://t.co/LrrphUrlpS

[Mike Foskett @webSemanticsUK]

@Lena5673 It works perfectly with those figures:
range 1 - 1.25rem, viewport 280 - 980px gives:
.container { font-size: clamp(1rem, calc(1rem + (1.25 - 1) * ((100vw - 17.5rem) / (61.25 - 17.5))), 1.25rem); }
Open the test window and you can see the result, 18px /1.125 @ 630px.

[Mike Foskett @webSemanticsUK]

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.

https://t.co/xK6KL7eM4w

[Mike Foskett @webSemanticsUK]

One details element open at a time - An accordion

A progressively enhanced accordion using the details element and a small piece of vanilla JavaScript.

https://t.co/MWxebOYiPd

[Mike Foskett @webSemanticsUK]

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.
https://t.co/eU2FIwO6ln

[Mike Foskett @webSemanticsUK]

@Lena5673 I thought that's what it did. Can you explain further?

[Mike Foskett @webSemanticsUK]

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.

https://t.co/ItNglaz1iX

[Mike Foskett @webSemanticsUK]

@Lena5673 There's a separate tool for exactly that.
Specifically font-size: https://t.co/4aNZxRJPXS
Generic properties: https://t.co/LrrphUrlpS

[Mike Foskett @webSemanticsUK]

@whitep4nth3r
Hey Selma, just read your article "How to make your code blocks accessible", very nice.
One trick you may of missed is contenteditable. It allows full keyboard access to a code block. Take a look and try this pen with a keyboard: https://t.co/irGYJky2Av

[Mike Foskett @webSemanticsUK]

A bookmarklet to help meet WCAG 1.4.12 Text Spacing success criteria:
https://t.co/KH5IYZGl6b

[Mike Foskett @webSemanticsUK]

@0xWh00 It was Firefox deprecating event.which from the KeyboardEvent API. It also affected the numeric pad, which was how I finally managed to narrow down the issue.

[Mike Foskett @webSemanticsUK]

I've updated the Fluid-responsive property calculator:
https://t.co/sL1Xb4rxVw
The updated feature list is at the bottom of the pen.
Any, and all, feedback appreciated.
I'm hoping to publish later this week.

[Mike Foskett @webSemanticsUK]

@0xWh00 I think I've cracked this issue.
Please test this version:
https://t.co/sL1Xb4rxVw
I've also included a few requests along with the fix. If it works well, I'll publish later this week.

[Mike Foskett @webSemanticsUK]

Should add Firefox Dev!

[Mike Foskett @webSemanticsUK]

@patrick_h_lauke
Hey Pat, a bit of a layout issue with Steve's tooltip demo, and he said to pester you!
https://t.co/hOb9SRYv3p