It is not a complete evaluation of accessibility. "Easy Checks - A First Review of Web Accessibility" gives you step-by-step instructions to get a rough idea of the accessibility of any web page.Īn arrow moves from left to right to point a list of checks.įor example, a web page from your own website, from your competitor, or from suppliers you might want to work with. Icons around a computer: hand eye brain ear and mouth with sound waves. The words new and non-technical are displayed. CSS has a pseudo-element called ::selection to do just that, and it’s supported across all browsers.Even if you are new to web accessibility and not technical, you can check some aspects of accessibility yourself.Ī person in front of the computer checking a website with passes and fails. The last piece of the puzzle is to style this range. Then, set the current selection to this range.ĭocument.getSelection().removeAllRanges() Here is an example: // First, create a Range object. It turns out that you can also create a text selection programmatically from JavaScript. You should see location information about the selected text. In fact, try selecting text on this page right now, and then run document.getSelection() in the DevTools console. When you use your pointing device to select a piece of text in a web page, a Selection object is automatically created. Probably the most well-known style-able text range is the user selection. but if you’re Potential Solution #1: Style-able Text Ranges We’ll review them first and then take a look at the upcoming CSS Custom Highlight API that can change it all. creating your own text highlighting system.styling text range pseudo-elements, and.
There are two common solutions to this, including: Indeed, this requires being able to correctly highlight multiple ranges of text across an arbitrarily complex DOM tree, and possibly crossing the boundaries of DOM elements. We aren’t just wrapping text in a with a class and applying some CSS. It has probably costed many people a lot more time than it should have. The find command highlights found text automatically.īut what about when we want to do this type of styling ourselves? Doing this on the web has been a common problem for a long time. Editable areas (like a ) get spelling squiggles automatically. The browser itself often handles these styling situations. Try pressing Ctrl/ ⌘+ F in your web browser right now and type in some text from this article.
Code editors like VS Code do the same for code errors.Īnother very common use case for highlighting text is search and highlight, where you’re given a text input box and typing in it searches matching results on the page, and highlights them.
One example: if you’ve ever used text editing software like Google Docs, Word, or Dropbox Paper, you’ll see they detect spelling and grammar errors and displaying nice little squiggly underlines below them to attract attention. Thankfully, we have the CSS Custom Highlight API to look forward to because it represents the future of styling text ranges on the web. Styling ranges of text in software is a very useful thing to be able to do.