Dialog-position | Nick Freear’s blog

In this video, I discuss the challenges we face with keyboard accessibility in modal dialogs and introduce a new dialog-position package on NPM, that exposes a stylesheet to easily position native HTML <dialog> elements.

Loom: Enhancing Modal Dialog Accessibility

1

00:00:00,000 --> 00:00:04,541

Hi, so I wanted to talk to you today about

2

00:00:04,542 --> 00:00:09,139

the, about modal dialogs and about

3

00:00:09,517 --> 00:00:14,352

the dialog-position package that was recently published

4

00:00:14,655 --> 00:00:19,082

on the NPM website. Registry, and you can see it there.

5

00:00:19,083 --> 00:00:21,610

So we often, as accessibility consultants,

6

00:00:22,269 --> 00:00:24,781

we often come across problems with,

7

00:00:24,782 --> 00:00:28,106

with keyboard, accessibility in relation to,

8

00:00:28,107 --> 00:00:29,263

in relation to modal dialogs,

9

00:00:29,274 --> 00:00:34,104

either things like the focus not being moved into a modal dialog,

10

00:00:34,114 --> 00:00:39,167

when it’s, when it’s opened, or that focus is not restricted

11

00:00:39,608 --> 00:00:43,007

to the modal dialog. or indeed when we close the dialog,

12

00:00:43,008 --> 00:00:46,376

focus is not returned to the triggering element.

13

00:00:46,377 --> 00:00:47,240

and so,

14

00:00:47,250 --> 00:00:50,140

in the past, or, you know,

15

00:00:50,672 --> 00:00:55,176

in the recent past, we would have had to rely on quite

16

00:00:55,177 --> 00:01:00,052

a lot of ARIA and quite a lot of Javascript,

17

00:01:00,063 --> 00:01:04,520

to Good. So here’s the APG,

18

00:01:04,530 --> 00:01:09,042

version that uses 330 lines to

19

00:01:09,043 --> 00:01:14,087

implement a modal dialog, and 330 lines of JavaScript,

20

00:01:14,098 --> 00:01:20,391

and so, obviously, it’s quite a challenge, and it’s quite a challenge to

21

00:01:20,392 --> 00:01:21,777

try to get things right, and it’s quite a challenge to make things, to

22

00:01:21,778 --> 00:01:24,391

make the modal dialog accessible,

23

00:01:24,401 --> 00:01:27,942

but fortunately, it’s certainly now, we have the native,

24

00:01:28,368 --> 00:01:31,141

eh, eh, eh, native element,

25

00:01:31,236 --> 00:01:35,844

HTML, HTML, native, eh, eh, eh, eh, eh, eh,

26

00:01:35,845 --> 00:01:40,631

eh, native element. And that, erm, does a lot of the

27

00:01:40,735 --> 00:01:43,252

heavy lifting for us,

28

00:01:43,253 --> 00:01:48,072

so it’s, it’s very, it’s very good at managing

29

00:01:50,468 --> 00:01:53,108

the focus of the keyboard.

30

00:01:53,109 --> 00:01:56,837

In the way that we want,

31

00:01:57,547 --> 00:02:00,718

and indeed, it is now widely supported.

32

00:02:01,023 --> 00:02:03,395

So it’s supported, erm, it says on,

33

00:02:03,700 --> 00:02:05,906

on this website, on this website. And I use,

34

00:02:06,296 --> 00:02:09,616

it’s supported by around, erm, I have 96% of,

35

00:02:09,617 --> 00:02:12,441

erm, I have 96% of browsers globally.

36

00:02:13,150 --> 00:02:17,721

Which is pretty good. Erm, the one

37

00:02:17,722 --> 00:02:20,948

thing that the term people might be asking now is how,

38

00:02:21,029 --> 00:02:23,366

how to, Why you position, erm,

39

00:02:23,367 --> 00:02:25,408

how I push the native dialog,

40

00:02:25,601 --> 00:02:29,627

erm, on the page. Erm, it is,

41

00:02:29,628 --> 00:02:32,692

erm, it uses the CSS fixed,

42

00:02:33,099 --> 00:02:35,242

erm, fixed.

43

00:02:35,243 --> 00:02:38,772

Fixed, eh,

44

00:02:38,783 --> 00:02:41,305

Position. Er, and so, erm, I went to this research, erm,

45

00:02:41,306 --> 00:02:44,270

and came up with quite a,

46

00:02:47,670 --> 00:02:49,936

Erm, simple, erm, CSS style sheet.

47

00:02:50,528 --> 00:02:54,520

Here we are, it’s only 50 lines long.

48

00:02:54,521 --> 00:02:58,850

Erm, and that allows you to position,

49

00:02:58,851 --> 00:03:01,522

based on a data attribute.

50

00:03:02,832 --> 00:03:06,811

Erm, so a data-position attribute.

51

00:03:07,929 --> 00:03:11,848

Erm, these are the sort of values that you expect,

52

00:03:11,849 --> 00:03:14,930

so top, bottom, left, right. And those results,

53

00:03:14,931 --> 00:03:20,698

in full height and full with modal modals.

54

00:03:21,816 --> 00:03:23,911

And then you can also use things like top,

55

00:03:23,912 --> 00:03:26,412

hyphen, left, top, hyphen, right.

56

00:03:26,413 --> 00:03:28,687

Bottom, hyphen, left, bottom,

57

00:03:28,688 --> 00:03:31,070

hyphen, right. As well.

58

00:03:31,071 --> 00:03:34,189

So, there you go.

59

00:03:34,199 --> 00:03:38,449

this is, erm, and here’s a basic sort of demo that I put together,

60

00:03:38,450 --> 00:03:41,445

er, that uses this style sheet.

61

00:03:41,446 --> 00:03:45,073

As you can see, as you move,

62

00:03:45,109 --> 00:03:50,510

as you click on the buttons, and

63

00:03:51,462 --> 00:03:56,434

it moves the modal dialog around the screen by

64

00:03:56,435 --> 00:04:07,467

setting this data attribute.

65

00:04:07,468 --> 00:04:12,035

So, really, that’s, hopefully, that’s really

66

00:04:12,036 --> 00:04:13,315

handy, and would be a really useful tool for people building websites, and want

67

00:04:13,316 --> 00:04:15,153

to, make sure they’re accessible.