Current section: Accessibility 5 exercises

Focus Management for Better User Experience


00:00 So let's say I'm a user that's new to the app and I don't realize that the content needs to have some value into it. And so I go and submit this and we get this error. Now my focus is on the submit button, but the submit button was disabled.

00:15 But my focus stays down there, so I'm tapping around and now I have to go find, okay, where was the error? People using assistive technologies who cannot see the screen experience this on the daily and it's awful. So what we really should do is auto-focus on the first field that has an error.

00:32 If both fields have an error, then we should auto-focus on the first one and then they can tap through and fix all of the errors that are on the page. If the form as a whole has an error, we should focus on the form as well, which has interesting implications for things because forms aren't typically focusable.

00:49 But you can make it so it's programmatically focusable for our purposes, but not something that would be focused on if you're just tapping through, which is exactly what we want to do. So a couple of things you need to do to address this. And we also, I think it would make a lot of sense if I hit the edit button and it auto-focuses on the title.

01:09 So I want you to do that as well. We're just going to do some focus management, make the experience better, not only for assistive technology users, but just for everybody. So definitely spend a little bit of time working on that and we'll see you on the other side.