Flag styling obsolete elements and attributes

[PhilippeVay]

Hi,

thanks for this stylelint plugin, it WILL help raise awareness about web accessibility among stylelint users! 👍

2 new rules could be about the use of obsolete/deprecated elements (tags) and attributes (in HTML5) as selectors and flagging them.
The priority is to lint HTML for that and it's also better suited in a project like aXe but it'd also be nice to detect those in stylesheets: it means either one is styling things that shouldn't be in the markup or if things aren't in the markup anymore that there are unused rules (to be removed).

Examples of elements that have always caused accessibility problems: marquee, strike, big, blink.
When a user wants to customize a site's appearance with its user sylesheet, center and font elements are harder to manage (CSS should be used for styling, not markup). Same for a loooong list of attributes like [border] and [align]…

Here's a comprehensive list of obsolete elements and attributes: a11y.css / _obsolete.css created by @ffoodd 👋 (reformatted in this gist). Most of them aren't that problematic in regards to web accessibility but all of them are obsolete, either still conforming or non-conforming in HTML 5 so why one would still use them?
Such a list and the choice of flagging or not each one is opinionated and that could be a problem, so your point of view and from others is very welcome. 😄

Proposed rule names: a11y/no-obsolete-element and a11y/no-obsolete-attribute?

Existing rule selector-type-no-unknown](https://stylelint.io/user-guide/rules/selector-type-no-unknown/) only flagged in the above link bgsound, noframes, nextid, multicol and nobr (which is kind of expected because an element like blink does exist).

Relevant past discussion: Bug: Various valid selector types incorrectly reporting as unknown type selectors
Another solution would be for stylelint to create something like selector-element-blacklist and selector-attribute-blacklist but then it'd be a hassle to add manually an array of elements and attributes or would need yet another config like stylelint-config-obsolete to see these rules adopted.

I compiled links to relevant WCAG 2.1 principles and techniques:

• it's not robust, more precisely:
  • G192: Fully conforming to specifications
  • H88: Using HTML according to spec
• no Pause, Stop, Hide for blink and marquee
  • using blink is a failure
  • failure "blinking content without a mechanism to pause the content that blinks for more than five seconds"
  • failure "including scrolling content where movement is not essential to the activity without also including a mechanism to pause and restart the content")
• no Audio Control for bgsound (it autoplays a sound on load page)
  • If it lasts more than 3s it's a failure and else it's annoying
  • No pause or stop is also a failure

[ffoodd]

FWIW the dedicated documentation page on a11y.css website may be easier to read :)

[YozhikM]

@PhilippeVay Thank you for your detailed explanation of your opinion. I am very glad that I received a warm welcome from the community.
I agree that it is necessary to check the use of obsolete and removed selectors.
As for the rest, we only check what's inside the .css file. Therefore, we can not prohibit people from automatically playing audio.

I did PR for one of the rules suggested by you. Look, please, I understood you correctly.

Once again many thanks!