Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Development Tools Web Accessibility Compliance Semantic HTML and WAI-ARIA Hierarchy of Elements

Bethany Cooksey
Bethany Cooksey
14,242 Points

How does Flexbox Order fit into this?

So in an earlier course, I learned about the powers of Flexbox and how you can re-arrange items easily using the order property here: https://teamtreehouse.com/library/changing-the-order-of-flex-items

Here's the practical way we used it (start the video at 4:16):

https://teamtreehouse.com/library/creating-a-three-column-layout-with-flexbox

Is this bad? Did I just misunderstand, or is Aisha saying that this is not a good idea?

Thank you so much for your help. :)

1 Answer

Aaron Loften
Aaron Loften
12,864 Points

Good question. Im gonna have somewhat of a lengthy explanation. Sorry. :p

So first off, yeah, we switch items with the order property in css when we want things to be in a different order, however, what she is saying in the video is that you may not be the only developer on a project. Imagine you coming in behind someone and trying to read their work and figure it out, it just doesnt always turn out well. I mean, when you need to make an edit to the header of a page and cant find it in the code until right before the body tag closes, this can confuse the developer. It wastes their time, your time, and leaves room for styling errors.

Second, seo can have issues. When a search engine crawls your site and looks for relevant stuff, they base their findings a millions of factors, two of the factors being where the code is on the page and the tag used. If the h1 has an important piece of data in it but at the bottom of the page, the seo crawler may question the importance. This reason I have stated is somewhat speculative but is logical based on some things ive read online over the years.

Third, screen-readers are special. They were created to help visually impaired and blind individuals understand a web page. They read displayed code. If you have you introductory paragraph is displayed at the top of the page, but exists at the bottom of your code, it wont get read until the reader reaches that point in the code. There are SEVERAL ways around this, but why mess with them when things could just....be in the right order?!?

Ignore the reason she gave about css/js turned off. Those people are use to seeing weird crap on their browsers and should expect it until they turn the normal stuff back on. It's not that she's wrong, it's just...silly for a user to do that to their browser. Though SOME users do have a different contrast level and that should be considered....but not when thinking about order.

When should you use order instead of moving your code, you ask? Ill tell you! In short: Use order if it is for certain screen sizes or you dont have access to the html(I know, this is dumb, but it happens).

Do NOT use order if you want the elements to ALWAYS be in the new order.

In long: If you build your site in mobile-first development process(when you build sites as if they will display on phones, then expand your browser and make changes and media queries for larger screens), you may see sizes on the screen where the order might need to change. For example, you may have a couple rows of text and images. Though alternating whether the image goes first or second looks good in desktop views, when they stack, you may want to have their order be consistent so you dont have two blocks of text touching or two blocks of images.

Again, sorry about the length. I love flex-box. I hope this helped you.

A good way to test is to turn CSS off, because if you can't make sense of the structure / the structure seems weird when CSS is turned off, then something needs to be fixed either in your code or in semantic markup. I can't know the reasons behind suggesting turning JS/CSS off, but it USED to be the case that the accessibility law required sites to be able to work even when things like JS turned off (pre-2018 Section 508 law), so that might be why.

NVDA, a popular screen reader, is also free to use. So when building sites, another way to test for accessibility (it's not GREAT but better than assuming, and if you don't know any folks who do use screen readers) is to turn on NVDA and browse your site as a user would. The best policy is to get input from people with disabilities, and to not say "well, it's only maybe 1 out of 5 people" or "I don't know anyone who's disabled" or "if someone is blind how they can test a site anyway". There's a lot of myths out there even within technology circles about disability that get baked in to development sometimes too. Just be open to learning and testing, and know that sometimes, people won't be able to see a great CSS layout well so your structure (and code) have to be well ordered too.

As for implementations for accessibility, WCAG 2.0 (or 2.1 if using that document) ALSO has guidelines for implementing and understanding, which can be useful for figuring out layout accessibility and things like navigation.