Giter Site home page Giter Site logo

Use of <aside> is problematic about mvp HOT 6 CLOSED

andybrewer avatar andybrewer commented on August 10, 2024 9
Use of

Comments (6)

andybrewer avatar andybrewer commented on August 10, 2024 3

I'm inclined to agree w/ @philp on this one. I'd also like to stick to the "no classes" convention.

Here's Mozilla's take on <aside>: The HTML <aside> element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.

I consider cards to be "call out boxes".

@chris-morgan What do you mean by "tooling may be inclined to skip it altogether", a screen reader?

from mvp.

philp avatar philp commented on August 10, 2024

I think that the styling here may look card-like, but semantically, these portions are still intended to be indirectly related to the main content. An aside doesn't necessarily imply that it's a sidebar or a call-out box. Remember this is MVP: it gets the job done, and in a nice way. I'd say stick with <aside> for now because it's semantically valid.

from mvp.

chris-morgan avatar chris-morgan commented on August 10, 2024

These cards seem to me to be part of the main content, not supplementary content.

By tooling I mostly mean screen readers. Default configurations of screen readers won’t skip asides when going through the document in order, but some configurations may skip things like that especially when navigating by landmark.

from mvp.

andybrewer avatar andybrewer commented on August 10, 2024

OK, thanks for clarifying. I'm going to leave as-is for now, but open to revisiting in the future if there's a semantic way to designate a card without a CSS class.

from mvp.

iiic avatar iiic commented on August 10, 2024

So if aside is problematic and this project stands on "no class" convention, what about using role="grid" role="row" & role="cell" … ? https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Row_Role (nice html summary example snippet)

Advantage is it's standardized, working with assistive technologies and its universal

but it also have disadvantages … it cannot be used on most elements (semantic elements) and it's a bit difficult to understand structure (maybe only for me).

from mvp.

DennisSuitters avatar DennisSuitters commented on August 10, 2024

The problematic part comes down to the cards should be using <article/> with possible <aside/> as a child, or adjacent like a side informational panel or advertisement.

from mvp.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.