@schalkneethling@hachyderm.io
@schalkneethling@hachyderm.io avatar

schalkneethling

@schalkneethling@hachyderm.io

As a kind-hearted individual, I strongly believe in the power of kindness and advocate passionately for mental health, promoting awareness, understanding, and mindfulness in our daily lives. Having experienced the challenges of ADHD, depression, and generalized anxiety disorder, I empathize with the difficulties of navigating an unsupportive environment. Together, let's build a brighter future through opportunities and amplifying voices.

This profile is from a federated server and may be incomplete. Browse more on the original instance.

ryantownsend, (edited ) to webdev
@ryantownsend@webperf.social avatar

📊 Does the Lighthouse Performance Score out of 100 matter to you?

Would love to see replies with why you chose your answer.

And please boost for reach – would be great to get consensus from the community! 🙏

schalkneethling,
@schalkneethling@hachyderm.io avatar

@ryantownsend I think it is a good start, but not the holy grail. I am digging back into this space, and so this question is very timely.

I find that testing on a real device is incredibly useful when possible, and using WebpageTest is also very helpful. I would love to know how this field has evolved over the last two years or so.

schalkneethling, to accessibility
@schalkneethling@hachyderm.io avatar

Hey, folks, other than Mastodon, where do you all hang out? @hdv @scottohara

schalkneethling,
@schalkneethling@hachyderm.io avatar

@patrick_h_lauke Thanks, Patrick 🙌

schalkneethling,
@schalkneethling@hachyderm.io avatar

@patrick_h_lauke Hmmm, is this the one? https://www.tpgi.com/anybody-can-be-an-a11y-slacker/

schalkneethling,
@schalkneethling@hachyderm.io avatar

@patrick_h_lauke Thanks, Patrick.

schalkneethling,
@schalkneethling@hachyderm.io avatar

@patrick_h_lauke Hmmm, perhaps I need an invite? I get the following when trying to sign up:

The email address must match one of the domains listed below. Please try another email.

I tried with Google, as the only email option is an email from the @vispero.com domain. But the above error was after trying to sign up with a Google account.

schalkneethling, to random
@schalkneethling@hachyderm.io avatar

I love remote work. Read on Slack:

Me: "Moving onto the front end now."

Colleague: "Cool. I'll check it out in a few. Need to bring the llama her breakfast" 🦙

aardrian, to random
@aardrian@toot.cafe avatar

I appreciate having my expectations managed.

schalkneethling,
@schalkneethling@hachyderm.io avatar

@aardrian 🤦 I guess this makes the case for not prefilling alternative text with author hints. I am pretty sure that this is worse than empty alt text.

schalkneethling, to accessibility
@schalkneethling@hachyderm.io avatar

Why would someone believe that because a label always accompanies a "checkbox", the checkbox does not need an accessible name?

If the checkbox has an associated label, would the label not be used as the accessible name for the checkbox? If so, then these "custom" checkbox components have got this all wrong.

From what I know and can tell, it needs an accessible name, and yes, these are rules: https://www.w3.org/WAI/standards-guidelines/act/rules/e086e5/

schalkneethling,
@schalkneethling@hachyderm.io avatar

Comment:

> I don't think it needs accessible text.

schalkneethling,
@schalkneethling@hachyderm.io avatar

My answer:

I would argue that it does need accessible text.
One of the things with, specifically, screen readers is that the way they work and their level of support can differ depending on the screen reader, browser, and OS combination. The Radix checkbox is wrapped with a label, but the fact that Axe calls these checkboxes out is because the label is not associated with the button element with the checkbox role.

schalkneethling, to accessibility
@schalkneethling@hachyderm.io avatar

Would you consider the following checkboxes to pass color contrast guidelines? I feel that the second checkbox style, the screenshot that contains a single checkbox, does much better. @hdv Thoughts?

Screenshot of a card component with a checkbox. This checkbox seem to have much better color contrast.

schalkneethling,
@schalkneethling@hachyderm.io avatar

@hdv That was my impression as well. Axe reported that it was passing with flying colors, with something like 7.4:1

