E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 13 (In chronological order)

From: Bryan Garaventa
Date: Fri, Jun 14 2019 9:49AM
Subject: How to dynamically fix thousands of images missing alt attributes using regular expression find and replace
No previous message | Next message →

Hi,
I think a while back somebody on the list asked if it were possible to dynamically update img elements across thousands of files and have the process update the tags to make them compliant with null alts, but I don't recall it ever being answered.

I've included instructions for doing this in the archive at
https://github.com/accdc/fnr-for-jaws

Included are JAWS scripts for making the UI for FNR more accessible.

All the best,
Bryan


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

From: Jared Smith
Date: Fri, Jun 14 2019 10:13AM
Subject: Re: How to dynamically fix thousands of images missing alt attributes using regular expression find and replace
← Previous message | Next message →

> have the process update the tags to make them compliant with null alts

Automatically adding alt="" to all inaccessible images is not akin to
making them "compliant" or accessible. This would instead simply stop
tools from flagging them as obvious accessibility failures - and that
would subsequently make it much more difficult for them to actually be
assigned appropriate alternative text.

Extending this tool to instead display the image (optimally in its
context) and prompting for appropriate alternative text would be much
more effective for supporting image accessibility.

Jared

From: Bryan Garaventa
Date: Fri, Jun 14 2019 10:21AM
Subject: Re: How to dynamically fix thousands of images missing alt attributes using regular expression find and replace
← Previous message | Next message →

Thanks, that's true enough.

From what I recall though, the original person was asking how to update the alts for thousands of spacer images that are not informative, and it is impossible to do this manually one by one.

Either way, please feel free to contribute if anybody wishes to update the RegExp to make this work better. :)

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

From: Jared Smith
Date: Fri, Jun 14 2019 12:59PM
Subject: Re: How to dynamically fix thousands of images missing alt attributes using regular expression find and replace
← Previous message | Next message →

> From what I recall though, the original person was asking how to update the alts for thousands of spacer images that are not informative, and it is impossible to do this manually one by one.

This makes more sense. This could be useful for fixing these. The
concern is that if a web sites has thousands of spacer images without
an alt attribute, they almost certainly have loads of images that
should have alt text defined. These would get caught up in the mix and
be given alt="".

One relatively simple improvement I would recommend is to detect if
the image is inside a link. Such images should never have alt="", so
it would be best to omit these.

Thanks,

Jared

From: Steve Green
Date: Fri, Jun 14 2019 1:04PM
Subject: Re: How to dynamically fix thousands of images missing alt attributes using regular expression find and replace
← Previous message | Next message →

That's not quite true - images in links can have alt="" as long as the link also contains text. I can see this regular expression getting quite complicated!

Steve

From: Jared Smith
Date: Fri, Jun 14 2019 1:11PM
Subject: Re: How to dynamically fix thousands of images missing alt attributes using regular expression find and replace
← Previous message | Next message →

> That's not quite true - images in links can have alt="" as long as the link also contains text.

Indeed. Or they could instead have an ARIA label. Or a title attribute
value. Or be hidden altogether and have tabindex="-1". Or...

This just underscores the potential difficulties of using such find
and replace (or overlay) techniques that don't consider the specific
instances of (in)accessibility.

Jared

From: Birkir R. Gunnarsson
Date: Fri, Jun 14 2019 1:40PM
Subject: Re: How to dynamically fix thousands of images missing alt attributes using regular expression find and replace
← Previous message | Next message →

They might be able to identify space images based on filenames or
filename patterns, e.g. spacer.gif, arro.gif etc.
An overlay wouldn't be smart enough to know this but it could generate
a Reg Ex based on input from the user of suspect filenames.
I wonder if anyone has actually done analysis on the ratio of
informational to decorative/formatting images on websites in general.



