DEV Community: Josefine Schfr

What makes a good tech Meet-up?

Josefine Schfr — Thu, 08 Jan 2026 14:53:57 +0000

If you've attended meet-ups in the past, what made the difference for you between a good, welcoming one and one where you'd rather not be coming back?

What are you looking for when attending meet-ups? Is it the company, networking and catching up with friends, or is the focus for you more on the talks & content? Or something else entirely?

I have to say, I can be very socially awkward and events where I don't know anyone, at it makes a massive difference if people are open and welcoming. This starts at very clear information as to what to expect, where to go and the schedule, but also whether there might be someone near the door welcoming people in, and the vibe of the group. I'm a big fan of hosts encouraging the 'packman-method' of letting people into your circle when you see them floating around alone.

As I'm organising a meet-up in two weeks, I'm super curious to hear your thoughts & preferences.

Thanks so much in advance!

Generating Alternative Text with AI

Josefine Schfr — Thu, 03 Apr 2025 09:58:35 +0000

Needless to say - there is not getting around AI anymore, and this naturally goes for the Web Accessibility space as well. *So why not leverage the power of AI to address common accessibility issues? *

According to the WebAIM 1 Million report, missing alternative text is still the second most common WCAG 2 failure, only exceeded by low color contrast. As the web is becoming more and more visual each year, providing meaningful context to these images could make a difference in improving the accessibility of many websites, right?

While there are many debates going on in the accessibility community, AI certainly being a hot topic - the statistics speak for themselves: alternative texts are still too often overlooked, not provided or contain descriptions that are not particularly helpful.

The option to generate alternative text with AI definitely lowers the threshold of adding it, as editors who may be hesitant, crunched for time or unsure how to best describe the images content can get a first suggestion at the click of a button.

In any kind of service which includes user generated (visual) content or the upload & sharing of images, the option to generate alternative text with AI therefore may be useful.

Pros & Cons of generating alternative text with AI

Pros of generating alternative text with AI

Efficient & Scalable: AI generates alternative text relatively quickly
Baseline Accessibility Improvement: AI ensures that images have some form of alt text rather than being left empty.
Consistency: Based on fine-tuning and prompting, AI can deliver descriptions following a structured approach
Support for Non-Experts: Users who aren't familiar with writing meaningful alt text get a starting point.
Multilingual Support: AI can generate alt text in different languages, making accessibility more inclusive.

Cons of generating alternative text with AI

Lack of Context Awareness: AI may miss the intended meaning or relevance of an image in its specific content setting.
Bias & Inaccuracy: AI can make incorrect assumptions about image content, leading to misleading alt text.
Ethical Concerns & Privacy: If AI processing involves external services, there might be concerns about data privacy and compliance with regulations like GDPR.
Lack of Human Intent: AI-generated text may not align with the emotional or narrative significance the content creator intends to convey.

What makes a good alternative text?

Good alternative text, regardless of human or AI generated, follows a few criteria:

Be concise: keep alternative texts short, max. between 100-200 characters
Be descriptive: provide essential information about the images
Be relevant: consider the context of the image
*Avoid ‘image of’ *
Avoid repeating information which is also stated in the text

Alternative text is intended to do exactly what it says on the proverbial tin: provide an alternative (of the image) in text form to make sure users receive all the relevant context and information.

What AI Model should you use?

This of course comes down to use case, budget and other individual factors. That being said, it’s important to use a service which:

is able to generate output in natural language
can be prompted to take WCAG requirements for alt text into account
is able to consider the *context of the image *(instead of merely identifying objects on the image)
works for your preferred file types and file sizes
potentially has **multi-language support **if this is relevant to your product or service

There are services which are specialized in providing alternative text in multiple languages such as AI Alt Text and of course, there are the big players such as Google Geminis Vision AI or Open AI.

Considerations for implementation

Once you have chosen a suitable AI model for your intended purpose, there are a few things to consider during the implementation:

Instruct your users wisely: How you introduce your feature, the instructions you give to your users and how you explain alternative texts in general will have an impact on the adaption, but also correct usage of AI. Make sure your users know why alternative text is important, to always check AI generated content and what to look for in a good alternative text.
Consider when to integrate the alternative text generation into the user flow. Depending on your implementation, generating the alternative text may take some time. Where does this work best in the user flow? Can alternative text be generated in bulk? Will it be available in multiple languages? Keep the integration as smooth as possible 🐟
Required alternative text: Is alternative text a requirement in your system? While this can encourage users to generate or create alternative text more frequently, it also involves the risk that alternative text will be added to decorative images, which is considered unnecessary and verbose.

Conclusion

AI should assist, not replace, human judgment in accessibility.

While using the power of AI to tackle one of the most frequent accessibility issues, missing alternative text, it's always important to double check any AI generated content with a human. 'Outsourcing' a task to AI should not lead to further deprioritising the topic, but rather using the tools at our service to create inclusive experiences. Whatever tool you choose, make sure you are able to fine-tune according to alternative text requirements and a suitable tone of voice, instead of merely identifying objects in an image.

