WEBVTT

00:00:00.580 --> 00:00:01.840
In my feature request

00:00:01.840 --> 00:00:02.900
at The Web We Want

00:00:03.340 --> 00:00:04.820
I asked for a DOM order viewer

00:00:04.820 --> 00:00:06.520
built into developer tools.

00:00:07.440 --> 00:00:08.820
A screen reader, for example,

00:00:08.820 --> 00:00:10.080
presents the page to a user

00:00:10.080 --> 00:00:11.340
based on source order.

00:00:12.140 --> 00:00:14.280
A layout that visually shuffles the content

00:00:14.280 --> 00:00:15.740
can fail a WCAG review

00:00:15.740 --> 00:00:18.060
under 1.3.2 Meaningful Sequence

00:00:18.420 --> 00:00:21.340
and potentially 1.3.1 Info and Relationships.

00:00:22.340 --> 00:00:24.820
Flex, grid, floats, absolute positioning,

00:00:24.820 --> 00:00:26.040
and even table trickery

00:00:26.040 --> 00:00:27.300
 can all do this.

00:00:27.600 --> 00:00:29.780
Except now we are more readily embracing

00:00:29.840 --> 00:00:32.220
flex and grid as our overall layout tools.

00:00:33.460 --> 00:00:35.600
Too often we assume we can test for something

00:00:35.620 --> 00:00:37.920
falling out of order by tabbing through a screen.

00:00:38.440 --> 00:00:39.740
The problem with that approach

00:00:39.740 --> 00:00:41.740
is it only identifies interactive controls.

00:00:42.660 --> 00:00:45.180
Under WCAG 2.4.3 Focus Order,

00:00:45.400 --> 00:00:47.920
many developers are already comfortable testing this.

00:00:48.740 --> 00:00:51.680
Interactive controls can be easily tested by tabbing.

00:00:52.260 --> 00:00:55.520
Microsoft’s Accessibility Insights tool already shows tab order.

00:00:56.780 --> 00:00:59.400
But non-interactive content is harder to test.

00:00:59.880 --> 00:01:01.280
It is also harder to present

00:01:01.280 --> 00:01:02.860
to stakeholders in a meaningful way.

00:01:03.640 --> 00:01:04.940
This is not new stuff.

00:01:05.480 --> 00:01:07.580
I first wrote about it in 2015.

00:01:08.100 --> 00:01:08.740
Twice.

00:01:09.240 --> 00:01:11.960
It came up in the W3C CSS Working Group

00:01:11.960 --> 00:01:13.160
between my two posts

00:01:13.220 --> 00:01:14.920
in response to a Mozilla hacks article

00:01:14.920 --> 00:01:16.920
suggesting source order no longer mattered.

00:01:17.300 --> 00:01:18.720
Which they quickly revised.

00:01:19.100 --> 00:01:20.760
Those who work in accessibility

00:01:20.760 --> 00:01:22.200
flagged this concern as well,

00:01:22.420 --> 00:01:23.580
including Léonie Watson,

00:01:23.580 --> 00:01:24.900
a blind screen reader user.

00:01:25.240 --> 00:01:26.820
Alastair Campbell also raised it.

00:01:27.200 --> 00:01:28.340
Rob Dodson raised it

00:01:28.340 --> 00:01:30.680
in a 2017 Google Accessibility Cast.

00:01:31.540 --> 00:01:32.820
Since then we have seen others

00:01:32.820 --> 00:01:34.260
raise it in conference talks.

00:01:34.800 --> 00:01:36.320
Manuel Matuzovic mentioned it

00:01:36.320 --> 00:01:37.880
in his Dark Side of the Grid talk.

00:01:38.320 --> 00:01:40.520
And Rachel Andrew referenced it in many of hers.

00:01:40.960 --> 00:01:42.800
She recently wrote a post to remind

00:01:42.820 --> 00:01:44.240
flex and grid evangelizers

00:01:44.240 --> 00:01:46.240
that there is a real risk here.

00:01:47.160 --> 00:01:48.840
The good news is that some tools are at least

