Lint warnings for web content developers/authors

[matatk]

As suggested in 6ac112d, would it be helpful to emit warnings when invalid things such as aria-labelledby="" are encountered?

• Should it just do it, or should this be a separate mode?
• If the error has already been reported, should it be reported again (e.g. during a scan after a mutation)? (Probably not—could flag the first scan? But then that might miss the error, as it could be added by a mutation, so should a record of the errors be kept?)

Update (2019/08/11): I'm leaning towards it always linting, and exposing some icons in the pop-up at least (maybe even a flag on the icon?) In order to stop repeated results, it could take note of the selector computed for an element, as this should remain constant across certain page changes.

[matatk]

Potential lint issues

Errors

• aria-labelledby="" (or just whitespace)
• aria-labelledby referencing an IDREF that doesn't exist
• aria-labelledby referencing an element that contains no text
• aria-label="" (or just whitespace?)
• <div role="region"> lacking any sort of label—the spec requires there to be a label for regions
• More than one <main> element that is visible
• aria-roledescription="" (or just whitespace)

Warnings

• <div role="region" aria-label="blah">—the spec asks for there to be a visual label for regions
  • As above but for <section> or are the rules different in HTML?
• <div role="form" aria-label="blah">—the spec asks for there to be a visual label for forms
  • As above but for <form> or are the rules different in HTML?
• Setting a landmark region to be aria-hidden="true" (directly or indirectly) when there's no dialog being shown.
• More than one "main" region in any given document or application tree (or just leave this, but keep the error above?)
• Setting aria-roledescription="" on a landmark other than region
• More than one of any type of landmark region when they lack labels.
  • Would banner > navigation and main > navigation be self-explanatory?
  • Should all be labelled, or at least n-1?
  • If using ">1 landmark elements with the same tagName on the page" metric to decide this, then:
    • it's important to exempt <header>s and <footer>s that wouldn't be counted as a landmark (as well as unlabelled <section>s for the same reason).
    • In reality, though, it would done based on role—but in that case, <div role="region"> would need to still be recognised even though <section> wouldn't be.
    • Oh, and would <div role="banner"> always be counted even if <header> isn't?
• Content that is outside of a landmark region.
  • Rationale: if some content is in a region, then all content should be.
  • If there are no landmarks, this wouldn't apply.
• Lack of a main region?

Info

The last two warnings were here, but I moved them.

[carmacleod]

Note that the current html spec for main element is a bit different from the (old) W3C spec.

You can still only have one visible main element:

A document must not have more than one main element that does not have the hidden attribute specified.

But the old spec said "main must not be a descendant of article, aside, footer, header or nav", which is similar to but not quite the same as:

A hierarchically correct main element is one whose ancestor elements are limited to html, body, div, form without an accessible name, and autonomous custom elements.

[carmacleod]

@matatk Issue #370 is a great example of where linting would be useful/helpful. :)

I like your updated idea of exposing some icons in the pop-up. Maybe (for issue 370 for example) that could look something like this? Add a tooltip "There should only be one visible main" for details?

[matatk]

Thanks @carmacleod, for both the note on <main> and the UI suggestions; that looks quite like how it did when I imagined it :-). I'll need to think about whether these errors/warnings should be presented to the end-user (given there's nothing they can do about them) or just the developer via the DevTools panel (and maybe we might treat errors and warnings differently), but this is quite motivating—I want to see it in action now :-).

I have been doing quite a bit in preparation for this: I've been improving the profiling tools to make it easier to determine how adding the lining might affect performance, as well as researching the checks to perform.

This will still take some time, so I don't think it will be in the next release, as there are already quite a few fixes I'd like to get out, but I am working on it.

[carmacleod]

Sounds great, @matatk!

Re:

I'll need to think about whether these errors/warnings should be presented to the end-user (given there's nothing they can do about them)

Oh, right. My developer-centric brain was thinking that the developer was the end user, but of course, there are real end users. :) Sorry about that!

[matatk]

Finally started to address this, with just one simple check, in #410 :-).

[carmacleod]

Lack of a main region?

Absolutely, flag lack of a main region, mostly because main is the most important landmark, but also if there's, say, a header and a footer and no main, then there must be a big chunk of:

Content that is outside of a landmark region.

One exception that I noticed was google, which has only a single "search" landmark, and no main... which kind of makes sense...
(nothing else on the page is in a landmark, but it's a very sparse page)