1

In Bootstrap there are dedicated alerts. https://v4-alpha.getbootstrap.com/components/alerts/

According to the code on that site, the headings in an alert shall be h4, but I'm not quite sure that's the correct heading level.

  • If I use h1, there will be two h1 headings on the same page.
  • If i use h2, there will be a h2 before the h1 on that page.
  • If I avoid using headers, users with screen readers (just braille, no speach) might miss the information when browsing that page.

Are there any other options except of those above, or are any of these options the correct way to handle this issue?

UPDATE: I do refer to cases when these alerts are places at the very top of the page, above all the other content. Example: Cookie info or "Site will be closed tomorrow". These alerts sometimes do have a heading.

closed as off-topic by Joel Tebbett, Charles Wesley, Shreyas Tripathy, locationunknown, Kristiyan Lukanov Oct 2 '17 at 8:21

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – Joel Tebbett, Charles Wesley, Shreyas Tripathy, locationunknown, Kristiyan Lukanov
If this question can be reworded to fit the rules in the help center, please edit the question.

  • I really don't know, but I assume you shouldn't use any headings since it's just an alert, therefore no headings or content. A different thing would be if you're talking about dialog boxes. So I'd follow @SanjuAus answer advice. Then again, just an opinion. As for your screen reader concerns, the role=alert tag should suffice, no need for headings – Devin Sep 29 '17 at 16:44
2

There can’t be a general answer, it depends on the context and nature of the alert.

Context in the markup

HTML 5.1 recommends to

use headings of the appropriate rank for the section’s nesting level

If you want to follow this advice (you don’t have to, you could for example use h1 everywhere, if you use sectioning content elements explicitly everywhere), you have to change the heading element depending on the position (in the markup) of the alert:

  • It would have to be a h2 here:

    <article>
      <h2>Article title</h2>
    </article>
    <section><!-- ALERT --></section>
    
  • It would have to be a h3 here:

    <article>
      <h2>Article title</h2>
      <section><!-- ALERT --></section>
    </article>
    
  • etc.

Where to place it in the markup?

This depends on the nature of the alert. What is it related to?

If the alert is related to a blog post on the page, it might make sense to place it within the blog posting’s article. This is especially the case if the alert should always be shown together with the post, for example when it’s read in a feed reader.

If the alert is related to the whole page (i.e., not related to some content on that page), it can make sense to place it as top-level entry in the document outline. To achieve this, you have to use another h1 as heading within the body:

<body>
  <h1>Alert heading</h1>
  <h1>Site heading</h1>
</body>

(If it makes sense, it’s perfectly fine to have multiple h1 elements within the body sectioning root.)

0

I'm not quite sure that's the correct heading level.

First of all, if you are indicating about the size of the text, you can retain h4 and still make font size bigger using style attribute. It's just the matter of preference.

Also you don't need to worry about multiple h1 elements in the same page as long as you provide different id's for each of them. You could even enclose the text in div and specify the style attribute according to your need and it would just work fine, but you shouldn't because it's a bad practice and would affect the readability of your code.

  • I think you mean "as long as they're in different sections". Multiple H1 are forbidden by w3 specs unless they're inside their own section (then you can have one h1 header per section) . w3.org/TR/html5/… – Devin Sep 29 '17 at 16:39
  • @Devin: Multiple h1 in the same section are not forbidden (each one after the first creates an implicit section). – unor Sep 30 '17 at 20:37
  • 1
    @Devin As unor pointed out, it's not actually forbidden but it would mess with some SEO tools out there especially those which search for the h1 tags as clues to what the page's content is about. It's briefed in this article. – Sanju Oct 3 '17 at 6:30

Not the answer you're looking for? Browse other questions tagged or ask your own question.