Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
I will have a proper read but I dont see an aria-live region in the elements tab in dev tools to indicate the current page?
From a skim read that looks to be the pattern they settled on?
SKip link focused, aria-live to notify of current page?
I might be missing it though as I am not on my main PC and it is hard to assess from here.
The advice now looks like this:
Provide a skip link that takes focus on a route change within the site, with a label that indicates what the link will do when activated: e.g. "skip to main navigation".
Include an ARIA Live Region on page load. On a route change, append text to it indicating the current page, e.g. "Portfolio page".
Changing tabs shouldn't reset focus as it is all done via AJAX, instead you should either use aria-live and say "loaded" when complete or focus the first item in the list (SPA pattern).
The tabs on the home feed aren't true "tabs" in the usual sense of toggling a small section of page visibility - they're actually links within a nav and clicking on them results in a fresh page load, which is why a user would need a skip link to get them back to the main content with ease.
Podcasts skip links do not work when on an actual podcast page
Looks like a page was missed when implementing the skip links! We'll get a quick fix up for that ASAP - nice spot 🙌
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Ah I see, because of the prefetching making it load instantly I thought it was an AJAX call, my bad! I should have checked the network tab before opening my mouth 😂😋
I will have a proper read but I dont see an aria-live region in the elements tab in dev tools to indicate the current page?
You're right! It's not related to @metamoni
's PR, but actually I missed this when implementing the skip links originally - we'll get this fixed 😄 But yes, that's the pattern we've been incrementally adopting, based on the research presented.
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
It is a really interesting pattern I haven't seen before so I look forward to seeing it in full form.
I think the aria-live region is the way they decided to address the problem I raised (I still haven't had chance to test, just my gut reaction from experience) in that if you manage focus it will interrupt reading the page title etc.
I hope the pattern works well as I do actually prefer the keyboard interaction this way (1 extra tab stop removed is always welcomed!) and once you have all had the headaches of implementing it I can learn from out of the way I might just be stealing it 😋🤣.
Thanks for the super quick responses @s_aitchison
!
Sorry @metamoni
didn't mean to hijack this as the work you have done is great!
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
I would imagine the fix for this would be super simple for a quick fix while a more flexible solution is created:
Add an aria-live region to all pages for site announcements. ID = "ariaLiveDiv";
// page load complete stuff before hereletannouncerDiv=document.querySelector("#ariaLiveDiv");announcerDiv.innerHTML=document.title;//the focus step after page loadmySkipLink.focus();
It would stop gap the issue while you set more meaningful text for each page (as the titles aren't always the best for things like comments etc but work great for the core part of the site such as articles, reading list, home etc.)
The pattern was taken from this blog post.
I will have a proper read but I dont see an
aria-liveregion in the elements tab in dev tools to indicate the current page?From a skim read that looks to be the pattern they settled on?
SKip link focused, aria-live to notify of current page?
I might be missing it though as I am not on my main PC and it is hard to assess from here.
Under "Recommendations: finding common ground"
The tabs on the home feed aren't true "tabs" in the usual sense of toggling a small section of page visibility - they're actually links within a
navand clicking on them results in a fresh page load, which is why a user would need a skip link to get them back to the main content with ease.Looks like a page was missed when implementing the skip links! We'll get a quick fix up for that ASAP - nice spot 🙌
Ah I see, because of the prefetching making it load instantly I thought it was an AJAX call, my bad! I should have checked the network tab before opening my mouth 😂😋
You're right! It's not related to @metamoni 's PR, but actually I missed this when implementing the skip links originally - we'll get this fixed 😄 But yes, that's the pattern we've been incrementally adopting, based on the research presented.
It is a really interesting pattern I haven't seen before so I look forward to seeing it in full form.
I think the
aria-liveregion is the way they decided to address the problem I raised (I still haven't had chance to test, just my gut reaction from experience) in that if you manage focus it will interrupt reading the page title etc.I hope the pattern works well as I do actually prefer the keyboard interaction this way (1 extra tab stop removed is always welcomed!) and once you have all had the headaches of implementing it I can learn from out of the way I might just be stealing it 😋🤣.
Thanks for the super quick responses @s_aitchison !
Sorry @metamoni didn't mean to hijack this as the work you have done is great!
I would imagine the fix for this would be super simple for a quick fix while a more flexible solution is created:
Add an aria-live region to all pages for site announcements. ID = "ariaLiveDiv";
It would stop gap the issue while you set more meaningful text for each page (as the titles aren't always the best for things like comments etc but work great for the core part of the site such as articles, reading list, home etc.)
Wow, some interesting discussions here while I was at work. Thank you, @inhuofficial and @s_aitchison , I'm learning a lot from all of this 😄