@elaineleung
Posted
Hi Haydn, this is a good attempt at making an accessibility-focused component!
I checked out your site on Chrome and Firefox, and it looks like the only things on the page that responds to tabbing are just the attribution footer links and not the component. I can see that in your code, you're using list elements with a data-tab-target, but the data label may not be the tool for the job. To have the tab key interact with the browser, you will either need an aria-label on the element instead or turn it into an element that can interact with the browser, such as a link or form controls (e.g., button).
I actually just updated my time tracker to use radio buttons instead of plain buttons just so that I can do tabbing; I think you can have a look and see: https://www.frontendmentor.io/solutions/responsive-dashboard-using-scss-and-vanilla-javascipt-with-json--HVkNhdtJT. I'm not fully finished yet but the labels are working at least!
Also, I suggest adding a cursor: pointer for the timeframe labels, as that would indicate to the user those are clickable.
Lastly, you got a number of HTML and accessibility issues to work through, but they look mostly to be the same one or two issue, such as images needing alt tags. Good luck and good job once again!
@haydnkerr
Posted
@elaineleung thank you for the feedback! In the past I have used radio buttons but I wanted to test myself with some java.
So are you saying that the information doesn't toggle between daily, weekly and monthly? That's strange as it works on my browsers. How can I test this on other versions of Firefox etc.?
Thanks once again
@elaineleung
Posted
@haydnkerr Hi Haydn, there's no issue at all with clicking on the timeframe titles with a mouse to toggle the information; this works on Chrome and Firefox when I tested it. What I'm referring to is when a user hits the "Tab" key on the keyboard and using the "Tab" key to toggle the information; this does not work at all for the timeframe titles. Because you mentioned having issues with accessibility, I thought to take a look since I also designed this component with accessibility in mind. I got a bit confused since not only did you mention accessibility but you used a data label name like "data-tab-target", so I thought you also tried to build this as a more inclusive app.
@haydnkerr
Posted
@elaineleung ohh ok I get what you're saying now! Thank you so much for your feedback, I'm still very much learning all the processes and language. I used data-tab-target as that's how I learnt to do the function I was looking for. Now that you mention it though I think it is something I will try and incorporate in the design to make it more inclusive for keyboard uses.
@elaineleung
Posted
@haydnkerr No worries! Yes, it is good to design with accessibility in mind, something I've been trying to do more. There's been cases where companies got taken to court due to not having a site that was accessible and this caused problems for users. Definitely not something I'd want to see happen on the job!
