WCAG-Brute-Force

GitHub package.json dynamic

Brute force WCAG AA patching to pass wave tool tests. Updated: April 9 2026 more updates as I recognize opportunities.

Overview

This is a file I (tim hunold) am making using CSS and jQuery 3.7.1 :poop: (plus vanilla JS) to help patch a site quickly for the purpose of attempting 508 WCAG AA compliance triage. It is unlikely to fix everything, but it can help a ton. As I age, my eyesight is starting to let me know that I am doing this for future me as much as everyone else out there.

Please let me know if you’d like to contribute to this repo, this is based mainly on what I currently deal with.

Directions

You can directly link the JavaScript files to your pages, it’ll do a lot, but make sure you review them to make sure you are not adding things you don’t need. Same for the CSS reset of sorts. Copy-paste as needed is the best way. If you have a static site you want to update en masse, try using the Gulp task. It’ll scour your HTML files, and using jQuery, it will rewrite things in the DOM directly and then spit them out.

WCAG Considerations

:white_check_mark: TOC Generator (SRC) and (DEMO) are similar to a Skip-to method where it grabs and makes a TOC in the DOM or you can use in thes console for debugging. It makes elements become navigable # anchors.
:white_check_mark: Style Switcher (SRC) or (DEMO) is similar to the Style switcher idea where you can have a “normal” one, and then an “enhanced” one for those that might have vision issues.
:link: Form Resource spec Good reference info.
:white_check_mark: Images require alt or role with a value, do not use title because some out of touch MBA shouts “SEO!” it doesn’t work like that anymore.
:white_check_mark: Iframe requires title for context.
:white_check_mark: Google translate free version adds some voting (depricated?) inputs without labels so we fix that with a label and ARIA hide.
abbr elements for abbreviations and explanations are a good idea, be semantic, it’s there for a reason!
Specifying a max character width helps wrap text.
tab key navigation can be reset to respect the linear DOM order and should have a focus bg color (see TOC generator above).
All links need to be visually distinct, ie underlined or made to look like a CTA and not cloaked because it’s “pretty”.
Browsers use a default font size of 16px, never go below 11px for AA and AAA demands smallest can be 16px, plus after you turn 40, you’ll appreciate why.
Try to avoid area wraps with a tags aka “block links”
Never use content: in CSS, screen readers can’t see it and don’t use clickable icons without some hidden text.
:white_check_mark: PDF/Doc files are their own issue, but links to them should tell users there is a PDF/Doc file, though some services like SiteImprove still ding you because the label should not only mention the presence of a doc, but the name of the doc.
:white_check_mark: Pages should have doctype and lang declared.
:white_check_mark: Adding Opengraph and Twittercard support as it seems some new technology might consider it especially from linked sites.
Future consideration: “read more” and “next” are AWFUL to screenreaders. Tab navigation may jump to a link with zero context.

Indemnification

I make no warranty that this will fix everything, but there is a lot it can help with.

My Live Demos :party:

WCAG CSS reset

Brute-force JS patcher

TOC Creator from Headings

Style Switcher

CSS

In CSS I am adding a lot of generic, obvious things, there are comments to what a line is and does, and I use plenty of advanced selectors and pseudo classes. I don’t always provide the actual use samples, but you should be able to understand from the comments.

What it does

We define and leverage root and simple variables. Also, there are font-handling methods that are often overlooked. It also calls out that links need to have underlines unless they get a visually dominant treatment like a CTA (call to action)

JavaScript

The JS directory has its own README file.

Ok, jQuery is used, it is ubiquitous so it is easy to use. Most of what I do here are attribute manipulations and those generally work from early versions on to the modern releases.

Vanilla JavaScript has been added as well.

Gulp with NPM was added as well. You can point it to files and folders to rapidly fix compoinents or static files. Gulp.js comments explain it all. I know it’s ancient, but as a task runner, it works fast locally, better than GREP statements.

What it does

We add missing alt attributes with a value and alts without values, plus a default role. The next thing it does is remove titles from images.

We also remove tabindexes and then re-add to clickable links in the order from the DOM tree in a linear fashion.

There is also a way to add titles to iframes. This helps when you embed third party code like from Vimeo. I will add an advanced way to detect the domain it is calling and then use it to have contextual titles.

TODO:

Update to jQuery v4
Proper “jump to” nav
Update Gulp task
Gulp alternative

License

FREEEEEEEEEE

More of me

This site is open source. Improve this page.