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

Cascade, HTMX, Sponge Furniture, Meaning of Color, Flipbook

Friday, April 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 26 2024 A primer on the cascade and specificity piccalil.

9 Trends From Milan We Can’t Stop Thinking About

Thursday, April 25, 2024

View in your browser | Update your preferences ADPro Even More From Milan Design Week Each year, the design world convenes in Milan—and that applies to us at AD, too. For the third year running, our

Subframe, Attributes vs Properties, Front End Handbook, aspect-ratio, GenAI

Thursday, April 25, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 25 2024 Subframe subframe.com Subframe is a design-to-

Ritmo, Climate Change, Icons & Typefaces, Click Wheel JS, CarPlay

Wednesday, April 24, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 24 2024 Meet Ritmo, Musixmatch's cross-platform

Why Jake Arnold Doesn’t Text Clients

Tuesday, April 23, 2024

View in your browser | Update your preferences We've had a remodel! From now on, you'll be hearing from AD PRO in your inbox twice a week—once with a deep dive into trends to watch and subjects

The secret ingredient to media success

Tuesday, April 23, 2024

PR tips from our founder Nora Wolf In this month's edition is all about *the most important* element of successful media outreach—photography. You may have some photos, but if the backgrounds are

#453: Design Systems

Tuesday, April 23, 2024

Design system generator, types of design systems and how to consolidate design systems. Issue #453 • Apr 23, 2024 • View in the browser Smashing Newsletter Buổi tối vui vẻ Smashing Friends, Ah, design

👨‍🏫 Striking Educational Website Designs + 🏆 Challenge Updates

Tuesday, April 23, 2024

Your UpLabs Design Updates Await! Let's Get Going! 🎨 Firstly, let's congratulate Mariana Gameiro, the winner of our latest 👩‍💻 SheCodes Website Redesign Challenge! Congratulations!! Secondly,

Code Connect, JS Naked Day, Shape of AI, Product Design, CSS Grid Level 3

Tuesday, April 23, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 23 2024 The Right Code for Your Design System figma.com

Accessibility Weekly #393: When Security and Accessibility Clash

Monday, April 22, 2024

April 22, 2024 • Issue #393 View this issue online or browse the full issue archive. Featured: When security and accessibility clash: Why are banking applications so inaccessible? "While using