Huddle landing page with curved ❤

Community feedback

• 

  Chukwudobe Micah Chinedu•700

  @chukwudobe-MicahPosted over 1 year ago

  Nice solution, you should try making your curved SVG take as much width as it's related section is taking, and also remove the space beneath it.

  0
• 

  Tryt4n•960

  @Tryt4nPosted over 1 year ago

  You should wrap everything in main. If you decide that the one content is more important than the other you can wrap this/those element/s in aside.

  aside element doesn't have to be literally aside. It's just less important content on the page.

  Also you skipped heading level in newsletter. There should be h3 instead of h4. If you want write semantic HTML with accesibility you should use some evaluation tool. I personally use wave. If you want check it out.

  It would be good to use a for thing like phone number or email. You use a for email but it should look like this: a href="mailto:[email protected]". Same with phone number: a href=tel:123456789. Change this and then click on those elements and you'll see why it should be like that.

  What do you mean that you had problem with fonts?

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  Hello, Ezequiel Córdova Sotomayor! 👋

  Here are a few suggestions for improvements.

  • The alternative text for the logos should only be "Huddle". There is no need to include the word "image".
  • These <section class="introduction"> and <section class="rating"> should live inside the <main> landmark.
  • Not every image needs alternative text. Decorative images should not have alternative text (alt=""). This will tell the screen reader to skip over the image. As a result, it saves screen reader users time navigating the page.
  • For your information, decorative images are images that don't add any information and serve only aesthetic purposes.
  • Remove <h2 class="hidden">Social links And Subscription</h2>. It is not needed and not the part of the content.
  • Make the "NEWSLETTER" as <h2> instead of <h4>. It is not a sub-section of "Ready To Build Your Community?" section. Also, headings must be in a logical order. Dive deeper — How-to: Accessible heading structure - The A11Y Project
  • Use CSS to uppercase the text. Screen readers might spell the uppercased word in the HTML (spelled letter by letter).

  For accessibility resources, I have gathered a lot of resources into one page.

  You may find interesting things, especially about web accessibility — Resources — Vanza Setia

  I hope my suggestions are useful. Happy coding! 😄

  0

  ---

  

  Tryt4n•960

  @Tryt4nPosted over 1 year ago

  @vanzasetia <h2 class="hidden">Social links And Subscription</h2> is well done. It's inside of the section element. Elements like section article etc. need some form of title. If you use headers it's automatically gives those element a title. Another option is to create other HTML element and give it id and then the give attribute aria-labbeledby="this_id" to the section or add aria-label to section element

  section or other similar HTML elements act literally the same like div if they haven't got any title

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  @Tryt4n

  You do not need to add an extra heading. If the heading is necessary then a visible heading should be the choice. This way, all users will get the same information.

  Also, you do not need to use <section> or <article>. They do not make the page more semantic or less semantic.

  You do not need to label each <section> or <article> using aria-label or aria-labelledby. You only want to label them when they need to be highlighted. This way, when the screen readers see the list of landmark elements, they will appear.

  <section> and <article> will not automatically have a title if you just put a heading tag inside them. You must use aria-label or aria-labelledby. Otherwise, they are almost the same as <div>.

  I recommend using <div> to wrap each section of the page instead.

  Reference: WebAIM: HTML Semantics and Accessibility Cheat Sheet

  0

  

  Tryt4n•960

  @Tryt4nPosted over 1 year ago

  @vanzasetia section and article will have automatically a title if they have inside some form of header. Section is basically div role=region. But it acts like that only if it has some element with role="heading" like h1-6. Here's an explanation w3.org

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  @Tryt4n

  The discussion is about removing the unnecessary heading. <h2 class="hidden">Social links And Subscription</h2> is not necessary.

  <section> and <article> will not automatically have a title if they are inside a <header>.

  For your information, heading and header are different. Heading is <h1> - <h6>. Header is <header>.

  The link that you share is the specification for the role="region" says that it must have a heading. But, it does not actually label the region—check the link that I shared—unless you are using the ARIA properties that I mentioned earlier.

  Also, as I said earlier, <section> and <article> do not need to be labeled unless they need to be highlighted.

  0