Smashing Newsletter: Issue #286

Editorial

Everyone has abilities, and limits to those abilities. It has been said many times, but it’s always worth reiterating: While we often design and build perfect experiences on shiny displays working on powerful machines, once our product gets out there, it’s crashed against the unpredictability of reality.

Our thoroughly crafted interfaces will be consumed in all kinds of diverse environments, on diverse devices, by diverse people with various permanent and temporary disabilities. In this world, the only thing we can do to make our products usable in so many contexts is to make them inclusive, for everyone.

Inclusive Design Toolkit on Microsoft — a set of useful guidelines and principles for creating accessible experiences.

This newsletter issue is fully dedicated to accessibility — from techniques and bookmarklets to tooling and useful resources, everyone will hopefully find something useful in there.

If you'd love to dive in a bit more, just today we have Rémi Parmentier running an online workshop on Building Modern HTML Emails, covering accessibility of email; and next week Cassie Evans will run the SVG Animation Masterclass, also looking into SVG accessibility. We’d love to see you joining us there as well.

Stay accessible, everyone!
Vitaly (@smashingmag)

Better :focus Styles
Accessible Cross-Browser Form Styles
Accessibility Resources And Checklists
Upcoming Front-End & UX Workshops
Help Others Pronounce Your Name
Repository Of Accessibility Tools
Browser Extensions And Bookmarklets

1. Better `:focus` Styles

Every browser has default focus styles, yet out of the box, they aren’t very accessible. The goal of :focus is to give the user guidance on where exactly they are in the document and help them navigate through it. To achieve that, we need to avoid a focus that’s too subtle or not visible at all. The more obvious the focus is, the better.

There are ways of designing better :focus styles. In his article Tips For Focus Styles, Nic Chan highlights a few helpful tips on how to improve focus styles with better affordance and a bit of padding, offset, and proper outlines.

We can also use :focus-within to style the parent element of a focused element, and :focus-visible to not show focus styles when interacting with a mouse/pointer if it causes any issues in your design. Need more fun with :focus styles? Lari Maza has got your back, too. (vf)

2. Accessible Cross-Browser Form Styles

Have you ever struggled with hiding and styling custom checkboxes and radio buttons? What about custom select-styles? Or perhaps an accessible dropdown-navigation menu? We tend to build and rebuild the same components all the time, so let’s get them right once and for all.

Stephanie Eckles’ Modern CSS Solutions for Old CSS Problems highlights plenty of useful modern techniques to solve plenty of challenges, but some articles from her series are dedicated to forms: CSS custom checkboxes, styled radio buttons, select styles, inputs, and textareas.

Also, Stephanie shows how to build a CSS-only accessible dropdown, and on her blog, Sara Soueidan goes into detail explaining how to inclusively hide and style checkboxes and radio buttons. Fantastic resources to use right away and style forms accessibly. (vf)

3. Accessibility Resources And Checklists

Accessibility is incredibly important, but, unfortunately, often overlooked. The community-driven A11Y Project attempts to make digital accessibility easier, providing designers and developers with the know-how they need to build beautiful, accessible, and inclusive experiences.

From the basic principles behind accessible design to conducting an accessibility audit, and cultivating community, The A11Y Project takes a 360 degree look at the topic. You’ll find articles just like quick tips, tips on books to read, newsletters to follow, as well as handy tools, groups committed to accessibility, and much more. One for the bookmarks. (cm)

4. Upcoming Front-End & UX Workshops

Accessibility is awesome, and we can get better at it by learning together. So as it happens, we have some friendly online front-end & UX workshops dedicated to CSS, SVG animation, design systems, HTML email and web performance.

Our workshops are packed with practical examples, video recordings and friendly Q&A sessions. Each and every workshop has been a truly smashing experience with wonderful folks from all over the world. There are still some early-birds left, with a lil’ friendly discount. Perhaps you’d like to join us and recommend to others — just sayin’! ;-)

5. Help Others Pronounce Your Name

Whether you’re introducing yourself at a new job, are walking into an interview, or meeting someone who knows you through your professional work, there’s often the initial friction of clearing up how to say your name. Atif Azam came up with a clever solution to the problem: He added a sound byte to his homepage, next to his name.

To help others do the same, Atif open-sourced the Vocalizer component for anyone to use. All you need to do is wrap your name in a span tag to allow a JavaScript function to store the name in a string. An API takes care of the rest, or, alternatively, you can also set a path to your own audio file. A small detail that matters. (cm)

6. Repository Of Accessibility Tools

Do you ever get that itching feeling of forgetting something before shipping a project? Well, checklists are known to be the key to keeping an overview of things that need to be done and taken care of before the final showdown. When it comes to accessibility, there’s a growing list of tools and resources that are bound to help you keep an eye on things: A11y Resources.

Curated by Hannah Milan, this list was initially created to keep track of more than 200+ hand-curated accessibility plugins, tools, articles, case studies, design patterns, design resources, accessibility standards, and even checklists. Of course, you can always submit a tool if you see anything missing. (il)

7. Browser Extensions And Bookmarklets

Over the years, we’ve seen a huge increase in tools all around accessibility — from browser extensions to standalone applications. One of the fantastic tools to help you fix accessibility issues quickly, is Accessibility Insights, a free browser extension for Chrome and Edge to test accessibility of sites and apps. It runs automated checks for dozens of accessibility requirements along with tab stops and the ability to define manual tests as well. There is also a version for Windows, Linux and Mac OS X available as well.

aXe is another free tool provided by Deque, with a comprehensive testing toolkit for various accessibility tests, audits, and monitoring of accessibility issues. Plus, to stress test your site or app for accessibility, you could create a separate Accessibility profile in your browser and set up a few accessibility bookmarklets (see thread) to highlight everything from images without an alt attribute to forms without labels. Handy! (vf)

February 2, 2021 Smashing Newsletter: Issue #286

Previous Issues