In browser spellchecking

“Necessity is the mother of invention”

Frank Zappa and the mothers of inventionWe 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 ;-).

Enabling spellchecking on a web page is pretty simple, it requires adding 2 attributes (contenteditable and spellcheck) to the body element:

<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:

sentence with the word 'memberhip' underlined, should be 'membership'.

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 :

screenshot of the firefox DOM inspector displaying the spelling invalid property on the 'memberhip' text.

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.
JavaScript Bookmarklet code:

javascript:document.body.contentEditable='true';document.body.spellcheck='true';void%200

Adding the code to the href attribute of an a element, produces the spell check bookmarklet:

spell check

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!

Further reading

How do I use the Firefox spell checker?

Categories: Development

About Steve Faulkner

Steve was the Chief Accessibility Officer at TPGi before he left in October 2023. He joined TPGi in 2006 and was previously a Senior Web Accessibility Consultant at vision australia. Steve is a member of several groups, including the W3C Web Platforms Working Group and the W3C ARIA Working Group. He is an editor of several specifications at the W3C including ARIA in HTML and HTML Accessibility API Mappings 1.0. He also develops and maintains HTML5accessibility and the JAWS bug tracker/standards support.

Comments

Madeleine Rothberg says:

This is terrific! Thank you. I’m now using the bookmarklet in FF. One step I found I need to take is that after I select the bookmarklet on my bookmark bar, I need to click into the body of the document to get the red box and sqigglies to appear.

Steve Faulkner says:

Thanks Madeleine, yes i forgot to mention that step.