1
00:00:01,190 --> 00:00:08,270
Hello, in this video, I am going to show you the screen reader, help us in Bootstrap five so I will

2
00:00:08,270 --> 00:00:11,810
provide a link to this API guide page.

3
00:00:12,230 --> 00:00:18,430
Not much more on it, really, apart from some mixin stuff that you can check out than what I'm going

4
00:00:18,440 --> 00:00:22,130
to go into Carasso Screen Reader Helpers.

5
00:00:22,370 --> 00:00:29,780
Our classes that allow you to designate certain content for screen readers for accessibility purposes

6
00:00:29,960 --> 00:00:31,640
to implement them is really simple.

7
00:00:31,690 --> 00:00:38,960
So let's see if we have a header and we want this header to only be visible for screen readers.

8
00:00:38,960 --> 00:00:42,590
Obviously, visibility must necessarily mean, I'd say.

9
00:00:42,860 --> 00:00:45,260
But I'm talking about in terms of being able to, you know.

10
00:00:46,300 --> 00:00:55,750
You see in one context, but no access it, they fly first class because it's all shown in a screen

11
00:00:55,750 --> 00:00:56,460
reader only.

12
00:00:56,800 --> 00:01:05,500
And if I was to put the text for screen readers only, where I actually do is get rid of the class first.

13
00:01:05,920 --> 00:01:11,620
Show you that he appears now at the class back in reload.

14
00:01:11,620 --> 00:01:14,020
It doesn't appear as you can see, I'm trying to click.

15
00:01:14,020 --> 00:01:17,020
There's nothing there for inspect the Web page.

16
00:01:17,020 --> 00:01:19,810
Go to hear the body.

17
00:01:19,810 --> 00:01:20,410
It is.

18
00:01:23,570 --> 00:01:31,730
Right here, it's just, you know, it's only for screenwriters, the other class that you can use,

19
00:01:31,970 --> 00:01:38,450
and if we want to put this on an anchor tag, it's useful for something like that because you probably

20
00:01:38,450 --> 00:01:39,490
focus on it.

21
00:01:40,250 --> 00:01:49,530
Let me just implement a hash and class to be f our only focus subo.

22
00:01:49,730 --> 00:01:58,370
Focus the ball and I'll explain what this does in a second one to focus on.

23
00:01:58,700 --> 00:02:02,500
And what this does is kind of like the screen reader only.

24
00:02:02,870 --> 00:02:04,490
It's only if you focus on it.

25
00:02:04,820 --> 00:02:10,760
So if I reload, it is here for TAB as you can see it right there for reload.

26
00:02:11,480 --> 00:02:14,270
I can't do anything that we cannot click it.

27
00:02:14,460 --> 00:02:18,830
If I could tap it, I have focused on it and now it is accessible.

28
00:02:18,830 --> 00:02:24,260
In this case, it just takes you to this particular part of the web page, which is nothing.

29
00:02:24,290 --> 00:02:26,570
So basically a reload for that.

30
00:02:26,570 --> 00:02:30,230
Is it for the screen reader helpers?

31
00:02:30,470 --> 00:02:33,260
If you have any questions, feel free to pour me a message.

32
00:02:33,440 --> 00:02:36,800
And as usual, I look forward to seeing you in the next video.