Smashing Magazine - #474: Web Accessibility + Free Workshop

With guidelines on inclusive design, designing for ADHD, dyslexia, neurodiversity, dyscalculia and general do’s and don’ts. Issue #474 Sep 17, 2024 View in the browser 💨

Smashing Newsletter

Hallole Smashing Friends,

I keep repeating it like a broken record, but: Accessibility isn’t about compliance. It’s not about ticking off checkboxes in a checklist. It’s not about plugging in accessibility overlays either. Instead, it’s about designing with a wide range of people in mind. It’s about including and respecting everyone — independent of what skills and preferences they have.

In today’s newsletter, we look at accessibility and inclusive design. We explore how to design with neurodiversity in mind, how to respect and consider dyslexia, ADHD, dyscalculia, and general do’s and don’ts to keep in mind. We hope you’ll find a few useful gems in there.

If you’d like to dive deeper into accessibility, we have a few wonderful workshops running or starting next week:

We’ve also been quite busy with a few friendly events that are coming up soon:

Meets Live Design Challenge
Coming up: One Challenge, Three Designers! Mark your calendars and join us on Thu, Sep 26, 8–11 am (PT) — tickets are free!

And thank you so much to all the wonderful people working behind the scenes on improving accessibility of digital products. You are making a difference, and that matters. So thank you. ❤️

Vitaly


1. Neurodiversity Design System

How can we support neurodiverse users when creating digital experiences? In his Neurodiversity Design System, Will Soward details a set of standards and principles that combines neurodiversity and user experience design for Learning Management Systems.

Neurodiversity Design System

Particularly interesting for sites, apps, or services that need to hold a person’s attention for an extended period of time — such as interactive learning media — the design system presents a collection of design principles informed by the needs of neurodiverse users. It covers everything from typography and color to buttons, links, inputs, interface, communication, and animation. Also part of the design system is a collection of personas characterizing traits and qualities of neurodiverse as well as neurotypical users. Valuable tips that, if put into action, benefit everyone. (cm)


2. Dyslexia Style Guide

The British Dyslexia Association estimates that ten percent of the population is dyslexic. Dyslexia not only affects the ability to read and write, but it can also have an effect on coordination, organization, and memory. To help you ensure your written material considers the difficulties experienced by dyslexic people, the British Dyslexia Association published a dyslexia-friendly style guide.

Dyslexia Style Guide

The style guide covers principles for readable fonts, heading and structure, color, and layout. They are not difficult to implement and will make all written communication easier on the eye for everyone, whether it’s emails, presentations, web pages, or printed material. Small tweaks that make a real difference. (cm)


From our sponsor

It’s Time To Ditch Manual Form Coding: SurveyJS Has Exactly What You Need!

SurveyJS
Why waste time coding forms? SurveyJS libraries let you build complex JSON forms using a no-code interface. Fully compatible with any JS framework, integrates with any backend, and supports export to PDF and analytics. Start with a free demo — no sign-up needed.


3. Building For ADHD

We all know those moments when we struggle to focus and a website bombards us with too many options or asks for too much of our attention, making it hard to concentrate and keep on track. While this might only be a momentary condition for most users, for users with ADHD, an extreme lack of focus is the normal state. So how can we design products to support them?

Building for ADHD will make your product better for everyone

The post “Building for ADHD will make your product better for everyone” dives deeper into how to get users who struggle with focus to onboard and sustain interest in your product. As the post points out, by designing for ADHD, you can uncover areas of friction for everyone that may otherwise go unobserved. Maybe you were overwhelming users by giving them too many things to handle at once, maybe you asked them to remember too much information or created a false sense of urgency that resulted in anxiety. Again, a wonderful example of how inclusive design benefits everyone. (cm)


4. Designing For Dyscalculia

Dyscalculia makes it hard for someone to read, understand, and work with numbers. They might have difficulties handling money, managing time, understanding percentages, following instructions, or remembering PINs and phone numbers. But it’s not only people with dyscalculia who struggle with numbers. According to National Numeracy, low numeracy affects half of the working-age adults in the UK. So how can we convey numbers in a way that is easy for everyone to understand?

Designing for people with dyscalculia and low numeracy

GOV.UK published an accessibility poster with practical design do’s and don’ts to help people make better sense of numbers. And again, it’s the small changes that make a significant difference: don’t use decimals unless it’s money, for example, leave space around numbers, and use sentences to add context about numbers instead of percentages. (cm)


4. Upcoming Workshops and Conferences

As you probably know, we run online workshops on frontend 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.

Smashing Online Events
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 a quick overview:


5. Inclusive Design Guidelines

When we talk about inclusive design, we often talk about physical disabilities like vision impairments or motor skill disorders. Psychological disorders or neurodiversity are often forgotten in the discussion. The team at Nomensa wanted to change that and published an introduction to inclusive design as seen from this perspective.

An introduction to inclusive design

The guide describes some of the most common types of neurodiversity, psychological disorders, and learning difficulties and how to accommodate user experiences and products to them — with easy methods but also guidance on more difficult solutions. The focus of the guide lies on dyslexia, autism, ADHD, dyscalculia, and anxiety disorders. A helpful overview and a good reminder to not lose these conditions out of sight when designing inclusive experiences. (cm)


From our sponsor

