Hello Smashing Friends,

After all these years, web accessibility still feels like an ongoing battle. In this newsletter, we highlight some of the strategies to document and test accessibility, fix PDF accessibility issues, generate accessible color palettes and improve names of sections on a page.

Just announced: our practical, friendly SmashingConfs 2023.

Accessibility will also be a main topic of our just announced in-person conferences in 2023: SmashingConf Front-End @ SF 🇺🇸 and SmashingConf Web @ Freiburg 🇩🇪 — very practical and friendly conferences for front-end developers and designers. With plenty of actionable insights, wonderful people and fun! Early-bird-tickets are now on sale.

The newsletter is kindly powered by our dear friends at Deque who created a powerful free accessibility testing extension for Chrome, axe DevTools. Build a more accessible website today.

Thank you, dear friends, and off we go into the world of testing, documenting and applying web accessibility!

— Vitaly (@vitalyf)

1. Accessible Color Styles

Neon Carrot and Purple Heart. Robin Egg Blue and Mahogony. Laser Lemon and Black. These are just a few of the accessible color combinations you’ll find on Randoma11y. The site provides you with random accessible color combinations that are bold and anything but boring.

To generate a color combination, click on a color, and the tool will find an accessible match for it. To give you a better feel for what the color combo will look like in an actual project, it is instantly applied to a sample layout consisting of text and UI components like buttons and form fields. Randoma11y also shows you the color contrast and level of WCAG compliance for the pair.

Another useful tool for ensuring your color combinations are accessible is Leonardo. It helps you create, manage, and share accessible color systems for user interface design and data visualization. Color swatches are generated by target contrast ratio, so you no longer need to check contrast manually. (cm)

2. Getting Focus Styles Right

Halloween is already over, but there’s a kind of horror that you’ll come across on the web no matter the season: accessibility of the keyboard interaction that doesn’t behave as you expect it. What might be just a small frustration if you can revert to a mouse makes interfaces completely inaccessible for people who rely on the keyboard. Rémi Parmentier’s keyboard navigation horror game Hocus :focus tricks us around common keyboard accessibility mistakes. A fun way to raise awareness for the topic.

Are you ready to dive a bit deeper into focus styles? If you’d like to get inspired by focus styles, Zell Liew has great examples to explore. Nic Chan has published valuable tips on focus styles. Eric Bailey has a fantastic talk on :focus and how to design it. And last but not least, Lari Maza summarized fun custom focus styles as well. (cm)

3. Testing Accessibility

Your feature passed the unit tests and QA says it’s good to go. But is it? To really be sure, Stephanie Eckles shares four types of accessibility tests you can incorporate into your workflow right from the beginning of feature development.

The tests cover topics that can quickly become accessibility pitfalls: color contrast, keyboard interaction, visible focus, and zoom levels. By taking care of them already when you start working on a new feature, you’ll avoid those nerve-racking last-minute fixes before shipping it. (cm)

4. Upcoming Online Workshops

That’s right! We run online workshops on front-end and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s an overview of our upcoming workshops:

• Deep Dive On Accessibility Testing Dev
  with Manuel Matuzović. Nov 14–28
• Mastering the Design Process Workflow
  with Paul Boag. Nov 15–23
• Designing The Perfect Web Forms UX
  with Vitaly Friedman. Nov 17–18
• Figma Workflow Masterclass UX
  with Christine Vallaure. Nov 17 – Dec 1
• Designing Better Products Masterclass UX
  with Stéphanie Walter. Nov 28 – Dec 12
• Creating and Maintaining Successful Design Systems Dev
  with Brad Frost. Jan 10–24
• Smart Interface Design Patterns Video Course UX
  8h-video + UX training on interface design with Vitaly Friedman
• Jump to all workshops →

5. Accessible PDFs

Have you ever considered if the PDFs you’re providing to your clients, customers, or users are accessible? No worries, Deborah Edwards-Oñoro summarized what you need to know about creating accessible PDFs with Microsoft Word and Google Docs.

As Deborah summarizes, the first thing it takes to create accessible PDFs is to make sure the source document is accessible. Using a descriptive document title, adding document language, alternative text for images, descriptive links, and valid table structure are the first step.

Additionally, PDF tags provide structured representation of the content to make it easier to understand the document — for everyone, no matter if they are using assistive technology or not. Small details that make a difference. (cm)

6. Documenting Accessibility

Unfortunately, accessibility is still an afterthought in many projects, even though fixing it later is usually a lot more expensive than doing it right from the beginning. Documentation is an effective means to help teams keep an eye on accessibility in every step of the process. But what do you need to consider?

Stéphanie Walter summarized how designers can document different aspects of accessibility and user interaction requirements. If you don’t have the time to document everything in your design mockups, Stéphanie suggests to focus on the things where there might be the biggest issues and misunderstandings.

Another fantastic resource to push accessibility forward are the five illustrations that Stéphanie created to illustrate metaphors around accessibility and designing for disabled people. From the rainbow of disabled people’s needs to the A, AA, and AAA mountain peaks to reach, the illustrations help start the conversation about accessibility. (cm)

From our sponsor

Start Accessibility Testing In Just Minutes With axe DevTools

Today’s newsletter is kindly powered by our dear friends at Deque who have created the powerful and free accessibility testing browser extension, axe DevTools. Run a quick test any time you want, get instant results with detailed information on your web accessibility issues and how to easily fix them. Build a more accessible website today with axe DevTools for Chrome.

7. Better Accessible Names

An accessible name is used by assistive technologies to refer to things on a web page. Voice control users could say “Open navigation” to open navigation or “Save document” to save changes, for example. Equally, the name gets read out when screen reader users get to the control. Hidde de Vries summarized what you need to watch out for to make the actual names effective and useful.

The tips all come from the ARIA Authoring Practices Guide, and Hidde added context and examples to illustrate them. You don’t need to use ARIA to provide names, though. Text content in the appropriate HTML elements like <label>, <legend>, <caption>, <button>, and <a> works perfectly fine, too, as Hidde explains. (cm)

8. Making Sense Of WAI-ARIA

Whether it’s submitting a job application, purchasing from an online store, or booking a healthcare appointment, interactions on the web are often inaccessible for people who use assistive technology. WAI-ARIA helps us do better.

If you haven’t gotten around to wrapping your head around ARIA yet, Kate Kalcevich wrote a comprehensive guide to demystify ARIA because, as it turns out, it is one of the things she sees developers misusing the most. The guide dives deep into ARIA roles, states, properties, and focus management, exploring common mistakes and how to avoid them. A great basis to prepare for those accessibility challenges that come your way. (cm)

9. New On Smashing Job Board

• Senior Designer
  at DUMBO (Cologne, Germany)
• Web Developer m*w*d
  at 4wd media GmbH & Co. KG (Darmstadt, Germany)
• Design System Builder / DesignOps Specialist
  at zooom productions GK (Tokyo / Remote)

10. Recent Smashing Articles

• A Guide To Keyboard Accessibility: HTML And CSS (Part 1)
• How To Search For A Developer Job Abroad
• Design Systems: Useful Examples and Resources
• What’s New In Next.js 13?
• Read more articles on Smashing Magazine →

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Follow us on Twitter • Join us on Facebook