adobe/aem-guides-wknd

[Accessibility][Sample Content] Page contains duplicate IDs

gabrielwalt opened this issue · 0 comments

gabrielwalt commented

Environment

Testing Application - Adobe Experience Manager
Authentication State - Logged in
Url - https://author-p35316-e137331.adobeaemcloud.com/sites.html/content
Operating System - Windows 10
Browser - Chrome Version 93.0
Assistive Technology - N/A
Context - Desktop

Steps to Reproduce

  1. Launch the 'Adobe Experience Manager' application.
  2. Sign in with the Email and Password (registered email).
  3. 'AEM Start' page will appear.
  4. Activate the 'Sites' link.
  5. AEM Sites' page will appear.
  6. Select the 'WKND Site' option.
  7. WKND Site | AEM Sites page will appear.
  8. Select the 'United States' option.
  9. United States | AEM Sites page will appear.
  10. Select the 'WKND Adventures and Travel' option.
  11. WKND Adventures and Travel | AEM Sites page will appear.
  12. Select the 'About US' option and activate the 'Edit' button.
  13. Expand the 'Select another mode' button and select the layout mode option.
  14. Run Axe DevTools and observe the issue related to the id attribute.

Expected Results

The id attribute value MUST be unique.

Actual Results

The same id attribute: 'featured-article-magazine' is used for multiple elements.

Affected user population

Without Vision, With Limited Vision, With Limited Manipulation, With Limited Reach and Strength, With Limited Language, Cognitive, and Learning Abilities

Applicable WCAG SC

4.1.1 Parsing (Level A)

Source Code

<div id="featured-article-magazine" class="cmp-teaser cq-dd-image" data-cmp-data-layer="{"featured-article-magazine":{"@type":"wknd/components/teaser","repo:modifyDate":"2020-10-01T00:38:06Z","dc:title":"Camping in Western Australia","dc:description":"The Australian West coast is a camper’s heaven. Endless miles of desert roads leading to secret beaches, vast canyons and crystal clear rivers, and the very few people you are likely to meet on your journey will be some of the most easy-going characters you’ll find anywhere in the world. ","xdm:linkURL":"/content/wknd/us/en/magazine/western-australia.html"}}">

<div data-cmp-lazy="" data-cmp-lazythreshold="0" data-cmp-src="/content/wknd/us/en/magazine/_jcr_content/root/container/teaser_main.coreimg.60

{.width}

.jpeg/1601512686643/adobestock-156407519.jpeg" data-cmp-widths="100,200,300,400,500,600,700,800,900,1000,1100,1200,1600" data-asset="/content/dam/wknd/en/magazine/western-australia/adobestock_156407519.jpeg" data-title="The Lennard River" id="featured-article-magazine" data-cmp-data-layer="{"featured-article-magazine":{"@type":"wknd/components/image","repo:modifyDate":"2020-10-01T00:38:06Z","dc:title":"The Lennard River","image":{"repo:id":"8523d56e-3162-4115-82c4-2d62b66ae299","repo:modifyDate":"2019-10-25T23:49:37Z","@type":"image/jpeg","repo:path":"/content/dam/wknd/en/magazine/western-australia/adobestock_156407519.jpeg","xdm:tags":[],"xdm:smartTags":{"forest":0.5667715668678284,"cliff":0.658491849899292,"trees":0.5757741332054138,"sea":0.6943408250808716,"rock":0.7393285632133484,"mountain":0.7090338468551636,"rocks":0.6167906522750854,"national":0.5690240263938904,"bay":0.5881795287132263,"park":0.6114629507064819,"sky":0.6750227212905884,"coastline":0.5725753903388977,"green":0.6239610910415649,"nature":0.7425461411476135,"water":0.740231990814209,"stone":0.606239378452301,"coast":0.6055198311805725,"canyon":0.6321456432342529,"blue":0.6792822480201721,"ocean":0.5781607031822205,"beach":0.6434576511383057,"river":0.7572242021560669,"travel":0.6551820039749146,"lake":0.6462036967277527,"landscape":0.748092532157898}}}}" class="cmp-image cq-dd-image" itemscope="" itemtype="http://schema.org/ImageObject">

<img class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="The Lennard River carves a stunning canyon through the Napier Range at Windjana Gorge, Kimberley Region, Western Australia. The permanent pools in the river provide a permanent habitat for dozens of freshwater crocodiles. Rudyards Kipling's story "The Elephant Child," comes to mind every time I visit Windjana Gorge in the Kimberley, when the Elephant child says: "and still I want to know what the Crocodile has for dinner!'Then Kolokolo Bird said, with a mournful cry, 'Go to the banks of the great grey-green, greasy Limpopo River, all set about with fever-trees, and find out."At Windana Gorge the green waters of the gorge pools are filled with Johnston crocodiles floating in the tepid green waters or resting on the hot sand banks.They add a real air of wild Australia below the complex and colourful ramparts of the Gorge where the Leonard River flows through the ancient Devonian reefs.The history of the renegade aboriginal tracker Jandamarra who hid in caves in this gorge and the screeching of the galahs circling overhead and wheeling about amongst the crags further adds to the primeval atmosphere of this special place in Australia." title="The Lennard River" src="/content/wknd/us/en/magazine/_jcr_content/root/container/teaser_main.coreimg.60.800.jpeg/1601512686643/adobestock-156407519.jpeg">

<meta itemprop="caption" content="The Lennard River">
</div>

<a class="cmp-teaser__action-link" href="/content/wknd/us/en/magazine/western-australia.html" id="featured-article-magazine-cta-9e2740aa09" data-cmp-data-layer="{"featured-article-magazine-cta-9e2740aa09":{"@type":"wknd/components/teaser/cta","dc:title":"Read More","xdm:linkURL":"/content/wknd/us/en/magazine/western-australia.html"}}" data-cmp-clickable="">Read More</a>

Remediation recommendation

Fix this issue by ensuring that all ID values on a page are unique for all page content in the DOM, regardless of whether it is visible or it is hidden using CSS or ARIA.

REFERENCE:
Deque University: https://dequeuniversity.com/class/semantic-structure2/parsing-and-validity/conflicts-and-duplicates