Delivering your First Talk at a Tech conference

Josefine Schfr — Mon, 27 Jan 2025 10:04:35 +0000

In this seventh and final part of our series, we will explore strategies on successfully delivering your talk - maybe the most nerve-wracking, but also most rewarding part of the whole experience.

If you have come this far, you have already succeeded: You have found a conference that's a great fit, written a great talk proposal, gotten accepted and created a storyline and prepared your slides. Great job! You can already be so proud!

Now, you will have to deliver your talk, so let's explore how to go about this without loosing your cool.

One Day before

While many conferences require you to hand in your slides a little ahead of time, others let you present on you own machine and in full control of last minute updates. The day before, a few things you could do to calm your nerves and ensure a smooth conference day:

Double check your slides and materials: make sure everything is where it is supposed to be, in the correct order and format.
Make sure you have offline copies of everything. Yes, it's a tech conference and one would think internet is crucial here, but it happens more often then not that the connection isn't that great and videos or even your entire slide deck do not load. All the essentials your talk relies on should be available offline.
Prepare your bag: If you are using a clicker, pack one (if you are intending on using one, make sure to practise with it 😉), bring your charger, your notes, some water, anything else you need to feel comfortable. Maybe bring some headphone if you want to run through your talk last minute in a busy area.
Check where you need to be and how to get there. Depending on the location, whether you maybe had to travel to a different country, be sure to check logistic questions ahead of time. Many conferences organize shuttles or taxis for speakers, but it's good to know your way around. Conference buildings can be massive and confusing, so plan sufficient time for orientation on the ground.
If your speaking event is online, you don't have to worry about most things mentioned above, but it's still worth while checking time slots and streaming arrangements, your contact person and background for the stream. You don't want to realise when sitting down to deliver your talk how your light could be optimised or how busy your background looks.

Day off the conference

Especially if it's your first public talk, you might be nervous, and while good planning can help you sooth stage fright a little bit, it's completely normal to freak out before your first talk. Don't worry, we have all been there. It's important to listen to yourself and what you need in that moment, because what helps us in these moments is very personal. Here are a few things that help me:

Get up early: It would only add to my level of stress if I had to rush, so I always leave enough time for breakfast, to get to the venue, find a speakers room if there is one, run a technical check etc.

Move: It's scientifically proven that moving your body can help relieve stress. If I get really freaked out I go for a little walk outside if time allows it.
Find a quiet area: Many conferences offer a place for speakers to do last minute prep and escape the hustle and bustle before their talk. If this doesn't apply to your event, there will be other options to distance yourself and find your calm - if nothing is available, headphones and your favourite music can help quite the noise.

During your talk

Now is your time to shine - going on stage and presenting your work, everything you have prepared so well and know so much about. I personally don't believe in tips like 'imagine the audience naked' (I'm sorry, how would that calm me down?) - but I'd rather focus on a friendly face in the audience. Maybe it's someone you know, or maybe there is just someone looking very encouragingly.

Trust that people want you to succeed. You will do great. But even if you don't do your absolute personal best, no one will judge you for it. It's scary being on stage, at least for most people, and the audience has a lot of respect for that. They are rooting for you and they want to learn about everything you have to say, because you are the expert for your talk.
Try to breath. Most of us rush when we are stressed out. Try to consciously take a breath, slow down a bit or take a sip of water. For my first talk, I had 25 minutes and I spoke so fast that I only used 13. It's normal. But you will bring your point across much better, if your audience has time to digest a little bit. The pauses that sound so long in your head? The audience will probably not notice at all.

It's ok to be nervous and to admit it. If you are comfortable with it, you can say that it's your first time to speak like this, and that you are a little nervous. Sometimes, admitting something can be really freeing. But of course, you don't have to disclose anything. But you can if it makes you feel better.

Enjoy. This is your moment, you worked for it, you've practised. Now it's time to enjoy! Even though it's scary, try to make the most of the experience and if it's not for you, you might never have to do it again.

After your talk

Congratulations, you've done so well! 🎉 You've conquered your fears, you've been on stage, you have delivered your first talk! That's a big feat and you have done it! Hang around after your talk to chat to people, listen to their feedback, make contacts and answer their questions for a little. Enjoy your moment and celebrate afterwards - you surely deserve it! ✨

How was your first experience of public speaking? Did you enjoy it? If you have any questions, noticed something missing from this little guide or want to get in touch, feel free to reach out to me on socials!

Accessible Input Elements | the Basics

Josefine Schfr — Mon, 23 Dec 2024 09:03:00 +0000

TL;DR: Regardless how small a component, always make sure you consider a variety of different users and their abilities while implementing. On first glance, input elements such as a checkbox may seem like an easy fix - but there are still a few things to consider in order to make sure they are accessible.

This series will tackle different kinds of input elements and how to make them more accessible, starting with the basics: using the correct input type and associating a label.

Let's have a look.

Choosing the correct Input Type

