{"id":24900,"date":"2020-10-01T21:11:59","date_gmt":"2020-10-01T13:11:59","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=24900"},"modified":"2020-09-30T20:26:47","modified_gmt":"2020-09-30T12:26:47","slug":"aria-web-standards","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/aria-web-standards\/","title":{"rendered":"A Look Into: ARIA Web Standards &amp; HTML Apps Accessibility"},"content":{"rendered":"<p>A truly open and inclusive web needs technologies that allow disabled users relying on assistive technologies to enjoy dynamic web content and modern web apps. W3C\u2019s accessibility web standards aim to populate the web with <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/wai-aria\/\">Accessible Rich Internet Applications (ARIA)<\/a> that users with disabilities can efficiently use.<\/p>\n<p>ARIA is one of the numerous <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/\">accessibility standards and guidelines<\/a> published by the Web Accessibility Intitiative (WAI). It provides an additional markup that can be easily inserted into HTML documents. WAI-ARIA is a cross-platform an cross-device solution that <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/2014\/03\/aria.html.en\">targets the Open Web Platform<\/a>, so don\u2019t only think about websites, but also about games, digital entertainment, healthcare, mobile, and other kinds of apps.<\/p>\n<p>In this post we will take a look at how you can add accessibility to your HTML documents with the help of WAI-ARIA standards.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/web-dev-acronyms\/\" class=\"ref-block__link\" title=\"Read More: 30 Acronyms All Web Developers Should Know\" rel=\"bookmark\"><span class=\"screen-reader-text\">30 Acronyms All Web Developers Should Know<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/web-dev-acronyms.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-27993 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/web-dev-acronyms.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">30 Acronyms All Web Developers Should Know<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tThe jargon of the web development industry contains so many acronyms we are using day in and day...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>The ARIA Framework<\/h2>\n<p>The syntax of HTML doesn\u2019t always allow developers to describe elements properly, to identify their roles, and specify the relationships between them.<\/p>\n<p>While that\u2019s rarely a problem for visitors who are in full possession of their senses, it can impede assistive technology users from understanding what\u2019s happening on the screen and exploring their options.<\/p>\n<p>This is the point where ARIA comes to our help, as it makes possible to define the purpose of different elements with the help of <strong>landmark roles<\/strong>, and describe their nature with <strong>aria-prefixed attributes<\/strong>.<\/p>\n<p>Aria-prefixed attributes have two types: <strong>properties<\/strong> that describe features that are less likely to change throughout the page life-cycle, and <strong>states<\/strong> that provide information about things that may frequently change due to user interaction.<\/p>\n<h2>Landmark Roles<\/h2>\n<p><strong>Landmark roles<\/strong> are the most well-known forms of ARIA\u2019s Roles Model (others are the Abstract Roles, the Widget Roles, and the  Document Structure Roles). Landmark roles enable developers to identify large <strong>perceivable regions<\/strong> on the web page that assistive technology users may want to quickly access.<\/p>\n<p>There are 8 types of ARIA landmark roles, and they need to be added as attributes to the related HTML tags.<\/p>\n<h3>role=\u201dbanner\u201d<\/h3>\n<p>The <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#banner\">banner role<\/a> is intended to be used mainly for content that is related to the entire site, not just to individual pages. It\u2019s usually added as an attribute to the main header of the site for the logo and other important site-wide information.<\/p>\n<p>It\u2019s important that you can use the banner role only once within any HTML documents or apps.<\/p>\n<h3>role=\u201dmain\u201d<\/h3>\n<p>The <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#main\">main<\/a> landmark role is related to the main content of the document. It can\u2019t be used more than once on any HTML page. It usually follows the <code>&lt;div role=\"main\"&gt;<\/code> syntax, or in HTML5 the more semantic <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/html5doctor.com\/the-main-element\/\"><code>&lt;main role=\"main\"&gt;<\/code><\/a>. The latter was added to the W3C specs with the purpose of mapping the <strong>main<\/strong> ARIA landmark role to a semantic HTML element.<\/p>\n<h3>role=\u201dnavigation\u201d<\/h3>\n<p>The <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#navigation\">navigation<\/a> role is meant to be used for indicating an area that contains navigational elements such as links and lists on a site.<\/p>\n<h3>role=\u201dcomplementary\u201d<\/h3>\n<p>The <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#complementary\">complementary<\/a> landmark role describes additional content that is related to the main content of the site. It needs to be placed to the similar level in the DOM hierarchy as <code>role=\"main\"<\/code>. Related posts, popular articles, latest comments are typical examples of autonomous complementary content.<\/p>\n<h3>role=\u201dcontentinfo\u201d<\/h3>\n<p>The <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#contentinfo\">contentinfo<\/a> role informs user agents about the presence of a region where  different kinds of metadata, such as copyright info, legal and privacy statements can be found. It\u2019s typically used for the footer of a site.<\/p>\n<h3>role=\u201dform\u201d<\/h3>\n<p>The <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#form\">form<\/a> landmark role indicates a form waiting for user input. For search forms you should use <code>role=\"search\"<\/code> instead.<\/p>\n<h3>role=\u201dsearch\u201d<\/h3>\n<p>The <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#search\">search<\/a> role is pretty self-explanatory, it\u2019s intended to help assistive technologies identify the search functionality of a website.<\/p>\n<h3>role=\u201dapplication\u201d<\/h3>\n<p>You can use the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#application\">application<\/a> landmark role for a region that you want to declare as a web app, rather than a web document. It\u2019s not recommended to include it in traditional websites, as it hints to assistive technologies to switch from normal browsing mode to application browsing mode. You should only use this landmark role with great care.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/aria-web-standards\/landmark-roles-example.jpg\" alt=\"ARIA Landmark Roles Example\"><\/figure>\n<h2>States and Properties<\/h2>\n<p>While roles enable you to define the meaning of HTML tags, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#dfn-state\">states<\/a> and <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#dfn-property\">properties<\/a> provide the user with extra information on how to interact with them. Both states and properties are marked with <strong>aria-prefixed attributes<\/strong> with the syntax <strong>aria-*<\/strong>.<\/p>\n<p>The most well-known ARIA attributes are probably the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#requiredState\">aria-required<\/a> property and the aria-checked state. Aria-required is a <strong>property<\/strong> because it\u2019s a permanent feature of an input element (i.e. the user must fill it in), while aria-checked is a <strong>state<\/strong> because a checkbox may frequently change its value due to user interaction.<\/p>\n<h2>The Syntax of Aria-prefixed Attributes<\/h2>\n<p>States and properties sometimes take token values (a limited set of predefined values), for instance the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#aria-live\">aria-live<\/a> property can have 3 different values: <em>off<\/em>, <em>polite<\/em>, <em>assertive<\/em>. The syntax in this example looks like this: <code> &lt;div id=\"some-id\" class=\"some-class\" aria-live=\"assertive\"&gt;&lt;div&gt;<\/code>.<\/p>\n<p>In other cases the values of aria-prefixed attributes are represented by <em>strings<\/em>, <em>numbers<\/em>, <em>integers<\/em>, <em>ID references<\/em> or <em>true\/false<\/em> values.<\/p>\n<h2>How to Make Use of ARIA States and Properties<\/h2>\n<h3>1. Build Relationships Between Elements With Relationship Attributes<\/h3>\n<p>Use <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/2010\/WD-wai-aria-20100916\/states_and_properties#attrs_relationships\">relationship attributes<\/a> to indicate relationships between different elements on your site, that can\u2019t be otherwise determined from the document structure. For example the <code>aria-labelledby<\/code> property identifies the element that labels the current element.<\/p>\n<p><code>aria-labelledby<\/code> \u2013 among <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\/ARIA_Techniques\/Using_the_aria-labelledby_attribute\">many other things<\/a> \u2013 can bind headings to ARIA landmark regions in the following way:<\/p>\n<pre>&lt;div role=\"main\" aria-labelledby=\"some-id\"&gt;\r\n\r\n\t&lt;h1 id=\"some-id\"&gt;This Is A Heading&lt;\/h1&gt;\r\n\r\n\tMain content...\r\n\r\n&lt;\/div&gt;\r\n<\/pre>\n<h3>2. Synchronize States and Properties With The Element\u2019s Lifecycle<\/h3>\n<p>After you set an ARIA landmark role for a perceivable area on your HTML page, it can help assistive technologies a lot if you change the ARIA-prefixed states and properties of child elements in accordance with events happening on the screen.<\/p>\n<p>This can be crucial where users have to interact with the site, for example filling in a form or running a search query.<\/p>\n<h3>3. Match The Visual and The Accessible Interfaces<\/h3>\n<p>The general rule of thumb of accessibility design is that the current state of the user interface always needs to be perceivable by assistive technologies. For instance if the user chooses an option in a form, it needs to appear selected for assistive technologies too.<\/p>\n<p>This can be easily achieved by utilizing the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/2010\/WD-wai-aria-20100916\/states_and_properties#aria-selected\">aria-selected<\/a> state with the following syntax: <code>&lt;option aria-selected=\"true\"&gt;&lt;\/option&gt;<\/code>.<\/p>\n<p>W3C\u2019s <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/2010\/WD-wai-aria-practices-20100916\/\">WAI-ARIA Authoring Practices<\/a> guideline can give you many other great ideas about how to properly harmonize the visual and the accessible interfaces of your site.<\/p>\n<h2>Don\u2019t Overuse ARIA<\/h2>\n<p>Using ARIA roles and attributes sometimes can be redundant. When you use semantic tags of HTML5 such as <code>&lt;button&gt;&lt;\/button&gt;<\/code> or <code>&lt;form&gt;&lt;\/form&gt;<\/code>, modern web browsers add the appropriate ARIA semantics by default. In this case it has no sense to separately set the ARIA landmark roles.<\/p>\n<p>For example it\u2019s unnecessary to use the <strong>form<\/strong> landmark role to define the <code>&lt;form&gt;<\/code> element. Instead of the <code>&lt;form role=\"form\"&gt;&lt;\/form&gt;<\/code> syntax it\u2019s perfectly enough to use just <code>&lt;form&gt;&lt;\/form&gt;<\/code>. It\u2019s also superfluous to use HTML\u2019s native attributes along with the appropriate ARIA attribute.<\/p>\n<p>So if you\u2019ve already added the <strong>hidden<\/strong> HTML attribute to a form input, it\u2019s unnecessary to add the <strong>aria-hidden<\/strong> state, as the browser includes it by default.<\/p>","protected":false},"excerpt":{"rendered":"<p>A truly open and inclusive web needs technologies that allow disabled users relying on assistive technologies to enjoy dynamic web content and modern web apps. W3C\u2019s accessibility web standards aim to populate the web with Accessible Rich Internet Applications (ARIA) that users with disabilities can efficiently use. ARIA is one of the numerous accessibility standards&hellip;<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[3665,506],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>A Look Into: ARIA Web Standards &amp; HTML Apps Accessibility - Hongkiat<\/title>\n<meta name=\"description\" content=\"A truly open and inclusive web needs technologies that allow disabled users relying on assistive technologies to enjoy dynamic web content and modern web\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/aria-web-standards\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Look Into: ARIA Web Standards &amp; HTML Apps Accessibility\" \/>\n<meta property=\"og:description\" content=\"A truly open and inclusive web needs technologies that allow disabled users relying on assistive technologies to enjoy dynamic web content and modern web\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/aria-web-standards\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-01T13:11:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/aria-web-standards\/landmark-roles-example.jpg\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anna Monus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/aria-web-standards\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/aria-web-standards\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"A Look Into: ARIA Web Standards &amp; HTML Apps Accessibility\",\"datePublished\":\"2020-10-01T13:11:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/aria-web-standards\\\/\"},\"wordCount\":1173,\"commentCount\":32,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/aria-web-standards\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/aria-web-standards\\\/landmark-roles-example.jpg\",\"keywords\":[\"Accessibility Design\",\"HTML\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/aria-web-standards\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/aria-web-standards\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/aria-web-standards\\\/\",\"name\":\"A Look Into: ARIA Web Standards &amp; HTML Apps Accessibility - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/aria-web-standards\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/aria-web-standards\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/aria-web-standards\\\/landmark-roles-example.jpg\",\"datePublished\":\"2020-10-01T13:11:59+00:00\",\"description\":\"A truly open and inclusive web needs technologies that allow disabled users relying on assistive technologies to enjoy dynamic web content and modern web\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/aria-web-standards\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/aria-web-standards\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/aria-web-standards\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/aria-web-standards\\\/landmark-roles-example.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/aria-web-standards\\\/landmark-roles-example.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/aria-web-standards\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Look Into: ARIA Web Standards &amp; HTML Apps Accessibility\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Look Into: ARIA Web Standards &amp; HTML Apps Accessibility - Hongkiat","description":"A truly open and inclusive web needs technologies that allow disabled users relying on assistive technologies to enjoy dynamic web content and modern web","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:\/\/www.hongkiat.com\/blog\/aria-web-standards\/","og_locale":"en_US","og_type":"article","og_title":"A Look Into: ARIA Web Standards &amp; HTML Apps Accessibility","og_description":"A truly open and inclusive web needs technologies that allow disabled users relying on assistive technologies to enjoy dynamic web content and modern web","og_url":"https:\/\/www.hongkiat.com\/blog\/aria-web-standards\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-10-01T13:11:59+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/aria-web-standards\/landmark-roles-example.jpg","type":"","width":"","height":""}],"author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/aria-web-standards\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/aria-web-standards\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"A Look Into: ARIA Web Standards &amp; HTML Apps Accessibility","datePublished":"2020-10-01T13:11:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/aria-web-standards\/"},"wordCount":1173,"commentCount":32,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/aria-web-standards\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/aria-web-standards\/landmark-roles-example.jpg","keywords":["Accessibility Design","HTML"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/aria-web-standards\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/aria-web-standards\/","url":"https:\/\/www.hongkiat.com\/blog\/aria-web-standards\/","name":"A Look Into: ARIA Web Standards &amp; HTML Apps Accessibility - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/aria-web-standards\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/aria-web-standards\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/aria-web-standards\/landmark-roles-example.jpg","datePublished":"2020-10-01T13:11:59+00:00","description":"A truly open and inclusive web needs technologies that allow disabled users relying on assistive technologies to enjoy dynamic web content and modern web","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/aria-web-standards\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/aria-web-standards\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/aria-web-standards\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/aria-web-standards\/landmark-roles-example.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/aria-web-standards\/landmark-roles-example.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/aria-web-standards\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A Look Into: ARIA Web Standards &amp; HTML Apps Accessibility"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6tC","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=24900"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24900\/revisions"}],"predecessor-version":[{"id":52426,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24900\/revisions\/52426"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=24900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=24900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=24900"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=24900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}