Normal internal CSS with media query for margin

@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.

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

@Aik-202

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

@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.

@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."

@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 😄.

@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.

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

@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>

@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.

@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.

@vanzasetia Okay if you say so.