A CSS bookmarklet that puts pink error boxes (with messages in comic sans) everywhere you write bad HTML.

One of your error messages is:

Do not use list items to divide up lists unless they have role = separator

However <li role="separator"> is invalid per http://www.w3.org/TR/html5/dom.html#sec-implicit-aria-semantics :

• Language feature: li element whose parent is an ol or ul element
• Restrictions: If specified, role must be one of the following: listitem, menuitem, menuitemcheckbox, menuitemradio, option, radio, tab, treeitem or presentation

Note how separator is absent from that list.

Perhaps presentation should be recommended instead?

I believe there is a rule matching all correctly formated images:

img[alt]:not([alt=""])

This targets all img tags with an alt attribute which is not empty. So... Every properly formated image as far as I know. I believe you want to target:

img[alt=""]

... but you might want to override this rule for images in figure, because it's common practice to empty the alt attribute when there is a figcaption.

I find the sr-only class used for off-screen screen reader only text used in sites. Often it is used unnecessarily. For example: <h2 class=”sr-only”> This is the site header</h2>. I recommend including the following to flag this. .sr-only:after{ content: 'Off-screen text for screen reader users. Is this text necessary?' !important; }

Since you don't aim at supporting IE 8 based on the number of :not() occurrences, I think you could move all the :after to ::after to stick to the specifications.

No big deal, just a minor improvement.

Hi I am working on an assignment for a technical writing course. We were asked to edit the writings on GitHub randomly. I came across your README.md file and edited a minor thing. I think with this fix your writing will be grammar error free. Thank you

Pull request fixes two typos;

1. contentinfo => banner (as per https://github.com/Heydon/REVENGE.CSS/pull/14 , by @Conalclos )
2. footer => header (also required)

The warning is confusing if the developr has set the tabindex properly. I strongly agree on using proper HTML elements, but we still have another warning that is more specific and clear to developers.

I'd love to see some indication of which version I've got stored on my bookmarks bar, compared to the current master version. Is it possible to add a version near the beginning of the bookmarklet code?

i.e. javascript:(function(){'1.0.0';revenge=document.createEleme... or javascript:(function(){version='1.0.0';revenge=document.createEleme... ?

I realise that the bookmarklet is just a way to link in the .css, but it still wouldn't hurt to have a version present.

https://github.com/Heydon/REVENGE.CSS/blob/1fdbe2c0bce82cc588ef16541ec368a6d4baa300/revenge.css#L62

Sure this style predates HTML5 and HTML Living Standard, so hard to criticize, but nowadays it is allowed to have non-nested DIV elements inside DL:

https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element:concept-element-content-model

https://github.com/Heydon/REVENGE.CSS/blob/1fdbe2c0bce82cc588ef16541ec368a6d4baa300/revenge.css#L63

Also AFAIK it newer was a mistake to have multiple definitiondescription therms defscribed by one or more DD.

So such sample should suffer no revenge:

<dl>
  <div>
   <dt>foo</dt>
   <dt>bar</dt>
   <dt>baz</dt>
   <dd>Very common metasyntactic variables.</dd>
   <dd>Frowned-upon words without meaning often seen in programming handbooks.</dd>
  </div>
  <div>
    <dt>metasyntactic variable</dt>
    <dd><q cite="https://en.wikipedia.org/wiki/Metasyntactic_variable">specific word or set of words identified as a placeholder in computer science and specifically computer programming</q></dd>
  </div>
</dl>

Arrived here from @brucelawson's 10/12/19 post (https://www.brucelawson.co.uk/2019/checklist-to-avoid-the-most-common-accessibility-errors/) where he recommends this bookmarklet for checking certain common accessibility errors.

Similar to the issue he logged (#25), is the “Forms must have action attributes” still relevant?

HTML5 spec https://www.w3.org/TR/html52/sec-forms.html#element-attrdef-submitbuttonelements-formaction:

The action and formaction content attributes, if specified, must have a value that is a valid non-empty URL potentially surrounded by spaces.

'If specified' as in 'optional'? This answer on StackOverflow seems to think so (https://stackoverflow.com/questions/9401521/is-action-really-required-on-forms). According to them it was required in HTML4 but not in HTML5 and can be left off. So if doctype is HTML5 there is no need for the action attribute?

.. pretty sure this is obsolete in today's browsers? (Ditto contentinfo etc). Happy to make a PR ..

(and perhaps show a message on any main that is not the only/ first main on a page, because 8.06% of pages erroneously contain more than one main landmark (https://almanac.httparchive.org/en/2019/accessibility#main-landmark)

https://www.forkliftsmi.com

<a class='fl printHide' href='/'><img id='Logo' alt='Forklifts of Michigan' src='/images/logos/ForkliftsMichiganLogo.png'/></a>