Normal internal CSS with media query for margin

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hello there! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉

  Here are some recommendations for improvements.

  • I recommend moving all the styling to a separate CSS file. It's not a big deal for this challenge however, it's best to practice this so that you start having a habit of doing this. 🙂
  • I suggest removing the media query by finding an ideal value for the margin of the container. Maybe around 1.5em would be good for both desktop and mobile layout.
  • The QR code is an important image for this challenge so it needs an alternative text. Without alternative text, the image will not be pronounced by screenreaders.

  That's it! I hope you find this useful! 🙂

  Marked as helpful

  0

  ---

  

  Atul kumar•200

  @AtulKumar0001Posted about 2 years ago

  @vanzasetia Hello Vanza Setia. Thank you for your reply. I appreciate your tips. I usually use style.css, but I was feeling lazy today, so I used internal CSS 😅, but I suppose having the habit of doing the styling on a separate CSS file is beneficial.

  1
• 

  Natasha Pierre-Louis•280

  @natashaplPosted about 2 years ago

  Hi Atul! I ditto everything that Assurance said. I'd also suggest looking into the main tag and some other HTML 5 semantic tags. Here's an article that gives a good overview:

  HTML5 Semantic Tags: What They Are and How to Use Them

  Marked as helpful

  0

  ---

  

  Atul kumar•200

  @AtulKumar0001Posted about 2 years ago

  @natashapl Hello, Natasha Pierre-Louis. I appreciate your suggestions😊.

  0
• 

  Assurance Chioma Ikogwe•410

  @Aik-202Posted about 2 years ago

  Hi Atul, this is pixel perfect!!!! 😍😍😍. But I have some suggestions that can help you with your accessibility issues.

  1. You can change that div with class big container to main, as your code must have one main tag or you can add this to big container role = 'main'. Then the big container will be treated as main

  2. Change the h2 tag to h1, you can give it any font size in your css.

  3. Attach aria roles to each of your divs. I think the aria role to be used for the div with class container is group i.e role = 'group'. Click on this link to know more about aria roles

  Hope this helps.

  0

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @Aik-202

  Why do you recommend attaching ARIA role attributes to each div? What is the purpose of doing that?

  0

  

  Assurance Chioma Ikogwe•410

  @Aik-202Posted about 2 years ago

  @vanzasetia Well, it's for people with disabilities, Like blind people when they navigate ya website with screen readers, the screen readers use ARIA roles to properly direct the blind users. In summary, the whole purpose is accessibility!! It's not about building a web page, it's all about building pages that are accessible to all, even those with disabilities. So ARIA roles simply just helps screen readers to navigate your site. ARIA stands for Accessible Internet Applications.

  Now, the issue with divs is that it has no semantic meaning, it's meaningless, so that's y HTML5 introduced semantic tags like article, aside, section e.t.c. to promote accessibility, as these tags are meaningful to screen readers. So even if you want to use divs, attach aria roles to them.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @Aik-202

  My question is, why every div needs an ARIA role attribute? What is the inaccessible thing that you want to try to make accessible?

  For the div with role="main", I would prefer using the semantic HTML, main element. But, for other div elements, I don't see any issues.

  As long as there's no accessibility issue with using div then there's no need for every div to have semantic meaning. As Scott O'Hara says in his "Div divisiveness" blog post.

  "Use semantic HTML. Use semantic HTML as a default. Just maybe also don’t worry so much about if other people aren’t using semantic HTML if what they’ve built doesn’t actually result in accessibility issues? Or, if calling out the lack of semantic HTML, be very specific about what the actual problem is. The semantics of HTML are not just about accessibility."

  0

  

  Atul kumar•200

  @AtulKumar0001Posted about 2 years ago

  @Aik-202 Hello Assurance Chioma lkogwe Thank you for the tips. I appreciate your suggestions, and after reading the page that you suggested, I got the gist of what it is. I will try to learn more about them 😄.

  0

  

  Assurance Chioma Ikogwe•410

  @Aik-202Posted about 2 years ago

  @vanzasetia Okay, yeah, I was just highlighting the possible corrections to his accessibility issues, I too use main rather than role = 'main'. Like I said, div is meaningless, without adding aria roles the semantic remains null and screen readers cannot convey any information to the user. So attaching aria roles to them is best practice. Whatever test or tool you are using to check for accessibility will not catch all accessibility errors. So it's good you know the rules and know how to manually check it your self. If you feel like not attaching any meaning to them, then fine.

  0

  

  Assurance Chioma Ikogwe•410

  @Aik-202Posted about 2 years ago

  @AtulKumar0001 Okay, you are welcome. Glad to be of help

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @Aik-202

  My question is what is the inaccessible thing that you want to try to make accessible? Also, what is the value of the role attribute?

  Adding role to all div doesn't always make the website more accessible. It can potentially make things more inaccessible. A lot of meaningful elements can create unnecessary noises for screenreader users.

  Based on WebAIM research, the pages that have ARIA attributes introduce more accessibility errors than the ones that don't have ARIA attributes.

  "[...] Home pages with ARIA present averaged 70% more detected errors than those without ARIA [...]"

  It is proving that having ARIA attributes doesn't always make website more accessible.

  The most important thing is the quality, not the quantity! (Reference: What Is ARIA Even For? - YouTube)

  You are right that no matter what tools or how many tests we have done, there's no way we can catch all the accessibility errors. It means that there's no way that we can create a website that is accessible to absolutely everyone.

  Think of the ARIA attributes as an extension. So, the purpose is to extend the accessibility of the HTML element.

  For example, to create an accessible toggle button, we need to have aria-pressed attribute. Then, we can use JavaScript to toggle the value for the ARIA attribute.

  <button type="button" aria-pressed="false">Notify Me</button>
  

  0

  

  Assurance Chioma Ikogwe•410

  @Aik-202Posted about 2 years ago

  @vanzasetia

  <html lang="en">
      <head>
          <title>Hello</title>
      </head>
      <body>
          <div role="banner">This is the header</div>
          <div role="navigation">This is the nav</div>
          <div role="main">This is the main</div>
          <div role="contentinfo">This is the footer</div>
      </body>
  </html>
  

  The example above is an example I saw, during my first challenge in the community, when I had acessibility issues, I was directed here. here's the link to the article. And it's also stated there that.

  Ensure all content on a page is contained within a landmark region.

  I'm also in support of not overusing the aria roles, not every div requires an aria role, and also it is better to use semantic tags than aria roles. It's best to use the semantic tag pertaining to that particular role. i.e instead of using role = "main", the main tag should be used instead.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @Aik-202

  As long as the content is already inside the landmark elements then there's no need to add ARIA role attribute to every div.

  0

  

  Assurance Chioma Ikogwe•410

  @Aik-202Posted about 2 years ago

  @vanzasetia Okay if you say so.

  0