@Emmiecodes
Posted
Hello Vanza,
I was doing the order-summary challenge and was trying to focus more on accesibility doing so, and I came across the issue of having to use a div for the subscription plan and price part so I started googling the use of the role attribute and a ton of other things and came across your page that way. I saw you also used a div for the same part as I did, without adding a role attribute to it for screenreader users to make sense of the div. (I had no clue what role to add when I looked them up)
Afterwards I went looking at your NFT card solution which did help me out with realizing I could use the figure and figcaption with flex styling too, and aside from that there are some nice accesibility features you have, I had not thought about or seen before, like adding the abbrevation (before I had no clue what ETH was either) and the custom focus effect on your order summary. I like how you normalize accesibility in your code and the questions you ask on here, that should be an example for all. I was wondering though why you chose to use UL's for the currency and days left part instead of divs and why you didn't do so for the subscription info/costs in the order summary? And if you deliberately chose to keep your alt="" descriptions short? It makes me think about how meaningful those images really are to screenreader users or non screenreader users wanting to buy crypto and wonder if my alt descriptions are too long for this context. (Eg: white boy with brown hair, bangs and cream colored shirt)
Marked as helpful
@vanzasetia
Posted
@Emmiecodes
Hey there! Thank you for the comment! 🙂
I made some changes to the HTML. So, I decided to use p element instead of a list element. I think it doesn't make sense for those content to be rendered as a list.
For the alternative text of the avatar, I recommend using the author's name. It is an important thing that users need to know rather than the styling of the avatar.
