--- title: "A guide to accessible frontend components" publication: "Frontend Focus" issue: 483 published_at: "2021-03-24" canonical_url: "https://frontendfoc.us/issues/483" --- ...plus how vendors are teaming up to fix common browser pain points. | Frontend![](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)Focus #483 — March 24, 2021 | [Read on the web](https://frontendfoc.us/issues/483) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1616606575/llukeu9as33wchq75mnp.png)](https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/) Image via: [Smashing Magazine](https://www.smashingmagazine.com/2019/02/buttons-interfaces/) [A Complete Guide To Accessible Front-End Components](https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/) — This is a comprehensive look into reliable accessible components: from tabs and tables to toggles and tooltips. A detailed resource worth bookmarking, with lots of links to great resources. Smashing Magazine [Compat2021: A Drive to Eliminate Five Top Browser Compatibility Pain Points](https://web.dev/compat2021/) — A look at how Google is working with other browser vendors to fix what they’ve defined as the ‘top five browser compatibility pain points’: Flexbox, CSS Grid, `position: sticky`, `aspect-ratio`, and CSS transforms. [Here's Microsoft's blog post on this](https://blogs.windows.com/msedgedev/2021/03/22/better-compatibility-compat2021/). Robert Nyman and Philip Jägenstedt [![\](https://copm.s3.amazonaws.com/4e53d200.jpeg)](https://gathercontent.com/jan21b) [What If a Headless CMS and Google Docs Had a Baby...](https://gathercontent.com/jan21b) — …and what if that baby really cared about workflow? And what if it was beautiful, and FAST, and structured, and… yeah... it would be a pretty cool baby, but imagine what it might become when it grew up. GatherContent sponsor [Accessible Text Labels For All](https://www.sarasoueidan.com/blog/accessible-text-labels/) — This post is an accompanying piece to [a recent talk Sara gave](https://www.youtube.com/watch?v=Mv_RlmAm4nc), looking specifically at how to create more descriptive button (and/or link) text labels, improving the experience for screen reader users, whilst making sure those buttons don’t fail WCAG success criteria. Sara Soueidan [The End of AMP?](https://www.lafoo.com/the-end-of-amp/) — Google has confirmed that AMP pages will stop receiving special treatment in search results. So, does this lack of ranking boost spell the end of the framework? Dwayne Lafleur **⚡️ Quick bits:** - Starting in version 90, [Chrome’s address bar will use `https://` by default](https://blog.chromium.org/2021/03/a-safer-default-for-navigation-https.html) (but will fall back to insecure HTTP if necessary). - ..and Firefox 87 [is trimming certain data from HTTP referrers by default](https://blog.mozilla.org/security/2021/03/22/firefox-87-trims-http-referrers-by-default-to-protect-user-privacy/) to protect user privacy. - Version 87 of Firefox also [introduces new a 'SmartBlock' privacy-protection feature](https://blog.mozilla.org/security/2021/03/23/introducing-smartblock/). 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1616588005/njwdbgpljksz1koxlpbx.png)](https://calibreapp.com/blog/css-performance) [How to Improve CSS Performance](https://calibreapp.com/blog/css-performance) — Looks at what kinds of performance/speed issues CSS can cause and the best practices to avoid them —_crafting CSS that doesn’t get in people’s way_. Milica Mihajlija [Making The Slowest 'Fast' Page](https://www.tunetheweb.com/blog/making-the-slowest-fast-page) — Is it possible to get a perfect Lighthouse score of 100, despite having a poorly performing site? This is an interesting bit of experimentation. Barry Pollard [Did You Know About the `:has` CSS Selector?](https://css-tricks.com/did-you-know-about-the-has-css-selector/) — Robin thinks that `has:` could have a big impact on the way we write CSS in future, although it’s not supported in any browser yet. Why? Because it twists around the direction CSS selectors commonly work in. Robin Rendle [![\](https://res.cloudinary.com/cpress/image/upload/v1616585845/cxeyypekxzfqdh3jxsbv.png)](https://fossheim.io/writing/posts/apple-dataviz-a11y-tutorial/) [How to Create a Screen Reader Accessible Graph Like Apple's with D3.js](https://fossheim.io/writing/posts/apple-dataviz-a11y-tutorial/) — A neat use of the popular JavaScript library [D3.js](https://d3js.org) (_used to create data visualizations_) to recreate the activity rings as seen on the Apple Watch. This is a detailed tutorial with lots of code and CodePen examples to dive into. Sarah L. Fossheim [Why Skip-Links Are Important for Accessibility](https://www.voorhoede.nl/en/blog/why-skip-links-are-important-for-accessibility/) — Skip-links play an important role in making a website accessible for everybody. Here Bas points out why and how you can implement them consistently. De Voorhoede [Tropical Particles Rain Animation with Three.js](https://tympanus.net/codrops/2021/03/17/tropical-particles-rain-animation-with-three-js/) — A WebGL particle rain animation resulting in an interesting image effect made with Three.js. [Here’s the demo.](https://tympanus.net/Development/ParticleRainEffect/) Yuriy Artyukh [How to Protect Your CI/CD Pipelines From…. Yourself?](https://buildkite.com/blog/how-to-protect-your-ci-cd-pipelines-from-yourself?utm_campaign=CPress&utm_source=ppc&utm_medium=frontend&utm_term=protect-cicd-pipelines&utm_content=blog-post) — We’re all human. We all make mistakes. Let’s build pipelines that protect us from bad actors and butterfingers alike. Buildkite sponsor [How the Web Audio API Gets Used for Browser Fingerprinting](https://fingerprintjs.com/blog/audio-fingerprinting/) — Different browsers have different ways of applying effects to audio and this is used by certain tools to identify browsers even if other mechanisms aren’t available. FingerprintJS [There's No Such Thing as a Website or Web App That Doesn't Need to Be Accessible](https://gomakethings.com/theres-no-such-thing-as-a-website-or-web-app-that-doesnt-need-to-be-accessible/) Chris Ferdinandi [How to Use Mobile Emulation Mode in Chrome](https://www.sitepoint.com/how-to-simulate-mobile-devices-with-device-mode-in-chrome/) Craig Buckler 💻 **Jobs** [Senior Software Engineer](https://boards.greenhouse.io/defmethod/jobs/122318) — Remote Senior Software Engineer for a software consultancy company based in NYC. Def Method [Front-End Senior Software Engineer (Remote)](https://grnh.se/071765ec2us) — Help power a platform meaningfully changing how journalists, PR pros, and marketers around the world work. Muck Rack [Find Frontend Engineering Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-frontendfocus%29&utm_content=5-minutes) — Take 5 minutes to build your free profile & start getting interviews for your next job. Companies on Hired are actively hiring right now. Hired 🧑‍💻 Got a job listing to share? _[Here's how](https://booking.cooperpress.com/jobs)_. 🔧 **Code, Tools and Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1616594188/ipkwppjtmpynsxuezafj.png)](https://conic.style/) [Conic.css: A Gallery of Simple CSS Conic Gradients](https://conic.style/) — A gallery of CSS gradients made using the `conic-gradient()` syntax. Just click a gradient to copy the code to your clipboard, then paste into your stylesheet. Adam Argyle [Lite YouTube Embed: A Faster Youtube Embed](https://github.com/paulirish/lite-youtube-embed) — Faster than the official one, at least. There’s a [live demo here](https://paulirish.github.io/lite-youtube-embed/) and you can really feel it. Paul Irish [Dasha AI: Add Human-Like Voice Conversational Capabilities to Your Website](https://dasha.ai) Dasha sponsor [Aladino: A Tiny WebGL Library to Enhance Your Site with Shader Effects](https://github.com/luruke/aladino) — Lots of cool examples [on the demo page](https://luruke.github.io/aladino/) but some of these can likely be accomplished with more optimal code. Luigi De Rosa [Fontshare: A Free Fonts Service Launched by The Indian Type Foundry](https://www.fontshare.com/) — Home to a growing collection of professional grade fonts that are free for both personal and commercial use. ITF 🍪 **Just for Fun...** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1616585245/avluhbmrvgavtca0bew2.png)](https://cookieconsentspeed.run/) [Cookie Consent Speed Run](https://cookieconsentspeed.run/) — This will probably stress you out a little…. Test your GDPR skills whilst trying to maintain privacy in this speed run cookie consent banner browser ‘game’ of sorts. Fred Wordie 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)