Add banner to top of techniques pages, tweak boxout content about techniques

[patrickhlauke]

As I constantly find myself having to explain to some folks that techniques are just informative (the amount of times I had to explain that even if a site doesn't use a particular documented technique, that's fine as long as the actual ask of the success criterion has been satisfied), this adds a standard boxout/disclaimer/note at the top of all techniques pages. This should catch folks who just "stumble" directly across a technique (from a search engine result or similar).

To go with it, this also expands the explanation given in the existing boxouts on the techniques index page and the about page.

Closes #1567
Closes #3469

Previews:

• the top of the techniques index page "Summary" boxout https://deploy-preview-5002--wcag2.netlify.app/techniques/
  • Diff from current index
• ditto at the top of the "About techniques" page https://deploy-preview-5002--wcag2.netlify.app/techniques/about
  • Diff from current About page
• random example of one of the positive techniques https://deploy-preview-5002--wcag2.netlify.app/techniques/aria/aria1
• random example of a failure technique https://deploy-preview-5002--wcag2.netlify.app/techniques/failures/f1

[netlify]

✅ Deploy Preview for wcag2 ready!

Name	Link
🔨 Latest commit	206b315
🔍 Latest deploy log	https://app.netlify.com/projects/wcag2/deploys/69efb53646d2720007e1de76
😎 Deploy Preview	https://deploy-preview-5002--wcag2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[patrickhlauke]

Happy to iterate on this further, but this is a first naive implementation to get a better feel/idea of how it could work/look. Keeping in mind that we (well, > I <) do want it to be quite prominent to catch exactly those folks who don't read things, jump to a technique, and make wrong assumptions about what the purpose of techniques is...

[yatil]

While my preference would be to not have techniques at all (but that is probably a ship that has sailed), a strong warning is a good compromise. I think one could bold “Techniques are examples”.

[alastc]

How about adding this to the bottom of the "About this Technique" box:
"Techniques are examples, they may go beyond the minimum requirement of the criterion, and there may be other ways of meeting the criterion."

[patrickhlauke]

Discussed in TF meeting. Will try to streamline the sentence and add it to the techniques' "About" box, as suggested, and to rework the addition in the "About techniques" boxout (move the extra prose further down in the page rather than in the boxout)

[patrickhlauke]

based on feedback from previous TF meeting, moved the shortened version of this to the "About this Technique" box.

Also added a conditional for failure techniques, to show the failure-related notice there for them

[patrickhlauke]

Based on feedback from the TF meeting, I also split up the big block of text I added to technique index and about into separate paragraphs

[iadawn]

Some comments on this. I think the wording is a bit difficult to parse. If you need someone with a much better grasp of English than myself to take a look at this @tamsinewing555 can be available.

[patrickhlauke]

Moved the paragraph outside/after the "About..." box

[iadawn]

I think this still needs to be much short (sorry!):

Techniques are examples of ways to meet WCAG. They are not required. See About WCAG Techniques.

This has the added advantage of being quicker to parse and more likely to be skim read.

I still have a slight feeling that this is in the header and I am not sure that putting this content in would make any difference to visibility of the information.

[fstrr]

I still have a slight feeling that this is in the header and I am not sure that putting this content in would make any difference to visibility of the information.

I'd argue that a site's header content is often skipped over visually or programmatically after a user has encountered it a couple of times (cough, bypass blocks, cough!), so having it in the header is probably not as effective as having it on the page.

[patrickhlauke]

I think anything less than this, we may as well not bother... this is intended to add a tiny bit of intentional friction, just because I keep seeing auditors that seem to misunderstand what techniques are and aren't. (the amount of times i had to explain to somebody on mailing lists, slack, etc that there's no such thing as "passing all techniques" or similar, or that yes, an approach is valid EVEN if it's not following a documented technique).

[patrickhlauke]

I'd argue that a site's header content is often skipped over

I actually completely missed the fact that the header for techniques already included that little line about examples (which is still not clear/explicit in explaining to people that these are NOT REQUIRED/MANDATED) until ken pointed it out to me when we first discussed this...and I've looked at this stuff for years.

[iadawn]

I would argue that any text of this sort will be skipped over. Making it short will help the skimming that is likely taking place of the first few sections of content.

Ultimately anything short of a flashing (in a conformant manner) banner in the middle of the page won't garner the attention that you are seeking to achieve and you will most likely continue in your efforts to explain the position and use of Techniques. Even then, I suspect it could be missed!

[patrickhlauke]

you will most likely continue in your efforts to explain the position and use of Techniques

but then, I have a handy, ready-made paragraph right there on the technique these people start arguing about that i can hit them over the head with... rather than having to repeat myself from scratch every time ;)

in any case, this has received a good number of thumbs-ups so far already... so while i agree it won't fully solve the problems, it's at least a step in the right direction that satisfies the issues that it references, without being too in-your-face about it, IMO

schrödinger's banner ... it's too big and gets in the way/is distracting, but also it's too small and will be ignored anyway ...