{"id":178,"date":"2020-08-07T18:49:41","date_gmt":"2020-08-08T01:49:41","guid":{"rendered":"https:\/\/idwerkz.com\/blog\/?p=178"},"modified":"2020-08-08T22:24:01","modified_gmt":"2020-08-09T05:24:01","slug":"accessible-content-containers","status":"publish","type":"post","link":"https:\/\/idwerkz.com\/blog\/accessibility\/accessible-content-containers\/","title":{"rendered":"Accessible Content Containers"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/glen-noble-o4-YyGi5JBc-unsplash-1024x683.jpg\" alt=\"stacks of books piled from floor to ceiling\" class=\"wp-image-181\" srcset=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/glen-noble-o4-YyGi5JBc-unsplash-1024x683.jpg 1024w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/glen-noble-o4-YyGi5JBc-unsplash-300x200.jpg 300w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/glen-noble-o4-YyGi5JBc-unsplash-768x512.jpg 768w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/glen-noble-o4-YyGi5JBc-unsplash-1536x1024.jpg 1536w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/glen-noble-o4-YyGi5JBc-unsplash.jpg 1920w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption>Photo by <a href=\"https:\/\/unsplash.com\/@glennoble?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Glen Noble<\/a> on <a href=\"https:\/\/unsplash.com\/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Technology Focus: Content vs Container<\/h2>\n\n\n\n<p>When you share online content, your content will be presented through a browser to the end user. The browser can be seen as a container for your content.<\/p>\n\n\n\n<p>There is a different set of keyboard controls and accessibility concerns for the browser, independent from your content, and sometimes the browser and content don\u2019t work well together. Sometimes the browser can cause issues that make your content inaccessible.<\/p>\n\n\n\n<p>You can find another layer of technology between your content and the browser, in the form of your Course Management System (CMS). The menus and structure for the CMS sit within the browser, and together the browser and CMS serve as the container for your content.<\/p>\n\n\n\n<p>When dealing with digital information, you will frequently find your content being contained by another over-arching layer of technology. The issue for accessibility is whether or not these containers intercept or interfere the accessibility of your content.<\/p>\n\n\n\n<p>You can format your content for accessibility, but you can\u2019t reprogram everyone\u2019s browser to make it work better or more accessibly. The best you can do is maximize the accessibility formatting of your content, and maximize the accessibility capability of your container.<\/p>\n\n\n\n<p>Be aware of any issues that arise when your content is viewed through a particular browser \u2013 and if that happens, then recommend your students use a different browser.<\/p>\n\n\n\n<p>Sometimes there will be a specific recommended browser and assistive technology combination for a content source to be accessible. This grows increasingly common with specialized forms of digital content such as STEM materials.<\/p>\n\n\n\n<p>It can be challenging to keep up with the pace of modern technology, and sometimes even more difficult waiting for technology to improve. In the meantime, we must try to overcome limitations with our digital containers through clever content design.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">CHALLENGE: Check your email using only the keyboard.<\/h1>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/onlineprinters-oIpJ8koLx_s-unsplash-1024x683.jpg\" alt=\"Orange @ symbol\" class=\"wp-image-180\" srcset=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/onlineprinters-oIpJ8koLx_s-unsplash-1024x683.jpg 1024w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/onlineprinters-oIpJ8koLx_s-unsplash-300x200.jpg 300w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/onlineprinters-oIpJ8koLx_s-unsplash-768x512.jpg 768w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/onlineprinters-oIpJ8koLx_s-unsplash-1536x1024.jpg 1536w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/onlineprinters-oIpJ8koLx_s-unsplash.jpg 1920w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption>Photo by <a href=\"https:\/\/unsplash.com\/@onlineprinters?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Onlineprinters<\/a> on <a href=\"https:\/\/unsplash.com\/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a><\/figcaption><\/figure>\n\n\n\n<p>A common example that illustrates the content vs container dynamic is email. The email message is the content, and the program you use to read your email is the container. The same content can be presented through a lot of different containers \u2013 and it usually works just fine.<\/p>\n\n\n\n<p>If you use webmail, then you have an email program in a browser \u2013 or a container in a container.<\/p>\n\n\n\n<p>Each container has its own keyboard commands and accessibility capability.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Try It!<\/h2>\n\n\n\n<p>You will have to look for your focus indicator to know what the keyboard is interacting with. The focus indicator should be a solid white outline in Windows. The focus indicator varies in Mac OS, but it is usually an obvious highlight or solid blue.<\/p>\n\n\n\n<p>I have used the Chrome browser for this activity, but feel free to substitute your browser of choice.<\/p>\n\n\n\n<p>Remember that adding <strong>SHIFT<\/strong> to <strong>TAB<\/strong> will make the sequential navigation go back the other direction.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Checking Gmail<\/h2>\n\n\n\n<p>You will need to first enable <strong>Keyboard shortcuts<\/strong> from the Gmail Settings menu if you want to use keyboard commands in Gmail.<\/p>\n\n\n\n<p>Here are the <a href=\"https:\/\/support.google.com\/a\/users\/answer\/9298571?hl=en\">complete instructions and keyboard commands for Gmail<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">From Windows 10: Start the Chrome Browser<\/h3>\n\n\n\n<p>To start the Chrome browser from Windows 10 via keyboard commands:<\/p>\n\n\n\n<ol class=\"wp-block-list\" type=\"1\"><li><strong>CTRL + ESCAPE<\/strong> to open the START menu within Windows.<\/li><li>Press <strong>TAB<\/strong> twice to get the system focus to the Applications list.<\/li><li>Press <strong>G<\/strong> for Google, and then use the <strong>DOWN<\/strong> <strong>ARROW<\/strong> key to move through the applications that begin with a G until you get to Google Chrome.<\/li><li>When you get to Google Chrome, press <strong>ENTER<\/strong>.<\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">From Mac OS: Start the Chrome Browser<\/h3>\n\n\n\n<p>To start the Chrome browser from Mac OS via keyboard commands:<\/p>\n\n\n\n<ol class=\"wp-block-list\" type=\"1\"><li><strong>OPTION + COMMAND + SPACE<\/strong> to open the Finder window in \u201cSearching This Mac\u201d mode.<\/li><li>Press <strong>COMMAND + SHIFT + A<\/strong> to open the Applications directory.<\/li><li>Press <strong>G<\/strong> to go to the programs that start with a \u201cG\u201d and use the down arrow to find and select the Google Chrome application.<\/li><li>Press <strong>ENTER<\/strong>.<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Within Chrome<\/h2>\n\n\n\n<p>We begin our user experience within Chrome with the cursor in the address bar. This means we can begin typing right away \u2013 type \u201cgmail.com\u201d and hit <strong>ENTER<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Within Gmail<\/h2>\n\n\n\n<p>Once Gmail has loaded in your browser, you can use the following commands to navigate around the Gmail interface:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>G + I<\/strong> takes you to the inbox.<\/li><li>Use the <strong>UP<\/strong> and <strong>DOWN ARROW<\/strong> keys to navigate through the inbox.<\/li><li>Press <strong>ENTER<\/strong> to open a message.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Within a Message<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Press <strong>R<\/strong> to Reply to the message.<\/li><li>Press <strong>A<\/strong> to Reply All to the message.<\/li><li>Press <strong>F<\/strong> to forward the message.<\/li><li>Press <strong>G + I<\/strong> to return to the inbox.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Technology Focus: Content vs Container When you share online content, your content will be presented through a browser to the end user. The browser can be seen as a container for your content. There is a different set of keyboard controls and accessibility concerns for the browser, independent from your content, and sometimes the browser &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/idwerkz.com\/blog\/accessibility\/accessible-content-containers\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Accessible Content Containers&#8221;<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,5],"tags":[9,32],"class_list":["post-178","post","type-post","status-publish","format-standard","hentry","category-31-days-to-a11y","category-accessibility","tag-a11y","tag-gmail"],"_links":{"self":[{"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/posts\/178","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/comments?post=178"}],"version-history":[{"count":4,"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/posts\/178\/revisions"}],"predecessor-version":[{"id":184,"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/posts\/178\/revisions\/184"}],"wp:attachment":[{"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/media?parent=178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/categories?post=178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/tags?post=178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}