00:01:48.840 --> 00:01:50.320
making an effort to warn users.

00:01:50.780 --> 00:01:51.960
even if it is hidden away

00:01:51.960 --> 00:01:53.660
 at the bottom of some general notes.

00:01:55.500 --> 00:01:58.540
In 2017 Jen Simmons solicited feature requests

00:01:58.560 --> 00:02:00.320
for the Firefox grid inspector

00:02:00.580 --> 00:02:02.220
and said blog posts were acceptable.

00:02:02.660 --> 00:02:03.380
So I wrote one.

00:02:03.520 --> 00:02:04.740
And used it as a reference

00:02:04.740 --> 00:02:06.060
to the feature request I filed.

00:02:07.020 --> 00:02:08.020
Earlier this year

00:02:08.020 --> 00:02:09.260
I filed it as a request with

00:02:09.260 --> 00:02:11.200
Microsoft Accessibility Insights.

00:02:12.380 --> 00:02:13.880
So that’s the background out of the way.

00:02:15.220 --> 00:02:16.220
Now I want to demonstrate a

00:02:16.220 --> 00:02:17.500
real case where a page uses

00:02:17.500 --> 00:02:19.360
CSS grid to lay out two columns

00:02:19.360 --> 00:02:20.580
of information.

00:02:21.480 --> 00:02:22.520
As sighted users,

00:02:22.520 --> 00:02:24.160
we will read the content horizontally

00:02:24.160 --> 00:02:25.820
before moving to the next line

00:02:25.820 --> 00:02:27.060
to get the intended meaning.

00:02:27.540 --> 00:02:28.780
As a screen reader user,

00:02:28.780 --> 00:02:30.380
it’s a very different experience.

00:02:31.260 --> 00:02:34.020
This video is JAWS using Internet Explorer 11,

00:02:34.220 --> 00:02:35.500
though the effect is the same

00:02:35.500 --> 00:02:36.840
regardless of screen reader.

00:02:37.920 --> 00:02:39.440
Now let’s say you want to find out the time

00:02:39.440 --> 00:02:40.740
for the first coffee break.

00:02:41.380 --> 00:02:43.060
Heading level 5 Day 1 dash May 16 clickable.

00:02:43.060 --> 00:02:44.580
Heading level 4 8:30 dash 9:30 clickable.

00:02:44.640 --> 00:02:46.400
Heading level 4 9:30 dash 9:45 clickable.

00:02:46.400 --> 00:02:48.520
Heading level 4 9:45 dash 10:35 clickable.

00:02:48.520 --> 00:02:49.940
Heading level 4 Keynote clickable.

00:02:49.940 --> 00:02:51.807
Link graphic underline 2 underline NG dot PNG.

00:02:51.807 --> 00:02:53.470
Heading level 4 10:35 dash 11:05 clickable.

00:02:53.470 --> 00:02:55.400
Heading level 4 11:05 dash 11:45 clickable.

00:02:55.400 --> 00:02:57.000
Heading level 4 Presentation clickable.

00:02:57.260 --> 00:02:59.000
Ok, let’s skip ahead to 52 seconds.

00:02:59.220 --> 00:03:00.500
Heading level 4 Keynote clickable

00:03:00.500 --> 00:03:02.420
Link graphic 8 underline th 200 percent dot PNG.

00:03:02.420 --> 00:03:04.800
Heading level 4 twenty hundred hours dash one o’clock clickable.

00:03:04.800 --> 00:03:06.440
Graphic button underline 1 dot PNG clickable.

00:03:06.440 --> 00:03:08.300
Headline level 5 day one dash May 16th clickable.

00:03:08.300 --> 00:03:09.480
Day two dash May 17th button.

00:03:09.480 --> 00:03:10.880
Heading level 4 Registration and Breakfast clickable.

00:03:11.000 --> 00:03:12.120
Heading level 4 Opening clickable.

00:03:12.120 --> 00:03:13.820
Heading level 4 link Typesetting for a Global Web.

00:03:13.820 --> 00:03:15.172
Headline level 5 slash slash Hui Jing Chen.

