a11yproject / a11yproject.com

The A11Y Project is a community-driven effort to make digital accessibility easier.
https://a11yproject.com
Apache License 2.0
3.71k stars 552 forks source link

How to: Article how to make an accessible nav with dropdowns #1472

Open jimbateson opened 1 year ago

jimbateson commented 1 year ago

Navigation is a critical part of any application and can often involve many levels of nesting. It allows people to complete journeys and find the information they need. So making it accessible is key.


PR to add the article page into the posts /how to section.

Just a couple of notes sorry:

Sorry it's taken so long to get this into PR as well.

jimbateson commented 1 year ago

Just realized I might have totally misread and missed a step with creating an issue to properly link this to sorry. I'll have another read of the contributing guides in the morning and try an do this properly!

ericwbailey commented 1 year ago

@jimbateson Firs off, thanks for your submission! I'm really excited to review it, but have been a bit busy lately. Don't worry about filing the issue, it's on my radar 🙂

jimbateson commented 1 year ago

@ericwbailey absolutely no problem at all, glad you're feeling better and hope everything is ok.

Thank you for the review and feedback, and sorry that there's so much I need to tweak! Definitely a great learning experience. I'll start making the suggested changes, and agree that an example codepen would be very useful! I'll get these done ASAP :)

ericwbailey commented 1 year ago

@jimbateson Awesome! I think this post is also in really good shape. <ost of my feedback is just style nitpicks, and I'm really excited to publish it 🙂

Speaking of which, could you also add yourself to authors.json in this PR in anticipation of merging?

jimbateson commented 1 year ago

Apologies for going a bit quiet on this one. Done one round of changes, the low-hanging stuff, and will make some time to do the rest of the amends in the next week or so. Thanks for your patience :)

jimbateson commented 1 year ago

@jimbateson I'm sorry this took so long to get to. My being busy turned into a health issue, but I'm in a better place now.

I've left some comments and suggested edits here to consider. One other big-picture thing I'm thinking is we should also provide an example of the JavaScript that powers the toggling. What do you think about creating a CodePen example for the post, so readers can play with/reference it?

@ericwbailey Hey, hope you're doing ok, I'm so so sorry for the delay in getting this over the line. I've created a CodePen example of a the nav dropdowns - https://codepen.io/_jamesbateson/full/rNrJWpv (let me know if this ok! - just gonna do some final checks/tests on this in the morning).

Just wondering how you would prefer me to embed this? Was going to go for the HTML embed option with the click to run option for perf gains and then only people who wish to see/play with it would need to use it? But if you'd prefer I just had it as a link then that's cool as well! Couldn't see any other embed examples in other posts or anything in the content style guide on it, but apologies if I've missed anything there!

jimbateson commented 1 year ago

@davatron5000 Hey, hope you don't mind the mention here. Just re-opened my PR for the How To make accessibile nav with dropdowns article.

I had completed the majority of the feedback from Eric, and had created a Codepen that people could see examples and play around with.

Was just awaiting that Codepen to be checked and approved for suitability (linked in last comment) and also for any guideance on how is preferable to embed codepens on the site.

No rush at all, but just thought would mention.

Many thanks, Jim

davatron5000 commented 1 year ago

Thanks @jamesbatesoncode. I'm verrryy far behind on some review and management tasks here. But I'll try to get on this stuff at some point soon.