[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.