{"id":545,"date":"2020-09-01T23:16:00","date_gmt":"2020-09-01T22:16:00","guid":{"rendered":"https:\/\/cerovac.com\/a11y\/?p=545"},"modified":"2020-09-01T23:36:26","modified_gmt":"2020-09-01T22:36:26","slug":"aria-the-complex-parts-of-opera-music-for-accessibility","status":"publish","type":"post","link":"https:\/\/cerovac.com\/a11y\/2020\/09\/aria-the-complex-parts-of-opera-music-for-accessibility\/","title":{"rendered":"ARIA &#8211; the complex parts of opera music for accessibility"},"content":{"rendered":"\n<p>Aria felt familiar and the more I learned about accessibility &#8211; the more I wanted to remember. And all it took was a simple online search and then I remembered;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>An aria is a formal musical composition &#8211; self-contained piece for one voice, with or without instrumental or orchestral accompaniment, normally part of a larger work.<\/p><cite>definition of Aria from Wikipedia.<\/cite><\/blockquote>\n\n\n\n<p>Well this was it. I knew it. <\/p>\n\n\n\n<p>So there is a few common points here although accessibility and opera (in musical terms) seems to be totally separated sections; ARIA in accessibility is often also used in a self-contained elements and components, and it is almost always a part of a larger work.<\/p>\n\n\n\n<p>I do not know the reasons for the abbreviation of Accessible Rich Internet Application (ARIA), as it could also be named differently and I can only speculate that somebody liked opera music enough to propose this acronym for this &#8220;suite&#8221; as it is defined.<\/p>\n\n\n\n<p>But one thing is very clear &#8211; if you do not know all the details, if you are unsure about the patterns that you must respect, <a href=\"https:\/\/cerovac.com\/a11y\/2020\/05\/screen-reader-compatibility-of-html-elements-and-their-attributes\/\" data-type=\"post\" data-id=\"47\">if you are not familiar with support<\/a> and most importantly &#8211; if you can use a native, semantic, element &#8211; then please do use native HTML elements instead of writing something that can potentially &#8220;destroy the beauty of entire opera&#8221; if I may be allowed to paraphrase the webpage or application as a musical art-piece.<\/p>\n\n\n\n<p>Inspired by very useful  YouTube video from Google Chrome Developers, Una Kravets &#8211; the developer advocate to be precise &#8211; but I had to add this as a warning to somebody that would be tempted to over-engineer accessibility;<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Semantic markup - Designing in the Browser\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/arMgwKY52Bs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><figcaption>Semantic markup &#8211; Designing in the Browser &#8211; Nice video from Una Kravets, Google Chrome Developer channel, developer advocate) .<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Inspired by a YouTube video from Una Kravets and always knowing that aria reminded me of something I had to elaborate on that (and explain a small bit on dangers of aria as well)<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,3],"tags":[12,51,74,67,186],"class_list":["post-545","post","type-post","status-publish","format-standard","hentry","category-general","category-principles","tag-aria","tag-google-chrome","tag-html","tag-semantics","tag-youtube"],"_links":{"self":[{"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/posts\/545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/comments?post=545"}],"version-history":[{"count":0,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/posts\/545\/revisions"}],"wp:attachment":[{"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/media?parent=545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/categories?post=545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cerovac.com\/a11y\/wp-json\/wp\/v2\/tags?post=545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}