When using input elements in HTML, we want to make sure to always set the correct input type for the corresponding element. The default input type is text and may work in a range of cases, but being as specific as possible helps all your users - and comes with a bunch of inherent functionality. <input type="number"> for example defines a numeric input field, opens the number pad on mobiles instead of the keyboard and you can restrict the range by using minimum and maximum numbers. <input type="password"> masks the corresponding input and therefore protects the users privacy. Depending on the browser, <input type="date"> opens a date picker,... and so on. By choosing the correct input type, we make our own life easier, being able to use certain inherit functionalities in HTML, and improve user experience at the same time.

Making sure there is always a label associated with your input elements

Regardless of what type of input you are using, make sure you associate a label to your input field. Usually, this can be done with a <label> element and the for attribute.

<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">

aria-label vs. aria-labelledby

In a case in which a visual label is not an option or can't be associated with input element in the above mentioned way, aria-labels can also be used to identify form controls. If you are familiar with ARIA a little bit, you may be aware that the preferred option, if possible, is to work without aria whenever possible - however, in the real life of course, this isn't always feasible.

aria-label

An aria-label can be used when no visible text label is present, for example, when an icon button is used without any text.

<button aria-label="Search"><img src="search-icon.svg" alt=""></button>

aria-labelledby

When another element is used as reference for labelling the input, aria-labelledby comes in handy.

<div role="dialog" id="dialog1" aria-labelledby="dialog1_label" aria-modal="true">
<h2 id="dialog1_label">Add Delivery Address</h2>
</div>

Whenever possible, try to use semantic HTML to provide accessible names for your input elements. Only if you've made sure it's not possible in this specific case, revert to using aria attributes.

Once we've got these basics down, like using semantic structure, adding the correct input type and associating labels, we can have a closer look at the other aspects of making our input elements more accessible, such as disabled input elements, focus style & color contrasts and expected keyboard navigation.

Resources:

Road to becoming a GDE | The Google Developers Program

Josefine Schfr — Mon, 09 Dec 2024 15:28:37 +0000

TL;DR: The one thing I get contacted about the most (by far!), is being a Google Developer Expert (GDE) and how to become one. In this article, I'll try and resolve some of the mystery around the program, it's benefits, and how I prepared for my application.

Let me just preamble this by saying: this is just my personal experience - please don't come for me if things don't work out, things have changed or you had a different process, the requirements and openings are not the same every year, for every category or region.

Now that we got that out of the way, lets start at the beginning.

What is the Google Developers Program?

The GDE is a global network of over 1,000 people who are experts in Google Technologies. There are a variety of fields and categories including Android, Web, Cloud, AI / ML and so much more. These categories sometimes shift, depending on the most recent developments in the tech industry. GDE's are not part of Google directly, nor affiliated with the company. They are passionate about working with Google Technologies, sharing their knowledge and supporting their communities - and that's what the essence of the program is about.

What are the benefits of being part of the GDE programm?

There are many 'obvious' benefits like to opportunity to attend events, learn about new Google products early and maybe even provide feedback, speaking opportunity and sometimes supported travel.

But to me, the biggest benefit are the people you get to meet through the program. There are so many amazing, knowledgable people in the program, and every single time was able to attend an event I made new friends and connections I still carry in my heart.

Who can apply?

As base criteria for the application, Google lists a solid expertise in at least one Google Technology and significant contributions to the developer community. This could be in form of public speaking, giving talks at tech conferences, writing articles, mentoring other developers or creating video content. The emphasis here is on the motivation to share knowledge, involvement in the community and passion about Google Technologies.

How can you apply?

In order to apply, you need a referral by either a Google employee or a current GDE. With them, you can discuss your eligibility and further steps in the application process. This evokes a bit of the mystery around the program for sure, but if you are involved in tech communities, attend a Google event in your city or virtually or connect with folks on social media, you might already be in touch with GDEs.

Becoming a GDE | My personal Journey

I've been a GDE in the Web Technologies category for almost two years now. I was lucky in a sense that by the time I applied, I had already been a Developer Relations Engineer for a while - it was my day job to create content and speak publicly, which helped me a lot with my application.

A few of my colleagues at the time where already GDEs, and they helped me with my application, mentored me and ended up referring me for the process. They also encouraged me to keep track of all my community contributions, including the reach they had had, to make sure I could make my case for the application.

Once I had collected it all, I started the application and - the hardest part - waited for a reply.

To be honest, impostor syndrome had me fully convinced that I should be so lucky to even get an interview, let alone be considered for the program, but after a few rounds of talking to different people, I got accepted - I was completely over the moon.

The interviews itself were more informal than I had anticipated - but again, this may vary from person to person. I had video calls with different Google employees, and we had a chat about my work, the program general, what I was hoping to get out of it and how I was planning to continue my contributions. We also chatted a lot about Web Performance and Web Accessibility, as I applied for the Web category and Accessibility is my area of expertise.

Especially since I entered the tech industry as a second career and have no formal education related to software development, the acknowledgement of becoming a GDE meant the world to me. It's a great privilege & opportunity to be part of this group - and I'm really grateful for it.

