fylo-dark-theme using CSS Grid

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop seems fine, it is responsive and the mobile state looks fine as well.

  Some suggestions would be:

  • The nav element could have been wrapped inside a header element. Also, a typical structure of a site looks like:

  <header />
  <main />
  <footer />
  

  This way, all contents are being wrapped by a landmark element.

  • Lose the word logo on the website-logo, use only alt="fylo" avoid using words that relates to "graphic" such as "logo, icon, images.." it is already an image, no need to describe it as one.
  • The list of links on the right side of the logo should only be the one inside the nav element since those are your site's navigational links.
  • Hero-image alt could have been left empty alt="" since it is only decorative image.
  • The text after the h1 shouldn't be a heading tag, it is only a regular text so use p tag on it.
  • For the four icons after the hero-section, use alt="" on it, when using img don't forger to include the alt attribute. If you don't add this, screen-reader will announce something, usually it says the the image source is.. I forgot, but always include alt.
  • Again, the text on each of the icon after its heading tag should not be a heading tag, just use p tag on it. Only use heading tag, if you think the text gives an overview to what is the content of the section it is being wrapped.
  • informations__img selector should have used alt="" as an attribute on its img inside since it is only decorative.
  • Avoid using multiple h1 on a webpage, only use at least 1 per page.
  • Again, on this same section, change the heading tag to use p tag.
  • see how fylo works link's img for the arrow-icon should have alt="" and aria-hidden="true" on it as well, again it is only decorative images.
  • The alt for each of the testimonial person's image should be using their name as the value like alt="Satish Patel".
  • Good choice for using heading tag for each of the person's name, but, when using heading tag, always make sure that you are using them incrementally. If you use h5 make sure h1, h2, h3, h4 are present before it.
  • input for the mail section should have either a label which has sr-only class or an aria-label, the value for both defines what the input does.
  • For the error-message, avoid using only opacity to show the error message. It is invisible for sighted users yes, but screen-reader will still pick them up, instead, use visibility property as the transition styling. This hides to all user and will only show if it has visibility: visible.
  • The error-message should have an id attribute. The id will be referenced by the input element. For example, when the input is wrong, your javascript should add aria-invalid="true" on the input element, this informs a user that their input is wrong, then same, if the input is wrong, you add aria-describedBy attribute, and the value of that attribute refers to the id of the error-message this way, users will know what kind of error they had made, based on the text of that error-message. I have this simple snippet where you can look on how those arias could be used. If you want to make it even more accessible, look up aria-live.

  FOOTER

  • Website-logo-img should have alt="fylo as the attribute.
  • The alt for the location icon should have used alt="" since it is decoration only same as for the other 2 icons.
  • The links on the right side could be wrapped inside a nav element, since those are still your navigational links. Using ul as well inside it would be really great.
  • Social-media-links should be using a tag for each, since it is a "link".
  • Using ul as well for the social media links would be great.
  • On the a tag what will wrap the social-media, it should have either aria-label attribute or an sr-only text inside it, describing where this link would take the user, on the facebook, the value should be "facebook".

  Aside from those, great job again on this one.

  Marked as helpful

  0

  ---

  

  Mathieu THIRY•300

  @promathieuthiryPosted about 3 years ago

  thanks you @pikamart ;) once again an exhaustive review. Yeah I don't pay attention to accessibility , do you know ressources where i can read a website as a blind person for example? maybe in the dev tools?

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @promathieuthiry Hey, I don't really have any resource where you can read about how a person with disability like blindness reads a website, but I use a tool that people who have disabilities uses. It is called nvda, this is a screen-reader for desktop. You can visit the site in this link .

  But I recall taking a free course in edx site, introduction to web accessibility. I heard this from Grace and I saw this and took the course. This course won't teach you specific methods on how to code, but this will allow you to be aware on how people with different disabilities uses the web.

  Marked as helpful

  1

  

  Mathieu THIRY•300

  @promathieuthiryPosted about 3 years ago

  @pikamart great i will take this course ;)

  0