UI - A11Y - Add landmarks

[saragunnarsson]

Figma file here

• [x] Add landmarks marked up in figma
• [x] Add skip to main content link

[saragunnarsson]

Hey team! Please add your planning poker estimate with Zenhub @cameron-eyds @chdivyareddy @dimak1 @doug-lovett

[dimak1]

@LizGovier Would like to confirm page structure/landmarks.

There is another component that is not mentioned in the Figma - System Banner. Currently it's located in <main>. After we update the structure to move Breadcrumbs above the <main> into <nav>, the system banner would be between <header> and <nav>. Is that ok?

[dimak1]

Ready for UXA: https://bcregistry-assets-dev--pr-1973-8ya0d1kp.web.app/

[LizGovier]

Hey @dimak1 I'm just looking at the landmarks and there seems to be 2 navigation tags, The second one goes straight to the bottom. (Note: using SkipTo chrome extension)

cc @arlentees I wouldn't mind enhancing this landmark feature to show more landmark sections with section title. Will also reach out to Alexis regarding this. Example from W3.org:

[dimak1]

@LizGovier There are indeed two Navigation tags. Using WAVE extension I can see one for Top Nav, and the other is for Footer. Please let me know if you want to make any updates.

[LizGovier]

Thanks @dimak1 Using the 'WAVE' chrome extension, I verified the MHR/PPR Dashboard and an MHR Registration page. Both showed the proper landmarks that Sara provided. This is RFQA

[dimak1]

Thanks @LizGovier! For RFQA, you can also assign it directly to Divya and put it in the RFQA column.

[dimak1]

Had to sync with main and resolve some conflicts. Should be available in DEV now. Thanks!

[chdivyareddy]

Verified in TEST!