Smashing Newsletter #264: Front-End Accessibility Edition

With tips on accessibility, screen readers, inclusive design and accessibility tooling. Issue #264 Tue, Sept. 1, 2020 View in the browser 💨

Smashing Newsletter

Dear Friend,

Our second themed newsletter rounds up some resources on accessibility, including the upcoming Inclusive Design 24. Inclusive Design 24 have been running their virtual event every year since 2014, so they have a head start on the rest of us!

Speaking of virtual events, we've only just wrapped up Smashing Live!, and we are straight into SmashingConf Freiburg, which would have been held in the Smashing hometown of Freiburg in Germany, but is this year moving online along with our other events. There are still tickets available if you would like to join us next week!

We have also put some new front-end & UX workshops online on SVG, web performance and UX, which you can attend standalone or bundled with a conference ticket.

Enjoy the resources in this newsletter, and I hope to see you at an online event soon.

— Rachel Andrew (@rachelandrew)


Table of Contents

1. Website Features That Annoy Screen Reader Users
2. Accessibility For Teams
3. Implementing Accessible Data Charts
4. 24 Hours Of Inclusive Design Talks
5. Useful Accessibility Tools And Resources
6. Coming Up Next on Smashing
7. New On Smashing Job Board
8. Our Current Most Popular Articles

1. Website Features That Annoy Screen Reader Users

A missing alt caption, an auto-playing video, unlabelled buttons, poor use of headings, inaccessible web forms — what might seem like a small issue for sighted users can make the difference between being able to use a website independently or not for blind and visually impaired people. Holly Tuke knows this from her own experience.

Hierarchy of headings. From heading 1 to heading 5.

To raise awareness for common accessibility issues, Holly sumarized five annoying website features she faces as a screen reader user every single day, and, of course, how to fix them. Little details that make a huge difference. (cm)


2. Accessibility For Teams

Accessibility goes far beyond the code, so when it comes to delivering accessible websites, each person in a team has their specific responsibilities. If you feel that your team hasn’t found the right strategy to tackle accessibility yet, Peter van Grieken’s guide “Accessibility for teams” has got your back.

Introduction to the chapter “Accessibility for UX Designers” from the guide, along with a short summary of the chapter and an illustration of a person working on wireframes.

The guide consists of six parts, with each one of them aimed at the different specialists in your team: product managers, content designers, UX designers, visual designers, and front-end developers, plus a guide on accessibility testing. The guide is still a work in progress, the parts for product managers and UX designers have already been released. A great resource that helps incorporate accessibility into your team’s workflow from the ground up. (cm)


3. Implementing Accessible Data Charts

Data visualizations are a great way to make information stand out. However, they also come with their own accessibility challenges. When Sara Soueidan teamed up with SuperFriendly to create an accessible micro-site for Khan Academy’s annual report, she wanted to make sure that the way the data is presented and implemented is as accessible as possible, regardless of how a visitor explores the site. Her solution: SVG.

Chart from Khan Academy’s annual report showing US public school students by income level.

In a case study, Sara summarized everything you need to consider when you want to make your SVG charts and visualizations accessible — beginning with the most important step of choosing an appropriate embedding technique. It also covers why you should avoid trying to make an SVG chart accessible using ARIA roles and why Sara didn’t choose <figure> to embed them. A fantastic reference guide. (cm)


From our sponsor

Build in-demand skills in Northwestern’s online MS in Info. Design & Strategy

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern Information Design and Strategy.
Earn your master’s degree online.


4. 24 Hours Of Inclusive Design Talks

What do you need to keep in mind to write truly inclusive CSS? How can you help your organization to embrace digital inclusion? And what could an emergency website kit look like that is extremely resilient, highly inclusive, and fast to get off the ground to get important information to as many people as possible if needed? These are only some of the questions that will be answered in the 2020 edition of Inclusive Design 24 on September 17.

Part of the schedule of Inclusive Design 24. With talks by Claudio Luís Vera and Veronica Lewis.

Inclusive Design 24 is a free 24-hour online event on all things inclusive design, sharing knowledge from analog to digital, from design to development, from planners to practitioners. No registration required, all sessions will be streamed live and publicly on the #id24 YouTube channel, starting at 23:45 UTC on September 16. A wonderful community effort. (cm)


5. Useful Accessibility Tools And Resources

The right tools at the right time help you catch accessibility errors and remove potential barriers before they can harm your users. One such tool is Accessibility Insights. The visual helper highlights accessibility errors on a web page and shows you how to fix them. Dedicated tests catch the most common accessibility issues in less than five minutes, verify UI Automation properties, and investigate contrast ratios. Accessibility Insights is available as Chrome and Microsoft Edge extensions. There’s also a desktop app for Windows and one to find and fix issues in Android apps.

Mockup showing a browser window with tests running.

Another great addition to your accessibility testing toolkit are the free tools that Accessibility.Dev offers. They include a page tester, an accessible color picker, and a color contrast checker, as well as Continuum Explorer, a Chrome extension that checks for accessibility when live reloading modified code in the browser.

