2

Trying to understand a particular element of standards and best-practices. I'm tasked with designing a new dashboard for an internal system (note: SEO is not part of the equation; security requirements dictate this stays locked down).

I've been looking at some great dashboard designs, courtesy of references points like this article: https://econsultancy.com/blog/62844-24-beautifully-designed-web-dashboards-that-data-geeks-will-love#i.oqiz3pq3edfot2

But what I've noticed is that many of them don't contain a main heading. I've always made an effort to include H1s, even when I feel they compromise the design. But what's the standard accepted practice? Considering usability, accessibility, best-practices, validation, etc. My goal is to create the most usable solution (and H1s aren't always ugly, but I'm trying to prioritize content, so is it a high-priority item?).

  • Noticed the title edit. Your wording is better! But I'm not asking about Titles. Perhaps "Do all Web pages need main headings?" is more appropriate. – Mana Oct 10 '14 at 20:04
  • Good point, feel free edit (though, do web apps have "web pages"?). On this note, I once took UX Design course with an ex-Microsoft UXer who referred to these as "Main Instructions", which is a good way to think about them. One of the things that's not coming out in the answers is the role of the main heading in orientation and local navigation i.e. answering the question "where am I and what can I do here". So my two cents is that if it's really obvious what you're looking at and what you're supposed to with it, you can live without a main instruction. Otherwise, they're arguably essential. – dennislees Oct 10 '14 at 21:48
  • I've seen a few places like W3.org that add section headings for semantics but hide them visually (ex. position:absolute; left:-9999em;). I think the key is to think how it will A) sound when your content is read by a screenreader (they will still read content that is visually moved off the screen, as long as you don't use display:none;, etc.) and B) how it will read with CSS turned off - if users will be confused about your sections without the visual cues afforded by CSS, then add a heading and maybe even a subheading or caption. – Phil Tune Oct 16 '14 at 16:32
2

You always want a semantic hierarchy to your page, so people understand the different elements of a page, including the page itself as a container for all these elements. It gives users context.

(Often we talk about visual hierarchy, and how we use that information to derive semantic meaning. In the case of HTML and especially when talking about accessibility concerns, where not all users browse the page visually, we should put the emphasis back on semantics. Your semantic hierarchy should then drive your visual hierarchy, through CSS.)

That said, not all H1s need to look the same on all pages. For instance, if your looking at a FAQ item in a subsection of a site, it may be appropriate for that H1 (assumedly the question being answered) may be styled with less visual importance than, say, the title to a primary landing page.

  • I wouldn't say this is an HTML question though, so it is a suitable question for here. It's more about content structure and organisation that happens to refer to an HTML tag, which of a suitable topic. – JonW Oct 10 '14 at 19:39
  • Thank you for the reply! I debated putting it in SO, but figured it was less programmy and more UX. I'm talking more in cases where the H1 content really adds nothing. The words "Dashboard" are plastered all over the place. Nav, page title, etc. They know where they are, and don't need to be told another time, especially if they're experiencing it via screen-reader or other accessibility tools. – Mana Oct 10 '14 at 19:43
  • I agree it's relevant to us, but I felt I saw similar questions get removed so I thought I'd bring it up. Anyhow, I've taken out that part of the answer. Thanks for the feedback, @JonW – Tim FitzGerald Oct 10 '14 at 19:46
1

There are two aspects here

  1. Do headings help in accessibility : Yes, this is because people with disablites who use screen readers or assertive tools can use shortcuts to quickly jump to headings while scanning content to get an idea of a look and feel of the site and decide on what to read.To quote this webaim article

When encountering a lengthy web page, sighted users often scroll the page quickly and look for big, bold text (headings) to get an idea of the structure and content of the page. Screen reader and other assistive technology users also have the ability to navigate web pages by heading structure, assuming true headings are used (as opposed to text that is styled to be big and/or bold). This means that the user can view a list of all of the headings on the page, or can read or jump by headings, or even navigate directly to top level headings (), next level headings (), third level headings (), and so on.

  1. Should I always include a h1 tag : Not necessary since the main goal of the the H1 tag is to help you establish that this is the primary heading and all other content that follows is secondary content. That said, you can potentially use an H2 tag as a primary heading but do be mindful that any content below it is of the lower hierarchy i.e h3,h4,h5 and h6 so that users using assertive technologies can make the connection. This accessiblity article has this to say

Accessible Use of H2 tag for headers In this example the H2 tag has been used and has been styled so that it is automatically navy.

Topic 1 (example) Content

Topic 2 (example) Content

A screen reader set to a scanning mode would list "Topic 1" then "Topic 2"

Coming to your comment below, the screen reader would read the title as

Screen readers announce the page title (the attribute in the HTML markup) when first loading a web page.

So in that case, having the same title repeated again a H1 tag would be redundant as you are basically repeating the same content and could cause confusion to users about whether there is a section which has the same title as the page title.

That said, I recommend reading this interesting article "The Truth About Multiple H1 Tags in the HTML5 Era" about how HTML 5 can help alleviate the H1 tag problem. That said, please ensure your user base has browsers who do support HTML5 content before you for this approach

  • Thanks. For accessibility with screen-readers though, in the case where the H1 isn't adding anything (basically a rewording of the Title they're already hearing), is it best to just leave it out? – Mana Oct 10 '14 at 19:41
  • I believe that would be fine. I just updated my answer to answer your question – Mervin Johnsingh Oct 10 '14 at 19:52
0

If you’d omit h1, then your next question could be: Do all pages need h2?
Or in other words: Why would you want to skip a heading level?

But the answer is no, not all pages need a h1. There can even be pages that need no heading at all.

Simple rule that works in most cases: Decide which document outline is needed, and then start from h1.

With HTML5, you don’t even need heading elements to create a correct outline, as sectioning content elements create outline entries even without headings. See Headings and sections in the HTML5 (PR) spec.
It’s not recommended to have unlabeled outline entries, but it can sometimes be useful, e.g., if a (parent) entry is needed without having a useful label for it at hand.

  • Thanks for the response. It's not about skipping heading levels. It's about not having information that is useful to be displayed at an H1 level, or about it breaking the design. A lot of flat design techniques are perfectly usable without having the page separated in the traditional way. For example, many dashboards use nothing but self-contained boxes. In this case, they speak for themselves. Why include an H1 for the page? Example: cdn.designmaz.net/wp-content/uploads/2014/01/… – Mana Oct 21 '14 at 14:54
  • @Mana: I’m not sure I understand this example screenshot, but I think this page is about Mark and the services he offers. In this case, "Mark", or, if different, the site name (name of his business etc.), should be the document heading. -- When deciding about the outline, you should not think about the way the page is displayed. Look at it without any CSS applied: having sections which are all on the same level will make it hard to understand such a document; there should usually be some kind of header/introduction. For most websites, this would be the site name. – unor Oct 22 '14 at 9:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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