{"id":1266,"date":"2019-09-23T09:00:48","date_gmt":"2019-09-23T16:00:48","guid":{"rendered":"https:\/\/blogs.lanecc.edu\/webteam\/?p=1266"},"modified":"2019-09-11T22:41:17","modified_gmt":"2019-09-12T05:41:17","slug":"understanding-wcag-2-1-1-3-4-orientation","status":"publish","type":"post","link":"https:\/\/blogs.lanecc.edu\/webteam\/2019\/09\/23\/understanding-wcag-2-1-1-3-4-orientation\/","title":{"rendered":"Understanding WCAG 2.1 – 1.3.4 Orientation"},"content":{"rendered":"

The very first success criterion we’ll look at is 1.3.4: Orientation<\/a> (level AA). Remember that WCAG 2.1 extends on the work already done in 2.0<\/a>, so because there was nothing added to parts 1.0, 1.1, or 1.2 we can skip those. Here’s the full text of the new criterion:<\/p>\n

Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.<\/p><\/blockquote>\n

This is one that definitely feels like a best practice in user experience. Let’s take a look at an the Garmin Connect app, which both follows this standard really well and really poorly at the same time.<\/p>\n

Here’s one of the screens showing my steps for the day on my phone:<\/p>\n

\"A<\/a>
Why yes, I did choose a day when I met my step goal handily.<\/figcaption><\/figure>\n

When the phone is in portrait mode (the way most of us hold our phones most of the time), everything looks good, although the astute reader will note that app violates success criterion 1.4.1<\/a>). But here’s what happens when we flip that onto its side:<\/p>\n

\"It's<\/a>When we’re in landscape (the way most of us should<\/em> shoot videos on our phone), everything is sideways. It’s, honestly, terribly annoying, if not a little lazy. If those boxes were to all rotate with the screen, and maybe just be oriented a little differently, the screen would be just as useful, and provide the exact same information.<\/p>\n

But the connect app also does a good job taking advantage of the different screen orientations to show different information. Here’s another example from an activity a while back:<\/p>\n

\"Showing<\/a>
It’s a little embarrassing how far back I had to look to find an activity.<\/figcaption><\/figure>\n

But this time, when we switch to landscape, we get a different screen:<\/p>\n

\"A<\/a>The developers over at Garmin clearly felt that those graphs only make sense in landscape, where they can be a larger while maintaining proportion. I’m not sure I fully agree – sometimes activities are so long you need a monitor, not a phone – but they clearly feel that the specific screen orientation is essential to the information being displayed.<\/p>\n

If you’re leaving out screen orientation as a part of your media queries when developing for the web, then you’re probably in good shape. And, on the topic of good shape, feel free to send me a step challenge on Garmin Connect. I’ve got a camping trip coming up this fall, and for once I’d like to huff and puff less than the other folks with me.<\/p>\n

Looking for the rest of the posts in this series<\/a>?<\/p>\n","protected":false},"excerpt":{"rendered":"

The very first success criterion we’ll look at is 1.3.4: Orientation (level AA). Remember that WCAG 2.1 extends on the work already done in 2.0, so because there was nothing added to parts 1.0, 1.1, or 1.2 we can skip those. Here’s the full text of the new criterion: Content does not restrict its view … Continue reading “Understanding WCAG 2.1 – 1.3.4 Orientation”<\/span><\/a><\/p>\n","protected":false},"author":86,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":"","_wpscppro_dont_share_socialmedia":false,"_wpscppro_custom_social_share_image":0,"_facebook_share_type":"","_twitter_share_type":"","_linkedin_share_type":"","_pinterest_share_type":"","_linkedin_share_type_page":"","_instagram_share_type":"","_medium_share_type":"","_threads_share_type":"","_google_business_share_type":"","_selected_social_profile":[],"_wpsp_enable_custom_social_template":false,"_wpsp_social_scheduling":{"enabled":false,"datetime":null,"platforms":[],"status":"template_only","dateOption":"today","timeOption":"now","customDays":"","customHours":"","customDate":"","customTime":"","schedulingType":"absolute"},"_wpsp_active_default_template":true},"categories":[38],"tags":[6],"class_list":["post-1266","post","type-post","status-publish","format-standard","hentry","category-wcag-2-1","tag-accessibility"],"_links":{"self":[{"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/posts\/1266","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/users\/86"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/comments?post=1266"}],"version-history":[{"count":3,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/posts\/1266\/revisions"}],"predecessor-version":[{"id":1279,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/posts\/1266\/revisions\/1279"}],"wp:attachment":[{"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/media?parent=1266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/categories?post=1266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/tags?post=1266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}