schalkneethling,
@schalkneethling@hachyderm.io avatar

@aardrian @hdv Oh, I was not trusting Axe without question. I was curious why it showed it to pass, even though it seemed to not when looking at it.

The bigger problem here is, another dev may poke at it with Lighthouse or Axe and say, "Well, Axe says it passes with flying colours".

schalkneethling,
@schalkneethling@hachyderm.io avatar

@aardrian @hdv Related: This thread from WebAIM: https://webaim.org/discussion/mail_thread?thread=10845&id=49337#49337

schalkneethling,
@schalkneethling@hachyderm.io avatar

@aardrian @hdv That screenshot I shared is the initial state. The contrast improves when active or checked, but I did not run Axe on any of those states.

It could also be that the screenshot is not doing it justice.

Use case:

background of container:

checkbox background color (button element with role checkbox): white

border: 1px solid rgba(74,82,102,.4)

schalkneethling,
@schalkneethling@hachyderm.io avatar

@aardrian @hdv Use case 2:

background of container:

checkbox background color (button element with role checkbox):

border: 1px solid rgba(74,82,102,.4)

schalkneethling,
@schalkneethling@hachyderm.io avatar

@aardrian @hdv Why is it so hard to convince people to use input type=checkbox?

schalkneethling,
@schalkneethling@hachyderm.io avatar

@aardrian @hdv Fair point :) The main thing was determining color contrast and whether using a color picker to select color from the screen was the correct way.

From what followed, it seemed that that is not the best way and referring to the color as found in code or devtools is the more accurate way to go about it.

shanselman, to random
@shanselman@hachyderm.io avatar

RIP Kris Nóva. I had her on the show and was blessed to spend time with her just a few months ago. She was a genius and made things better. https://youtu.be/nJSxRqJ2kgQ?si=3ei04Z3MmJan3XsC life is short. Focus on your friends and family and your health. Everything is fleeting.

schalkneethling,
@schalkneethling@hachyderm.io avatar

@shanselman What! No! 😭

shanselman, to random
@shanselman@hachyderm.io avatar

I have questions

schalkneethling,
@schalkneethling@hachyderm.io avatar

@shanselman 🤷

shanselman, to random
@shanselman@hachyderm.io avatar

Me: loads up steamdeck, switch, iPhone with games and movies for a thousand hours of potential content for a 10 hour flight

Also me: falls asleep immediately until I’m woken by the landing gear hitting the tarmac

🤦🏻

schalkneethling,
@schalkneethling@hachyderm.io avatar

@shanselman I hope you had a good time over here at the southern tip of Africa. A lot of things are broken, but the country is beautiful.

shanselman, to random
@shanselman@hachyderm.io avatar

Thanks Lebogang Madise and Microsoft Johannesburg friends for a lovely day! See you all again on Tuesday at Community Day! https://msevents.microsoft.com/event?id=2903041764

image/jpeg
image/jpeg

schalkneethling,
@schalkneethling@hachyderm.io avatar

@shanselman Oh my goodness! Welcome to South Africa, Scott! I wish there were a way we could meet and have a chat. Enjoy the loadshedding 😜

schalkneethling,
@schalkneethling@hachyderm.io avatar

@shanselman Oh, awesome. Let me see if I can move things around. 🤞

liroyleshed, to random
@liroyleshed@mastodon.social avatar

Tech should make our lives better, not worse.

schalkneethling,
@schalkneethling@hachyderm.io avatar

@liroyleshed I agree a 10000%

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • megavids
  • InstantRegret
  • magazineikmin
  • thenastyranch
  • modclub
  • everett
  • rosin
  • Youngstown
  • slotface
  • ethstaker
  • mdbf
  • kavyap
  • osvaldo12
  • DreamBathrooms
  • anitta
  • Durango
  • ngwrru68w68
  • tester
  • khanakhh
  • love
  • tacticalgear
  • cubers
  • GTA5RPClips
  • Leos
  • normalnudes
  • provamag3
  • cisconetworking
  • JUstTest
  • All magazines
    •