00:03:15.180 --> 00:03:16.600
Heading level 4 Coffee Break clickable.

00:03:16.600 --> 00:03:18.900
Heading level 4 link The Challenges and
Pitfalls of Server dash Side Rendering.

00:03:18.900 --> 00:03:19.680
Heading level 5…

00:03:20.160 --> 00:03:22.060
So that proved to be kind of useless.

00:03:22.980 --> 00:03:24.340
I want to show you quickly

00:03:24.340 --> 00:03:26.120
that could have been identified as a problem

00:03:26.120 --> 00:03:27.560
using a bookmarklet I wrote.

00:03:27.780 --> 00:03:29.140
No screen reader necessary.

00:03:29.940 --> 00:03:31.640
 This bookmarklet is a proof of concept

00:03:31.640 --> 00:03:33.660
for the feature I have been requesting.

00:03:34.180 --> 00:03:36.220
You provide it a selector for the parent container,

00:03:36.480 --> 00:03:38.180
and then provide the display property.

00:03:38.660 --> 00:03:40.040
It numbers each child

00:03:40.040 --> 00:03:41.540
in the order they appear in the DOM.

00:03:41.900 --> 00:03:44.280
You can visually see when something is amiss.

00:03:45.280 --> 00:03:46.520
Use my other bookmarklet

00:03:46.520 --> 00:03:48.560
and it focuses each one in order

00:03:48.560 --> 00:03:49.960
to demonstrate the flow of the content.

00:03:50.960 --> 00:03:53.240
Also, note that there were 30 other content

00:03:53.240 --> 00:03:55.340
 containers between the event time

00:03:55.340 --> 00:03:56.740
and the name of the first break.

00:03:57.620 --> 00:03:59.620
We can see it and easily count it.

00:04:01.000 --> 00:04:01.500
That’s it.

00:04:01.500 --> 00:04:02.460
That’s the feature I want

00:04:02.460 --> 00:04:04.680
built into inspectors and testing tools.

00:04:05.200 --> 00:04:06.600
Maybe a little more guidance would be swell

00:04:06.600 --> 00:04:08.940
such as drawing arrows to show the flow,

00:04:08.940 --> 00:04:10.670
as the Accessibility Insights tool

00:04:10.670 --> 00:04:11.900
does with tab order.

00:04:12.740 --> 00:04:15.180
Maybe also highlighting potential problems,

00:04:15.180 --> 00:04:17.180
such as when on a left-to-right page

00:04:17.180 --> 00:04:18.100
(such as English),

00:04:18.320 --> 00:04:20.560
noting when a subsequent item in the flow

00:04:20.740 --> 00:04:22.280
is both above and to the left

00:04:22.280 --> 00:04:23.480
of the previous item.

00:04:23.900 --> 00:04:25.100
If you have ideas,

00:04:25.100 --> 00:04:27.480
corrections, code, fixes, whatever,

00:04:27.480 --> 00:04:28.080
let me know.

00:04:28.580 --> 00:04:30.560
If you are a tool maker and want my code,

00:04:30.560 --> 00:04:31.200
let me know.

00:04:32.340 --> 00:04:34.620
I am on the Twitters as aardrian —

00:04:34.620 --> 00:04:36.840
a a r d r i a n

00:04:37.040 --> 00:04:39.140
— or you can leave a comment on my blog.

00:04:39.520 --> 00:04:42.000
All these links are available on my site at

00:04:42.000 --> 00:04:44.960
Adrian Roselli dot com slash Smashing.

00:04:45.540 --> 00:04:46.980
Or scan the QR code.

00:04:47.200 --> 00:04:48.580
This video will be there as well

00:04:49.620 --> 00:04:51.600
Even if this feature request goes nowhere,

00:04:51.980 --> 00:04:53.480
I hope I’ve given you enough context

00:04:53.480 --> 00:04:54.780
to understand some of the risks

00:04:54.780 --> 00:04:56.260
of using layout techniques

00:04:56.500 --> 00:04:58.520
without also considering the DOM order.

00:04:59.020 --> 00:04:59.740
Thank you.