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

In the first article in our overview of accessibility, we discussed the standards of a site being perceivable<\/a>. In the next, we talked about the requirements for a site to be operable<\/a>. For the last article in our accessibility overview, we\u2019ll cover the final two tenets of accessible websites: understandable and robust. Understandable, on the surface, sounds pretty self-explanatory. But robust? What the heck does that even mean? That\u2019s what we\u2019re here to find out.<\/p>\n\n\n\n

Let’s start with understandable.<\/p>\n\n\n\n

Understandable<\/h2>\n\n\n\n

The standards<\/a> state: \u201cInformation and the operation of user interface must be understandable.\u201d From a content perspective, that seems like a \u201cwell, obviously (rolls eyes),\u201d and you\u2019d be right. The principle of a site being understandable should be a clear concept, but like an iceberg, what\u2019s on the surface and what\u2019s underneath are two completely different things.<\/p>\n\n\n\n

For a site to be understandable, it must cover three main points: be readable, be predictable, and when user input is involved, provide assistance. A user must be able to read your content from a language point of view, have the site behave in a predictable manner (the way \u201cmost\u201d websites behave), and be given basic directions when asked to provide input (think labels on a contact form).<\/p>\n\n\n\n

\"person<\/figure>\n\n\n\n

Language is a large part of the understandability standards. At the base level, this means using the lang<\/code> attribute on your main HTML element. WordPress themes should do this be default. The lang<\/code> attribute is an A-level standard, meaning it is required by Section 508 law. If your theme does not, you\u2019re likely to run into several other accessibility issues. You may want to seriously consider another theme as a result.<\/p>\n\n\n\n

One of the more serious aspects of an understandable site is what happens when focus is applied. We discussed focus a lot during the last article of this series<\/a>, but it needs to be addressed again. <\/p>\n\n\n\n

When an element takes focus, the context of that element should not change. That\u2019s a scientific way of saying a button should not be activated simply by applying focus. Put yourself in the shoes of a person navigating with the keyboard. You hit the tab key to move to the next link, and suddenly a new page loads. Would you understand what\u2019s going on?<\/p>\n\n\n\n

The understandability standard, especially its predictability aspect, are why expected button behaviors are so important. A user should not submit a form until they activate (click or hit the enter key) the button. Simply mousing over it or tabbing to it should not change anything other than apply a hover or focus CSS state change.<\/p>\n\n\n\n

Another key element of predictability involves your site\u2019s design. Things like hover and focus states should be consistent throughout a site. This allows users, especially those with visual challenges, to see state changes more effectively. They may not be able to read the button text right away, but by noticing a change in color contrast, they\u2019ll know they\u2019ve hovered or focused on the element. This is not only good design, it is good accessibility.<\/p>\n\n\n\n

It is important to note at this point that many of the understandability standards are of the AAA-level. While they are not required by law, this does not mean they should not be considered. For example, take standard 3.1.5 – Reading Level operates on a sliding scale depending on your target audience. <\/p>\n\n\n\n

That standard references a reading level of lower secondary school. This equates to approximately a 6th grade reading level, the standard for most modern American newspapers, but not even newspapers follow this standard depending on the topic.<\/p>\n\n\n\n

When writing for the web, you have to keep your consumers in mind. If your target is researchers working on their doctoral degrees, your content should be on a similar level. But if you\u2019re writing for the general public, you\u2019ll want to factor in something like the Flesch-Kincaid Reading Scale<\/a>. <\/p>\n\n\n\n

If you use the Yoast SEO plugin<\/a> for your WordPress site, the Flesch scale test is built in. It will provide you with a breakdown, evaluating passive voice, transition words, and the length of your sentences. Again, keep your target audience in mind. The Yoast checker assumes you\u2019re writing for a general audience. Your goal should not be a green check from Yoast, but quality content for your audience.<\/p>\n\n\n\n

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

The last key part of understandability is input assistance. At a minimum, this means two things: text error messages and labels on your form inputs. Users must be told what each form input is for and notified with text if an error occurs. Those are the two A-level, required by law standards. <\/p>\n\n\n\n

If you\u2019re using one of the popular form plugins like Gravity Forms or Caldera Forms, you\u2019re already covered on the error messages portion for simple fields. You\u2019ll still need to make sure your elements are labeled. Proper labeling is its own topic entirely, but for now just make sure you\u2019re providing sensible instructions (\u201cName\u201d for the name field, \u201cEmail\u201d for an email field).<\/p>\n\n\n\n

