{"id":22442,"date":"2017-05-03T12:00:53","date_gmt":"2017-05-03T17:00:53","guid":{"rendered":"https:\/\/getflywheel.com\/?p=22442"},"modified":"2023-04-26T14:44:30","modified_gmt":"2023-04-26T19:44:30","slug":"an-introduction-to-accessibility-part-1","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-1\/","title":{"rendered":"An Introduction to Accessibility: Part 1"},"content":{"rendered":"\n

Accessibility is a term you’ve probably heard, but may not fully understand. This is in part because the word itself can be a bit confusing. The root word, access, makes the concept seem tied to things like passwords. If users can \u201caccess\u201d your site, accessibility is checked off. If only it were that simple.<\/p>\n\n\n\n

Web accessibility is really about a user\u2019s ability to access your site\u2019s content, regardless of any physical or mental impairments. The inventor of the internet, Sir Tim Berners-Lee, put it perfectly<\/a>:<\/p>\n\n\n\n

\n

\u201cThe power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.\u201d<\/p>\n<\/blockquote>\n\n\n\n

A truly accessible website is inclusive of every potential user. It covers differential abilities of all shapes, sizes, and permanence. Users who are blind have their own needs, as do users with a broken hand. There\u2019s also overlap among accessibility groups. Users experiencing concussion symptoms can benefit from features designed to make a piece of content more accessible for users who experience seizures. Accessibility is a multi-faceted topic.<\/p>\n\n\n\n

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

WCAG 2.0 Requirements<\/h2>\n\n\n\n

Like all great things, accessibility is easy to learn but difficult to master. While the individual standards aren\u2019t that complicated, the current Web Content Accessibility Guidelines (WCAG)<\/a> can be overwhelming. That\u2019s why we’re going to break them down for you and translate some of the borderline legalese into something resembling English.<\/p>\n\n\n\n

There are four main tenets of web accessibility. Your site and content need to be perceivable, operable, understandable, and robust. The WCAG standards are organized using these four principles.<\/p>\n\n\n\n

In part one of our “Introduction to Accessibility” series, we’re going to focus on the first tenet: perceivable.<\/p>\n\n\n\n

Perceivable<\/h2>\n\n\n\n

For a site to be considered perceivable, the \u201cinformation and user interface components must be presentable to users in ways they can perceive.\u201d Perception in context of the web can take many forms. For most people, perception means being able to see and read a website. But what if a user experiences visual impairments? That\u2019s where the WCAG standards come in.<\/p>\n\n\n\n

\"two<\/figure>\n\n\n\n

Images are a huge part of the internet experience for most users. Some images are decorative. Some are supplemental, providing an easier-to-discern example. But often times, images are vital pieces of content, essential to the meaning of the content segment. <\/p>\n\n\n\n

In these instances, a text alternative must be provided. That, friends, is what the \u201calt\u201d attribute is for on your images. \u201cAlt\u201d stands for \u201calternative,\u201d meaning an alternative text description. It does NOT mean \u201cstuff me full of SEO keywords.\u201d<\/p>\n\n\n\n

This also means that non-essential images need to be marked up in such a way that screen readers can completely ignore them. One way to do this is to leave the \u201calt\u201d attribute blank. Yes, blank. It seems counterintuitive, but having purely decorative images with filled \u201calt\u201d attributes can actually make your site and content harder to perceive for non-sighted users.<\/p>\n\n\n\n

What about users that can see, but cannot hear? WCAG provides a few different standards. Depending on whether your content is pre-recorded, like an embedded YouTube video, or live, like a conference\u2019s live stream, the standard differs. Pre-recorded videos should be captioned. <\/p>\n\n\n\n

Alternatively, you can provide a transcript of the video below it. At a minimum, a summary of the video content should be provided. Higher standards, like AAA standard 1.2.6, call for sign language interpretations of your video content. AAA standards are not required by the law, but if you have the financial bandwidth to provide such a service, it can set your business apart in a very good way.<\/p>\n\n\n\n

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

The perceivable principle also covers the way your content is organized. From a development context, this refers to the way a site or piece of content is marked up in HTML. Your content needs to be marked up in a way that makes semantic sense. The user should not experience content whose pieces are out of order when experienced outside of the typical browser. Each paragraph should flow one after the other, without the interruption of a sidebar or other non-content element.<\/p>\n\n\n\n

This is essential for screen reader users. They experience a website in a linear fashion. While features like skip links make navigation easier, the core concept of a screen reader is to literally read the screen from left to right (or right to left in some languages). <\/p>\n\n\n\n

When your content is broken up by other elements because of poor markup, the user is left confused as the reader jumps from section to section. As they likely cannot see, they have no alternative to help them better understand why the jumping is happening.<\/p>\n\n\n\n

The final aspect of the perceivable principle, distinguishability, is arguably the most important. The decisions made here can affect the entirely of your brand, which is also why this is one of the most overlooked aspects of web accessibility. Distinguishability is a long word for a simple topic: can the user tell the difference between foreground and background content. This is not just a discussion. Distinguishability also covers audio and video elements.<\/p>\n\n\n\n

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

Distinguishability takes several forms even as it relates to color. The first is making sure color is not the only way an element is distinguished as different. The clear use case here is using green for success text and red for failure text. It is important to add an additional indicator in this scenario so that colorblind users, of which red\/green colorblindness is the most common, can tell the difference between the two states.<\/p>\n\n\n\n

The use of color as the only indicator is a massive problem on the web. Think about all the sites you\u2019ve been to that clearly place a premium on design. Their look is tweaked at every detail. Throughout the content, you may notice something: Nothing is underlined. That\u2019s because the design called for links to be in a different color than the text. That\u2019s how they stand out. It\u2019s incredibly common, and it\u2019s incredibly inaccessible.<\/p>\n\n\n\n

The underline exists for a reason, but designers hate it because it\u2019s ugly. There are ways to make the underline look better and be more accessible. One method is to use gradients for the underline. Another is to use borders. However you restyle it, make sure the underline stays.<\/p>\n\n\n\n

Another key aspect of distinguishability is color contrast. At minimum, the contrast ratio of your content\u2019s color to its background color should be 4.5. This ratio goes down slightly to 3.0 for larger text. <\/p>\n\n\n\n

To calculate your contrast ratio, use one of the many contrast calculators available online<\/a>. The issue of color contrast is one that often results in issues with your site\u2019s design team. Brand colors tend to rule the day in these discussions, which is why accessibility needs to be taken into account when the brand colors are being decided. Fortunately, there\u2019s also the standard fallback: black text on a white background.<\/p>\n\n\n\n

Other lesser known aspects of distinguishability include background audio and video autoplay, as well as font resizing. <\/p>\n\n\n\n

Font resizing is another significant accessibility issue that is often overlooked. You should never use pixel values for your font sizes. This prevents users from resizing text using their browser settings. Instead, use relative units like ems or rems. You can keep your pixel values as a fallback for older browsers, but it\u2019s important to be forward-thinking when it comes to accessibility.<\/p>\n\n\n\n

Perceivability comes first in the principles of accessibility for a reason. Many of its standards are vital aspects of an accessible website. If a user can\u2019t perceive a site, they can\u2019t interact with it. <\/p>\n\n\n\n

\n\n\n\n

Throughout this series of overview articles, we\u2019ll discuss the other principles, but never forget this first point. You must provide all users with a way to perceive your website and content. If you don\u2019t, you\u2019ll lose customers and clients, often for good. <\/p>\n\n\n\n

Check out the second and third installment of our Introduction to Accessibility series by clicking the buttons below! <\/p>\n\n\n\n

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

Accessibility is a term you’ve probably heard, but may not fully understand. This is in part because the word itself can be a bit confusing. The root word, access, makes the concept seem tied to things like passwords. If users can \u201caccess\u201d your site, accessibility is checked off. If only it were that simple. Web…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":143240,"template":"","resource-topic":[1396,912,901],"resource-role":[895,1397,896,897,899],"resource-type":[916],"class_list":["post-22442","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nAn Introduction to Accessibility: Part 1<\/title>\n<meta name=\"description\" content=\"Accessibility is so important, but it's a complicated topic. In this series, we'll cover the four main concepts of an accessible 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 1\" \/>\n<meta property=\"og:description\" content=\"Accessibility is so important, but it's a complicated topic. In this series, we'll cover the four main concepts of an accessible site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-1\/\" \/>\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-26T19:44:30+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 1\" \/>\n<meta name=\"twitter:description\" content=\"Accessibility is so important, but it's a complicated topic. In this series, we'll cover the four main concepts of an accessible 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=\"7 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-1\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-1\/\",\"name\":\"An Introduction to Accessibility: Part 1\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2017-05-03T17:00:53+00:00\",\"dateModified\":\"2023-04-26T19:44:30+00:00\",\"description\":\"Accessibility is so important, but it's a complicated topic. In this series, we'll cover the four main concepts of an accessible site.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-1\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-1\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-1\/#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 1\"}]},{\"@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 1","description":"Accessibility is so important, but it's a complicated topic. In this series, we'll cover the four main concepts of an accessible site.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"An Introduction to Accessibility: Part 1","og_description":"Accessibility is so important, but it's a complicated topic. In this series, we'll cover the four main concepts of an accessible site.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-1\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2023-04-26T19:44:30+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 1","twitter_description":"Accessibility is so important, but it's a complicated topic. In this series, we'll cover the four main concepts of an accessible site.","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/05\/accessibility-header.png","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-1\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-1\/","name":"An Introduction to Accessibility: Part 1","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2017-05-03T17:00:53+00:00","dateModified":"2023-04-26T19:44:30+00:00","description":"Accessibility is so important, but it's a complicated topic. In this series, we'll cover the four main concepts of an accessible site.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-1\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/an-introduction-to-accessibility-part-1\/#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 1"}]},{"@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, Site Owner","topic":"<strong>Topics:<\/strong> Design, Performance, WordPress","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/22442","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=22442"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=22442"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=22442"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=22442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}