You've become a GDE, what now?

First of all, congratulation! That's a massive accomplishment! Next, you will be onboarded, you will have the chance to join calls for your category and region, meet fellow GDEs, learn about speaking and other contribution opportunities.

For me, it's been a wild ride since joining the program. I've met some truly amazing people, was able to attend a few amazing events and continue learning so much more, every day. I'm really grateful for being part of the program, and I hope, this will maybe help you or encourage you a little but to start your own application process.

Conferences for first-time speakers?

Josefine Schfr — Tue, 13 Aug 2024 09:42:56 +0000

My first ever tech related talk was at Codeland and it was a blast. Sure, I was nervous as I had never been before - but everyone involved made it easy for me to do my best and enjoy the process. Great organization, support for everyone who needed it, options for feedback on the slides and overall a super friendly atmosphere.

These days, when I come across CFPs (Call for Presentations / Papers, what you use to apply to conferences), a few conference have a checkbox for 'first-time speakers' or an option to tick if you'd like support with your talk outline. I think this is so great, helps bring new speakers in, diversify the line-up and lower the threshold - after all, speaking at a conf or meet-up can be so intimidating.

But these options are not yet the norm. Unfortunately, not all conferences are equally welcoming to newbies. In my experience, the smaller the conf, the more personal it generally is, leaving more room for adjustments and support. Local meet-ups, community events and the like are a great place to get started in general.

Can you recommend any specific events for first-time speakers or people who are just starting our on their journey? Virtual and in-person, all options welcome 🤗

What's stopping you from coding like this...?

Josefine Schfr — Wed, 24 Apr 2024 16:35:37 +0000

We've all seen the memes, haven't we? A picture of someone with a laptop, working, in all different sorts of settings - under water, on a slope in fresh powdery snow, on a beach, ... all topped with the (ironic) caption "What's stopping you from coding like this?".

In case you missed it, here is an example (more below):

// Detect dark theme var iframe = document.getElementById('tweet-1306263579897688065-333'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1306263579897688065&theme=dark" }

(There's also a variety of these where people are sitting on each others lap while coding - I don't even want to get into those 😅)

But while of course, these are clearly meant to entertain - for me, they do raise an issue that goes a little beyond just programmer humor and memes:

It feels like there is a lot of pressure to always be better. To keep up with the latest technologies, to ship faster, to always take it one step further.

People sharing their GitHub contributions, badges, yearly round ups, talking about consistency and how you can make it as well, if you just stick to xyz (and maybe purchase a course from them ^^).

Don't get me wrong, there is nothing wrong with consistency, coding in a hammock, on the beach or in a yoga pose, liking your job so much that you don't want to stop on the weekends. You do you.

But there is also lots of value in prioritising a work-life-balance, having hobbies away from a screen, or seeing coding as "just a job".

Just because it seems like some other people are pushing out new content every hour of the day, contribute to open-source while having a full-time job and a side hustle and apparently need no sleep - you don't have to.

So who ever needs to hear this - here's your friendly reminder, that it is perfectly ok to take things a little slower. That quality usually beats quantity, faster is not always better, and fancy coding locations usually come with a stiff neck and dust on your keyboard 😉

And, of course, there are always people gaming the system and hacking their GitHub contributions (like with this script) to make them look a lot more productive, than they actually are. So don't believe everything you see 🙏

Studying for CPACC | Becoming a Certified Accessibility Professional

Josefine Schfr — Wed, 17 Apr 2024 16:19:02 +0000

TL;DR: Curious on how to prepare for the CPACC exam? This is my (very personal) journey of how to study for it, including the sign-up process, study resources and taking the actual exam.

