@asbhogal
Posted
Hey Kaycee - this is very good, well done!
I really like the changes you've made to the palette and considerations to accessibility which often get overlooked at times unfortunately in front-end dev. You've documented your process nicely and your code is well organised. Props to you.
In terms of keyboard accessibility, the main thing is to ensure the button is focusable when visitors use the tab on the website to navigate through. In order to do this, it's best to remove the transparent value on the outline as this removes the focus on the element so they don't know if it's been selected. Here's a good link which might help illustrate this Link
With regards to the heading alignment issue, I suspect this is due to the space-around value assigned to both containers, as this calculates gaps both in between the child components and outside. It does this based on the height of the container against the total height of the elements and equally distributes the difference. The spacing that the flex has created on the outside of the right is greater than the left, thereby causing the headings and list section to be 'pushed in' and subsequently lower than the heading on the left, if that makes sense. I've added a link here explaining this in further detail Link In this case, you could try removing the justify-content altogether (which will default it to the space-between from the main>.grid_item declaration, pushing them to the edges of the top and bottom) and adding a specific padding to these two, e.g. padding: 1em 1.5em which will set an equal amount and thereby keep the headings the same height from the top.
You could also change the background-color to #205857 to flow nicely with the right container and change the colors of the h1 to #205857 and the h2 to #197371. Visually I think this blends better and keeps the color palette to a simple accent of two tones and white.
I've ran your site through an online accessibility checker for WCAG 2.0 (Level AA) and Level AAA and found no potential or known issues - great news. Here's the link to the checker which you can also use Link
Hope this helps, and again, really great job. Impressive work!
Marked as helpful
@ofthewildfire
Posted
@asbhogal Thank you! Ah, yes, that makes sense, there is more on the Monthly Sub box compared to the Why Us box, so, spacing changes, thank you, I will make those changes!
Oh, there needs to be a visual que where the focus occurs for the accessibility, I understand.
I do prefer the colours you recommend, so I will update those accordingly as well. Thank you for the links as well.
@asbhogal
Posted
@ofthewildfire no problem Kay, glad to help! :)
