dotnet / aspnetcore

ASP.NET Core is a cross-platform .NET framework for building modern cloud-based web applications on Windows, Mac, or Linux.

Home Page:https://asp.net

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

A11y_.NET Core_ASP.NETCore_WebAppLogin_ScreenReader: NVDA is not announcing the status message after login with invalid attempt.

Swati1700 opened this issue · comments

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

GitHubTags:#A11yMAS;#A11yTCS;#.NET Core[aspnetcore]-Win32-June2022;#.NET Core;#A11ySev2;#WCAG3.3.1.;#DesktopWeb;#Win11;#NVDA;#Narrator;#Benchmark;#Chrome;#ChromiumEdge; #Closed;

Environment Details:

.NET Core
ASP.NET Core
Operating System: Windows 11 Enterprise 21H2
Chrome version: Version 102.0.5005.115 (Official Build) (64-bit)
Chromium Edge: Version 104.0.1293.1 (Official build) dev (64-bit)

Steps to Reproduce:

  1. open command prompt
  2. Create a folder using command "mkdir foldername" e.g. "mkdir WebApp"
  3. move to the created directory using command "cd foldername"
  4. run the following command "dotnet new webapp -au Individual" and hit enter.
  5. run the following command "dotnet run"
  6. Copy the First URL link from Command prompt and copy it
  7. Paste it in URL section of Browser and hit Search
  8. browser page will open with above template loaded
  9. once done with registration
  10. Test Login page
  11. Start NVDA screen reader and observe the issue.

Actual:

While login to the account with incorrect credentials and press login button the "Invalid Login attempt" message displayed on the screen but nvda is not announcing that error message.

This issue does not observe with Chromium edge + Narrator.

Similar issue also observed in the below scenarios:
Issue 1: ASP.NET Core - WebAppMVC Login

  1. open command prompt
  2. Create a folder using command "mkdir foldername" e.g. "mkdir MVC"
  3. move to the created directory using command "cd foldername"
  4. run the following command "dotnet new mvc -au Individual" and hit enter.
  5. run the following command "dotnet run"
  6. Copy the First URL link from Command prompt and copy it
  7. Paste it in URL section of Browser and hit Search
  8. browser page will open with above template loaded
  9. Register and then hit enter on Login page
  10. test login page
  11. Start NVDA screen reader and observe the issue.

Issue2: ASP.NET Core - Angular Login

  1. open command prompt
  2. Create a folder using command "mkdir foldername" e.g. "mkdir Angular"
  3. move to the created directory using command "cd foldername"
  4. run the following command "dotnet new angular -au Individual" and hit enter.
  5. run the following command "dotnet run"
  6. Copy the First URL link from Command prompt and copy it
  7. Paste it in URL section of Browser and hit Search
  8. Browser page will open with above template loaded
  9. Test the Login Page
  10. Start NVDA screen reader and observe the issue.

Expected:

NVDA should be announce the error message while pressing login button the "Invalid Login attempt" message displayed on the screen.

User Impact:

Screen reader users will not be able to get error message information.

Narrator.mp4
NVDA.mp4

I did some reading about role="alert" and it sounds like this might be an issue/bug with NVDA, since role="alert" sounds like the proper accessibility marking for our validation (and Narrator works with this) for notifying the user that their form had an issue.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role

@merriemcgaw do you have any guidance on how we should proceed with this?

The cshtml is:

<div asp-validation-summary="ModelOnly" class="text-danger" role="alert"></div>

The relevant html snippet is this:

<div class="text-danger validation-summary-errors" role="alert"><ul><li>Invalid login attempt.</li>

I would check the NVDA GitHub repo for whether they have a bug on this already. If they do, then we can resolve this bug as external and post a link to the appropriate issue in NVDA. You might also consider booking an office hours with our Accessibility team to see if they have ideas. However, since it's not happening in Narrator I think we probably are seeing an NVDA bug. The Accessibility tester should be able to file the NVDA issue or you could and link it here.

For external bugs I'll need a brief description of the issue so we can make sure we get it into the conformance documents for .NET 7

Cool, yeah it sounds like this is pretty much identical to this one nvaccess/nvda#13919 as well as nvaccess/nvda#13418, will resolve as external once I figure out what an appropriate description is

Summary of the issue:

NVDA is not announcing role of alert in Chrome, which is what the TagHelper validation summary uses to alert screen readers, as a result NVDA does not read the login failed status message displayed after an invalid login attempt.

Link: nvaccess/nvda#13418