[feature] Add Alt-Text Tags to Resolve Critical WCAG Accessibility Issues in Web3Modal

[yungzyad]

What problem does this new feature solve?

Users that depend on assistive technologies like screen readers are unable to use Web3Modal since icon buttons and other UI elements lack alt-text tags. This minor fix will reduce barriers to entry for millions of web3 users!

See here for an accessibility report for the Web3Modal demo on lab.web3modal.com/library/wagmi-all/

Describe the solution you'd like

Add descriptive aria-label tags to icon buttons and other UI elements in Web3Modal, or another WCAG approved solution.

References to some of the offending UI elements:
Help Icon Button
https://github.com/WalletConnect/web3modal/blob/main/packages/scaffold-ui/src/partials/w3m-header/index.ts#L208
Close Icon Button
https://github.com/WalletConnect/web3modal/blob/main/packages/scaffold-ui/src/partials/w3m-header/index.ts#L165
Header Text
https://github.com/WalletConnect/web3modal/blob/main/packages/scaffold-ui/src/partials/w3m-header/index.ts#L184

[rtomas]

Thank you for the valuable feedback!

[rtomas]

https://linear.app/walletconnect/issue/APKT-876/[feature]-add-alt-text-tags-to-resolve-critical-wcag-accessibility

[p1kalys]

Hey @rtomas, I would like to work on the issue, can you please assign it to me if not resolved?

[VamshikrishDanam]

Could you please fix these as well, thank you! If we run axe test we see them as critical.

1. ARIA dialog and alertdialog nodes should have an accessible name
   Description: Ensures every ARIA dialog and alertdialog node has an accessible name
   Help: ARIA dialog and alertdialog nodes should have an accessible name
   Help URL: https://dequeuniversity.com/rules/axe/4.5/aria-dialog-name?application=axeAPI
   Impact: serious
   Tags: cat.aria, best-practice
   Element(s):
   Html:

   Selector(s): w3m-modal, #w3m-modal

   Solution - Add aria-label

2. ARIA attributes must conform to valid values
   Description: Ensures all ARIA attributes have valid values
   Help: ARIA attributes must conform to valid values
   Help URL: https://dequeuniversity.com/rules/axe/4.5/aria-valid-attr-value?application=axeAPI
   Impact: critical
   Tags: cat.aria, wcag2a, wcag412
   Element(s):
   Html:

   Selector(s): w3m-modal, #w3m-modal

   Solution - add aria-hidden value true/false when modal is opened and closed respectively.