Looking to hire developers?
I've redone this challenge to try and make the toggle work with screenreaders, it's improved but I've not succeeded as much as I would like.
@grace-snow you mentioned this as an area to improve in my last attempt. Can you, or anyone advise about 'aria-live'? I can only make the reader announce one change not the three prices.
Any other suggestions or comments on any points are most welcome. It was actually more difficult going back to my code and re-working it than just starting afresh in someways!
@BurritoDoggie
Posted
Great work!
It is definitely cool. I am not good at programing and seeing that Is honestly something I would like to learn. Also when you change the switch to "annually" I like that it has a black circle around it
@ApplePieGiraffe
Posted
Hi, Dave! 👋
Redoing a challenge can be pretty interesting, don't you think? (I sometimes get surprised at how I have little to no idea what I was thinking when I look at code that I wrote a few months ago.) 😆 Anyway, good job! 👏
I think the dark circle that you added around the toggle-switch for the focused state is good, but if you're working on making the toggle-switch more accessible, perhaps a slightly more obvious focused state (such as a larger outline around the entire toggle-switch) would make the focused toggle-switch easier to see. But IDK—that's just my thought. 😅
I'm not super familiar with screenreaders (and even WAI-ARIA and stuff), so I'll just let @grace-snow or someone comment on that if they happen to take a look. 😄
Anyhow, as usual—keep coding (and happy coding, too)! 😁
@ApplePieGiraffe I'd be really surprised if this wasn't keyboard accessible... Were you perhaps trying to tab instead of using arrow keys?
Looks good dave, I'll have a look properly when I'm more awake ☺
@ApplePieGiraffe thanks for the feedback - as Grace mentioned you should be able to toggle the switch with the arrow keys. Tab will take you to the next focusable element. I added a fieldset and focus-within to make the selection of the toggle more clear. Thanks as always for the feedback!
Thanks @grace-snow I tried a bit more but still can't get the aria-live to announce more than one change!
@ApplePieGiraffe
Posted
@dwhenson @grace-snow
Oops! I was hitting my spacebar and Enter keys instead! 😅 Good work on that (and the updated changes), Dave! 😄
@ApplePieGiraffe Thanks! Yes, this keyboard and screenreader thing is tricky. But you are so right about going back over my own code - really difficult! One thing it's taught me is to take a bit more time at the start and really have a good poke around the design so I know what's needed - trying to bolt stuff on later gets really messy!
@ApplePieGiraffe
Posted
@dwhenson
Definitely! 😂
@tesla-ambassador
Posted
Hey Dave, this is a great challenge! I previewed your site and it is some great content because it takes a lot of determination to be able to repeat a project you are done with. Anyways my main suggestions are if you can add some simple animation to your toggle switch and also you might have forgotten to change the color of your body to a light-ish grey. Happy coding!
@samuelpalaciosdev
Posted
Hi, Dave👋
Great job on this challenge. Your solution looks good and scales pretty well👍
I only suggest decreasing the 'margin-top' of the .container to margin-top: 5em and changing the background-color to a more light-gray color😉
I hope you have a nice day, keep coding!💙
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
