Ping Subscribe Section using Js

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, awesome work on this one. Just saw the site and the desktop view looks really nice and the mobile state as well. For the media query, I suggest maybe lowering it down because right now, at 0px-1000px, it is already showing the mobile state. Though it is just a minor change on the overall design, the breakpoint still is too big and you can just make the layout scale with the screen-size so that you could make less the media query.

  For some other suggestions, here are some:

  • Avoid using id to target and style an element since it is a bad practice due to css specificity. Instead, just use class to target element.
  • Remember that a website-logo is one of the meaningful images on a site so use proper alt for it. Use the website's name as the value like alt="Ping".
  • When using img tag, you don't need to add words that relates to "graphic" such as "logo" and others, since img is already an image so no need to describe it as one.
  • Upon looking at the current primary landmark, I saw that you used section tags outside the main. Typically, you will only see this markup on a site:

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

  As the primary landmarks and all other elements are inside in their respective landmark. For example, the success message and the hero-section image should all be inside the main tag, since those contents are the main-content of the site.

  • Your input right now currently lacks associated label to it or an aria-label to which will define the purpose of the input element. Always include it so that user will know what they need to give on each input. Make sure that label is pointing to the id of the input as well.
  • Currently, the error-message is only seen visually and not really connected or linked on the input properly. A proper way of linking error-messages to their input looks something like this:

  if ( input is wrong )
    input.setAttribute("aria-invalid", "true");
    input.setAttribute("aria-describedBy", id of the error-message);
  else 
    input.removeAttribute("aria-invalid");
    input.removeAttribute("aria-describedBy");
  

  The error-message element should have an id attribute which is referenced by the aria-describedBy attribute on the input element. By doing that, your user will know that the input is wrong because of aria-invalid and they will know what kind of error they made because of the aria-describedBy.

  • The "notify me" should be a button and not an a tag. Remember that an a tag serves to direct a user in another page since it is a link, while a button controls something and on this one, button should be used since it will "submit" the form. Use type="submit" attribute on the button on this one.
  • Also, if you like, I have this simple accessible form which you can reference. aria-live is implemented as well so that user will be informed right away on what is the current status. Let me know if you have any queries:>
  • For the hero-section, it could use a more descriptive alt value and like what I said, avoid words like illustration. On this one, you could use something like alt="Ping application's user dashboard".
  • When you are using section make sure that it has an heading tag inside it that is being labelled to the section itself. section tag is not really informative even if it is being treated as landmark unless it is using aria-labelledby. For this one, you can just use div to wrap the image.
  • For each of the social-media links a tag, you don't need to use the words redirected since an a tag is already a link and it will be announce as a link to the user. You can just use the social-media name as the aria-label and that would be enough.

  Aside from those, great job again on this one.

  Marked as helpful

  1

  ---

  

  Kristiana12•425

  @Kristiana12Posted almost 3 years ago

  @pikapikamart Wow thanks so much for the tips! I am definitely starting to see things differently, especially on naming the alt and the aria-label attributes. And generally how I could have approached the structure of the HTML.

  I am not that quite familiar with the aria- attributes haven't really learned them yet, do you happen to have any resources that you found useful, maybe an article or a video where the aria attributes are being more in detail explained!

  Thank you so much for taking time to look at my code and for your really very helpful feedback!

  1

  

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  @Kristiana12 Hey, glad that you find my review useful^^

  For the aria attributes, I don't really have an exact resource about it because I just kind of search one if I needed it to add in my html elements.

  But whenever I look something up, I always go to digitala11 about WAI-ARIA and sometimes to I go just the mdn docs, just search for aria mdn and I think it will pop something out^

  1
• 

  Nam Haϕ820

  @Nam-HaiPosted almost 3 years ago

  Nice work !! Good use of the input type to handle e-mails.

  0