equalizedigital / accessibility-checker

GNU General Public License v2.0
14 stars 8 forks source link

Element not found by front end highlighting: Ambiguous anchor text on a link created by the Instagram Feed Pro Developer plugin #98

Closed amberhinds closed 1 year ago

amberhinds commented 1 year ago

This is the URL of the page: https://amberhinds.com/about/

This is the code snippet: <a class="sbi_link_area nofancybox" href="https://scontent-sea1-1.cdninstagram.com/v/t51.29350-15/321794589_908306656965379_4945048288022470586_n.webp?stp=dst-jpg&_nc_cat=100&ccb=1-7&_nc_sid=8ae9d6&_nc_ohc=_Hs4jWS8m9YAX8UA84-&_nc_ht=scontent-sea1-1.cdninstagram.com&edm=AM6HXa8EAAAA&oh=00_AfBM_Z-vkEO2tnli8z1E3lwbpXcQuCnsI4lNdRRIMdqwsw&oe=63E898B8" rel="nofollow noopener" data-lightbox-sbi="" data-title="I started a podcast with Chris and our business partner, Steve! We'll be releasing episodes every Monday on website accessibility and craft beverages. Check it out or subscribe at AccessibilityCraft.com.<br> <br> #podcast #podcaster #accessibility #accessibilityforall #accessibilitymatters #accessible #a11y #WordPress #webdesign #webdevelopment #websitedesign #ux #usability" data-video="" data-carousel="" data-id="sbi_18244796467156171" data-user="aucoeur" data-url="https://www.instagram.com/p/CoWLLuZug3L/" data-avatar="https://scontent-ort2-2.xx.fbcdn.net/v/t51.2885-15/118211725_3205994962812334_2276918356355012819_n.jpg?_nc_cat=104&ccb=1-7&_nc_sid=86c713&_nc_ohc=q3-uKlfJ8lUAX8pPQ-1&_nc_ht=scontent-ort2-2.xx&edm=AL-3X8kEAAAA&oh=00_AT859PhoUgvzWeeja3bQmwR79zaLmjyvfwl72BcJziV29Q&oe=63103A73" data-account-type="business" data-iframe='' data-media-type="feed" data-posted-on=""> <span class="sbi-screenreader">Open</span> </a>

Screenshots:

Ambiguous anchor text error

This is the actual element on the page

Element on page with dev tools open
amberhinds commented 1 year ago

I bet this doesn't show because what's being flagged it the hidden screen reader text rather than the parent element?

amberhinds commented 1 year ago

Actually it also can't find the images themselves. This, for example, flags a long alternative text warning and cannot be found.

<img src="https://amberhinds.com/wp-content/plugins/instagram-feed-pro/img/placeholder.png" alt="Halloween 2022. Two witches, a murderous cat, and a creepy Victorian doll. Zara's costume was my favorite this year - Nora did her makeup and she wore my flower girl dress from my mom and step-dad's wedding. She might have worn it better. šŸ˜‚">

So it may be something related to Instagram Feed Pro.

SteveJonesDev commented 1 year ago

Screen Shot 2023-04-07 at 2 25 47 PM This section is a little odd because it changes and requires a post update to get the current photos. After resaving the page and adding a regular expression to remove white space the plugin is able to find the element.

https://github.com/equalizedigital/accessibility-checker/commit/0bbc49b6b86f8a2a79df09009e9caca52cb883e8

SteveJonesDev commented 1 year ago

It's not find the image because the alt attributes don't exactly match.

Halloween 2022. Two witches, a murderous cat, and a creepy Victorian doll. Zara's costume was my favorite this year - Nora did her makeup and she wore my flower girl dress from my mom and step-dad's wedding. She might have worn it better. šŸ˜‚

Halloween 2022. Two witches, a murderous cat, and a creepy Victorian doll. &lt;br&gt; &lt;br&gt; Zara&#039;s costume was my favorite this year - Nora did her makeup and she wore my flower girl dress from my mom and step-dad&#039;s wedding. She might have worn it better. šŸ˜‚

SteveJonesDev commented 1 year ago

The escaped html is causing them not to match.