Los roles definen qué es algo

A role tells assistive tech the kind of thing an element is: a button, a tab, an alert, a dialog. It answers what is this?

Most HTML tags carry an implicit role built in. A nav is a navigation, an h1 is a heading, a button is a button.

When no native tag fits, you set the role attribute by hand to give a generic element a recognized identity.

Widget roles describe interactive things you sometimes build by hand: tab, slider, switch, menuitem, and treeitem.

Landmark roles map the page into regions like banner, main, and navigation so users can jump straight to a section.

Structure roles describe static content: heading, list, listitem, and figure. They label the shape of your information.

An element gets one role. You cannot make something a button and a link at once, so pick the identity that matches its real job.

Choosing a role is a contract. role=tab means you owe it a tablist parent, keyboard support, and a linked tabpanel.

Never put a role on an element that already has the right one. A redundant role on a real button just adds noise and risk.

role=presentation strips an element of its semantics. Useful for a layout table, dangerous on anything users need to understand.

Get the role right first. States and properties only make sense once the element has a clear identity to attach them to.

You wrap a custom popup that interrupts the user in a div. Which role fits?

You learned a role names what an element is. Prefer native implicit roles, add one explicit role only when needed, and honor its contract.