Their Access Assistant toolbar is also worth taking a closer look at: It runs over 100 fully automated accessibility tests instantaneously, directly within the browser. If you want to dive deeper into tools and resources to help with accessibility, Ian Routledge curates an extensive list with everything from checkers and checklists to meetups and books. Precious helpers. (cm)


From our sponsor

AI-Stabilized Coded & Codeless E2E Tests

Troubleshoot Puppeteer and Playwright Tests Faster with Testim.io
Tired of creating UI tests that break with every code change? Faster authoring and self-healing tests mean you spend less time writing and maintaining tests and release faster. Get started for free →


6. Coming Up Next on Smashing

With Smashing Membership, you get access to goodies, eBooks, discounts and live sessions with experts — all around front-end & UX, for just one coffee a month. Coming up next:

Practicing skills matters. Meow!
Meet Smashing Online Workshops on front-end & UX, with Natalia Tepluhina, Christian Nwamba, Jason Lengstorf, and many others.

We also have online workshops on front-end & UX — designed to give you the same experience and access to experts as in an in-person workshop, but without needing to leave your desk.

Or, if you’d like to run an online workshop with your team, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)


7. New On Smashing Job Board


8. Our Current Most Popular Articles


This newsletter issue was researched and written by Cosima Mielke, Iris Lješnjanin, Rachel Andrew and Vitaly Friedman


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

Follow us on Twitter Join us on Facebook


unsubscribe update preferences view in your browser


Older messages

Smashing Newsletter #263: Japanese and Cyrillic Sites, CSS, Free Illustrations

Tuesday, August 25, 2020

With Cyrillic and Japanese websites, web font showcase, CSS tools, and free vector illustrations and animations. Issue #263 • Tue, Aug. 25, 2020 • View in the browser 💨 Smashing Newsletter Dear Friend,

Smashing Newsletter #262: CSS Edition

Tuesday, August 18, 2020

On styling checkboxes, CSS filters, avoiding layout shifts and and ten CSS layout snippets.Issue #262 • Tue, Aug 18, 2020 • View in the browser 💨 Smashing Newsletter Dear Friend, Welcome to the first

Smashing Newsletter #261: Performance, CSS Techniques and Fun Forms

Tuesday, August 11, 2020

With CSS techniques, rendering performance, fun forms and improving your workflow. Issue #261 • Tue, Aug 11, 2020 • View in the browser 💨 Smashing Newsletter Dear Friend, We're running an

Smart Interface Design Patterns Checklists (PDF)

Tuesday, August 4, 2020

100 checklists with practical examples and questions to ask when designing and building any UI component. Jam-packed! Interface Design Patterns Checklists PDF • View in the browser 💨 Brand new:

Smashing Newsletter #260: Disabled Buttons, CORS, JavaScript

Tuesday, August 4, 2020

With CORS, disabled buttons, JavaScript, community links and a dash of CSS. Issue #260 • Tue, Aug 4, 2020 • View in the browser 💨 Smashing Newsletter Dear Friend, What an incredible community we have!

You Might Also Like

🐺 How to create a high impact press page.

Friday, February 14, 2025

͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏

#494: UX and Product Design

Friday, February 14, 2025

Redesigning complex navigation, product design process, UX in legacy systems, UX workshops with users. Issue #494 • Feb 11, 2025 • View in the browser Smashing Newsletter Halò Smashing Friends, How do

Nick Mafi on Capturing LA’s Loss

Friday, February 14, 2025

View in your browser | Update your preferences ADPro 77 Stories Shared As we watched the worst fires in Los Angeles history spread across the city, the editors at AD came together to discuss the

🐺 Content that Converts - the replay is up!

Friday, February 14, 2025

And everyone who joined loved it! ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌

Designer or Couple’s Therapist?

Friday, February 14, 2025

View in your browser | Update your preferences ADPro Let's Make a Deal There's no shortage of spoils in the wonderfully eclectic Hudson Valley home of actor Walton Goggins and writer-director

178 / Visualize your dreams in 2025

Wednesday, January 15, 2025

Product Disrupt Logo Product Disrupt Half-Monthly Jan 2025 • Part 1 View in browser Welcome to Issue 178 Ever get curious about how this newsletter is doing? I shared the 2024 behind-the-scenes and

Mayer Rus on Loss, and Living, in LA

Tuesday, January 14, 2025

View in your browser | Update your preferences ADPro LA, I Love You Los Angeles has been my home for nearly 20 years, and the devastation here, now, is unfathomable. Entire neighborhoods have been

🐺 How to make a great first impression

Tuesday, January 14, 2025

With real examples. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

#490: Interface Design

Tuesday, January 14, 2025

How to design better interfaces, how to choose icons, optical effects, iconography, Gestalt principles and icon design. Issue #490 • Jan 14, 2025 • View in the browser Smashing Newsletter Buona

🐺LAST CHANCE to get 20%-off our PR Masterclass Series

Monday, January 13, 2025

Make 2025 your biggest press year yet. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