In browser spellchecking

Posted on Thursday, 9 February 2017 by Steve Faulkner

“Necessity is the mother of invention”

Frank Zappa and the mothers of inventionWe have changed our Quality Assurance (QA) methods recently at TPG 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?

About Steve Faulkner

Steve is the Senior Web Accessibility Consultant and Technical Director, TPG Europe. He joined The Paciello Group in 2006 and was previously a Senior Web Accessibility Consultant at vision australia. He is the creator and lead developer of the Web Accessibility Toolbar accessibility testing tool. 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 HTML 5.1, ARIA in HTML, Notes on Using ARIA in HTML and HTML5: Techniques for providing useful text alternatives. He also develops and maintains HTML5accessibility.

Comments

  1. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *