Skip to main content

One point I’m always at pains to make to my web design students is that accessibility isn’t an add-on to your design. You have to be as inclusive as possible from the outset.

Anyway, I thought this was a great article on designing for people with colour blindness:

https://www.smashingmagazine.com/2024/02/designing-for-colorblindness/?ref=web-design-weekly.com

#accessibility #webdesign


A Practical Guide To Designing For Colorblind People — Smashing Magazine

Color accessibility is more than just ticking boxes. Even with good contrast, some color palettes can make interfaces challenging for users. Here are some practical guidelines to ensure more inclusive design for colorblind people.
Smashing Magazine
#Accessibility #webdesign
in reply to Caspar Fairhall

Caspar Fairhall
Caspar Fairhall
• •

One thing the article omits is the fantastic accessibility in Firefox Developer Edition.

Perhaps these tools aren't well known — they're in the web inspector. It’s a great way to test your site.

#accessibility #webdesign #mozilla

#Accessibility #mozilla #webdesign
in reply to Caspar Fairhall

Quentin
Quentin
• •
@jcsteh Is there a tutorial or training on using these tools? I don't need to very often, and mostly only end up in it after accidentally hitting F12, but visually I find it a massive wall of text with no idea what I'm looking at. I would like to have a better understanding of it though (As I say, I don't need to look at web code very often. I learnt to write websites in HTML with a text editor, and only more recently started finding my way around WordPress - but it would be useful for work now and then).
@Jamie Teh
in reply to Quentin

Jamie Teh
Jamie Teh
• •
@Quentin When you open the Developer Tools for the first time, you're probably seeing the JS console. There are different panels you can access, including the Accessibility panel. Here's some documentation for the Accesibility panel. Happy to answer questions if you have any. https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/ @caspar

Accessibility Inspector — Firefox Source Docs documentation

firefox-source-docs.mozilla.org
@Caspar Fairhall @Quentin
in reply to Jamie Teh

Quentin
Quentin
• •
@jcsteh Thanks Jamie! It probably doesn't help that often when I've looked at it, I don't have a specific goal - or I don't know how to use it so have the WRONG type of goal - will check out the docs though, thank you!
@Jamie Teh
in reply to Quentin

Marco Zehe
Marco Zehe
• •

@Quentin @jcsteh My point of entry is usually from a specific point on a website, where something isn’t accessible, via the context menu, where I can explore the accessibility properties of the element I right-clicked on. From there, it is a snap to also go to the HTML tree of said element, and vice versa. I wrote a blog post about this inspector when it initially came out, but some of its information might be out of date by now. https://www.marcozehe.de/introducing-the-accessibility-inspector-in-the-firefox-developer-tools/

Later, I also showcased how to audit for accessibility using the Firefox developer tools: https://www.marcozehe.de/auditing-for-accessibility-problems-with-firefox-developer-tools/

But again, these are a few years old, so are probably no longer up to date with the latest UI.

Auditing For Accessibility Problems With Firefox Developer Tools - Marco's Accessibility Blog

Marco's Accessibility Blog
@Jamie Teh @Quentin

modulux reshared this.

in reply to Marco Zehe

Marco Zehe
Marco Zehe
• •
@Quentin @jcsteh Moreover, I no longer actively maintain that blog, so it is unlikely I’m going to update these posts anytime soon.
@Jamie Teh @Quentin
in reply to Marco Zehe

Jamie Teh
Jamie Teh
• •
@Quentin @Marco sadly, as much as I wish it were otherwise, the accessibility panel hasn’t received much further development since those articles were written.
@Marco Zehe @Quentin
in reply to Jamie Teh

Caspar Fairhall
Caspar Fairhall
• •
@jcsteh @Quentin @Marco I wonder if one reason is that the tools have been so poorly promoted. Loads of developers and designers seem never to have heard of them. If the tools had a higher profile, there'd be more of an outcry over their neglect.
@Marco Zehe @Jamie Teh @Quentin
in reply to Jamie Teh

Caspar Fairhall
Caspar Fairhall
• •
@jcsteh @Quentin @Marco The other factor, of course, is that @mozilla is under such atrocious leadership at present. They really have lost their way.
@Marco Zehe @Jamie Teh @Quentin @Mozilla
in reply to Caspar Fairhall

Jamie Teh
Jamie Teh
• •
I'd also flag that Mozilla is competing against the likes of Apple, Google and Microsoft. Given the sheer, unchecked size of those three companies and their ability to leverage their platforms to push their products, that is an incredibly difficult battle.
@Quentin @Marco
@Marco Zehe @Quentin
This entry was edited (1 month ago)
in reply to Jamie Teh

Caspar Fairhall
Caspar Fairhall
• •
@jcsteh @Quentin @Marco True, but I’m not sure that’s a reason for behaving in such an unhinged and desperate way.
@Marco Zehe @Jamie Teh @Quentin
in reply to Marco Zehe

Caspar Fairhall
Caspar Fairhall
• •
@Marco @Quentin @jcsteh Good article Marco — thanks! On a quick read through I can't see anything that's obviously out of date. I like your point about the inspector not being an evaluation tool as such, though it’s clearly a great place to start.
@Marco Zehe @Jamie Teh @Quentin
⇧