{"id":604,"date":"2021-02-03T07:42:37","date_gmt":"2021-02-03T07:42:37","guid":{"rendered":"https:\/\/spritzsf.com\/spritzbits\/?p=604"},"modified":"2021-02-09T12:11:47","modified_gmt":"2021-02-09T12:11:47","slug":"is-your-website-ada-wcag-compliant-heres-a-quick-checklist-to-consider","status":"publish","type":"post","link":"https:\/\/spritzsf.com\/spritzbits\/is-your-website-ada-wcag-compliant-heres-a-quick-checklist-to-consider\/","title":{"rendered":"Digitally Compliant: Making Website Design Accessible to All"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">It may be confusing to hear the word \u201caccessibility\u201d used when discussing website\u2014 rather than wheelchairs or guide dogs for the blind. Importantly, in the broadest sense, accessibility applies to the online world as well as the physical world.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Website accessibility enhances your digital presence for everyone. It is a solution to address the needs of each visitor, allowing an individual to experience the best possible level of usability.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Like any road or building, while providing an on-ramp and an open door for all users. It does so without sacrificing anything for users who don\u2019t need it. Like an automatic door that opens when your hands are full or a moving walkway at an airport terminal. It\u2019s a useful thing for everyone. Think of how restricted your understanding might be watching a foreign movie in a language you cannot understand. But without the benefit of English subtitles. Pointless, really.<\/span><\/p>\n<h2><strong>Did you know? An estimated 20 percent of the U.S. population has a disability of some sort.<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Many people browsing the web have a permanent or a temporary disability across a wide range of possibilities. For example, there may be a visual or mobility issue affecting the use of the screen, the mouse, or the keyboard. There may also be accessibility issues around a broken arm or broken eyeglasses. <\/span><span style=\"font-weight: 400;\">In the U.S., about eight percent of men and 0.5 percent of women have some form of colorblindness. <\/span><span style=\"font-weight: 400;\">Looking across the entire population, there are common age-related issues as well that affect tens of millions.<\/span><\/p>\n<h2><strong>Did you know? Digital accessibility is also the law.<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">The <\/span><a href=\"https:\/\/www.ada.gov\/access-technology\/enforcement.html\"><span style=\"font-weight: 400;\">Americans with Disabilities Act (ADA)<\/span><\/a><span style=\"font-weight: 400;\"> has a mandate for businesses under Title I; that is, those operating 20 or more weeks per year with at least 15 full-time employees or under Title III, that is, businesses classed in the public accommodation category. That said, it\u2019s best practice for all websites.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2 style=\"text-align: center;\"><em><span style=\"font-weight: 400;\">\u201cThe power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.\u201d\u00a0\u00a0<\/span><\/em><\/h2>\n<h2 style=\"text-align: center;\"><em><span style=\"font-weight: 400;\">\u2014 Sir Tim Berners-Lee, Computer scientist, and father of the World Wide Web<\/span><\/em><\/h2>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">While the ADA doesn\u2019t offer a clear set of guidelines for website compliance, it has become industry practice to follow the Web Content Accessibility Guidelines (WCAG) as recommended by The World Wide Web Consortium (W3C). In August 2020, W3C released WCAG 2.2 a working draft.\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><strong>We\u2019ve put together a few important factors to help make your website accessible:<\/strong><\/h2>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\">\n<h3>Text inclusion for non-text content<\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Images\/Pictures: Include alt attributes i.e alt text to describe all images on your website.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">iFrames: When loading an iframe on your website, as it is content from another website that is being displayed on your site, ensure that they have descriptive titles defining the content.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">CTA buttons and icons: <\/span><span style=\"font-weight: 400;\">Buttons and icons are frequently used as click-through action buttons and links to guide users on the website. The inclusion of alt attributes that describes the button\/icon is helpful for users who aren\u2019t able to navigate a page with a mouse.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Decorative Images: <\/span><span style=\"font-weight: 400;\">A decorative image is an image that is non-essential to understanding the content and purpose of a webpage. There are a variety of opinions and options. One could either describe or hide decorative images from screen readers. If you decide to describe, use simple image guidelines. However, if you decide to hide these images, simply use a blank alt tag.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\">\n<h3>Color and Text:<\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Color contrast: Some colors conflict with each other and when implemented on text, it may become difficult to read. That said, it\u2019s advisable to always use complementary colors. A good resource for color study is <\/span><a href=\"https:\/\/color.adobe.com\/\"><span style=\"font-weight: 400;\">Adobe\u2019s Color Palette Generator<\/span><\/a><span style=\"font-weight: 400;\">. Also, to check the text contrast, an important tool is <\/span><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\"><span style=\"font-weight: 400;\">WebAIM\u2019s contrast checker<\/span><\/a><span style=\"font-weight: 400;\"> page.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\">\n<h3>Clean Code and Navigation structure:<\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Website Navigation Structure: Having a clean site outline that defines the internal links through structured navigation conventions i.e headers, footers, titles, breadcrumbs and good use of space is crucial for easy accessibility of websites<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Clean Code: For users who use text browsers and screen readers to access the website, it\u2019s important to have a clean code structure to avoid output issues and confusion. A good resource to check the code is through <\/span><a href=\"https:\/\/validator.w3.org\/\"><span style=\"font-weight: 400;\">W3C\u2019s code validator site<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\">\n<h3>CTA Buttons &amp; UI Conventions:<\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Responsive Stylesheets: Implement responsive design to avoid horizontal scrolling on websites. Also, avoid using pixels to define conventions such as spacing and height of text boxes.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Color contrast for UI components must be at 3:1. This way, the different elements can be clearly distinguished.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Content on hover buttons should be enabled to be dismissed by pressing the escape button on the keyboard.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Images as Text: It\u2019s best to avoid making images of text except for logos<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Zoom Feature: Designing websites with the ability to zoom in without breaking interactive elements on the page enhances the user accessibility experience on the website.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">CTA Buttons: Clearly defining the buttons based on interactions i.e warning\/error buttons can be color-coded in red with an appropriate icon, a learn more or more information button can be highlighted with the brand colors for easy navigation.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Animation Elements: Large Pop-ups, sliders that may cover the important navigation buttons on the web page make it harder for accessing important sections on the website and could lead to a bad user experience. It\u2019s best practice to strategically place these interactive animation elements on the website for improved user accessibility.\u00a0<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">We invite you to connect with us to learn more about our website design and development experience.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/spritzsf.com\/website-design-development-san-francisco\/\">Spritz designs and develops websites<\/a> that meet or exceed ADA compliance based on WCAG 2.1 AA standards for website design and functionality, so everyone can easily and fully access your content.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>It may be confusing to hear the word \u201caccessibility\u201d used when discussing websites\u2014 rather than wheelchairs or guide dogs for the blind. Importantly, in the broadest sense, accessibility applies to the online world as well as the physical world.\u00a0Website accessibility enhances your digital presence for everyone.<\/p>\n","protected":false},"author":1,"featured_media":606,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[26,25,23,24],"tags":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Digitally Compliant | Website Accessibility | Website Design &amp; Development<\/title>\n<meta name=\"description\" content=\"Website design &amp; accessibility enhances your digital presence for everyone. It&#039;s a solution to address the needs of each visitor, check here to know more..\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/spritzsf.com\/spritzbits\/is-your-website-ada-wcag-compliant-heres-a-quick-checklist-to-consider\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Digitally Compliant | Website Accessibility | Website Design &amp; Development\" \/>\n<meta property=\"og:description\" content=\"Website design &amp; accessibility enhances your digital presence for everyone. It&#039;s a solution to address the needs of each visitor, check here to know more..\" \/>\n<meta property=\"og:url\" content=\"https:\/\/spritzsf.com\/spritzbits\/is-your-website-ada-wcag-compliant-heres-a-quick-checklist-to-consider\/\" \/>\n<meta property=\"og:site_name\" content=\"SpritzSF\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-03T07:42:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-09T12:11:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/spritzsf.com\/spritzbits\/wp-content\/uploads\/2021\/02\/article-ada.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1025\" \/>\n\t<meta property=\"og:image:height\" content=\"683\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Spritz Bits\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Spritz Bits\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/spritzsf.com\/spritzbits\/is-your-website-ada-wcag-compliant-heres-a-quick-checklist-to-consider\/\",\"url\":\"https:\/\/spritzsf.com\/spritzbits\/is-your-website-ada-wcag-compliant-heres-a-quick-checklist-to-consider\/\",\"name\":\"Digitally Compliant | Website Accessibility | Website Design & Development\",\"isPartOf\":{\"@id\":\"https:\/\/spritzsf.com\/spritzbits\/#website\"},\"datePublished\":\"2021-02-03T07:42:37+00:00\",\"dateModified\":\"2021-02-09T12:11:47+00:00\",\"author\":{\"@id\":\"https:\/\/spritzsf.com\/spritzbits\/#\/schema\/person\/e01d71706cc3eb963462aee53e53208b\"},\"description\":\"Website design & accessibility enhances your digital presence for everyone. It's a solution to address the needs of each visitor, check here to know more..\",\"breadcrumb\":{\"@id\":\"https:\/\/spritzsf.com\/spritzbits\/is-your-website-ada-wcag-compliant-heres-a-quick-checklist-to-consider\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/spritzsf.com\/spritzbits\/is-your-website-ada-wcag-compliant-heres-a-quick-checklist-to-consider\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/spritzsf.com\/spritzbits\/is-your-website-ada-wcag-compliant-heres-a-quick-checklist-to-consider\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/spritzsf.com\/spritzbits\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Digitally Compliant: Making Website Design Accessible to All\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/spritzsf.com\/spritzbits\/#website\",\"url\":\"https:\/\/spritzsf.com\/spritzbits\/\",\"name\":\"SpritzSF\",\"description\":\"Just add Spritz. Talk to us.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/spritzsf.com\/spritzbits\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/spritzsf.com\/spritzbits\/#\/schema\/person\/e01d71706cc3eb963462aee53e53208b\",\"name\":\"Spritz Bits\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/spritzsf.com\/spritzbits\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/768ff983dcefefc17593610dd40e1869?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/768ff983dcefefc17593610dd40e1869?s=96&d=mm&r=g\",\"caption\":\"Spritz Bits\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Digitally Compliant | Website Accessibility | Website Design & Development","description":"Website design & accessibility enhances your digital presence for everyone. It's a solution to address the needs of each visitor, check here to know more..","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/spritzsf.com\/spritzbits\/is-your-website-ada-wcag-compliant-heres-a-quick-checklist-to-consider\/","og_locale":"en_US","og_type":"article","og_title":"Digitally Compliant | Website Accessibility | Website Design & Development","og_description":"Website design & accessibility enhances your digital presence for everyone. It's a solution to address the needs of each visitor, check here to know more..","og_url":"https:\/\/spritzsf.com\/spritzbits\/is-your-website-ada-wcag-compliant-heres-a-quick-checklist-to-consider\/","og_site_name":"SpritzSF","article_published_time":"2021-02-03T07:42:37+00:00","article_modified_time":"2021-02-09T12:11:47+00:00","og_image":[{"width":1025,"height":683,"url":"https:\/\/spritzsf.com\/spritzbits\/wp-content\/uploads\/2021\/02\/article-ada.jpg","type":"image\/jpeg"}],"author":"Spritz Bits","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Spritz Bits","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/spritzsf.com\/spritzbits\/is-your-website-ada-wcag-compliant-heres-a-quick-checklist-to-consider\/","url":"https:\/\/spritzsf.com\/spritzbits\/is-your-website-ada-wcag-compliant-heres-a-quick-checklist-to-consider\/","name":"Digitally Compliant | Website Accessibility | Website Design & Development","isPartOf":{"@id":"https:\/\/spritzsf.com\/spritzbits\/#website"},"datePublished":"2021-02-03T07:42:37+00:00","dateModified":"2021-02-09T12:11:47+00:00","author":{"@id":"https:\/\/spritzsf.com\/spritzbits\/#\/schema\/person\/e01d71706cc3eb963462aee53e53208b"},"description":"Website design & accessibility enhances your digital presence for everyone. It's a solution to address the needs of each visitor, check here to know more..","breadcrumb":{"@id":"https:\/\/spritzsf.com\/spritzbits\/is-your-website-ada-wcag-compliant-heres-a-quick-checklist-to-consider\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/spritzsf.com\/spritzbits\/is-your-website-ada-wcag-compliant-heres-a-quick-checklist-to-consider\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/spritzsf.com\/spritzbits\/is-your-website-ada-wcag-compliant-heres-a-quick-checklist-to-consider\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/spritzsf.com\/spritzbits\/"},{"@type":"ListItem","position":2,"name":"Digitally Compliant: Making Website Design Accessible to All"}]},{"@type":"WebSite","@id":"https:\/\/spritzsf.com\/spritzbits\/#website","url":"https:\/\/spritzsf.com\/spritzbits\/","name":"SpritzSF","description":"Just add Spritz. Talk to us.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/spritzsf.com\/spritzbits\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/spritzsf.com\/spritzbits\/#\/schema\/person\/e01d71706cc3eb963462aee53e53208b","name":"Spritz Bits","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/spritzsf.com\/spritzbits\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/768ff983dcefefc17593610dd40e1869?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/768ff983dcefefc17593610dd40e1869?s=96&d=mm&r=g","caption":"Spritz Bits"}}]}},"_links":{"self":[{"href":"https:\/\/spritzsf.com\/spritzbits\/wp-json\/wp\/v2\/posts\/604"}],"collection":[{"href":"https:\/\/spritzsf.com\/spritzbits\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/spritzsf.com\/spritzbits\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/spritzsf.com\/spritzbits\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spritzsf.com\/spritzbits\/wp-json\/wp\/v2\/comments?post=604"}],"version-history":[{"count":10,"href":"https:\/\/spritzsf.com\/spritzbits\/wp-json\/wp\/v2\/posts\/604\/revisions"}],"predecessor-version":[{"id":636,"href":"https:\/\/spritzsf.com\/spritzbits\/wp-json\/wp\/v2\/posts\/604\/revisions\/636"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/spritzsf.com\/spritzbits\/wp-json\/wp\/v2\/media\/606"}],"wp:attachment":[{"href":"https:\/\/spritzsf.com\/spritzbits\/wp-json\/wp\/v2\/media?parent=604"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/spritzsf.com\/spritzbits\/wp-json\/wp\/v2\/categories?post=604"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/spritzsf.com\/spritzbits\/wp-json\/wp\/v2\/tags?post=604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}