If you try using screen reader on my website, can you understand the page content?
Can you navigate through this website comfortably using your keyboard (Tab and Enter)?
Do I have to wrap the text inside a figcaption element with p tag? For example the text inside a blockquote element should be wrapped with p tag according to hail2u/html-best-practices repo.
Any questions on the technique that I'm using are very welcome! 🙌
Also if you want me to give my feedback on your solution to this challenge, feel free to give me the link to the community feedback! I will be glad to help you too!
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)
Hi Nikhil, I liked how you personalized your hover-effect and saw you had the same problem I had with the overflow. Try using the line-height property with a value of 0 on your container-img.
It is also worth trying to change the height values on the body and html elements. I am not entirely confident with that myself. Editing this comment because I gave not helpful advise after I checked in my browsers inspect mode about the height on the HTML/body. I hope the oveflow options helps you though.
This is my first time using sass for a project. Definitely see the benefits. Did add some extra hover animations. If anyone has a solution for the blurry text on scale for chrome I'm all ears I've tried multiple things and nothing seems to work. I welcome any feed.
Hi Hyron, you helped me out a few days ago and I ran against a problem with my NFT card (got the svg image on top showing yesterday but changed something I can't remember so it doesn't anymore) so I came lurking at other peoples codes. Now I saw you also had the problem with the overflow which took me a while to fix too. (not yet updated on github) When you set the line-height to 0% on the image container the overflow will be fixed without having to set a max-height and overflow: hidden.
Hi Saminstein, nice job! Have you considered using display: flex for the .card-prices to get them inline? For the structuring I have no answers, still trying to fix mine but yours looks pretty good!