Robust<\/h2>\n\n\n\n

The final tenet of accessibility is whether or not a site\/piece of digital content is robust. Specifically, \u201ccontent must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.\u201d <\/p>\n\n\n\n

In short: make sure it works, regardless of the technology. There are only two standards involving a robust site, and both are A-level, required by Section 508 law.<\/p>\n\n\n\n

A robust site is one that follows HTML standards. Elements are fully formed, and closed when necessary. If you open a <p><\/code> tag, close it when the paragraph is done. It\u2019s another instance of \u201cwell, obviously,\u201d but mistakes happen. Run your site through an HTML validation service before going live. The W3C provides a free service<\/a>. Use it, fix your errors, and you\u2019ll be good to go.<\/p>\n\n\n\n

The other aspect of a robust site is where WAI-ARIA (Web Accessible Initiative – Accessible Rich Internet Applications) or ARIA truly comes into play. ARIA is it\u2019s own topic, but in short, you should be using it only when required. <\/p>\n\n\n\n

Some instances are labeling a form element with ARIA when the form label is otherwise invisible. Doing so will also keep you covered as regards the input assistance of understandability, depending on how else the form element is labeled.<\/p>\n\n\n\n

Conclusion<\/h2>\n\n\n\n

Web accessibility appears to be a complex topic on the surface. In some ways it is, but often times the solutions are simple. To have an accessible site is to have one that every potential user can enjoy. From a business standpoint, this deepens your potential customer pool. More importantly, from a human standpoint, you\u2019re not excluding anyone.<\/p>\n\n\n\n

Make sure you review the standards and how they’re showing up in your sites. Make a list of what needs to be fixed and prioritize it based on the standard level (A, AA, or AAA). If you can\u2019t fix it yourself, hire an accessibility consultant. They\u2019d love to help you improve the internet for all of your potential users.<\/p>\n","protected":false},"excerpt":{"rendered":"

In the first article in our overview of accessibility, we discussed the standards of a site being perceivable. In the next, we talked about the requirements for a site to be operable. For the last article in our accessibility overview, we\u2019ll cover the final two tenets of accessible websites: understandable and robust. Understandable, on the…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":143240,"template":"","resource-topic":[1396,904,912,901],"resource-role":[895,1397,896,897,903,899],"resource-type":[916],"class_list":["post-22629","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nAn Introduction to Accessibility: Part 3<\/title>\n<meta name=\"description\" content=\"In the final article of our introduction to accessibility, we tackle the last two principles: Understandable and Robust. Follow these tips!\" \/>\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 3\" \/>\n<meta property=\"og:description\" content=\"In the final article of our introduction to accessibility, we tackle the last two principles: Understandable and Robust. Follow these tips!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-3\/\" \/>\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:17:14+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 3\" \/>\n<meta name=\"twitter:description\" content=\"In the final article of our introduction to accessibility, we tackle the last two principles: Understandable and Robust. Follow these tips!\" \/>\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=\"6 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-3\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-3\/\",\"name\":\"An Introduction to Accessibility: Part 3\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2017-05-17T16:15:15+00:00\",\"dateModified\":\"2023-04-26T20:17:14+00:00\",\"description\":\"In the final article of our introduction to accessibility, we tackle the last two principles: Understandable and Robust. Follow these tips!\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-3\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-3\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-3\/#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 3\"}]},{\"@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 3","description":"In the final article of our introduction to accessibility, we tackle the last two principles: Understandable and Robust. Follow these tips!","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"An Introduction to Accessibility: Part 3","og_description":"In the final article of our introduction to accessibility, we tackle the last two principles: Understandable and Robust. Follow these tips!","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-3\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2023-04-26T20:17:14+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 3","twitter_description":"In the final article of our introduction to accessibility, we tackle the last two principles: Understandable and Robust. Follow these tips!","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/05\/accessibility-header.png","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-3\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-3\/","name":"An Introduction to Accessibility: Part 3","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2017-05-17T16:15:15+00:00","dateModified":"2023-04-26T20:17:14+00:00","description":"In the final article of our introduction to accessibility, we tackle the last two principles: Understandable and Robust. Follow these tips!","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-3\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-3\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-3\/#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 3"}]},{"@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, Performance, WordPress","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/22629","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=22629"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=22629"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=22629"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=22629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}