From Front Desk to Front End p.36 Building an Accessible Toggle w/ JS 3/3

Photo by David Skyrius on Pexels to celebrate my implementation of my darkmode toggle!

Hi, I'm Tauri!

I am a Front End Developer and a student (and enrollment counselor) with Skillcrush, the online coding and design school with a heart! I am looking for employment with a company, and working on adding to my skillset every day! This blog is chronicling my most recent projects, so thank you for reading!

This week I finally finished building an accessible toggle!!! I also took a class with Jon Kuperman about accessibility through the platform Frontend Masters!! AAAANNNNDD I started a project with a group of friends to redesign and build a multi-page website with services and information for the visually impaired! A lot has happened since I last updated y'all, and I'm just really stoked to be at this point in my development journey! ✨✨✨

Monday 6/19/23:

Happy Juneteenth! I had plans with friends and loved ones all day and night so I enjoyed the break!

Tuesday 6/20/23:

I have a mock tech interview with a friend coming up focusing on React so I took some time to review my React lessons today bc I haven't been living in that land for a bit, so it was a welcome re-visit! Rendering an array data model and totally nailing my understanding of what all needs to happen to get it rendered properly was a great victory today.

Wednesday 6/21/23:

Today is the day that all my hard work culminated in successfully linking my dark mode styles to my toggle in with JS! 🎉
I'm so happy! There's still a lot to do, including figure out why the background of my toggle + label is staying white? I messed with that for awhile today to no avail. Then to narrow in on the focus and disabled styles, tweak some color stylings so it's accessible and shnazzy.
I decided to enroll in Frontend Masters to take their accessibility class today. I am in talks with some other Skillcrushers to work in a team on a website intended to be informative about those with visual impairments, which would be a fantastic opportunity to work on all of my accessibility learnings. First meeting would be next week if it pans out as planned so I have some time to checkout the 2.5 hours class (maybe a few times).

Thursday 6/22/23:

I jumped into the Accessibility class and that took up most of my time today.
I also got my toggle to transition to purple today. My issue was primarily that I had forgotten to compile my SASS file live, so my updates to the classes hadn't registered!

Friday 6/23/23:

HOLY MOLY, I am learning SUCH cool stuff in this Accessibility workshop!!!
I am SO jazzed on all of this! I am learning about ARIA, and Focus Management, labels ALL of the things I have been cursorily getting into with my explorations of making an accessible toggle. I am using the NVDA screen reader to test out all of his examples and my exercises as I make them more accessible. NVDA is free to use, but I made a donation bc it's such a worthy cause.
I am SO EXCITED to bring all of this to the projects that I build from here on, to edit my portfolio to make it more accessible, and to bring some amazing accessibility to my team's clients page!

Monday 6/26/23:

Today I learned about skip links for keyboard users and people who use screen readers. I loved the discussion that came after we went through an exercise on this, because he had us style the skip-link to "pop" once it was focused on with a tab, and someone asked "Why do that if this is for blind users?" And Jon Kuperman pointed out that some people might be power users who are using the keyboard, some people may only be partially blind but will still be artists who enjoy having things beautifully styled, and even for features you may not consider accessible to a blind person (like a portal for renting a car) he cited a great story where you will want to make it accessible for the blind parents of sited users for example who may be trying to rent a car for their daughter.
I was looking forward to checking out my client's current website with a screen reader and doing a basic accessibility audit today before we meet with her tomorrow so I could try to spot any areas I could improve and discuss it with the client during out first meeting tomorrow, but she's disconnected the domain from Wix! Even so, with everything I'm learning I'm sure there are a lot of things I can add to make it a better experience for all sorts of users!

Tuesday 6/27/23:

I finished the Accessibility class today! This class added even more amazing considerations for me to take into account for my darkmode toggle. I learned about how to use a media query to check into the system settings of a user to see if they prefer darkmode or light! This adds some further complications, because you may want to save a users settings in the local storage of the page, AND you may want to include a toggle and if you do it should override the preference settings in case a user decides they like something different than their usual for your specific page! So it creates this structure ideal (and now more complicated) structure where you'll want to (so fun!):

1. Check the local storage to see if a user has accessed your page before and already chosen a particular setting that they prefer
2. Then if not, check if they have a preference set in their system and automatically load the corresponding setting
3. Go to a default that your page loads to if neither of those are true
4. Have a setting that will override a users preference set in the system just in case they want to use your toggle to trigger a different one

He also shared a lot of amazing tooling options and additional resources and walked us through what an audit might look like through lighthouse for a page, featuring some issues he frequently sees like buttons with icons only and no label so there's no indication of what the button would do for screen readers. Unlabeled links, included ads with no labels (so sometimes you gotta talk to third parties about their accessibility issues), contrast issues, headers that are not properly nested, and list items not contained with a <ul> or <ol> tag which is important for screen readers.

My team also met with our client today, and I am SO EXCITED for this project focused on helping those with visual impairments!

Wednesday 6/28/23:

I finished my accessible toggle today!!! 🎉🎉🎉 At least what I would consider an MVP in terms of accessibility. I brought in the movement of the "handle" of the toggle in CSS bc my JS is currently set to target the entire toggle + label, I put in a prefers-reduced-motion media query which is suggested in the blog by Kitty Giaraudel that I've been using to build the toggle, and it was nice to use something I learned about in the class and I tested it by changing the settings on my own Windows OS. I also added the focus outlines in manually and disabled the outline when it was automatically applying to the toggle element when being interacted with a mouse. Then I finally adjusted the label styles so they are much more visible.
I would still like to implement a media query to check on the users preferred styles, AND some JS to override the setting, and ultimately a check to the users preferences saved in local storage as well. But that all requires my manipulating my current hard-earned JS, and it would make using the app darkmode a lot friendlier. I also don't really know much about why we should implement disabled styles and when/why disabled buttons commonly happen, or are they triggered, and I haven't implemented the styles that change it in case a user reads from right to left instead because I would like to look into this more as well and how I can test it. But my toggle currently passes the Lighthouse Chrome Devtools check for accessibility, so I'm running with it for now!
I have to start working on my dropdown menu bc our client will definitely want a dropdown for her website options, and I def want that to be accessible so I'm going to practice with my dropdown first while the design team does their stuff.
Please check out my toggle!
And here's the Github repo.