Cards


50 bookmarks. First posted by ebv june 2018.


Some ideas for the best approach to cards.
accessibility  design 
6 weeks ago by robertocarroll
Eine wirklich komplette Anleitung, wie man ein Kartenelement baut.
a11y  css  design 
july 2018 by schneyra
Some of the components I've explored here have specific standardized requirements in order to work as expected. Tab interfaces, for example, have a prescribed structure and a set of interaction behaviors as mandated by the WAI-ARIA specification.
accessibility  card  component  design  development 
june 2018 by mayrav
Good thoughts on making whole cards clickable and a solid use for :focus-within

- Use list markup to group your cards
- Make sure your cards don't break when lines of content wrap or images don't meet specific aspect ratio requirements
- Avoid too much functionality and reduce tab stops. Cards shouldn't be miniature web pages.
- Remember that headings should begin sections. Most everything that belongs to the section should follow the heading in the source.
html  webdesign  css  accessibility 
june 2018 by leereamsnyder
The question is: where do I place the link to that blog post?
a11y  webdev  link  block  giant-buttons  buttons  giant-links  links  card 
june 2018 by frankfarm
Excelente tutorial para hacer Cards accesibles usando :focus-within, el owl selector
tutorial  accessibility  css 
june 2018 by gorilas
Some of the components I've explored here have specific standardized requirements in order to work as expected. Tab interfaces, for example, have a prescribed structure and a set of interaction behaviors as mandated by the WAI-ARIA specification.
webdev  design  ux 
june 2018 by cjitlal
Other component articles have already explored the advantages of using lists to enhance assistive technology users' experience. Briefly:
Screen readers provide shortcuts to lists and between list items
Screen readers enumerate the items so users know how many are available
a11y  accessibility  css  design  cards  lists  components  focus  focus-within  layout  flexbox  grid  clip 
june 2018 by abberdab
Some of the components I've explored here have specific standardized requirements in order to work as expected. Tab interfaces, for example, have a prescribed structure and a set of interaction behaviors as mandated by the WAI-ARIA specification.
IFTTT  Pocket  zm:reading 
june 2018 by MrMartineau
Some ideas about how to solve problems you might encounter with cards, and how to enhance the interface in ways that are sensitive to a broad range of users.
accessibility  CSS 
june 2018 by chromaphobic
via Pocket
read  pocket 
june 2018 by tricca
Heydon Pickering описывает следующий компонент ― карточки.
UX  patterns  accessibility  tutorials  issue 
june 2018 by jvetrau
via Pocket
Pocket 
june 2018 by LaptopHeaven
Some cards are just illustrated introductions to permalinks like blog posts; others are more autonomous and offer a lot of functionality. In this article, I'll be looking into a few permutations of a simple card component, emphasizing a balance between sound HTML structure and ergonomic interaction.
fridayfrontend  css  inclusive  components  cards  accessibility 
june 2018 by spaceninja
I’ve iterated through several versions of our own card component trying to make it more accessible. Thanks @inclusicomps for this insanely useful guide! https://t.co/3IIu56VN9n #a11y pic.twitter.com/V775Qv5b8x

— Kendrick Arnett (@kendrick) June 8, 2018
ifttt  from:twitter 
june 2018 by kendrick
super detail CSS and JS for creating a card - important use of pseudo content tags and such
card  UXUI  UI  pseudoTag 
june 2018 by ElliotPsyIT
in-depth exploration of writing code for a card. Some of it seems absurd but there is useful stuff to learn
webdesign  web  design  card  code  coding  html  css  semantic  accessibility  accessible 
june 2018 by piperh
Some of the components I've explored here have specific standardized requirements in order to work as expected. Tab interfaces, for example, have a prescribed structure and a set of interaction behaviors as mandated by the WAI-ARIA specification.
It's at your discretion how closely you follow these requirements. Research may show that your audience doesn't do well with a tab interface precisely as recommended. Nonetheless, those requirements are there.
Other components, like the ubiquitous but multivarious card, do not have a standard to follow. There's no <card> element, nor an "ARIA card" design pattern. These are some of the more interesting components to work on. Each potential barrier to inclusion needs to be identified and addressed in turn.
These barriers differ in line with the card's purpose and content. Some cards are just illustrated introductions to permalinks like blog posts; others are more autonomous and offer a lot of functionality. In this article, I'll be looking into a few permutations of a simple card component, emphasizing a balance between sound HTML structure and ergonomic interaction.
a11y  accessibility  components  card-design  webdevelopment  coding 
june 2018 by gwippich
Analysis of cards in an inclusive design model
tips  bestpractices  accessibility  webdev  webdesign  cards 
june 2018 by angusm
RT : 📢 NEW component: A card
💪 Semantic HTML
💪 :focus-within
💪 CSS Grid
💪 And more...

a11y  from twitter_favs
june 2018 by oliver.turner
Favorite tweet:

📢 NEW component: A card
💪 Semantic HTML
💪 :focus-within
💪 CSS Grid
💪 And more...https://t.co/rjW4jHiSqP #a11y

— Inclusive Components (@inclusicomps) June 4, 2018
IFTTT  Twitter 
june 2018 by siggiarni
📢 NEW component: A card
💪 Semantic HTML
💪 :focus-within
💪 CSS Grid
💪 And more...

from twitter_favs
june 2018 by ebv
📢 NEW component: A card
💪 Semantic HTML
💪 :focus-within
💪 CSS Grid
💪 And more...

a11y  from twitter_favs
june 2018 by ginader
📢 NEW component: A card
💪 Semantic HTML
💪 :focus-within
💪 CSS Grid
💪 And more...

from twitter_favs
june 2018 by aleksip