2

Our UX and design teams were discussing breadcrumbs, and if the current page is considered a "disabled" element. We already style the current page so it is obviously not linked, like the out-of-the-box Bootstrap styling.

My opinion is that even if the current page isn't linked it still needs to be readable. It doesn't feel like a disabled element either — for reference the W3C page on the contrast minimum states that:

User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements. An inactive user interface component is visible but not currently operable. An example would be a submit button at the bottom of a form that is visible but cannot be activated until all the required fields in the form are completed.

So, can the current page have low contrast because it can be considered disabled?

1
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking.
    – Community Bot
    Feb 16 at 20:03

2 Answers 2

1

Graying out the name of the current page in a breadcrumb chain is conceptually not warranted and practically bad for usability.

Conceptual Argument

Conceptually, the key part of the W3C guideline is, “An inactive user interface component is visible but not currently operable [emphasis added].” A disabled control is one that is not currently operable, but can be made operable, generally by a user action on the same page (or window). I would argue that the page title in the breadcrumb chain is simply static non-interactive text that is never operable. It should be obvious that “disable” does not describe all static non-interactive text on a web page. The text you're reading now is not disabled. It’s simply non-interactive. Therefore, the page title at the end of breadcrumb chain should appear like other static text on the page and should comply with W3C contrast guidelines.

If the user goes deeper into the navigation hierarchy, I’d argue that the current page title doesn’t change to be an active link. Rather, the user has navigated to a different page, and therefore the name of the former page (now a link in the breadcrumb chain) is a different UI element that happens to have the same text and relative position on a different page. Whether users see it that way or not may depend on your graphic design, but I’d wager most would see the breadcrumb text as a copy from the former page, not the same text made active. Certainly in terms of most programmatic implementations, the system has (at least) replaced the former page title with a new link element, not flipped a bit on the same element to activate it.

Therefore, from a conceptual (legalistic) standpoint, the W3C exception for disabled controls does not apply to the page title at the end of the breadcrumb chain, and guidelines for contrast apply. If I were a judge, that is how I’d rule. Your judges may vary.

Practical Argument

This is a lot easier: You are correct. The page title is important text. Therefore, it needs to be readable by everyone one. The best user experience is to make sure it has adequate contrast. In fact, I’d argue that the page title generally be bigger and/or bolder than other elements in the breadcrumb chain.

I never heard of someone being confused by the last element of breadcrumb appearing like static text, rather than a disabled control. That is how breadcrumbs usually appear.

You don’t want users skipping over the page title or ignoring it, much like users do (and often should do) for true disabled controls. You don’t want users wondering, “Hmm, the page title is grayed out. Does that mean have to do something to make this truly the full page I navigated towards?”

I believe the reason for the W3C exception for disable controls is that the convention to “gray out” disabled controls existed before W3C (so they were stuck with it), and in a lot of cases it’s practically impossible to get a noticeably grayed text and comply with the guideline. I believe the W3C rationalizes that, if a control (like a command button or menu item) is disable, the user probably doesn’t need to read it anyway –it’s not a control they can choose.

There really is no usability justification for graying the name of the current page in a breadcrumb chain, regardless of what your “judge” says about the W3C guidelines. Design for usability, not to technically comply with rules.

0

It should be readable (sufficient contrast) for letting the user know the current position in the flow which is a critical function of that 'unlinked' text. secondly, it helps them answer 'what something is there?' question which cannot be overlooked.

Additionally, it has to be styled differently (not necessarily disabled feeling). This can be explored with regards to the particular design of the rest of the UI and the theme used. Sometimes this can be achieved with an active style too so as to signify that it is alive or active.

Underlines, accent lines, bold, foreground color, background colors etc. can be explored and the resulting contrast measured for standards or tested.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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