1
00:00:05,000 --> 00:00:08,720
When using DevTools, it's possible to hover over any element and

2
00:00:08,720 --> 00:00:12,280
get a very simple summary of the accessibility of that element.

3
00:00:12,280 --> 00:00:16,440
So in this example here, Role Reverser, we can see some contrast details.

4
00:00:16,440 --> 00:00:20,440
We can see the accessible name, the role, and whether this item is keyboard

5
00:00:20,440 --> 00:00:20,960
focusable.

6
00:00:20,960 --> 00:00:25,320
What we can't tell is how it gets its accessible name.

7
00:00:25,320 --> 00:00:28,440
For that, you would have to go down to the accessibility panel,

8
00:00:28,440 --> 00:00:30,920
which is not shown by default, needs to be revealed.

9
00:00:30,920 --> 00:00:37,400
And then scroll down to this section here where it gives you the name,

10
00:00:37,400 --> 00:00:40,720
tells you the source of the name.

11
00:00:40,720 --> 00:00:44,120
In this case, it is the contents, the text content of that link,

12
00:00:44,120 --> 00:00:44,840
Role Reverser.

13
00:00:44,840 --> 00:00:50,680
And it will also reveal any other ARIA attributes such as `aria-labelledby` or

14
00:00:50,680 --> 00:00:55,480
`aria-label` that could have provided the accessible name, and the `title`.

15
00:00:57,240 --> 00:01:01,800
So this information here and this information on hover, it's all good,

16
00:01:01,800 --> 00:01:06,840
but it would be good to have all of this information all together in one place.

17
00:01:06,840 --> 00:01:10,560
And that is What The Focus does.

18
00:01:10,560 --> 00:01:14,600
When you run What The Focus, it goes through every focusable element on the page

19
00:01:14,600 --> 00:01:19,920
and collates that information and then reveals it as you focus.

20
00:01:19,920 --> 00:01:25,000
So now we can see what the accessible name is, the source of that accessible name,

21
00:01:25,000 --> 00:01:28,920
what the element's role is, is there a description, an accessible description.

22
00:01:28,920 --> 00:01:35,240
Plus we also have some more information such as what the HTML element is.

23
00:01:35,240 --> 00:01:39,600
Now, if I reveal this information here, more details, it'll also show you

24
00:01:39,600 --> 00:01:44,160
various other possible naming sources and which one provided it.

25
00:01:44,160 --> 00:01:50,640
So here we have the inner text content as being the source of that information.

26
00:01:50,640 --> 00:01:55,400
And anything that was also there that was overridden would be indicated with a

27
00:01:55,400 --> 00:01:56,600
strikethrough.

28
00:01:56,600 --> 00:02:01,440
Another feature that has just been added is 'Download summary'.

29
00:02:01,440 --> 00:02:03,240
What does download summary do?

30
00:02:03,240 --> 00:02:08,640
Well, let's read the alert which is about to show and this will cover everything.

31
00:02:08,640 --> 00:02:13,240
"Important disclaimer, this text file is a very approximate representation of what

32
00:02:13,240 --> 00:02:16,080
this page may be like for screen reader users.

33
00:02:16,080 --> 00:02:19,160
It lists all the focusable elements at the point of running the script,

34
00:02:19,160 --> 00:02:20,640
but may not include every element.

35
00:02:20,640 --> 00:02:24,240
For example, any element that is temporarily set to be non-focussable

36
00:02:24,240 --> 00:02:28,880
with `tabindex="-1"`, such as an inactive tab in a group of tab

37
00:02:28,880 --> 00:02:31,680
controls will not be shown here.

38
00:02:31,680 --> 00:02:36,760
It lists the accessible name and the role and where there is an accessible description

39
00:02:36,760 --> 00:02:41,080
provided by `aria-describedby` or a `title` attribute, this is included too.

40
00:02:41,080 --> 00:02:41,920
Okay, great.

41
00:02:41,920 --> 00:02:44,120
So let's hit OK, see what happened.

42
00:02:44,120 --> 00:02:49,640
So a file has been downloaded and it is named "simple screen reader emulation. txt".

43
00:02:49,640 --> 00:02:52,480
And I do want to emphasize that this is very simplistic.

44
00:02:52,480 --> 00:02:56,880
This is not what a screen reader user is likely to be doing on a page.

45
00:02:56,880 --> 00:03:03,320
This is literally just a list of all the focusable elements with the accessible name,

46
00:03:03,320 --> 00:03:06,520
the role and where there is one and accessible description.

47
00:03:06,520 --> 00:03:09,320
So let's have a little look at this file and see what we have.

48
00:03:09,320 --> 00:03:13,080
And there it is.

49
00:03:13,080 --> 00:03:15,000
A list of all the links on this page.

50
00:03:15,000 --> 00:03:18,720
And this is a very dull page for me to test it on because literally there is nothing there

51
00:03:18,720 --> 00:03:21,520
other than links and none of them have accessible description.