Blog posts tagged with the following topic: "frontend-dev"
Our CSS isn't opinionated enough
Excerpt:
For as long as I can remember, styling classes has always been pushed as "best practice" for writing CSS. Avoid IDs because they're too specific. Avoid styling tags directly because it's too broad.
You can't get away from it. It's even baked into most of the linting tools we use every day. It's sensible advice, but I do think it has quietly trained several generations of developers to build things that look correct, yet communicate no semantics.
This is a common WCAG failure that can easily fly under the radar. It's easy to miss, easy to ship, and a lot more common than you'd expect. I've seen it on government websites, e-commerce platforms, and well funded projects that clearly had accessibility in mind. The lang attribute is set correctly. The visible text is properly translated. But buried in the markup, the alt attributes are all hard-coded in English.
W3C, the World Wide Web Consortium, released a new draft of the WAI-ARIA 1.3 specification on 23 January 2024.
If you're not familiar with it, WAI stands for the Web Accessibility Initiative, and ARIA stands for Accessible Rich Internet Applications.
It's a set of standards created to improve the accessibility of the products we build for the web, and it includes details about HTML attributes you can use to make content better for assistive technology. Some common ones you might have come across are aria-label, aria-live, and aria-describedby.
With the new draft of 1.3, we can get a bit of an idea as to what is coming, and how we can prepare for implementing and testing these features.
Web Chat relies on real time information and notifications, so you're going to need to use several features of Aria (Accessible Rich Internet Applications).
In this post, I'm going to cover in detail which of the Web Content Accessibility Guidelines (WCAG) you're going to need to consider, and some examples of how you can use advanced attributes to give screen reader users the best possible experience.
In this post, I just want to talk through what alt text is, why it matters, and how to avoid some common mistakes!
I know alt text posts are common, but I feel compelled to write it given that it's 2023, and I still see a lot of the same issues I've been seeing for years.
The term ‘microservice’ is becoming more and more popular when you look across the Digital landscape of a lot of big organisations.
Several Government departments, and several large organisations I've spoken to recently, are all looking at this approach; because, if executed well, it saves time and money, and they create consistency for users.
However, as more and more organisations try to leverage microservices, the pitfalls of accessibility are perhaps not being fully considered.
These two criteria are important, because they help screen readers to read out the language correctly. If your page is set to English, but some of your content is not English, then the screen reader is just going to attempt to pronounce it in English anyway, which can lead to some pretty weird results.
Ok, this maybe should have been called one-page-applications are rarely accessible. Anything can be made accessible, it just takes a lot of effort, and very few people put the effort in.
One-page-applications are on the rise. With them you get funky animations and cool transition effects. Some are a real beauty to behold.
The biggest problem with one-page-applications, is they often create a terrible experience for people using screen readers.
As designers, we always like to put our stamp on things. We like to make things fancy and show off our full range of talents. Then when it comes to coding them up, we abuse our design!
We float things right. We use absolute positioning. We style links to look like buttons. We use fancy hover states and chuck in break tags in to create whitespace.
Then, we marvel at how pretty our designs look. After all, as long as it looks good, that's all that matters. Right?
I've recently been ranting a lot about primary buttons. But people often don't understand what they are.
In my early days as a designer, I thought it just meant adding class="btn-primary" to my markup to make it pretty and blue, and this is a common mistake.
A lot of people make this mistake and litter the Internet with bad design which is confusing for the people that have to use it. Some of my early contributions are still out there causing a nuisance. Sorry.