Hi
I think the solution looks excellent. Positioning is all fine (I'm viewing on mobile) and vertical scroll is a good thing.
Where the accessibility falls down a little is in the html markup, so here are some suggestions
- on the background image pattern, the empty alt is good, but also add in
aria-hidden="true"on this one as Apple voiceover will still announce the image if it is an svg - the city probably isn't a h2. What is London a heading for? I'd make that a paragraph.
- the stats at the bottom definitely don't make sense as h3s and paragraphs. Think about what that content is. The number doesn't make sense without the word. So you could put each pair in a list item or paragraph and use spans inside that for the styling, or use a description list element, or even a table (with the words as ths and the numbers as tds)
Hopefully that helps.
Using nagative margins is fine by the way. Alternative could be a transform. That would be preferable if it was an animation as transforms don't trigger a repaint/reflow, but for static stuff like this a negative margin is fine to use
Just a general suggestion: rather than repeating 3 classes one for each state, why not just use one class and place that on all 3 in the html?
stat-social-followers,
.stat-social-likes,
.stat-social-photos {
@RMK-creative
Posted
@grace-snow thank you for the detail feedback and suggestions! I've now included aria-hidden, and read up about ARIA in general as I hadn't come across it before. I've also changed the h2 and h3s, and used li for the stats - I think I was using them as a means for sizing, so thanks for highlighting that, definitely a bad habit I need to lose! Not sure what I was thinking with those three separate classes - I've updated this also.. I clearly need to slow down and be more mindful with HTML! Your feedback has been incredibly valuable, thanks again :)
