CODEWITHSUNDEEP
htmlvalidationattributesaccessibility
limakid
limakid

Reputation: 81

Name, id, aria, role attributes within HTML

I know that name and id have a key importance when including them in to the web form elements, all these attributes like name, id, role, aria-xxx, title, should always be included inside the html elements?

So, every article, every section, every navigation menu item must have ALL these attributes? Or some of them will be relevant for certain elements, like "name" for webforms or "id" for javascript targeting? Unfortunately, the browser doesn't return me a validation message if some attributes are not supported or not needed. Orientation, please.

In a form is it ok to have it?

<label for=”first-name”>First Name</label> <input type=”text” id=”first-name” name=”first-name” required aria-required=”true” role="textbox" aria-labelledBy="something">

As you see I put required AND aria-required and also a role, might be a conflict? I know that role attribute=textbox is nojt the correct one but just to illustrate my doubt. Thanks in advance.

Upvotes: 1

Views: 974

Answers (1)

Omar Sourour
Omar Sourour

Reputation: 399

That's a good question. The TLDR is no, you do not have to add all these attributes for all HTML elements. For more detailed explanation, check the following text.

Each of the attributes you mentioned plays a separate role. Let's take the ones you mentioned as an example:

  • id: Used to give an element a unique identifier. Useful to reference using JavaScript getElementById and also useful for referencing using other attributes in the same page (like how the <label for="first-name"> references the input element by id).

  • name: This is primarily used to read data of form elements. At some point in time where forms were posted through traditional POST calls to the server, the name attribute would denote the keys of the key/value pairs that the server would receive from the web page. Nowadays, people rely on Web API calls and AJAX calls, but they're still used nonetheless.

  • role: This is useful for screen readers and assistive. You should put role on HTML elements when their original tag element does not portray their real semantic in the page. A common example is people using div elements to build tables. In that case, you need to add roles of table, grid, row, cell, etc. for the respective div elements that constitute the table. Had you used the native HTML elements that build tables (, , , etc.), roles would have been redundant.

  • aria-xxxx: Also used for screen readers and assistive technologies. There are many types of aria attributes used for multiple reasons. There is no lack of references out there on the web; you can easily search for them on MDN or other websites. What I want to note here that some attributes render them redundant.

    • Let's take your snippet above as an example. <input required aria-required="true" />. The required attribute was introduced in HTML 5 and is enough for screen readers. So if you are targeting modern browsers (which is highly likely), adding aria-required is redundant. However if you are targeting browsers that do not support HTML 5, then having it is useful since those browsers would ignore the required attribute.
    • Another example taken from you snippet to showcase the same point is that the aria-labelledBy is redundant here as well. That is because you already have the input labeled by the <label> element by virtue of the for attribute. In short, aria attributes are useful if native HTML elements and attributes are not already sufficient.

In summary, each attribute has its different purpose. Not all of them need to be present all the time, it is dependent on your code structure, the HTML elements you are using, the browsers you are targeting, etc.

Hope this helps! :)

Upvotes: 4

Related Questions