This content originally appeared on WebAIM Blog and was authored by John Northup
Flexbox is a CSS technique for positioning content in rows and columns in a way that adapts well to responsive layouts. Flex items can grow or shrink to fit neatly within the space that they occupy, but their structure is not constrained to the rigid row-and-column model used in tables. Flexbox elements can also reposition themselves from row to row as needed.
This is all well and good visually, but what about the screen reader experience?
The Problem
The hitch is, while the eye can explore the content in two dimensions, a screen reader necessarily linearizes the content into a one-dimensional stream. The visually-implicit reading order of a flexbox presentation may or may not match this linear order, which is based on the DOM order. This mismatch can create reading order problems that could confuse users and possibly fail WCAG 1.3.2 (Meaningful Sequence).
Here’s an example that uses flexbox to support a basic responsive whole-page layout with a header, main, footer, and two aside regions.
This is the main content. This is the region of the page that contains the most relevant information on this topic.
Here you can learn more about our essential and delightful array of efficient and stylish products and our convenient financing options.
also enjoy…
Navigation
The CSS order property has been used deliberately to visually position the main and aside containers in an order that differs from the DOM order (which remains the screen reader reading order). This property uses an integer (e.g., order:2) to impose an artificial visual display order—but it does not impact the screen reader reading order. Although it’s probably an overstatement to advise against ever using the order property, it should be used with caution and tested with a screen reader.
Here’s another example, which presents a set of instructions in two visual columns. Since this example presents a step-by-step sequence, reading order is key.
How to Make Shortbread in 6 Easy Steps
Preheat the oven to 300 F.
Pat the dough in the bottom of an ungreased 9×13 baking pan.
Cream butter and sugar.
Bake at 300 F for 30 to 40 minutes, until just lightly browned.
Gradually stir flour into the creamed mixture until blended.
Remove from oven and pierce all over with a fork.
So long as the container is narrow, the instructions are presented visually as two columns. However, if we widen the view, six boxes are presented in a row—and the true reading order (DOM order) becomes apparent. (The order attribute has not been used in this example.) The DOM order does not match the intended order for the user to follow the steps.
How to Make Shortbread in 6 Easy Steps
Preheat the oven to 300 F.
Pat the dough in the bottom of an ungreased 9×13 baking pan.
Cream butter and sugar.
Bake at 300 F for 30 to 40 minutes, until just lightly browned.
Gradually stir flour into the creamed mixture until blended.
Remove from oven and pierce all over with a fork.
The Solution
For both examples, the key is to begin with a DOM order that reflects the correct or intended reading order, and then to ensure that visual presentations (at all widths) convey that order.
Ultimately, the takeaway is not that flexbox is dangerous, but that it is powerful. Use it, but use it wisely. Also, screen reader testing—of full-size and responsive layouts—will quickly reveal inequivalences that may otherwise go unnoticed visually.
To learn more about flexbox, we recommend Mozilla’s flexbox tutorial.
This content originally appeared on WebAIM Blog and was authored by John Northup
John Northup | Sciencx (2022-05-31T18:00:53+00:00) Flexbox and the Screen Reader Experience. Retrieved from https://www.scien.cx/2022/05/31/flexbox-and-the-screen-reader-experience/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.