Fix accessibility labels on profile page

[alltheseas]

Work in progress

For [accessibility] I’d recommend finding a screen reader user who is also a developer to help build out requirements. Otherwise, correct labels, logical page structure, logical focus order, and make alt text input for UGC images easy and prioritized will all be a great start.

https://damus.io/note15n62vjahkxz4u97a59yskqn9g4q8xrdlnz3ahapz3wrsnfa7nx5sc8avmg

[alltheseas]

The most common accessibility problem we found is a lack of labels. What good is a button when you can’t tell what it does? These can be usually fixed application-wide in a few hours by adding simple attributes (like "aria-label": https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label).

Some frameworks even have linters that automatically tell you when you have missing labels - super convenient. https://github.com/FormidableLabs/eslint-plugin-react-native-a11y

Testing your app takes just a few minutes. Here's how to test a web-based one: https://www.youtube.com/watch?v=PjN-XXgcJKo

More about accessibility here: https://bitcoin.design/guide/designing-products/accessibility/

We invite you to help raise awareness for this topic this Thursday (in 3 days) for Global Accessibility Awareness Day. BitcoinDesign/Meta#492

https://damus.io/note1lv8nzkfe6ns3smga59c8rdgsu56az7veh435xc9vzrs390xhg7gqmpdc6x

[GBKS]

I did a quick test for Global Accessibility Awareness Day and found a lot of issues, even just on the profile screen. It's pretty much all labels, along with some grouping. It might seem like a lot, but this stuff is pretty straightforward to fix.

[alltheseas]

Thank you for the detailed feedback. Shared with dev team.

[alltheseas]

I did a quick test for Global Accessibility Awareness Day and found a lot of issues, even just on the profile screen. It's pretty much all labels, along with some grouping. It might seem like a lot, but this stuff is pretty straightforward to fix.

@BenGWeeks this is the accessibility labels work @GBKS mentioned during today's Damus devs call. Want to take this one 🙏 ?

[BenGWeeks]

Yeah, I'll take this one.

[GBKS]

If you'd like more info on testing this stuff, we have resources on the Bitcoin Design Guide accessibility page. Here's a short video on I usually test things.

[BenGWeeks]

Did you use the "Accessibility Inspector" in XCode? Using Audit does not finish the audit for me ...

[GBKS]

No, I just grab my phone, enable VoiceControl and VoiceOver from the accessibility short-cut menu (like in the linked video) and tap around the app. Basically testing what the end-users have in their hands.

[alltheseas]

Related #1297