“Necessity is the mother of invention”
We have changed our Quality Assurance (QA) methods recently at TPGi and now require a screen reader friendly method to find spelling errors in HTML content displayed in the browser. I first looked at extensions for Firefox and Chrome and found them wanting. Then looked at bookmarklets as these are lightweight, don’t require installs and don’t require enabling permissions to snoop on your data ;-).
<body contenteditable="true" spellcheck="true">
What effect do these attributes have?
contenteditable makes any content in the subtree of an element editable, this allows the spellcheck attribute to do its magic. So by placing
contenteditable on the
body element, all of the content displayed in a page becomes editable and thus spell checkable.
spellcheck enables the browser’s built in spellchecker (if it has one) to check and indicate any spelling errors found in editable content.
In Firefox, for example, any spelling errors are identified visually with a squiggly underline:
Just as importantly, a misspelled word is identified (in Firefox) via iAaccessible2 accessibility API Text attributes with an invalid property, with a value of spelling :
This means that screen reader software such as JAWS and NVDA announces the presence of misspelt words.
The spell check bookmarklet
Anybody who knows how can open up a browser’s developer tools and add the
contenteditable/spellcheck attributes to the
body element of the currently displayed page, but that is a hassle. It’s much easier to add these attributes via a bookmarklet.
Adding the code to the
href attribute of an
a element, produces the spell check bookmarklet:
Simply drag the bookmarklet onto your bookmarks bar, or select ‘Bookmark this link’ from the link context menu, and press the bookmark when on a page you wish to spell check. That’s it, done!