There are many times where a screen reader user will just choose to ignore graphics. It is great when a graphic includes the correct descriptive alternative text that tells the screen reader what the graphic contains. The screen reader speaks or displays in braille this descriptive text so that the person reading that web page, document, email, etc. can have a good idea about what’s in that graphic.
Beyond Alt Text
What if you wanted more than just a label tacked on to a graphic? Let’s talk about why you would want this.
Say you had a screenshot on a webpage that had information that you wanted to read. Perhaps the alt text simply said: “Windows Dialog”. What if the window in question said this:
“Are you sure you want to permanently delete this file?”?
That line of text would significantly increase your understanding of what you were reading! Now let’s learn how you can unveil graphics yourself with all three major screen readers.
Optical Character Recognition (OCR)
This is a technique that takes a graphic and tries to decipher the textual information within it. This process isn’t 100% accurate due to various factors such as quality of the graphic, type of OCR engine being used to extract the text, and so on. Therefore, results can vary wildly.
OCR By Example
For this example, I’ll be using the Apple Card page. This page has several graphics that have fantastic alt text, but if we OCR them we get just a bit more info.
First, Narrator doesn’t perform OCR at this point, but we’ll come back to Narrator.
With Jaws or NVDA, go to the page linked to above. It will open in a new tab. You will be able to switch between this page and the existing page by pressing CONTROL+TAB. This should work in all browsers.
Once on the page, press the letter G to jump to the first graphic. You should hear the following:
“Wallet app showing the gradient colors of Apple Card. And the Apple Pay Cash card. The image transitions to the dashboard of Apple Card, showing details like total balance and payment due. graphic”
If you are using NVDA, just press NVDA+R. This will tell NVDA to perform OCR on that graphic. When you do this, you will get something like the following:
“Coming This Summer
Apple Card – Apple
View Graphics with a .”
If you are using Jaws you will need to press the following:
JAWS KEY+SPACE, followed by the letters O, then C. This will tell Jaws to perform OCR on that graphic. Sometimes Jaws will think the control is the entire page and not the graphic, so you may need to move off of the graphic, then back on to it, and perform those keystrokes again.
Jaws and Narrator can attempt to describe a graphic rather than simply performing OCR. This is done through various AI services online.
If you are using Jaws, press JAWS KEY+SPACE, followed by the letters P, then C. This will tell Jaws to try and fetch a description of the picture.
If you use Narrator, press CONTROL+NARRATOR+D.
NVDA has a few add-ons that can do this as well, but right now they aren’t as easy to use as Narrator or Jaws.
Jaws and Graphical PDF Files
Jaws has one other really handy feature when it comes to dealing with PDF files that are comprised of an image. If you open the file in Adobe Reader, you will be asked if you want to have Jaws OCR the PDF for you. All you need to do is to hit the Yes button, and Jaws will process the PDF file for you. The resulting PDF will be in a virtual window so you can read it as if it were a webpage. You can also copy the text and paste it somewhere else if you’d like.
Because Jaws has extra features when it comes to OCR, image descriptions, and PDF files, I’m listing the keyboard commands from Jaws help below for you. To use any of the following commands, you must first press JAWS KEY+SPACE, then the letter O for OCR.
The following commands are available in the OCR layer.
- Acquire and OCR a print document from a Scanner or Freedom Scientific Camera such as PEARL, using the letter A.
- OCR a scanned PDF Document opened in Acrobat Reader using the letter D.
- From Windows Explorer, you can OCR any Image File using the letter F.
- From the computer screen itself, you can OCR a Control with C, Window with W, or the entire Screen with S.
- You can press Q to quit or cancel an OCR job.
Now for the image describer, you must press JAWS KEY+SPACE followed by the letter P before any of the below commands.
The following commands are available in the Picture Smart layer.
- Acquire and describe an image from a Scanner or Freedom Scientific Camera such as PEARL, using the letter A.
- From Windows Explorer, you can describe any image file using the letter F.
- From the computer screen or application, you can describe a Control with the letter C.
- An image on the clipboard can be described using the letter B.
- An image can be described by saving it to the “PictureSmart” directory underneath the “My Pictures” folder.
Grab Those Graphics
Now at least you’ll have something to do with graphics other than ignore them, Unless you want to ignore them, that is. If you need that extra bit of information, now you’ll have some extra tools to add to your belt.
DanAugust 16, 2022
So much of this just doesn’t work as you’d expect. Going through an online textbook on python where most code snippets are images? a single character switched from ! to i defeats the entire point. Adding or removing a space, altering a single thing from the exact text makes the entire thing useless. OCR has always been completely unhelpful in any situation I’ve ever come across where I needed it.
WebFriendlyHelpAugust 28, 2019
Yes I have tried the google graphic OCR and it works very well. It’s nice that you don’t have to do anything to make this happen.
michael babcockAugust 27, 2019
And in the latest version of Chrome, I presume in edge beta soon, you can press the applications key on a graphic and have Google recognized the graphic, the option is also available to always be enabled…..
thanks for the NVDA+R keystroke.
keep up the wonderful work.
MikeyAugust 21, 2019
NVDA + R U serious??!! I had no idea it had built-in OCR. Very cool! 🙂