{"id":172,"date":"2026-04-13T07:25:36","date_gmt":"2026-04-13T07:25:36","guid":{"rendered":"https:\/\/gigz.pk\/html\/?post_type=lesson&p=172"},"modified":"2026-04-29T03:35:17","modified_gmt":"2026-04-29T03:35:17","slug":"aria-roles","status":"publish","type":"lesson","link":"https:\/\/gigz.pk\/html\/index.php\/lesson\/aria-roles\/","title":{"rendered":"ARIA Roles"},"content":{"rendered":"\n

ARIA stands for Accessible Rich Internet Applications. ARIA roles are used in HTML to improve accessibility for people using screen readers and other assistive technologies.<\/p>\n\n\n\n

What are ARIA Roles<\/strong><\/h3>\n\n\n\n

ARIA roles are special attributes added to HTML elements to describe their purpose more clearly. They help assistive tools understand how a part of the webpage should behave.<\/p>\n\n\n\n

Why ARIA Roles are Important<\/strong><\/h3>\n\n\n\n

Some HTML elements or custom components may not be fully understood by screen readers. ARIA roles help fill this gap by giving extra meaning to those elements.<\/p>\n\n\n\n

Example of ARIA Role<\/strong><\/h3>\n\n\n\n

<div role=”navigation”> <a href=”index.html”>Home<\/a> <a href=”about.html”>About<\/a> <\/div><\/p>\n\n\n\n

Common ARIA Roles<\/strong><\/h3>\n\n\n\n

navigation is used for menus and navigation bars.
button is used for clickable actions.
main is used for the main content of the page.
banner is used for the header section.
contentinfo is used for footer information.<\/p>\n\n\n\n

Example of Button Role<\/strong><\/h3>\n\n\n\n

<div role=”button” tabindex=”0″>Click Me<\/div><\/p>\n\n\n\n

What is tabindex<\/strong><\/h3>\n\n\n\n

The tabindex attribute allows non-button elements to be focusable using the keyboard.<\/p>\n\n\n\n

Best Practices for ARIA Roles<\/strong><\/h3>\n\n\n\n

Use semantic HTML first before adding ARIA roles.
Do not overuse ARIA roles if HTML already provides meaning.
Always test with screen readers when possible.<\/p>\n\n\n\n

Summary<\/strong><\/h3>\n\n\n\n

ARIA roles improve web accessibility by helping assistive technologies understand webpage elements better. They should be used carefully along with proper HTML structure.<\/p>\n\n\n

Home<\/a><\/span> \u00bb Advanced HTML > Accessibility (a11y) > ARIA Roles<\/span><\/span><\/div>\n\n\n
<\/strong>

<\/p> <\/div> <\/div>\n","protected":false},"menu_order":57,"template":"","class_list":["post-172","lesson","type-lesson","status-publish","hentry"],"yoast_head":"\nARIA Roles - HTML learning mastery<\/title>\n<meta name=\"description\" content=\"Learn HTML ARIA roles for accessibility to improve web usability for screen readers using proper roles, attributes, and best practices.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/gigz.pk\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ARIA Roles - HTML learning mastery\" \/>\n<meta property=\"og:description\" content=\"Learn HTML ARIA roles for accessibility to improve web usability for screen readers using proper roles, attributes, and best practices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/gigz.pk\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML learning mastery\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-29T03:35:17+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":[\"WebPage\",\"FAQPage\"],\"@id\":\"https:\\\/\\\/gigz.pk\\\/html\\\/index.php\\\/lesson\\\/aria-roles\\\/\",\"url\":\"https:\\\/\\\/gigz.pk\\\/\",\"name\":\"ARIA Roles - HTML learning mastery\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/gigz.pk\\\/html\\\/#website\"},\"datePublished\":\"2026-04-13T07:25:36+00:00\",\"dateModified\":\"2026-04-29T03:35:17+00:00\",\"description\":\"Learn HTML ARIA roles for accessibility to improve web usability for screen readers using proper roles, attributes, and best practices.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/gigz.pk\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/gigz.pk\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/gigz.pk\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/gigz.pk\\\/html\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Advanced HTML > Accessibility (a11y) > ARIA Roles\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/gigz.pk\\\/html\\\/#website\",\"url\":\"https:\\\/\\\/gigz.pk\\\/html\\\/\",\"name\":\"HTML learning mastery\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/gigz.pk\\\/html\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ARIA Roles - HTML learning mastery","description":"Learn HTML ARIA roles for accessibility to improve web usability for screen readers using proper roles, attributes, and best practices.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/gigz.pk\/","og_locale":"en_US","og_type":"article","og_title":"ARIA Roles - HTML learning mastery","og_description":"Learn HTML ARIA roles for accessibility to improve web usability for screen readers using proper roles, attributes, and best practices.","og_url":"https:\/\/gigz.pk\/","og_site_name":"HTML learning mastery","article_modified_time":"2026-04-29T03:35:17+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["WebPage","FAQPage"],"@id":"https:\/\/gigz.pk\/html\/index.php\/lesson\/aria-roles\/","url":"https:\/\/gigz.pk\/","name":"ARIA Roles - HTML learning mastery","isPartOf":{"@id":"https:\/\/gigz.pk\/html\/#website"},"datePublished":"2026-04-13T07:25:36+00:00","dateModified":"2026-04-29T03:35:17+00:00","description":"Learn HTML ARIA roles for accessibility to improve web usability for screen readers using proper roles, attributes, and best practices.","breadcrumb":{"@id":"https:\/\/gigz.pk\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/gigz.pk\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/gigz.pk\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/gigz.pk\/html\/"},{"@type":"ListItem","position":2,"name":"Advanced HTML > Accessibility (a11y) > ARIA Roles"}]},{"@type":"WebSite","@id":"https:\/\/gigz.pk\/html\/#website","url":"https:\/\/gigz.pk\/html\/","name":"HTML learning mastery","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/gigz.pk\/html\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/gigz.pk\/html\/index.php\/wp-json\/wp\/v2\/lesson\/172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gigz.pk\/html\/index.php\/wp-json\/wp\/v2\/lesson"}],"about":[{"href":"https:\/\/gigz.pk\/html\/index.php\/wp-json\/wp\/v2\/types\/lesson"}],"wp:attachment":[{"href":"https:\/\/gigz.pk\/html\/index.php\/wp-json\/wp\/v2\/media?parent=172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}