Tag Archives: order

HTML Source Order vs CSS Display Order

Last month in my post Source Order Matters I wrote about why we need to consider how the source order of the HTML of a page can affect users when the CSS re-orders the content visually. While I used a recipe as an analogue and cited WCAG conformance rules,I failed to provide specific examples. I prepared one for my talk at Accessibility Camp Toronto, but have since expanded on it with more examples.

I want to make sure that we all understand that the source order versus display order discussion is not unique to CSS Flexbox. It is not unique to CSS Grids. Many developers have been dealing with this (correctly and incorrectly) since CSS floats and absolute positioning were introduced (and even earlier with tabled layouts). As such, I have examples of each in this post (no tabled layouts).

Curated by (Lifekludger)
Read full article at Source: HTML Source Order vs CSS Display Order | Adrian Roselli

Source Order Matters | Adrian Roselli

CSS is providing newer and more complex methods of laying out your pages. Given the multiple form factors a responsive site has to support, it makes sense that developers want easy ways to structure the layouts that aren’t all floats, clears and position: absolutes.

Regardless of how you want your layout to appear in a browser, you must keep in mind that a clear HTML structure is important to search engines. Sorry, while the bit about search engines is true, it’s not really what I consider important, but it is more likely to get some people to pay attention.

What I consider important are users of screen readers or any kind of assistive technology that allows a user to navigate a page by regions (typically by the Tab↹ key), as well as sighted keyboard users.

curated by (Lifekludger)
Read full article at Source: Source Order Matters | Adrian Roselli