WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: How to dynamically fix thousands of images missing alt attributes using regular expression find and replace

for

From: Bryan Garaventa
Date: Jun 18, 2019 7:21PM

Hi,
Sorry for replying late to these responses, I haven't had a chance to review them until today. I didn't realize the can of worms I was opening when I originally sent this.

First, there is no way to create a regular expression search and replace algorithm that will fix all of the possible scenarios that might be problematic, or possibly misapplied on images that are meant to be informative. Human judgement is too subjective for that, and no automatic process can fix this.

However, the tool that I was sharing wasn't meant to fix peoples problems automatically and make them go away, but rather to show a simple method for identifying and reviewing images that don't include alts, and even replace them in bulk to correct this when necessary.

It is difficult to scan a full website including hundreds of files to locate and correct possibly thousands of images, but most projects are not actually that large and the process is typically manageable, as long as there is a simple and effective workflow for doing this.

I don't buy into the view that no alt is best because we need to rely on the image file name for accessibility, because if developers are using this technique to fix something, then they need to fix it properly everywhere. I didn't create the FNR application, but it actually does provide a simple process for doing this in a way that does result in accessible results for a full website.

E.G. Workflow for correcting unlabeled images across an entire site.

1. Within FNR, select the root folder of the site to scan, enter the RegExp (<img(?!.*?alt=(['"]).*?2)[^>]*?)(/?>) that will target images that don't include alts, check the Use Regular Expression checkbox, and activate the "Find Only" button. This will generate a table of matches for every file that includes a match for this algorithm.

2. Set focus to the results table, and press Up/Down to scroll, or click the row you want to review, and look at the preview pane that is displayed next to the table. This will show you exactly what the match was referring to.

3. If the image markup in the preview pane looks like it needs to be informative, open the file specified in the "Path" column, and fix it. Otherwise, ignore all of the images that are meant to be decorative and move onto the next ones in the table.

4. After all the informative images are manually fixed, activate the "Find Only" button, and make sure that none of the fixed images now appear in the search results. You should only see results for all images that are not meant to be informative.

5. Now, within the Replace field, enter $1 alt="" $3 as specified in the ReadMe file, and activate the Replace button. This will then add alt="" to all images that still lack alt attributes.

It's true that this does require a bit of work, but it is much simpler and faster than having to manually fix thousands of decorative images manually instead, which nobody ever does.

For some reason the preview pane isn't in the tab order, so for the JAWS scripts, I added the hotkey Alt+P to move focus to that field after making a selection in the results table.

All of the following hotkeys are assigned for JAWS users within the fnr.jkm file for non-sighted screen reader users.

Alt+R=MoveToReplaceField
Alt+S=MoveToSearchEdit
Control+B=MoveToBrowseBtn
Alt+E=MoveToExcludeEdit
Alt+M=MoveToFileMaskEdit
Alt+F=MoveToFindField
Control+R=MoveToReplaceBtn
Control+F=MoveToFindBtn
Alt+V=MoveToResultsField
Alt+P=MoveToPreviewField

Hopefully this explains things a bit.

All the best,
Bryan




Bryan Garaventa
Principal Accessibility Architect
Level Access, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.LevelAccess.com