3 ms·

Be careful when using semantic elements purely for presentation purposes. For instance, the <aside> element gives the element a landmark role 'complimentary' te

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.

swlkr 6y ago
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.
pmiller2 6y ago
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?
- swlkr 6y ago
  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
- FreezeBurn 6y ago
  Visually impaired people aren't wasting their time on a CSS framework website.
  - pmiller2 6y ago
    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.

swlkr 6y ago

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.

pmiller2 6y ago

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?

swlkr 6y ago
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
FreezeBurn 6y ago
Visually impaired people aren't wasting their time on a CSS framework website.
- pmiller2 6y ago
  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.