WTFocus - What's It All About?

You can download captions as SRT or VTT, if your player has not automatically shown them.

Transcript

When using DevTools, it's possible to hover over any element and get a very simple summary of the accessibility of that element.

So in this example here, Role Reverser, we can see some contrast details.

We can see the accessible name, the role, and whether this item is keyboard focusable.

What we can't tell is how it gets its accessible name.

For that, you would have to go down to the accessibility panel, which is not shown by default, needs to be revealed.

And then scroll down to this section here where it gives you the name, tells you the source of the name.

In this case, it is the contents, the text content of that link, Role Reverser.

And it will also reveal any other ARIA attributes such as `aria-labelledby` or `aria-label` that could have provided the accessible name, and the `title`.

So this information here and this information on hover, it's all good, but it would be good to have all of this information all together in one place.

And that is What The Focus does.

When you run What The Focus, it goes through every focusable element on the page and collates that information and then reveals it as you focus.

So now we can see what the accessible name is, the source of that accessible name, what the element's role is, is there a description, an accessible description.

Plus we also have some more information such as what the HTML element is.

Now, if I reveal this information here, more details, it'll also show you various other possible naming sources and which one provided it.

So here we have the inner text content as being the source of that information.

And anything that was also there that was overridden would be indicated with a strikethrough.

Another feature that has just been added is 'Download summary'.

What does download summary do?

Well, let's read the alert which is about to show and this will cover everything.

"Important disclaimer, this text file is a very approximate representation of what this page may be like for screen reader users.

It lists all the focusable elements at the point of running the script, but may not include every element.

For example, any element that is temporarily set to be non-focussable with `tabindex="-1"`, such as an inactive tab in a group of tab controls will not be shown here.

It lists the accessible name and the role and where there is an accessible description provided by `aria-describedby` or a `title` attribute, this is included too.

Okay, great.

So let's hit OK, see what happened.

So a file has been downloaded and it is named "simple screen reader emulation.

txt".

And I do want to emphasize that this is very simplistic.

This is not what a screen reader user is likely to be doing on a page.

This is literally just a list of all the focusable elements with the accessible name, the role and where there is one and accessible description.

So let's have a little look at this file and see what we have.

And there it is.

A list of all the links on this page.

And this is a very dull page for me to test it on because literally there is nothing there other than links and none of them have accessible description.