Reusable component structure

[tomliv]

We're all about components these days right? Here's a situation I struggle with frequently.

You are making a reusable card component - theoretically built as reusable and should be able to be placed anywhere you need a card-type layout. There is an image on left, and copy on right. Copy has a "headline" and a paragraph. Maybe followed by a call-to-action button. Sounds very typical, right?

Here's where I stumble...

On one page, the heading hierarchy leads you to make the card headline an h2, lets say. But if this is supposed to be reusable anywhere, dropping a card with an h2 on another page might put the heading hierarchy out of order or even skip a level.

What's the right way to handle this? I am not talking about visual look of the headline. I'm talking accessibility. Do you just skip a heading element altogether and make it a paragraph and class it to style?

 

[Deleted member 5997]

HTML5 allows you to use section and a header within it. Not sure if that is what you are looking for.

 

[tomliv]

HTML5 allows you to use section and a header within it. Not sure if that is what you are looking for.

Not quite the issue in this case. I'm talking smaller page components like a card-type page element that would go inside an aside or be part of a page section.

In general terms, how do you handle a component that has what appears to be a heading in it, but is to be reusable anywhere on any page. Do you use a heading element (h1 - h6) or just class and style a <p> to look like a heading?

Not using a heading element could leave a page with maybe only 1 heading level and is less helpful for AT users. Using a heading element could result in skipping or out-of-order heading levels.

 

[Deleted member 5997]

I still think the entire card could be an <article> or <section>, which can contain a <header> for your heading.

I mean something like this:
Card - CSS: Cascading Style Sheets | MDN

Of course, without the embedded <h2>

 

[tomliv]

I still think the entire card could be an <article> or <section>, which can contain a <header> for your heading.

I mean something like this:
Card - CSS: Cascading Style Sheets | MDN

Yes and no. While technically you are right, the document outline needed to make this work was never implemented in any browser so one could still end up with skipped or out-of-order headings which will be flagged as an accessibility error.