Join Netlify Compose 2024—limited Spots Available!

Netlify Compose 2024
Get ready for an exciting lineup this year with over a dozen inspiring speakers and sessions focused on simplifying development, smarter workflows with AI, and the latest in the composable ecosystem. Hands-on learning. Community connection. Platform insights. Don’t miss out!


6. Can CAPTCHAs Be Accessible?

How much time have you spent identifying all the traffic lights in a grid or decrypting warped strings of letters to prove you’re not a bot? As annoying and unintuitive CAPTCHAs might be, for blind or visually impaired users, dyslexic users, or individuals with cognitive or learning disabilities, they can be completely inaccessible.

It’s about time CAPTCHAs become accessible

In her post “It’s about time CAPTCHAs become accessible,” Camryn Manker dives deeper into the problem with CAPTCHAs and how we can make them more user-friendly and accessible. There is no all-encompassing solution, but avoiding image-based CAPTCHAs whenever possible can be a step towards better accessibility.

Camryn explores some of the non-image alternatives and the advantages and disadvantages they bring along in the post. A great reminder to carefully consider if a CAPTCHA is really needed and, if yes, to test it thoroughly. (cm)


7. Emoji Accessibility

Emoji are a fun and easy way to convey many things very quickly. However, we should be careful when we use them outside of casual conversations. Camryn Manker examined the accessibility pitfalls emoji bring along and how we can use them to ensure they are beneficial for everyone.

Accessibility Vs. Emojis

Due to the way screen readers handle emojis, using them sparingly is the first step towards better accessibility, as Camryn demonstrates. Camryn also explores where to best position emoji, why using them as bullet points in a list is not a good idea, and why you shouldn’t rely entirely on emoji to get your message across.

Interesting insights to create better emoji experiences without missing out on the fun they are known and loved for. (cm)


8. Recently Published Books 📚

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. Have you checked them out already?

Success At Scale
It’s here, and it’s shipping! Success At Scale, a new book by Addy Osmani. Get the book or browse the complete library.


9. Recent Smashing Articles


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

unsubscribe update preferences view in your browser

Older messages

#473: Motion and Animation

Tuesday, September 10, 2024

Practical guides to transition animations, cheatsheets, a library of loading and progress indicators and how to design systems that focus on animation UX.Issue #473 • Sep 10, 2024 • View in the browser

#472: Enterprise UX

Tuesday, September 3, 2024

Healthcare UX, complex applications and how to run UX research in complex, legacy-ridden enterprise environments. Issue #472 • Sep 3, 2024 • View in the browser Smashing Newsletter Guten Tag Smashing

NL #471: Design Systems

Tuesday, August 27, 2024

Decision trees for UI components, organizing design systems, design tokens, how to design a new component, and variable mapping. Issue #471 • Aug 27, 2024 • View in the browser Smashing Newsletter God

#470: What’s New In Front-End?

Tuesday, August 20, 2024

Web components, CSS Grid Areas, @property in CSS, accessibility, bug reporting and box-shadows. Issue #470 • Aug 20, 2024 • View in the browser Smashing Newsletter Bună după-amiază Smashing Friends,

NL #469: Useful Inspiration For Designers

Tuesday, August 13, 2024

For designers: search engine for public domain content, graphic design, houses of the world, book covers and typography. Issue #469 • Aug 13, 2024 • View in the browser 💨 Smashing Newsletter Howdy

You Might Also Like

AD100-Approved Hiring Advice, Assistant Must-Haves, and More

Thursday, September 19, 2024

View in your browser | Update your preferences ADPro On the Market Every year, just as the kids head back to school and pros dive back into the grind of fairs, site visits, and client meetings, the

Postcards Update & New Email Templates

Thursday, September 19, 2024

We're consistently rolling out updates to our email builder and introducing new email templates.͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌

How I share files with editors.

Tuesday, September 17, 2024

Please don't make this big (and common) mistake. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Ashe Leandro on Designing With—Not Against—History

Tuesday, September 17, 2024

View in your browser | Update your preferences ADPro It's hard to banish the classic notion of Manhattan from our mind's eye: the Sex and the City, the Annie Hall, the brownstone-on-tree-lined

172 / Free classical & modern art available in the public domain

Tuesday, September 17, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Sep 2024 • Part 1 View in browser Welcome to Issue 172 Few weeks ago, I resigned from my day job [Hygraph]. I joined mid-pandemic when we were just 20-

Accessibility Weekly #414: My Grief with “In Brief”

Monday, September 16, 2024

September 16, 2024 • Issue #414 View this issue online or browse the full issue archive. Featured: My grief with “In Brief” "Just to preemptively state it: I appreciate what the Accessibility

Operator Mode

Sunday, September 15, 2024

Issue 212: Doing work as a non-founder and non professional management class ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Big Ideas for Your Next Small-Space Project

Thursday, September 12, 2024

View in your browser | Update your preferences ADPro Big Ideas for Your Next Small-Space Project Don't get us wrong—we love admiring palatial houses. But there's just something fascinating

#473: Motion and Animation

Tuesday, September 10, 2024

Practical guides to transition animations, cheatsheets, a library of loading and progress indicators and how to design systems that focus on animation UX.Issue #473 • Sep 10, 2024 • View in the browser