CityOfDetroit / bloom

component-based web framework for affordable housing management
Apache License 2.0
16 stars 1 forks source link

Accessibility Audit: Improper usage of navigation landmark on homepage #960

Open jnowell opened 2 years ago

jnowell commented 2 years ago

ENVIRONMENT macOS 11.6 | Chrome Version 95.0.4638.69 (Official Build) (x86_64) | Voiceover Chrome OS Version 93.0.4577.51 (Official Build) beta (64-bit) | Chromevox Windows 10 Enterprise | Chrome Version 96.0.4664.45 (Official Build) (64-bit) | JAWS Windows 10 Enterprise | Chrome Version 96.0.4664.45 (Official Build) (64-bit) | NVDA Windows 10 Enterprise | Firefox Version 92.0.2 (64-bit) | JAWS

ISSUE Turn on the Screen Reader, and go to the homepage. As you can see from the attached video, the language section at the top of the page has been marked as Language navigation. Meanwhile, the Homepage link and Login link have been contained under main navigation navigation. However, languages at the top of the page needn't be marked as navigation landmark, they can be contained inside a banner. Additionally, the Homepage link and Login link which have been marked as Main navigation needn't be contained inside a navigation landmark.

NOTE: When replicating using Voiceover and Chrome on a Macbook ((via Command + F5) and then using the 'Rotor' (Control + Option + U) to find the Tables category), the navigation landmarks look slightly different than they do in the attached video, but the issues called out remain.

https://user-images.githubusercontent.com/394908/148605146-ea456b06-1d64-4a50-98d0-4befdf1089f9.mov

ColinBuyck commented 1 year ago

No longer valid from LH audit