fylo-landing-page

Hi, you asked for a11y improvements so here you go

1. The logo is wrapped in a link so it is therefore not enough to have only "Fylo" as the image alt as that is currently acting as the link text as well. The link label needs to be "Home - Fylo" and you can do that in several ways. For example you could make that the alt text, or you could use aria-labelledby on the link pointing to the id of a text element with hidden attribute on it that contains the text, or you could use aria-label on the link
2. the inputs in this are currently unlabelled. You must label inputs properly with the accessible name for that input
3. label elements and button elements should not be wrapped in paragraph elements
4. all of the page content should be in landmarks. That includes anywhere you use a section - those need moving inside main
5. for testimonials I recommend using figure, figcaption and blockquote
6. the footer logo is important content and should have alt
7. content like phone numbers and email addresses should really be links
8. there is a nav missing from the footer. Once this has been added both navs need labelling eg main and footer
9. inside the footer nav should be ONE list not two. You can split one list into multiple columns with css column properties
10. social icons are always expected to be clickable so must be accessibly named links
11. buttons and inputs must not have explicit widths and heights. They must be able to grow in height in particular. Use max-width and padding instead, never height on elements that contain text content
12. I recommend you ensure inputs have a minimum of 1rem font size. Ios will zoom in on focus on any input with a font size less than 16px
13. setting width 100vw is very likely to cause horizontal overflow
14. check the button font size because text looks extremely small to me
15. media queries must always be defined in rem or em not px
16. 1200px sounds very late to be making the switch to a large screen layout. Is there not room for the layout to change earlier?
17. it looks like there is a lot more than necessary in the media query on this. A lot of that is likely due to using explicit widths and heights when you shouldn't. You want to try and make the css as short and performant as possible. Even things like font size shouldn't have to change.

Hi, @AmrAborockpa!

I recommend downloading the necessary icons instead of importing the whole Font Awesome library. This way, your site will load faster.

You can import many font families at once. So, you don't have to use different <link> for each font family.

For images containing text, make sure the alternative text includes the image's text. In this case, the Fylo logo should have an alt value of “Fylo”. Reference: Checklist - The A11Y Project #for-images-containing-text-make-sure-the-alt-description-includes-the-images-text

All the page content should be inside a landmark element. The <main> landmark should wrap all the main content (the other <section>), not just the first section.

Wrap each social media icon with an anchor tag.

Prefer unitless numbers for line-height values to avoid unexpected results. Learn more — line-height - CSS: Cascading Style Sheets | MDN

Use a CSS reset whenever you start a new project. This can help you set the styling foundation easily. My recommendation — A Modern CSS Reset | Andy Bell

I hope this helps. Happy coding! 😄