{"id":139733,"date":"2017-05-10T11:00:23","date_gmt":"2017-05-10T16:00:23","guid":{"rendered":"https:\/\/getflywheel.com\/?p=22502"},"modified":"2023-04-26T15:03:04","modified_gmt":"2023-04-26T20:03:04","slug":"an-introduction-to-accessibility-part-2","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-2\/","title":{"rendered":"An Introduction to Accessibility: Part 2"},"content":{"rendered":"\n

In the first article in our overview of accessibility,<\/a> we discussed the standards of a site being perceivable. This essential first step is crucial, but is far from the entire picture. Once we\u2019ve made a site or piece of digital content perceivable, we must make sure the user can take the next step and interact with the content.<\/p>\n\n\n\n

The second principle of accessibility<\/a> is that \u201cuser interface components and navigation must be operable.\u201d In short, a user must be able to operate the site, regardless of ability. For most sites that contain just text information and clickable links, this is relatively easy to achieve, but it is still a frequently overlooked problem.<\/p>\n\n\n\n

Operable<\/h2>\n\n\n\n

The typical user operates a site by reading with their eyes and scrolling with a mouse or trackpad. But what if you cannot use a mouse or trackpad? Imagine someone who suffers from a debilitating combination of rheumatoid arthritis and an autoimmune disease. Her fingers barely move, and as a result, both touch screens and trackpads are nearly impossible for her to use. As a result, she needs a mouse. <\/p>\n\n\n\n

But if a mouse is not available, she\u2019ll use the keyboard to navigate a site. Keyboard usage is a pillar of accessibility, and yet so many sites ignore it.<\/p>\n\n\n\n

\"a<\/figure>\n\n\n\n

At the base level, the user should be able to scroll up and down using the arrow keys in the same way they would if they used a mouse. The user should also be able to use the tab key to move between links. All major browsers do this by default, unless you actively prevent it or make a JavaScript error like assigning a click event to an element that cannot receive focus. <\/p>\n\n\n\n

If you\u2019re actively preventing keyboard functionality, there\u2019s no other way to put it: You\u2019re going out of your way to make your site less accessible. If you\u2019re doing so, now is the time to fix it.<\/p>\n\n\n\n

One of the keys to navigating via the keyboard is the use of :focus (focus). Focus is a CSS pseudo-class in the same vein as :hover (hover). It gets triggered when an actionable (read: clickable) element holds the browser\u2019s focus. Browsers have a default set of styles for focus. They typically involve some kind of outline or border. <\/p>\n\n\n\n

Unfortunately, you cannot always rely on the browser defaults to do the job. This is because the defaults may conflict with the colors in your site\u2019s design, causing contrast issues.<\/p>\n\n\n\n

A common solution is to mirror the styles applied on hover when focus occurs. This technique is useful in a pinch, but if you have the time, the styles should be different because the two pseudo-classes are different. The difference between focus and hover is activity. <\/p>\n\n\n\n

Focus is actively applied by either the keyboard or the mouse (or other assistive device). Hover is applied regardless of active intent. While an edge case, a user could be hovering over an element while keyboard focus is applied. This creates confusion as to which element is the active element, especially when navigating using the keyboard. When possible, keep the styling of focus and hover separate.<\/p>\n\n\n\n

\"a<\/figure>\n\n\n\n

Another required operable standard is the ability to skip past repeated blocks of content. If you\u2019ve heard the term \u201cskip links\u201d or “jump links,” that\u2019s what we\u2019re talking about here. Skip links are hidden links that appear on focus. They should be located at the top of the page, before any of your site\u2019s layout. <\/p>\n\n\n\n

When a user hits the tab key, these links should come into focus first and allow the user to, for example, skip the navigation menu they\u2019ve already dealt with and go right to the content. Skip links are an A-level standard, which means they are required by Section 508 law. Amazingly, many sites, including some very large companies, do not have these links in place. Depending on your theme, adding skip links is as simple as installing a plugin. For other themes, you\u2019ll have to install them yourself<\/a> or hire an accessibility-focused developer to help you.<\/p>\n\n\n\n

Several of the operable standards are of the AAA level. Because these standards are complex and not required by law, we won\u2019t cover them in depth in this overview. These standards are still important and can have significant impacts on people who, for example, deal with seizures.<\/p>\n\n\n\n

As you can see, operability is an often overlooked, but vital aspect of accessibility. The idea of operating a site, interacting with it, is all too frequently viewed as an enhancement. Basic movement is taken for granted, but can make or break whether or not a user sticks with you for very long. Keep that in mind as you design and develop your sites and other digital content.<\/p>\n\n\n\n

\n\n\n\n

Make sure you’ve read part one of our Introduction to Accessibility series, and if you’ve got all the information you need, go ahead and advance to part three. You can find both using the buttons below!<\/p>\n\n\n\n

\n
Part 1<\/a><\/div>\n\n\n\n
Part 3<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

In the first article in our overview of accessibility, we discussed the standards of a site being perceivable. This essential first step is crucial, but is far from the entire picture. Once we\u2019ve made a site or piece of digital content perceivable, we must make sure the user can take the next step and interact…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":143240,"template":"","resource-topic":[1396,904],"resource-role":[895,1397,896,897,903,899],"resource-type":[916],"class_list":["post-139733","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nAn Introduction to Accessibility: Part 2<\/title>\n<meta name=\"description\" content=\"Part two of our accessibility series dives into the second principle: Operable. Follow these tips so all users can operate your site!\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"An Introduction to Accessibility: Part 2\" \/>\n<meta property=\"og:description\" content=\"Part two of our accessibility series dives into the second principle: Operable. Follow these tips so all users can operate your site!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-2\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-26T20:03:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/05\/accessibility-header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"An Introduction to Accessibility: Part 2\" \/>\n<meta name=\"twitter:description\" content=\"Part two of our accessibility series dives into the second principle: Operable. Follow these tips so all users can operate your site!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/05\/accessibility-header.png\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-2\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-2\/\",\"name\":\"An Introduction to Accessibility: Part 2\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2017-05-10T16:00:23+00:00\",\"dateModified\":\"2023-04-26T20:03:04+00:00\",\"description\":\"Part two of our accessibility series dives into the second principle: Operable. Follow these tips so all users can operate your site!\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"An Introduction to Accessibility: Part 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"An Introduction to Accessibility: Part 2","description":"Part two of our accessibility series dives into the second principle: Operable. Follow these tips so all users can operate your site!","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"An Introduction to Accessibility: Part 2","og_description":"Part two of our accessibility series dives into the second principle: Operable. Follow these tips so all users can operate your site!","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-2\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2023-04-26T20:03:04+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/05\/accessibility-header.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_title":"An Introduction to Accessibility: Part 2","twitter_description":"Part two of our accessibility series dives into the second principle: Operable. Follow these tips so all users can operate your site!","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/05\/accessibility-header.png","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-2\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-2\/","name":"An Introduction to Accessibility: Part 2","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2017-05-10T16:00:23+00:00","dateModified":"2023-04-26T20:03:04+00:00","description":"Part two of our accessibility series dives into the second principle: Operable. Follow these tips so all users can operate your site!","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"An Introduction to Accessibility: Part 2"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/05\/accessibility-grid.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Agency, Designer, Developer, Freelancer, Marketer, Site Owner","topic":"<strong>Topics:<\/strong> Design, Marketing","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/139733","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/143240"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=139733"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=139733"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=139733"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=139733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}