Standardize working examples

[fstrr]

Closes #4978

1. All pages have HTML5 doctype
2. Added viewport tag with the same attribute values as the WCAG 2 site
3. Added CSS body tag styling so the font is the same on each page
4. Standardized the charset tag
5. Removed old attrs on the html element
6. Removed unneeded attrs on script and style tags
7. Fixed a couple of reflow bugs
8. Fixed an issue with an input not having an accessible name
9. Removed some deprecated HTML attrs on some table elements

[netlify]

✅ Deploy Preview for wcag2 ready!

Name	Link
🔨 Latest commit	955e4ce
🔍 Latest deploy log	https://app.netlify.com/projects/wcag2/deploys/69c18314e250280008bf45c2
😎 Deploy Preview	https://deploy-preview-4980--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]

Discussed in TF meeting today. Small changes (TODO @kfranqueiro):

• back out the one change to scripting / removing jQuery (meant for Remove jQuery from Techniques #4981)
• change ": WCAG 2" to "| WCAG 2"

Otherwise good to go, moving to ready for approval

[patrickhlauke]

Discussed in TF meeting today. Small changes (TODO @kfranqueiro):

• back out the one change to scripting / removing jQuery (meant for Remove jQuery from Techniques #4981)
• change ": WCAG 2" to "| WCAG 2"

Otherwise good to go, moving to ready for approval

Heads-up @kfranqueiro @fstrr ... done both these changes just now

[kfranqueiro]

I performed my own pass and fixed a few things (and a lot of indentation to match its surroundings)

[patrickhlauke]

Discussed in the TF meeting. Will do a final check of all working examples. Unless I find more problems that fundamentally alter what the working example tries to demonstrate, this will then be moved to ready for approval and make it in next Monday's batch for the WG.

[kfranqueiro]

Since there currently is no working-examples index page for PRs (but that is something I can work on separately), here's a list of links for the preview:

working-examples preview links

• aria-label-accessible-name-dialog/index.html
• device-motion-sensor-input/index.html
• script-toggle-aria-alerts/index.html
• label-in-name-general/example2.html
• label-in-name-general/example1.html
• label-in-name-general/example3.html
• label-in-name-general/example4.html
• aria-invalid-required-fields/index.html
• script-scroll-text-expand/index.html
• failure-status-message/index.html
• focus-pseudo-class/index.html
• aria-role-status-searchresults/index.html
• script-toggle-toc-button/index.html
• failure-viewport-units/index.html
• script-action-links/index.html
• css-fitting-images/index.html
• script-change-css-property/index.html
• aria-invalid-data-format/index.html
• script-swap-css/index.html
• css-padding-focus-not-obscured/index.html
• script-scroll-pause/index.html
• aria-icon-font-img-role/index.html
• aria-labelledby-time-out-input-concatenated-label/index.html
• script-expand-links/index.html
• script-control-blink/index.html
• failure-td-not-th/index.html
• css-flexbox/index.html
• aria-progressbar-status-message/index.html
• script-dynamic-select/index.html
• aria-labelledby-table-text-inputs/index.html
• aria-grouping-related-fields/index.html
• aria-role-log/serverlog.html
• aria-role-log/chatlog.html
• script-hoverable/index.html
• css-fit-labels-inputs/index.html
• failure-orientation-message/index.html
• description-list-contact-info/index.html
• providing-single-point-control-slider/index.html
• reflow-indenting/index.html
• css-focus-visible/index.html
• link-contrast/index.html
• css-two-focus-colors/index.html
• aria-labelledby-description-complex-graphic/index.html
• aria-grouping-multipart-fields-ssn/index.html
• aria-alertdialog-identify-errors/index.html
• input-resize/index.html
• script-check-multiple-controls/index.html
• failure-css-positioning/index.html
• failure-css-positioning/styles-removed.html
• css-sticky/index.html
• aria-alert-identify-errors/index.html
• script-action-buttons/index.html
• script-action-on-div/index.html
• css-text-spacing/index.html
• device-motion-sensor-input-failure/index.html
• failure-table-headers-incorrect-association/index.html
• aria-role-status-shoppingcart/index.html
• css-reflow-url/index.html
• reflow-carousel-panel-horizontal-scroll/index.html
• aria-current/index.html
• aria-labelledby-workshop-booking-timetable/index.html
• css-new-window-warn/index.html
• css-44px-target-size/index.html
• css-24px-target-size/index.html
• reflow-nested-lists/index.html
• css-grid/index.html
• semantic-text/index.html
• script-form-validation/index.html
• css-reduced-motion-query/index.html
• breadcrumb-trail/index.html
• sticky-elements-hiding-focused-elements/sticky-header.html
• sticky-elements-hiding-focused-elements/sticky-footer.html

[patrickhlauke]

Reviewed all working examples listed in #4980 (comment) ... apart from one tiny tweak (placeholder link that was left in the 44x44 technique), these are all good and still demonstrate what they set out to do.