To click this button, press control option space. If I hit the inner key again, nothing happens. It shows an outline, it looks like I'm focused on the next button, but it didn't announce anything. If I hit the inner key to delete this item, let's see what happens. Voiceover on Chrome, focus management window. For a screen reader, this becomes really problematic. It didn't kick me all the way to the top. ![]() If I tab, I can get to the next button, which isn't too far off. But each item, when I focus on that button and I delete the item that I'm focused on, my focus is dropped. I can do a refresh since it's a soft delete. If I hit the delete button, it will remove that item. In my demo page, I have a couple of headings, I've got some links, and I've got a list of items with a delete button on each one. These techniques become more useful as you have more content, larger applications that become really critical that the user is kept up to date with what's happening, and that their focus is never dropped. Keep in mind, this is a really simple demo. I'll show you a couple techniques today that you can use in web applications. You want to make sure that you're not ever dropping their focus or leaving them in the wrong context as new things appear so that you're making a totally inaccessible experience. ![]() Something you should really consider if you're coding a web application is focus management, making sure that keyboard and screen reader users are guided through your application as elements are removed or new contexts are added such as modal windows.
0 Comments
Leave a Reply. |