A11y_.NET Websites_Benchmark_In Browser Tutorial_AI4W:Ensures <iframe> and <frame> elements contain a non-empty title attribute (iframe)

[harshgangrade111]

Environment Details: Application Name: .NET Websites. #URL:https://dotnet.microsoft.com/ Browser Versions: Microsoft Edge 44.18362.449.0 Windows Version: Windows10 Chrome Version 79.0.3945.130

Example Page URL: https://dotnet.microsoft.com/learn/dotnet/in-browser-tutorial/1

Repro Steps: 1)Launch DotNet website application using URL: https://dotnet.microsoft.com/ 2)Click on Learn link from the top navigation. 3) Click on Browser Tutorial link from the "Get started section". 4)"In Browser Tutorial" screen gets open. 5)Open chrome and run AI4W and check the issue.

Issue: Ensures

Target application: In-Browser Tutorial - Step 1 - https://dotnet.microsoft.com/learn/dotnet/in-browser-tutorial/1

Element path: #default-iframe;iframe Snippet:

How to fix: Fix any of the following: aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute or the title attribute is empty Element's default semantics were not overridden with role="presentation"

Element's default semantics were not overridden with role="none"

Environment: Chrome version 79.0.3945.130

This accessibility issue was found using Accessibility Insights for Web 2.13.1 (axe-core 3.3.2), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

Same issue observed in the following page: Same Issue Observed in whole application.

Attachment:

“Check out Accessibility Insights! - Identify accessibility bugs before check-in and make bug fixing faster and easier.”

#A11yTCS; #.NET Websites; #A11y_.NET Websites_Benchmark; #Win10; #Edge; #WCAG2.4.1; #Chrome; #A11yAuto; #DesktopWeb; #AI4W;

[terrimorton]

@LadyNaggaga Hi Maria, do you have an ETA on remediation? This bug (as well as #851 are blocking the accessibility compliance for dotnet.microsoft.com

[terrimorton]

Walked through this with Guy Barker on 4/23/2021 and it still repros.

[terrimorton]

From Scott O'Hara 8/12/2021:

Aria-hidden=true wouldn’t work here, as while it would suppress the announcement of the ‘frame’ itself, the contents of the frame would continue to be exposed to screen readers.

However, if this can be set to hidden via CSS display: none; or visibility: hidden; or by using HTML’s hidden attribute (which would then apply a lower-specificity user agent CSS display: none) those options would properly hide the iframe and its contents from assistive technologies.

I would suggest investigating those options as a solution to this issue, because even placing this iframe somewhere else in the DOM without hiding it from the browser’s accessibility tree would mean that the visually hidden content would still exist, but just in a different location.

[Shivamd1]

GitHubTags:#P2-TrydotNetWebsite-Aug21;#A11yMAS;#A11yTCS;

[Jtith]

GitHubTags:#A11ySev3;

Note: As per discussion with SME lowering the severity.