![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
amazonvGrid, Content Re-Ordering and Accessibility
Type: Breakout
Track: Development
Let’s review the potential accessibility problems that grid layout could cause. These issues essentially center around the concept of disconnecting the source from the visual display.
>> I'M a membe of the CSS working group and I try to keep accessibility in mind and
If I do not know, I try to find somebody who knows more.
---
A lot of web developers are in the same situation, you would not call yourself and accessibility expert but you turn up at an accessibility conference you show you care and people want to make sure the work is accessible so that is where I come from with this.
I am someone who knows quite a bit about CSS and I try to know stuff about accessibility and also always trying to learn and try to figure out about the different needs people have.
I think that is really important right now because the CSS layout systems are changing quite quickly, is happening at a great speed in web platforms and we also are getting into problems.
---
When we get into new technology we may have a problem that was not anticipated in the design. This talk is mostly me speaking my brains about these issues. I want more people to talk and think about the potential issues of a new layout so we can fix them.
---
So I have a few things. I'm going to talk about the accessibility issues raised by new layouts when what specific things we have identified as being a problem and how can we avoid them in our own work but also want to think a little bit about how the platform can evolve to help so we are not just saying don't do all of these things. What else are we doing to help?
---
So CSS Grid. One of the first things that I thought was exciting about Grid, and really what got me dragged into this whole thing long before it became available for use in browsers, the thing that I thought was exciting was that he gave us for the first time a proper separation of content and presentation. I have been doing this for a very long time and I was building websites back in the day when were trying to encourage people to move away from tables. One of the things we said over and over again was CSS that you separate your content from the presentation and that is because when you lay something out when using tables you are mixing presentational data in with your content. If you want your heading to span over a number of columns you have to put that into the HTML so you're making decisions about layout in your markup. That was how we built any sites until CSS came along.
---
If anybody was building sites back then you remember how we nested tables into table cells and we would take basically a picture of website and slice it up and jam little bits of it into different table cells and fragment all the content all over the table which made terrible for accessibility because accountant was jammed into table cells a bit like doing web design in Excel. The tables were not great.
---
What are the things you were saying was you are separating the content from the market so we had sites like the CSS Zen Graden, and I'm showing you a screenshot here, about this set of markups, people would come along and design a stylesheet displaying it differently,
showing people how powerful CSS was, and letting them separate these two things.
---
However layout was still kind of tied to document structure. Some things we used to talk about lot was the "Holy Grail," and in a web design context it is a three column layout, it shows off how far we have come.
The key thing about the holy Grail is that the columns should be in any order in the markup and it was actually really quite hard to achieve.
This is an article that I've got a link to on the screen, if you go to the article you would be amazed at how much code gets written to get this three column layout and because done with floats there was no way to determine how tall they were, this was the best we could do.
---
We had to structure the source, if you look at the article. And then even more recently -- Many of us have been using a float-based, column grid. This is an example, the original grade before they went to flex box. You basically will have to have a classic row, and then to put your items inside that row. Again, we are defining the layout in the markup. We are seeing this is a row, and these are the items in that row. Items have to pretty much stay in source order because you are using floats to lay them out and they float next to each other.
---
This wasn't really a bad thing. The fact that we could not get too far from document structure started making an awful mess. In the early days you are not thinking about accessibility; we were thinking about how can we use something in Photoshop look the same on the screen? The fact that we could not get too far away from document structure started making too much of a mess. The only way the full group grid and flex box (indiscernible)
-- If you are trying to build an entire layout without structural positioning won't go well for you.
---
So all we had was normal flow. Normal flow was blocking and line layout, what we call the basic things that things layout on the page. So if you stick some HTML upon the web and you don't do any CSS at all you get your normal flow and you get your content flowing and logical source order.
---
To do layout with floats you have to kind of keep things but imagine flow, you can move them left and right you can't jumble it up too much.
---
And now with CSS GRid in particular we have a layer that is separate from the content and reorder those things, and do this at different breakpoints and the restriction of the layout is gone and we can do the holy Grail and switch the columns around anyway we want with just these few lines of CSS. I'm showing the CSS for the Holy Grail layout and the source code is available online and I show the link at the beginning and I will put it at the end so you can go play with these demos. You also get full height columns, something we want to have for a very long time which was impossible in the earlier version.
---
This huge limitation has gone. We have this chance to separate out the structure of the document from the layout. And that seemed pretty exciting at first read, you know. There's lots of things we can do. What about responsive design? We can move things around at different breakpoints but the thing is a technical limitation has gone.
---
Just because you can do something doesn't mean you should, in terms of accessibility there is still a limitation because if you start moving things around in your layout away from the source, you have disconnected the expense of somebody who is for instance tabbing through the layout and they see it in a different order so we end up with a source or disconnect because the reading order of your document is your document, it has nothing to do with visual display.
---
If someone is just using screenreader and having the things read out, you are probably fine but if you are tabbing around the document or if you can see it you could have a very, very confusing experience.
---
So I have a few examples of where this can go wrong. Again all of these are online so you can tab around them yourself and see what it feels like.
---
Here is my first one. This is Grid, a very simple layout. I created grid columns and using grid template areas to create the layout and I have given each of them a different place on the grid using grid template areas, really nice, ASCII R method of doing the layout.
---
This gives me the layout and here it looks fine but I don't know this will show up to well, the video is with my slides but as you around I have number each of the car so you can see the strange order. The order of their numbers is the order they are in the source so you end up jumping around as you tab around, not a very nice way to work.
---
We can do this another way in Grid. In that situation we would position everything using Grid template area.
What about using something like auto placement? With Grid auto placement we create a Grid container and we get our items and we ask Grid to display them in order, in the container. And if Grid comes across that it is too big to fit it moves them onto the next slide so it keeps them nicely in order for us, unless we use Grid auto flow dense. Turn on the dense packing mode in which case it picks things up which come later in the market and places them in gaps, and this could create a very disconnected experience as you are moving around the content.
---
And it isn't just Grid. We could also have problems with flex box. I set flex direciton row reverse which switches the items to start from the end of the flex container. But we don't want people tabbing backwards navigation which would be weird, so you can do this with flex box as well.
---
This is something I wanted you to be aware of as you start to get excited about these ideas of the new layout.
(indiscernible)
People have said to me more than once you have shown us all this great stuff and then you say don't do it. You are showing things and snatching them away again. That is a real shame and we will talk about what we might do about that later but before we get too sad about it, how much of a problem is in reality?
---
It does turn out that in most cases the layout naturally follows source order as long as you keep in mind that while you are working. So much with accessibility, if you are thinking about it from the start it is not too bad, it's fine, you can do things. If you build your site and then somebody says now we have to make it accessible it is terrible, that is the worst thing. To keep that in mind as you go and you will tend not to have to any problems.
---
The first thing is don't forget about your document. You want to be able to load your document without CSS and it will all make sense.
I think it could be quite easy to think well we don't need to wrap everything in rows or things in the markup; the market does not matter.
But then you lose all the information that is in your document and you lose some things which are really the basis of the web, the fact that anybody can put some HTML together and put it online and it is usable and readable and the minute you jumble up your document you moved away from that.
So make sure that you have a good document to start with.
---
And then you should work with normal flow. So normal flow, the way that things in CSS work we do not have any layout. It will really help you if you work with it. The thing about Grid and flex box is that only the direct children become (indiscernible)
Once you have your Grid container,
And you have the hidden items you can do whatever you want with them and then he goes into normal flow, and make your life easier.
You can only make the changes in the container and deal with the children and everything inside, you have a heading and paragraphs they just lay themselves out and you often don't have to do much.
So working with normal flow and working with the structured document and save you an awful lot of time.
---
Imagine if doing a web design, your starting point was a jumbled mess in the corner and you have to take every single paragraph and place it; it would take a long time to lay things out so working with normal flow makes your life easier and it also ensures that the experience is relatively fluid as people are using the document.
---
Something about having a well ordered document makes creating fallbacks much easier for older browsers for things that don't support Grid. That is another way to save you a long time. I've got stuff online about this.
---
Quite often you can use the cascade to overwrite the older layout methods and you can float some items and overwrite them with Grid. But to do the floated layout the source code is important. So keeping your document nice and ordered can make it easier to create some simple fallbacks for browsers that don't support the new layout methods that you are using so that is also quite a good reason to have a good document.
---
The next thing to worry about is just to make sure that you are not flattening your document in order to use Grid and flex box. I've already mentioned that the only direct children become Grid or flex box items. It could be quite tending to think you know I want those list items to participate in Grid layout but you can't because there is a (indiscernible) layout and maybe you don't need to list items after all. If you work with Grid layout or flex left for long you come into situations where you think my life would be easier if I remove that element, but the element has the be there, it is important, you don't want to do that. So you need to try to resist the temptation to flatten out your markup.
---
Luckily, this thing is something which is getting easier; we've already gotten some solutions for this. There's two issues when people want to flatten the markup. One is that they would like to be able to have the Grid inherited down three children so you can set up a 12 column grid on the container and placed things on that whether you direct children, or grandchildren or great-grandchildren you can still use the same columns and a lot of people would like to be able to do that and we have a solution for that, not in all browsers yet but we have the subgrade value of grid template rose and grid template columns which means your child items can inherit the grid from their parents and this is really nice indicates the semantic structures that still use common size defined on the larger container.
---
I've got a little example of how that works, if you have not looked at subgrades yet. Here I've got these cards. They have titles and content at the bottom. On the first card the title is two lines long which means the border underneath that element does not line up with the borders of the two next to it because they've only got titles that are one line long and that is common. We can now get things to line up the things inside cannot line up with each other because they are separate.
---
Here I got the cards laid out there and I made each child, each list item, I've made that a grid and given it rows. If I do not have a subgrid support (indiscernible) ahtne I use a feature query to ask the browser if it supports sub grids. And if it does we are creating a pattern of three rows and then each child I span across those three rows, said the grid template rows to subgrid and get rid of the gap and that lets me line up those headings across the three cards. So subgird is good to be really handy for things wherewithal to remove an element, that is really nice.
---
subgrids in Firefox, you can demo them. They are in development in Chrome and the Microsoft team set last year said they were working on Grid and they will be implementing subgrid. I don't know how long that is before it lands but hopefully that will be in chrome before too long and will have Subgrid available for using our designs to solve one of the market problems that we have.
---
Another reason that people want to flatten up that market is it you don't want a box at all and this is a situation where I mentioned at the start, you have a UL, you really just want to list items to fall in line with other things. Another way we can solve that is with the content value of display.
---
What display contents does, if you say display none, it hides all the elements in the children like they were never there. Display content only removes the box you apply it to. The children remain.
---
So here is a fairly convoluted markup which I don't know why you would want to have a body demonstrate the point. I've got two items directly inside and also a UL with child items, that is my markup. That gives me something that looks like this. There is the first and the second div, next to each other because we are using flex box. And then we have the UL, the actual UL has gone into line with all the other items and it has the margin drop down and inside it has his children that they are laid out as normal list items, that is not what we wanted. We wanted one, two, and three to be next to flex item 1 and 2.
The way we can do that is to set that UL to display contents; the box gets removed from the layout and those items get laid out as if the box was never there.
---
That is really cool.
There is a bit of a problem in that when it was first implemented in browsers, browsers implemented it a bit like display none which removes items so they have gone for assistive technology as well as anyone looking at the page visually. Nothing else in the display is supposed to behave like that. Everything else is supposed to be a visual change only. But what happened with display contents is it got implemented a bit like display non -- As it was removed it remove the UL from the (indiscernible) so you might as well not have bothered doing spike content, you might as well just flatten it out. flex box fixed the problem. A couple of days I saw where this was fixed on Chrome and it looks like it was fixed in Chrome Canary, I had a quit look around. In the future it will be a great solution, if you're relying on it, tested carefully to make sure you did not lose the information. If chrome fixed it.
So that is underway.
---
So those are the solutions. We have something in the pipeline to help us with the flapping markup for both situations whether we want to keep the boxer whether we don't want to have the box, and that's pretty cool.
---
So then we have this temptation: Fixing source problems using Grid and flex box. We see this with flex box where people use order to rearrange items. So this is a common thing. You have a navigation and you want a navigation point for penguins to come first. For whatever reason, editing the source seemed like too much work, maybe it was coming up with some dreadful CMS that you cannot play with or a templating system that no one could number how to change so you think this is fine. We do not need to touch the source. We will leave that alone and do it in the CSS with order. It is easy and tempting. We set order to -1 on that item. Then our layout looks correct, that looks correct and the class will be happy because that is in the order that they wanted the problem is of course that we end up with that weird navigation tabbing order because the tab order still following the document. That is something that we really don't want to be doing again, don't fix your source problems in CSS because it will get worse and worse. You will do it once and then something else and you think that worked and I will just use Grid to move those things around and eventually it ends up being a total mess as a technical debt masses up.
---
When I am assessing people's style sheets for the use of order I will do a search on the stylesheet and see if they are using order because nine times out of 10 it is not good thing. There are few reasons to use order in your stylesheet.
---
We are back to age-old advice. Start with the document with a solid semantic order and I said this to people nearly 20 years ago. And if you do any of these techniques, make sure you test it and make sure you have not made a mess and test it a different breakpoints, it might be fine and mobile and someplace in between where he goes weird to make sure your testing is a different breakpoint, on the way to do that is actually quite straightforward.
We can all take the mouse, pop it in a drawer and navigate with the keyboard. We are not jumping around. Testing with a keyboard will bring up other issues potentially as well, it is a really good thing to do.
I spent quite a while using my keyboard after shattering my elbow. It is amazing how many sites don't do it well, it is a good idea to test.
---
This is an accessibility website.
Gives you a visual representation.
I tried this out on one of my card demos. You can see the slide; this spidery path all over the land which is the path the tabbing is taking. You've got something wrong, it's quite nice, I like the accessibility insights demo to show people what it looks like.
---
The other thing to check and I know we talked a lot about this but we have my link about resources, do check that changing display type -- Whether to flex or display grid , Or anything else make sure is not changing how things report to accessibility devices. You should only change the visual display of things, should not stop a list from being a list but browsers sometimes get that wrong so do check that. Make sure that you have got things with their semantic meaning.
---
And if you are working with any of these new stuff lookout for problems and to report them; don't assume that it is a bug everyone knows about because we are probably going to run into bugs and those are going to be accessibility bugs so we need to report them so they can fix them.
---
That's can of all the bad news, things that you can't do or things that are problematic in the ways to solve it. I kind of really like to try and solve this problem in a better way because I think that while many sites sticking close to source order is absolute defined as long as you do that from the start.
But there are places where they are useful particular when you are talking about responsive design. Perhaps the thing that you want to prioritize is mobile which is different if you want to prioritize desktop, not always the case but sometimes it is.
---
I think we need a better way to do this disconnect scenario. The other thing is that more and more we are seeing visual layout builders. I got into lab by way of Dreamweaver back in the day, I did a lot of Dreamweaver and web standards. And when you have user tools, you stop thinking about the market quickly because you are disconnected from yourself, all you have is your visual view of the website that looks fine you don't really think about the source. Those tools encourage the dragging around of items to make your layout. Very very hard to do that and still keep the source in mind. So that is something we all see more and more of and we can't be blaming people who want to use a visual tool for messing up the source when perhaps they don't know about it.
---
How do we solve this? Firefox change the order and they were following the visual view. The thing is, the web is basically about good defaults. I think following the visual view would be dangerous. Since the web started if you put that document on the web and onto any styling you get it readable webpage. We're used to the default being sort order and that is what you get and how things work and that seems a solid default to move away from that seems quite scary.
---
In CSS we have initial values of CSS properties and their consider carefully to make sure we don't have data loss so we don't have things managing off the side of the screen or overlapped. Again these are good defaults.
---
I think tab order following the document is another good default and it means we have to take care of our document and it depends on what is displayed on the screen and was laid out on screen readers. It would take the approach of switching layout to visual order I think it would be very easy to start caring about document order and it would avoid having us having to do more work to make sure the order is more sensible and browsers having to do more work in making decisions about how things should work and also finding any bugs that got introduced try to make this work.
---
Really what I think we need is a way for developers to indicate a switch to visual layout on specific components, may be a whole page sometimes but also parts of the page. If there is a part of your page which might cause reordering you could ask the browser to follow the visual layout.
---
In terms of CSS specs, it is possible that some of the special navigation work, which is a way to let people navigate with the arrow keys, and let you move around unless it is clunky. Special navigation will let you move around with the arrow keys and that is quite similar in terms of wanting to follow a visual order in the document and it is defined in CSS so maybe it is something we could work with.
---
I also had some discussion with people. Just over a year ago was our last CSS real face-to-face before everything went online and the thing I miss about those face-to-face meetings is going for coffee in the breaks and that is where we often discuss things that are not part of the meeting agenda but things that are on people's minds.
Let's say the children inside the element had noted was not important which means the developer was taking control from that point, maybe progress order layout. So you could use that attribute and then from that point down you would take control of the order and the default would be the document order so this would then be control with CSS, the actual order of things. That was sort of an idea that we had.
---
Now, I'm not a browser engineer. I'm on the CSS working group, and I've got some ideas about how this might work, but how this might work in browser design I am not sure, but we need to take this conversation in the forefront otherwise it will get forgotten and I think we need to solve this before we add new layout messes. There is already a masonry layout for the grid implemented in Firefox that has the same problems. We need to solve this problem before we lay on more and more ways to do layout that potentially cause content reordering.
---
We need to solve it before more web layout is created in these visual tools; yet these tools are incredible powerful and I know a lot of people behind the really care about this issue; I don't think that is the case that people are creating tools and completely ignoring the fact they could be causing an accessibility problem. The best thing to do is to give people hints, don't do that. You realize your document is all over the place? A lot of people won't care.
But you want to have good defaults in our visual tools.
---
But when I worked on Dreamweaver we said we wanted Dreamweaver to output standard compliant code by default so really like any visual tool, be able to output an accessible layout by default. If people really want to work hard to make a terrible then they are going to be able to do that whatever they use but let's have our default be really good.
---
I would encourage people to talk about this. If you have any way, if you have a blog review thing is important to talk about this, join the conversation and I have posted this there. The most relevant issue on my resources, masonry layout. We do need to raise this is an issue; things get solved in the web platform because people ask for it. You come and join the conversation and if you think this is important make noise about it.
And all of my notes if you go to that URL, you will notice.
I hope this is been useful and I will answer any questions.
>> LIZ: We have a ton of questions. Have you implemented farm labels n Grid and can you speak to an excessively the issues?
>> Generally as long as you give them in a sensible order that is fine. I've used Grid in all sorts of layout components. In generally you are fine. It is the usual thing of making sure that things are in order.
>> LIZ: Can Grid be used in an e-pub?
>> RACHEL ANDREW: I don't think any support this, e-books -- like browsers, they are waiting for things to support, I don't know the situation in e-pub at the moment.
>> LIZ: with the reverse flow be as weird in a right to left language?
>> RACHEL ANDREW: It would all swtich.
If you say row reverse, your items would start on the left.
Row reverse would confuse everybody else, don't do it.
Is going to be the same issue really.
>> LIZ: another and ordering. How do you adjust the content box ordering, for example 12345 in desktop is 12354 in mobile.
>> RACHEL ANDREW: this is the reason we want to solve is basically.
There are reasons to do this and that is why and I get annoyed when people say we need to do this.
(indiscernible).
That is why I would like to solve this office, this is the case.
We have the technical abilities to do it.
>> LIZ:
Definitely.
We have a mobile specific question.
With responsive design often comes the same content being presented differently on mobile and on desktop because of space. Mobile specific markup or desktop specific markup; if we remove the CSS we will essentially end up with the Duplicate content, how do we solve for this?
>> RACHEL ANDREW:
That is a different issue where you duplicated your marker, you end up in the realm of having to hide things.
That is a different situation, hiding stuff in a good way so that someone using a screen reader is not hitting it twice for example. That is a different issue to the reordering thing. The reordering thing is going to be an issue in that situation as well. Yeah, I think there's probably a couple of things going on there, if you have duplicate content and sure you are hiding it in a good way because I think the idea is that we have a document that we can whip the CSS off and you will be fine but that is not always the reality.
>> LIZ:
Thank you. Question from Sophie.
Other tips or samples to combine Grid, flex and progressive enhancement to ensure broad browser support?
>> RACHEL ANDREW:
yeah, I've got a ton of stuff online. You can search for that.
Really the key player in this is feature queries, I showed one of my examples asking the browser do you support the stuff?
So you can overwrite things and do a layout in flex and overwrite with Grid, so use future queries, you can start testing for things that are not supported in using them as progressive enhancement and knowing that none of this can leak to a browser that is not supported.
>> LIZ:
The question from Elliott. How you deal with overflow problems in Grid when input is user submitted and has a very generous max length?
>> RACHEL ANDREW:
There's a whole bunch of stuff that is useful for overflow. Things like using the min-max function. Let's say you ideally like your content, 200 pixels, nice clean design but you want to make sure that yes if somebody comes on the CMS inputs and some enormous chunk of content is not going to overflow. Using min-max is great for that because you can set the minimum to the ideal side and the max to auto. And if something is auto it will extend to fill the space for the content. So min-max is useful. There's a whole bunch of stuff in Grid. Grid and flex box are both great and looking into content and resizing things to fit in something that does not give you the ideal layout but it is bad when things are overflowing all over the place so again min-max is a good tool to start with.
>> LIZ:
Question from Ronnie.
What other tools can you mention for someone named QA like myself? I got really excited when you mentioned tabs.checker.
>> RACHEL ANDREW:
That has a whole bunch of useful stuff and increasingly the browsers are in the deaf tools for including things so really I think it is creating that collection of things that you know.
Instead of having that list along with other things that you might be checking, finding tools that support you. What will work best for my workflow? That is kind of really, just testing of these tools that people have got, and find the ones that work best for you but the thing is to include all in your list of things you're going to check with the same prominence as everything else.
>> LIZ:
Question from Ames. Are you using Poly fields or just fall back for browsers that don't support auto flow?
>> RACHEL ANDREW:
Now we are really just talking about AI. We still need to support I 10, 11; lots of people still need to support I 10, 11 but it is going away and we have people building new sites were happy to give I10, 11 a simple layout so trying to Poly field is not going to work well.
Is better to give the older browsers something that suits them, use all the techniques because it will perform better without.
>> LIZ:
We have time for maybe one more question here.
Let's go with this one.
An excess ability thorn in my side is finding ways to do true responsive tables that work best in desktop and mobile, some solutions suggest grid to change display but that destroys table semantics in iOS. What would you suggest a responsive tables on mobile?
>> RACHEL ANDREW:
That is another thing I would love to be solved, the fact that again it should not be changing the semantics of the table if we changed the display so what we need to do is get that problem fixed because we should be able to turn a table, a semantic table into grid layout so we can do things in mobile. There is no reason that that should not be happening other than the fact that these things are hard to implement. But that is what we should be pushing for, to get that changed. All of the solutions are not great. We don't have many options to fix this. So really what we want to do, because you can fix it with Grid, we don't want to damage the semantics is one of those things need to fix an browser so we can do this.
>> LIZ:
Definitely. Awesome.
We are officially at time. Thank you so much Rachael such a great session and for joining us here at Axe-Con. Thank you everyone for attending and you should have about 10 minutes to find your next room. I hope you all enjoy the rest of Axe-Con and thanks again everyone.
