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

Conviction in a copycat league

Sunday, January 12, 2025

Issue 228: Holding beliefs in a world of emulation ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

🐺If they can get press, so can you.

Friday, January 10, 2025

Calling all product businesses and designers. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

🐺Are you overwhelmed when it comes to PR?

Friday, January 10, 2025

do this. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

#489: Web Performance

Tuesday, January 7, 2025

Instant navigation, Web Almanac 2024, INP debugging, font-face fallbacks and compression dictionaries. Issue #489 • Jan 7, 2025 • View in the browser Smashing Newsletter Hello Smashing Friends, Web

The Beautiful House That Made Mayer Rus Anxious—At First

Tuesday, January 7, 2025

View in your browser | Update your preferences ADPro Concrete Box Supreme I confess, I was a bit intimidated by the prospect of writing about the work of architect Tadao Ando for the first time in my

New Updates and a Sneak Peek into 2025

Tuesday, January 7, 2025

Both our email builder and website builder are getting significant upgrades to enhance your experience.͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌

🐺Get ready to get press in 2025!

Tuesday, January 7, 2025

Since you asked, we extended the sale! ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Accessibility Weekly #430: FTC Orders AccessiBe to Pay $1M

Monday, January 6, 2025

January 6, 2025 • Issue #430 View this issue online or browse the full issue archive. Featured: FTC orders AI accessibility startup AccessiBe to pay $1M for misleading advertising "The US Federal

Getting ready for 2025

Sunday, January 5, 2025

Issue 227: Key focuses in the new year ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Want to Scale Your Firm in 2025? Start Here

Thursday, January 2, 2025

View in your browser | Update your preferences ADPro Build Your Best Team Yet A new calendar year presents an opportunity to wipe the slate clean, and your approach, whether slapdash or carefully