Managing Focus - A11ycasts #22

[@checkerist]

Can you please rearrange the playlist for A11y casts so it will play from the first episode to the last one? Will make viewing the whole cast more accessible. Thanks in advance.

[@raymondfallon]

Yes, this drives me up the wall!

[@dennis333]

Excellent, but don't forget to also update the page !

[@if_it_pleases_the_council]

Udacity FEND brought me here! Thank you for all your hard work!!

[@escapiststupor]

Isn't it weird that we are programmatically switching focus to the h1 which is not interactive? On top of the fact that we are hiding the focus ring.... wouldn't the user be very confused as for where my focus just went.....?

[@AntonUnreal]

Thank you! I have same case into tab list with links content in tabpanel.

[@andrejs6450]

Hello. Great example but it seems not to be working. Perhaps there is a new version of router by Visionmedia? Or I missed something...

[@sharklion3]

grateful this exists!

[@yoshuawuyts]

Was wondering: will we ever get an equivalent of Element.focus() that doesn't cause a frame deopt? Or will the frame improvements in Chrome 61 (?) take care of that? Thanks! 🙌

[@letswatchrob]

There is talk of giving Element.focus a scroll object. github.com/whatwg/html/issues/834

[@Jeremybelleu]

The previous episode about tab navigation is not listed in the description.

[@letswatchrob]

fixed!

[@konstantinkkk8397]

I download code from github but code do not display

[@billymckee5515]

Is this a problem for keyboard-only users? Placing focus on a heading with an indicator is confusing like you mentioned. Removing the focus indicator seems to go against what W3 ARIA says - www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_discernable_predictable "It is essential that there is always a component within the user interface that is active ... and that the active element has a visual focus indicator"

[@georgegillams5861]

If the app wasn't a SPA then the entire site would have reloaded on navigation, after which nothing would be active. So by setting `outline: none` we're sort of mimicking the behaviour of whole-page navigation. I guess leaving the focus indicator there can't actually do any harm, however, so would probably be a safer option to ensure we're catering for screen-reader users and keyboard users.

[@VozimoSe]

Thank you for this great video! I posted a question on a StackExchange but I thought I might wanna ask here too. I wonder about your opinion on how to inform a user that a content loading has started if it takes longer than X seconds? It makes sense as the user might be wondering why nothing happens after clicking the link. If it's a link something should happen. How would user know whether to wait or the link is simply broken? ux.stackexchange.com/questions/131889/accessible-way-for-a-screen-reader-to-get-notified-about-the-dynamic-website-upd

[@stark1047]

Thanks for sharing it.

[@michellel1383]

I just sent you a LinkedIn message asking about this. Should have looked through the a11y cast playlist first. Feel free to ignore my message, and thanks for sharing your knowledge!

[@lyloft]

why not just `main.appendChild(template.content)` ?

[@letswatchrob]

If I recall I think that will remove the content from the template. Using cloneNode I can reuse it.