Hacker News new | ask | show | jobs
by AbsoluteDestiny 2196 days ago
Be careful when using semantic elements purely for presentation purposes. For instance, the <aside> element gives the element a landmark role 'complimentary' telling assistive devices that this is not part of the main content.

That's not really true for your cards, though, they are part of the content.

Also, having multiple complimentary landmarks in the same context (main, footer) is really confusing. Having 3 <aside> elements next to each other would be like having three <header> elements next to each other.

2 comments

It's a bit anarchic, but the idea of using semantic elements for presentation purposes is why I did this.

I think there doesn't need to be a distinction

Edit: I didn't notice the bit about accessibility, I need to educate myself about this but the next release will fix any weird roles.

Usually when debugging accessibility things I turn on the screen reader and hear how the site feels as I navigate around. I'll definitely do this before each release going forward.

IMO, this is the most interesting comment here so far (the second most interesting one being the rant saying "don't use CSS frameworks").

What other potentially unexpected consequences are there for using semantic markup? I would definitely not want to use the <aside> element if it makes my site less accessible to the visually impaired. Are there any other potential traps lurking here?

There are some pitfalls when using <hstack> and <vstack> for accessibility.

I need to look into it more, it's still early and the code isn't set in stone, so I will be tackling accessibility issues

Visually impaired people aren't wasting their time on a CSS framework website.
I'm not sure precisely what you mean, but, given the number of sites that use Bootstrap alone, I suspect many visually impaired people are, indeed, browsing sites made with CSS frameworks.