Comments (6)
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.
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.
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.
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.
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.
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)
- details and summary HOT 2
- Incorrect right margin on home page in Firefox Android HOT 5
- dark theme HOT 4
- v1.14 is missing in releases HOT 2
- modern css reset HOT 7
- [Question] What to use for error message / warning? HOT 3
- proposal: make table headers sticky by default HOT 2
- Remove in-active link from homepage HOT 1
- how to do drop down 4 level deep sub menu items' navbar? HOT 4
- How to make input width same as the card container HOT 4
- Unused empty space ? HOT 1
- Style <input type="submit"> as a button HOT 4
- bug in the website when opening the website in safari like the close button is floating on the screen. HOT 2
- Solarized MVP HOT 1
- Underline links HOT 2
- mvp.css v1.13 Release HOT 4
- mark HOT 1
- thought on sup HOT 4
- chevron for summary HOT 3
- mvp.html = index.html HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.