The CPACC exam (Certified Professional in Accessibility Core Competencies - that's a mouth full...) is a way to show your expertise in the field of (Web) Accessibility, and usually a stepping stone towards showing expertise in the field. It's also a requirement for taking the WAS (Web Accessibility Specialist).

It had been on my mind for months and months to sign up for the exam and get certified, but life (and my amazing skills to put off things I am afraid of) got in the way. Until this year, when I finally signed up, took the test and got officially certified! 🎉

If you are anything like me and the process seems a little daunting, I wanted to share my experience and hopefully make the preparation a little bit easier for you.

Let's dive right in.

Signing up for the CPACC Exam

There are a few things to take into consideration when signing up for the exam.

Exam Dates

There are examination phases during which you can take the exam, you can find them on the IAAP Website. You pick a slot in advance, and only after you signed up and paid, you get to pick the actual time and date. As someone who really likes to plan ahead, it really freaked me out that I didn't know the exact time and date - but don't worry. There are many options to choose from, in my experience at least when you choose the option to take the test in a test center. (And I am sure the other options, too, but here I have no personal experience)

Examination Options

As listed on their website, you have 4 different options for taking the exam.

In an Online Remote Session
At a Test Center
As a Privately Proctored Exam
At a Hosted Exam Event

I opted for the test center, as I wanted to make sure I only worried about the actual content of the exam and not whether my tech set up worked or it looked like I was cheating in a take home exam etc. It worked out really well for me, but I have heard people had good experience with the privately or online remote sessions as well. This is especially helpful if you have any requirements in your setup that might be more difficult to guarantee in the test center.

Requesting Additional Time

If you are not a native speaker of the language the test is in (most likely English), you have the option request additional time. It gets you an extra hour to answer all the questions.

Studying for the CPACC Exam

Luckily, what is expected during the exam is very well documented. IAAP provides for example a content outline, which show the different topics covered in the exam and their contribution to the exam result.

I was researching a lot beforehand to make sure I was prepared well enough. (As someone with impostor syndrome, I was wondering if I would ever feel prepared enough, but that's a different story)

The IAAP provides a super valuable list of resources, including a set of mock exam questions, the Body of Knowledge and many articles and courses. Especially the Body of Knowledge proved super helpful for the preparation, even though it is quite extensive, it includes a lot details, further reading and helps with understanding all the concepts.

Note that the Body of Knowledge I was using to prepare is from 2020. Starting with the examination period in May 2024, a new Body of Knowledge will be used.

Some of the listed resources have to be purchased or are only free if you are an IAAP Member, but there are also some good free resources.

Free Resources

100 Days of A11y Blog by Amy Carney documents her learning journey for the CPACC (and WAS) exam and explains each topic in her own words - I found this super helpful!
CPACC Full Study Guide (Youtube Video) by Derek Mei - Derek goes through how he prepared for the exam, topics that he covered for study and his strategies. Also really helpful, especially if you are more of a visual / auditory learner.
CPACC Webinars & Drop-In Sessions: there are frequent sessions to ask questions about the exam, logistics and potentially even the content. You can sign up for free on the IAAP website.

Paid Resources

Deque University CPACC Exam Preparation Course I took this one and found it super helpful and very well structured, explaining all the core principles and providing lots of links for further reading.
Princeton University CPACC Exam Preparation Course Free for IAAP Members
Funka Training Course for CPACC Mix of live sessions and video content

Study Methods

This will of course be very different for everyone as we all learn differently. I tried to mix things up a little, by following the Deque Course, taking lots of physical and digital notes, summarizing those into flash cards in the end and comparing them to Amy's blog.

I had some trouble focussing on the long texts of the Body of Knowledge so I used VoiceOver to read it out to me - it's a little monotone for sure, but for me, audio is super helpful to remember facts better.

Taking the CPCC Exam

Of course, I don't want to spoil the fun and give away any actual questions of the exam - let's just say this: they don't exaggerate the amount of time you need to prepare. I found it especially tricky to not get confused by the multiple-choice format, as it's nothing I've ever done before. The distractor options are sometimes really close to the correct answer, and required a high level of detailed knowledge. Since the content of the exam is very general, and my background is more in web accessibility, especially the details about different kinds of disabilities and related laws wrecked my brain.

If you take the exam at a test center, be sure to come a little ahead of time, take off your smart watch, lock away your phone and anything that could look like it's helping you. Where I took the test there was camera surveillance and the person who helped set me up mentioned wearing a smart watch (even a dumb one like mine...) could disqualify me.

When taking the test, you can mark answer to check again later, and you can also see an overview of all your answers before finally submitting them. This really helps not to 'waste' too much time initially, but rather answering quickly what you know and coming back for the ones you need more time for.

Conclusion

When I left the examination center, I was completely lost and felt like it could have gone either way. I definitely did my best, but isn't there always more you could have done?

The results took 6 weeks to arrive, and I am so happy and proud to say I passed with 704 points out of 800. 🎉

Did you take the CPACC already? How did you prepare for it? Let me know in the comments!

Making Disabled Buttons more Accessible

Josefine Schfr — Tue, 16 Apr 2024 15:02:27 +0000

TL;DR: Despite the fact that you may have good reason to disable a button for your users, it’s important to make sure to provide enough context for all users to avoid confusion and good user experience.

When auditing our Design System at Storyblok, I noticed that the disabled variety of our button was completely inaccessible via keyboard or screen reader. I could not detect it, interact with it - if I hadn’t seen it, I would not know it was there - which led me to investigate a little bit how we can make disabled buttons more accessible.

Let’s have a look.

The `disabled` Attribute

In HTML you can use the disabled attribute to mark an interactive element as disabled. This way, it’s not possible to interact with it, it’s unfocusable and unmodifiable. It usually also applies additional styling, visually greying it out or adding a hover state that indicates to visually that it’s not possible to click.

<button> Button </button>

<button disabled> Button </button>

This could be useful in some cases, for sure: for example, if a form field becomes irrelevant due to previous input - as no user input is needed anymore, the user does not necessarily need to know about the now disabled fields. No harm done.

If however, a “Save” button is disabled until certain information is filled out, but can not be discovered before completing a form - how would a user depending on assistive technology know the button is there to begin with? In this case, using something like aria-disabledmight be the better option.

The ´Aria-disabled´ Attribute

The aria-disabled attribute signals to assistive tech that a button is disabled. It does not change the styling nor the functionality - both of which need to be taken care of manually. An element with the ´aria-disabled´ attribute can also still receive focus and be interacted with.

So technically, there is no clear right or wrong - it, as always in tech, depends. It depends on your use case and intention, and the reasoning behind why you have disabled your element in the first place.

Other Considerations

Color Contrast

Another very common issue with disabled buttons is their styling. More often than not, they are grayed out, leaving them with terrible color contrast and impossible to read. Be sure if you decide to disable a button (whether with the disabled or aria-disabled attribute) to check
the contrast ratio and opt for a color combination with sufficient contrat. While the Web Content Accessibility Guidelines (WCAG) do not require a specific color contrast ratio for disabled buttons or other inactive elements, it’s still advisable to make sure your users can distinguish the text on the button (or other element) and don’t have to squint at their screen.

User Feedback

Another common issue with disabled buttons is that it can leave the users guessing: is it really not working? Why is it not working? What am I doing wrong or what kind of input i missing?

Adding error messages and feedbac creates less confusion and a better experience for your users as they feel more in control of the situation.

Summary

In the end, there is no one size fits all and it highly depends on the context - but there are definitely a few things we can do to make sure disabled buttons are more accessible and user experience is improved for everyone.

What kind of best practises do you follow when disabling buttons? I’m curious about your thoughts, experience and of course feedback!

Resources

Nevertheless, we coded - let's focus on the good ✨

Josefine Schfr — Mon, 11 Mar 2024 15:07:24 +0000

For me, personally, a lot has changed since entering the tech industry almost 5 years ago. I graduated from a frontend boot camp, got my first job, and two years later my second. I've just switched positions again, though internally, and am, on the whole, pretty happy with that. I've been privileged enough to visit (and sometimes speak at) many developer conferences around the world and I'm proud of how far I've come since my first hello world.

Funnily enough, a #shecoded article was the first one I ever wrote on dev.to and kind of my stepping stone into this community and any form of (remotely technical) content creation. It's become a bit of a staple for me, as for many others.

This year, I had been thinking a lot about what I wanted to write about for International Women's Day.

Working in a fully remote setup, I feel pretty far removed from a lot of the subtle workplace sexism that is out there in the real world. It's definitely more sheltered, working from home, where only my cat is bullying me.

But at the same time, it's 2024, and there are still so many big and small injustices that we have just gotten used to - in tech and far beyond.

It's crucial to fight, to gather allies, to share experiences, and openly discuss.

But in all of this, sometimes, we also all deserve a break. Because at least for me, thinking about these kinds of injustices too much makes me angry and helpless - two things, I'd rather not be.

So today, I want to express my gratitude for the amazing people and communities I got to meet along the way - not to be too dramatic, but I would probably not be in this industry anymore if it wasn't for you.

I am so grateful for

My amazing colleagues, who have become mentors and friends. Whom I get to learn from every day. Who generously share their knowledge, are not only incredibly smart and patient but also some of the kindest people I've met. Thank you Bibiana, Arisa, Alba, Lisi, Lori, Maria and so many more ♥️
All of our amazing guests who joined our GirlCode Coffee Break Streams and dedicated their time to chat with us about topics like Accessibility, CSS, Mental Health and Well-Being - only to name a few. After each stream, I have a list of topics I want to immediately dive into because I found the conversations so motivating. Thank you Anuradha, Gift, Carmen, Julia, Vasilika, Ramona and sooo many more <3
Coding communities like Girl Code, Women Tech Makers, Social Developers Club, Svelte Sirens and so many more, for creating safe spaces for learning and growing together
Fellow (female) speakers and amazing allies at conferences who make me feel included and welcome, despite impostor syndrome.
People reaching out, whether at conferences or online to ask about how to be a better ally. Thank you!

There are so many amazing people, welcoming, inclusive, and supportive communities and safe spaces.

Despite all that is going on, in the tech industry and beyond - we need to stick together to make sure it all gets a little better every day. ✨

Integrating Web Accessibility Across the Organization

Josefine Schfr — Mon, 12 Feb 2024 14:45:56 +0000

Studying for the CPACC, I came across the W3C's recommendations for integrating web accessibility into an organization, which I found really interesting.

TL;DR: While some of these pointers use (at least to me) a little abstract and sometimes ‘buzzwordy’ language the point is clear: It’s a marathon, not a sprint. It takes, figuratively speaking, a village, not a single individual. Everyone needs to get on board, responsibilities need to be clear and regularly communicated. A good plan is already half the work done. And focussing on high-reward, low-effort tasks first, will take you a good step ahead in the game.

But let's have a closer look at their recommendations.

The W3C divides the process into 4 main phases:

Initiate
Plan
Implement
Sustain

Each has its own tasks and challenges, and I would strongly assume that these should not be taken as the one and only truth when applying the process to one's organization. After all, there is no cookie-cutter solution to web accessibility and each org is a little different.

The 4 Phases of Implementing ICT Accessibility across an Organization

Initiate

In the initial phase of implementing Web Accessibility into your organization, it’s a good idea to start with an exploration of the current environment to assess what you are dealing with. This is also the time to slowly set objectives: What are you trying to achieve, and why? It’s the time to raise awareness and educate yourself and your time on the basics of web accessibility and gather support for undertaking. You probably also need to develop your (business) case: How are you going to convince everyone to get on board and potentially spend time and money on the accessibility goal? There are many good reasons to invest in web accessibility as an organization, but people usually take a little convincing.

Plan

Next, you can start to plan your first steps: you can start by creating an accessibility policy to document the scope and your goals. This will also help you determine what roles and expertise might be needed to achieve these tasks. Make sure your budget covers all the resources you require, including training, audits, and potentially user testing. Review your website and the environment you are working in to ensure you are aware of all that needs fixing, potential tools and services you have to consider, etc.
This is also a good time to start thinking about how to monitor your progress, document your findings and establish a framework for the entire process. Communicating with everyone involved will ensure long-term support for integrating web accessibility in your organization (trust me, you will need it).

Implement

In the implementation phase, it’s time to build your expertise and skills and put them into practice. Ideally, web accessibility is intertwined with other activities to minimize overhead and create effective workflows. Regular evaluation will help keep track of the progress and reduce risks (and costs!). A tip from W3C that I found so valuable in ‘real life’ was to prioritize according to quick wins with high impact: This helps keep everyone motivated and has a massive impact on your users as well. Sharing your progress and keeping lines of communication open maintains awareness and ensures support over a longer time.

Sustain

Even when the main tasks are tackled, it’s important to continuously monitor accessibility and not discard the activities completely. Changing content can introduce new accessibility issues. It’s also important to keep the exchange with stakeholders up, track (possibly changing) legislations, and respond to the latest requirements. Technologies might change, so it’s good to stay on top of the latest developments. Last but not least, user feedback is a super valuable source of information that can help you improve your web accessibility.

What do you think of the W3C's recommended steps for implementing Web Accessibility across an organization? In your experience, is it practical? Let me know below, I'm curious to hear your opinions.

Bridging the Empathy Gap - Inclusive Web Development for Everyone

Josefine Schfr — Tue, 06 Feb 2024 08:16:31 +0000

It’s human to make assumptions based on our own knowledge, right? We all do it - after all, this is how evolution shaped our brains: sometimes we needed to make quick decisions based on the information that we had: Can I eat this? Will this kill me? Should I better run away really quickly? It’s in our nature, and that’s not necessarily a bad thing. That being said, making assumptions unconsciously and without reflecting on them can also exclude different perspectives and users.

Impact on Technology

Let’s have a closer look at who is building our code. Bare in mind that global data is really difficult to collect and that there is no holistic, reliable worldwide survey - however, looking at different data, there are a few things I would like to point out:

According to a report by Statista, in the US, around 20% of workers in Software & Web Development jobs are women.
43% of Professional Developers are 25-34 years old (Stackoverflow, 2022)
68.8% of the State of JS respondents are white
Majority is able bodied / did not report any (temporary) disability

Disability Status in State of JS

In the State of JS developer survey, there is a question regarding disability status, which was answered by 18% of the total survey respondents. According to these results, around 3.9% of respondents have visual impairments, 0.9% hearing impairments, 0.7% mobility impairments, and 1.9% cognitive impairments. While of course there could be many reasons for people deciding not to report their disability, this gives us a rough overview of the demographic.

The majority of people who write our code, at least according to these surveys, are relatively young, white, able-bodied males. And this has consequences.

Who is writing our code?

The Empathy Gap

This lack of diversity when it comes to different perspectives and abilities leaves the web currently a pretty inaccessible place. Only 3% of the web is accessible.

Most Common Accessibility Failures

The WebAim One Million report evaluates the most common WCAG failures on the one million most popular homepages. They have found pretty astounding numbers when it comes to accessibility issues, most common are:

Low Color Contrast
Missing Alternative TExt
Empty Links
Missing Form Input Labels
Empty Buttons
Missing Document Language

Let’s have a closer look.

Low Color Contrast Ratio

With 83% of home pages having this issue, it’s by far the most common failure. This means the contrast between the background and the foreground is not sufficient to be able to comfortably read and be accessible also to people with visual impairments. WCAG set a minimum contrast ratio of 4.5:1. There are several tools to test this and adjust colors accordingly. Fixing color contrast issues on your website will likely eliminate a bunch of issues already.

Missing Alternative Text

We need alternative text on images to describe the contents to folks who can’t see it otherwise. It’s also helpful if an image can’t be loaded, for example, due to a slow internet connection. It’s as simple as filling an alt=”” tag with a description of the image that you are using. If the image is purely decoration, you can leave the alt text empty.

Empty Links

Over half of the websites that were analyzed in the WebAIM one million report had empty links. Usually, when creating a link, we would wrap an <a> tag around the Link that we are describing, right? Well, in many cases, icons or images are used as links, not mere words. When no text, title or aria-label is added, this leaves screen reader users guessing as to where the link will take them.

Missing Form Input Labels

When you have a form that requires user input, you need to let your users know, not guess, what kind of input is required from them. This is why you should have a <label> associated with each <input> field.

Empty Buttons

This is very similar to the empty links: You need to let your screen reader users know where they are going and what they can expect. Make sure your buttons aren’t empty, also and especially when you are using icons or images as a button.

Missing Document Language

On 18.6% of the pages in the report, the document language isn’t set. This is a problem because screen readers use this information to make sure they are pronouncing the content correctly.

The True Cost of Implementing Accessibility

When it comes to implementing Web Accessibility, many people argue that it’s too expensive, takes to much time and too many resources. I would like to convince you of the contrary. Not implementing Web Accessibility is actually much more costly. First of all, it’s more time-consuming and expensive to fix accessibility bugs as an afterthought than integrating Web Accessibility into your design & development processes from the start. But there is much more to this equation:

Access to (digital) information is a Human Right as defined by the United Nations. Take a stand!
Depending on where you are, failing to comply with Web
Accessibility standards can result in legal consequences and potential lawsuits. Much more expensive than fixing accessibility bugs.
You are missing out on business opportunities: According to a report by the World Health Organization, over 15% of the global population are experiencing a form of disability throughout their lifetime. That is a lot of lost revenue if you exclude all of these potential customers.
Focussing on Web Accessibility will improve your overall user experience and therefore user engagement.
Not caring about Accessibility will likely hurt your brand image & corporate social responsibility.

Integrating Empathy

First of all, let’s point out that this is a shared responsibility. No one discipline should be entirely in charge of making sure your product, service, or website is accessible. The more perspectives are involved, the better. Regardless of whether you are involved in design, development, content creation, or testing - accessibility matters everywhere.

So what can you do to implement a little more empathy?

Clearly Define your Accessibility Goals. The clearer the goals, the easier to reach them. Many use the WCAG AA standard as it is the most common and widely recommended (and in some countries required by law)
Identify the most common user journey. If you can’t test everything at once, have a look at your page analytics and start with the 3 most important actions. This will already have a big impact on your users.
Run an initial audit: use an automated audit like the axeDevTools one or a Lighthouse report as your initial guideline on where to start. Mind you, automated tests of course don’t eliminate the manual testing process - but they are a good start.
Identify low-hanging fruit and prioritize. What is something you can fix relatively quickly that will have a big impact on a large number of users? Start there!
Emphasize high code quality - this will improve your accessibility enormously, as many failures are based on issues with semantic HTML
Automate where you can - use linters, automated tests, and integrate accessibility in your CI / CD pipelines.
Diversity your user personas. Use a tool like Cards for Humanity to explore different user personas beyond the binary.
Invest in testing. Make sure, if you can, to employ people who use assistive tech natively - you will get a lot of valuable feedback for your product.

There are a lot of actionable steps you can take to make your product, service or website a little more accessible, one step at a time. No reason not to get started 🚀

DEV Community: Josefine Schfr

What makes a good tech Meet-up?

Generating Alternative Text with AI

Pros & Cons of generating alternative text with AI

Pros of generating alternative text with AI

Cons of generating alternative text with AI

What makes a good alternative text?

What AI Model should you use?

Considerations for implementation

Conclusion

Delivering your First Talk at a Tech conference

One Day before

Day off the conference

During your talk

After your talk

Accessible Input Elements | the Basics

Choosing the correct Input Type

Making sure there is always a label associated with your input elements

aria-label vs. aria-labelledby

aria-label

aria-labelledby

Road to becoming a GDE | The Google Developers Program

What is the Google Developers Program?

What are the benefits of being part of the GDE programm?

Who can apply?

How can you apply?

Becoming a GDE | My personal Journey

You've become a GDE, what now?

Conferences for first-time speakers?

What's stopping you from coding like this...?

Studying for CPACC | Becoming a Certified Accessibility Professional

Signing up for the CPACC Exam

Exam Dates

Examination Options

Requesting Additional Time

Studying for the CPACC Exam

Free Resources

Paid Resources

Study Methods

Taking the CPCC Exam

Conclusion

Making Disabled Buttons more Accessible

The disabled Attribute

The ´Aria-disabled´ Attribute

Other Considerations

Color Contrast

User Feedback

Summary

Resources

Nevertheless, we coded - let's focus on the good ✨

Integrating Web Accessibility Across the Organization

The 4 Phases of Implementing ICT Accessibility across an Organization

Initiate

Plan

Implement

Sustain

Bridging the Empathy Gap - Inclusive Web Development for Everyone

Impact on Technology

Disability Status in State of JS

The Empathy Gap

Most Common Accessibility Failures

Low Color Contrast Ratio

Missing Alternative Text

Empty Links

Missing Form Input Labels

Empty Buttons

Missing Document Language

The True Cost of Implementing Accessibility

Integrating Empathy

The `disabled` Attribute