On 6/14/19, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
>> That's not quite true - images in links can have alt="" as long as the
>> link also contains text.
>
> Indeed. Or they could instead have an ARIA label. Or a title attribute
> value. Or be hidden altogether and have tabindex="-1". Or...
>
> This just underscores the potential difficulties of using such find
> and replace (or overlay) techniques that don't consider the specific
> instances of (in)accessibility.
>
> Jared
> > > > >


--
Work hard. Have fun. Make history.

From: Jonathan Avila
Date: Fri, Jun 14 2019 2:11PM
Subject: Re: How to dynamically fix thousands of images missing alt attributes using regular expression find and replace
← Previous message | Next message →

Jared, can you explain what your thought is why images within a link should never have alt=""? Do you mean if the link has no other accessible name that would make sense but if the link had another accessible name that provided the purpose then the alt would be overwritten and so alt="" would be appropriate.

Jon

Sent from my iPhone

> On Jun 14, 2019, at 3:00 PM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
>
> CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.
>
>
>> From what I recall though, the original person was asking how to update the alts for thousands of spacer images that are not informative, and it is impossible to do this manually one by one.
>
> This makes more sense. This could be useful for fixing these. The
> concern is that if a web sites has thousands of spacer images without
> an alt attribute, they almost certainly have loads of images that
> should have alt text defined. These would get caught up in the mix and
> be given alt="".
>
> One relatively simple improvement I would recommend is to detect if
> the image is inside a link. Such images should never have alt="", so
> it would be best to omit these.
>
> Thanks,
>
> Jared
> > > >

From: John Foliot
Date: Fri, Jun 14 2019 2:15PM
Subject: Re: How to dynamically fix thousands of images missing alt attributes using regular expression find and replace
← Previous message | Next message →

+1 to Jon

< a href="___"><img src="jared.jpg" alt=""> Jared Smith</a> ;-)

JF

On Fri, Jun 14, 2019 at 3:12 PM Jonathan Avila < = EMAIL ADDRESS REMOVED = >
wrote:

> Jared, can you explain what your thought is why images within a link
> should never have alt=""? Do you mean if the link has no other accessible
> name that would make sense but if the link had another accessible name that
> provided the purpose then the alt would be overwritten and so alt="" would
> be appropriate.
>
> Jon
>
> Sent from my iPhone
>
> > On Jun 14, 2019, at 3:00 PM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
> >
> > CAUTION: This email originated from outside of the organization. Do not
> click links or open attachments unless you recognize the sender and know
> the content is safe.
> >
> >
> >> From what I recall though, the original person was asking how to update
> the alts for thousands of spacer images that are not informative, and it is
> impossible to do this manually one by one.
> >
> > This makes more sense. This could be useful for fixing these. The
> > concern is that if a web sites has thousands of spacer images without
> > an alt attribute, they almost certainly have loads of images that
> > should have alt text defined. These would get caught up in the mix and
> > be given alt="".
> >
> > One relatively simple improvement I would recommend is to detect if
> > the image is inside a link. Such images should never have alt="", so
> > it would be best to omit these.
> >
> > Thanks,
> >
> > Jared
> > > > > > > > > > > > >


--
*​John Foliot* | Principal Accessibility Strategist | W3C AC Representative
Deque Systems - Accessibility for Good
deque.com

From: Jared Smith
Date: Fri, Jun 14 2019 2:55PM
Subject: Re: How to dynamically fix thousands of images missing alt attributes using regular expression find and replace
← Previous message | Next message →

> I wonder if anyone has actually done analysis on the ratio of
> informational to decorative/formatting images on websites in general.

