Final submission -- Improved accessibility; improved semantic HTML

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, glad to be back. Desktop layout's background-image right now is not occupying the whole right side like on the original, it is responsive though but at mobile breakpoint, there is an extra white-space underneath which the footer is occupying, it would be great to integrate the footer within the whole layout itself so that the background is not like cut off.

  Some other suggestions would be:

  • First, it would be great for you to add these as a base styling:

  html {
    box-sizing: border-box;
    font-size: 100%;
  }
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
  

  Making all the elements use box-sizing will really help you control an element's sizing so always apply them to all.

  • Honestly, I would prefer to make use of the right-background-image inside the .background selector. If you try to look at the .image-host, inspect and hover it on dev tools, you will see that the content's size is on the right whilst the content itself is on the left since you are changing the top and left property of it. It is hard for me to tell some css on this since the markup is a bit confusing :>
  • Now, a typical layout of a site looks like:

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

  This way, all element that has content are inside landmark elements and on this , I would prefer as well having a header and main since it make sense on this kind of layout.

  • Website-logo img should be visible in a website since it is one of the meaningful elements on a site so using ::before on it is not really great. Make it an img with a proper alt value inside the supposed header if you will make it that way.
  • The form works but it currently lacks an informative way of telling a user has an error. The error-message is only seen visually. A pseudocode of a proper form looks like when it has an error:

  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. You can take a look of this simple snippet of mine see the javascript and the html which are important.

  • If you remove the outline property of an element, make sure to add another custom visual indicator on the element's :focus-visible state. Try using tab on your keyboard to navigate the site, you will have a hard time since there is no indication on where you at.
  • You can use ul on those logos since those are "list" of logos right and each of them should have a proper alt which the value is the name of the company I think like alt="spotify".
  • Lastly, just the mobile state like what I said earlier about the extra white-spacing.

  Aside from those, really great job on this one.

  Marked as helpful

  0

  ---

  

  Krista Calleja•300

  @KristaCallejaPosted about 3 years ago

  @pikamart Thanks so much for this! I will be working on it to improve!

  1

  

  Krista Calleja•300

  @KristaCallejaPosted about 3 years ago

  @pikamart Hi again... can you recommend to me your best resource for learning ARIA, and I don't mean just the documentation, bite-sized resources for learning. Thank you!

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @KristaCalleja Hi, well to be honest I don't really have a resource about it, I just google things out like for example, "accessible dropdowns" and I try to visit maybe 2-3 links about it and compare each approach and see what is the best, aria sometimes are include and sometimes is not because you don't really need to have aria as long as you have semantic html markup.

  But for forms, you would really need to add those to make bridges if there are errors to be stated for the users.

  Yeah, I just checked my bookmarks and there are no links regarding other accessibility, sorry for that. But just search up some with "accessible" word in your search thing, best site is from w3.org

  Marked as helpful

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey ughm, there are lots of border and images absence on this one. Are you refactoring right now? Also if you want, if you are done you could reply on this again and i'll give a feedback on this site how about that:>

  0

  ---

  

  Krista Calleja•300

  @KristaCallejaPosted about 3 years ago

  @pikamart hey sorry about that -- yes indeed I was refactoring. If you have the time I'd appreciate some feedback on my final css-html code. I'm working on js now.

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @KristaCalleja Neat! But maybe this lunchtime on my time, going to code some in this morning but i'll definite review this as a first^^

  0
• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @KristaCalleja 👋🏻

  I've got some good new and some bad news 🙃 Let's start from the good ones, shall we?😃

  I've got the picture positioned...sort of 😅

  .wrapper {
      width: 100%;
      background-image: url(./starter-code/assets/tablet/image-host.jpg);
      background-repeat: no-repeat;
      background-size: contain;
      background-blend-mode: overlay;
      background-color: var(--very-dark-blue);
      background-position: center;
  }
  .card {
      border: 1px red solid;
      margin: 0 auto;
      padding: 3em 1rem;
      max-width: 365px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
  }
  

  those are the styles that kind of get what you're looking for. But here comes the bad news, this is not responsive, it works with 375px plus or minus. However, after that it breaks again. I believe you need to change HTML a bit. Perhaps this will be useful enough to continue the project without changing the HTML, it's pretty hard to change things only with dev tools, so with the actual code you may be able to put this together.

  I hope this was helpful 👨🏻‍💻 let me know if you have any questions. Cheers 👾

  0

  ---

  

  Krista Calleja•300

  @KristaCallejaPosted about 3 years ago

  @kens-visuals Thanks for this! Helped me move forward!

  0