From the WebAIM Million Report (https://webaim.org/projects/million/):

- 18.5% of all images were linked images (meaning no other text within
the link) with missing alt or alt="" (and no other accessible name).

- An additional 15.1% of images had no alt attribute value or other
accessible name, for a total of 33.6% of images with obvious
alternative text failures.

- 13.6% of images had alt="" in cases where this *might* be valid.
It's difficult to know if these were actually decorative, but only
1.2% of images had alt="" and also a filename that would indicate it
is probably a spacer image.

- 53% of images had been given alternative text (non-empty alt
attribute). 20% of these had likely problematic alt text such as
"image", alt that duplicated adjacent text, very long alt values, etc.

Jon and John, I believe I addressed this previously - I meant to
suggest that the logic should check if the image is the ONLY thing
inside a link. But even if there were text within the link,
automatically giving such images alt="" is not always appropriate.

Thanks,

Jared

From: Birkir R. Gunnarsson
Date: Fri, Jun 14 2019 3:24PM
Subject: Re: How to dynamically fix thousands of images missing alt attributes using regular expression find and replace
← Previous message | Next message →

Oh duh, I should've remembered that this info was part of the WebAIM
million report (one of the coolest things in accessibility this year).


On 6/14/19, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
>> I wonder if anyone has actually done analysis on the ratio of
>> informational to decorative/formatting images on websites in general.
>
> From the WebAIM Million Report (https://webaim.org/projects/million/):
>
> - 18.5% of all images were linked images (meaning no other text within
> the link) with missing alt or alt="" (and no other accessible name).
>
> - An additional 15.1% of images had no alt attribute value or other
> accessible name, for a total of 33.6% of images with obvious
> alternative text failures.
>
> - 13.6% of images had alt="" in cases where this *might* be valid.
> It's difficult to know if these were actually decorative, but only
> 1.2% of images had alt="" and also a filename that would indicate it
> is probably a spacer image.
>
> - 53% of images had been given alternative text (non-empty alt
> attribute). 20% of these had likely problematic alt text such as
> "image", alt that duplicated adjacent text, very long alt values, etc.
>
> Jon and John, I believe I addressed this previously - I meant to
> suggest that the logic should check if the image is the ONLY thing
> inside a link. But even if there were text within the link,
> automatically giving such images alt="" is not always appropriate.
>
> Thanks,
>
> Jared
> > > > >


--
Work hard. Have fun. Make history.

From: Isabel Holdsworth
Date: Tue, Jun 18 2019 5:43AM
Subject: Re: How to dynamically fix thousands of images missing alt attributes using regular expression find and replace
← Previous message | Next message →

Arrow images shouldn't always have null alt attributes. Sometimes
knowing that there's an arrow image is the only way of working out
that a bunch of elements is visually styled to look like a list. I
know this would still constitute a WCAG fail, but something is better
than nothing, right?

On 14/06/2019, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
> Oh duh, I should've remembered that this info was part of the WebAIM
> million report (one of the coolest things in accessibility this year).
>
>
> On 6/14/19, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
>>> I wonder if anyone has actually done analysis on the ratio of
>>> informational to decorative/formatting images on websites in general.
>>
>> From the WebAIM Million Report (https://webaim.org/projects/million/):
>>
>> - 18.5% of all images were linked images (meaning no other text within
>> the link) with missing alt or alt="" (and no other accessible name).
>>
>> - An additional 15.1% of images had no alt attribute value or other
>> accessible name, for a total of 33.6% of images with obvious
>> alternative text failures.
>>
>> - 13.6% of images had alt="" in cases where this *might* be valid.
>> It's difficult to know if these were actually decorative, but only
>> 1.2% of images had alt="" and also a filename that would indicate it
>> is probably a spacer image.
>>
>> - 53% of images had been given alternative text (non-empty alt
>> attribute). 20% of these had likely problematic alt text such as
>> "image", alt that duplicated adjacent text, very long alt values, etc.
>>
>> Jon and John, I believe I addressed this previously - I meant to
>> suggest that the logic should check if the image is the ONLY thing
>> inside a link. But even if there were text within the link,
>> automatically giving such images alt="" is not always appropriate.
>>
>> Thanks,
>>
>> Jared
>> >> >> >> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > > >

From: Bryan Garaventa
Date: Tue, Jun 18 2019 7:21PM
Subject: Re: How to dynamically fix thousands of images missing alt attributes using regular expression find and replace
← Previous message | No next message

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 ADDRESS REMOVED =
415.624.2709 (o)
www.LevelAccess.com