{"id":36540,"date":"2022-09-26T00:42:00","date_gmt":"2022-09-26T07:42:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=36540"},"modified":"2022-09-13T13:10:54","modified_gmt":"2022-09-13T20:10:54","slug":"web-accessibility-checklist","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-checklist\/","title":{"rendered":"Web Accessibility Checklist \u2013 28 Points You Must Comply With"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Web-accessibility-checklist-1024x512.png\" alt=\"Web accessibility checklist\" class=\"wp-image-36541\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Web-accessibility-checklist-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Web-accessibility-checklist-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Web-accessibility-checklist-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Web-accessibility-checklist.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>There are loads of web accessibility guidelines designers and engineers must follow when designing a website or application. It can be overwhelming to digest them all or know when to use the different levels.\u00a0<\/p>\n\n\n\n<p>This article simplifies the official web content accessibility guidelines with a web accessibility checklist for designers. We also explain the difference between WCAG 1.0 and 2.0 and the different levels (A, AA, and AAA).<\/p>\n\n\n\n<p>With <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/accessibility-features\" target=\"_blank\" rel=\"noreferrer noopener\">built-in accessibility features<\/a>, designers never have to leave UXPin to test UIs for contrast and color blindness. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a> to discover the ease of accessible websites and apps with UXPin.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-the-purpose-of-an-accessibility-checklist\">What is the Purpose of an Accessibility Checklist?<\/h2>\n\n\n\n<p>A web accessibility checklist provides designers and engineers with a list of considerations for designing a website for people with disabilities and <a href=\"https:\/\/www.educative.io\/edpresso\/what-is-assistive-technology-in-user-experience-design\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">assistive technology<\/a>.<\/p>\n\n\n\n<p>Team members can reference the checklist against designs and code to ensure they meet Web Content Accessibility Guidelines (WCAG).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/accessibility.png\" alt=\"accessibility\" class=\"wp-image-33901\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/accessibility.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/02\/accessibility-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-the-difference-between-wcag-2-0-and-wcag-1-0\">What is the Difference Between WCAG 2.0 and WCAG 1.0?<\/h3>\n\n\n\n<p>The Web Content Accessibility Guidelines (WCAG) must update and evolve with technology. Each update adds new guidelines that align with new devices.<\/p>\n\n\n\n<p>Aside from the guidelines, there are also two iterations of the WCAG system. The first iteration, WCAG 1.0, used <em>guidelines<\/em> and <em>checkpoints<\/em> with <em>priority 1, 2, or 3<\/em>.&nbsp;<\/p>\n\n\n\n<p>In 2008, WCAG 2.0 changed from <em>checkpoints<\/em> to <em>level success criteria<\/em>. The system we currently work with has:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Four design <strong>principles<\/strong><\/li><li>Multiple <strong>guidelines<\/strong> within each principle<\/li><li>Testable <strong>success criteria levels A, AA, or AAA<\/strong> for each guideline<\/li><\/ul>\n\n\n\n<p>According to official documentation, WCAG 2.0 provides several key improvements:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Applies to more varieties of technologies and devices<\/li><li>Designed to evolve with future technologies<\/li><li>Requirements are easier to test with automated testing methods &amp; human evaluation<\/li><li>Input and collaboration from the international community<\/li><li>Improved support material and documentation to make guidelines easier to follow and implement<\/li><\/ul>\n\n\n\n<p><em>Check out the official <\/em><a href=\"https:\/\/www.w3.org\/WAI\/presentations\/WCAG20\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>WCAG 2.0 presentations<\/em><\/a><em> for more details.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-3-success-criteria-levels-of-accessibility-compliance\">3 Success Criteria Levels of Accessibility Compliance<\/h2>\n\n\n\n<p>WCAG 2.0 introduced three success criteria levels (or levels of conformance) to evaluate each guideline based on the product&#8217;s intended purpose and target audience.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Level A &#8211; Basic<\/li><li>Level AA &#8211; Acceptable<\/li><li>Level AAA &#8211; Optimal<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-wcag-level-a\">WCAG Level A<\/h3>\n\n\n\n<p>Level A ensures websites meet the bare minimum accessibility standards. Level A compliance addresses core issues and elements to make websites more accessible, like <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/guide-to-responsive-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">responsive design<\/a>, non-text alternatives (icons), keyboard navigation, and video captions, to name a few.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-wcag-level-aa\">WCAG Level AA<\/h3>\n\n\n\n<p>Level AA covers a broader range of UI elements and best practices to ensure everyone can use your website. Most <a href=\"https:\/\/www.w3.org\/WAI\/policies\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">government websites worldwide require WCAG Level AA<\/a> so that everyone in the population can access public content and services.<\/p>\n\n\n\n<p>The idea is that able-bodied users and those with disabilities can digest content and complete tasks with a comparable user experience, functionality, and efficiency.<\/p>\n\n\n\n<p>Some Level AA requirements include:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>color contrast ratio (i.e., 4.5:1)<\/li><li>Alt text for images and icons<\/li><li>Navigation for all technologies<\/li><li>Accurate form field labels<\/li><li>Properly structured heading tags<\/li><li>Variable text size functionality<\/li><li>Assistive technology-specific requirements.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-wcag-level-aaa\">WCAG Level AAA<\/h3>\n\n\n\n<p>Level AAA is the highest conformance level, ensuring the maximum number of users can navigate your website and digest its content. <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/conformance\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">As the Web Accessibility Initiative (W3C) notes<\/a> on its website, <em>&#8220;It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.&#8221;<\/em><\/p>\n\n\n\n<p>Designers should use Level AAA if the website or content caters to a specialized audience. The guidelines for Level AAA impact styling significantly (color contrast 7:1) and require sign language interpretation for audio and video.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-website-accessibility-checklist-for-designers\">Website Accessibility Checklist for Designers<\/h2>\n\n\n\n<p>We&#8217;ve selected the most important WACG guidelines for designers. These guidelines apply to visual elements, but these often relate to HTML elements, so designers and engineers must collaborate on accessibility. You can find the complete list of Web Content Accessibility Guidelines 2.0 <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/Overview.html#contents\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">on the official W3C website<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-content\">Content<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Use descriptive link labels (Level A)<\/strong> &#8211; buttons and links must provide users with context. For example, a button that says &#8220;Click Here&#8221; is meaningless and might be misleading. <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/content-structure-separation-programmatic.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">See Info &amp; Relationships SC 1.3.1<\/a>.<\/li><li><strong>Lower secondary reading level (Level AAA)<\/strong> &#8211; text must be in &#8220;plain language&#8221; free of jargon, idioms, slang, metaphors, sarcasm, and other complicated terms, ideally at an 8th-grade reading level. <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/meaning-supplements.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">See Reading Level SC 3.1.5<\/a>.<\/li><li><strong>Text formatting (Level AAA)<\/strong> &#8211; text must not be justified (aligned left or right according to the language) with the ability to resize up to 200% without assistive technologies. Users must also have control over the foreground and background colors\u2013i.e., dark\/light mode switching. <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-visual-presentation.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">See Visual Presentation SC 1.4.8<\/a>.<\/li><li><strong>Test designs on specialized screens &amp; devices (Level A)<\/strong> &#8211; visually impaired users use high contrast or inverted color modes. It&#8217;s important to test how content performs under these conditions. <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-without-color.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">See Use of Color SC 1.4.1<\/a>.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-page-titles-headings-labels\">Page Titles, Headings, &amp; Labels<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/testing-user-behavior-prototype-interaction.png\" alt=\"testing user behavior prototype interaction\" class=\"wp-image-35213\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/testing-user-behavior-prototype-interaction.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/05\/testing-user-behavior-prototype-interaction-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/navigation-mechanisms-descriptive.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">See Headings and Labels SC 2.4.6<\/a>. The following guidelines have a Level AA conformance.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>One H1 tag per page<\/strong> &#8211; the H1 header tag must describe what the overall webpage or article is about.<\/li><li><strong>Structure headings in a logical sequence<\/strong> &#8211; nested headings must follow the conventional order of H1, H2, H3, H4, H5, and H6. For example, you would never have an H2 followed by an H4 and then an H3. You should never skip a header tag either, like going from an H2 to H4 instead of H2, H3, and then H4.<\/li><li><strong>Headings and labels must describe a topic or purpose<\/strong> &#8211; headings and labels help users, and assistive technologies, like screen readers, find and digest content easier.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-images\">Images<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/text-equiv-all.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">See Non-text Content SC 1.1.1<\/a>. The following guidelines have a Level A conformance.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Non-text content must have a text alternative<\/strong> &#8211; images, icons, etc., must have descriptive alt text or a text alternative. Furthermore, if the image has text, this must be included in the alt text.<\/li><li><strong>CAPTCHA<\/strong> &#8211; websites must provide alternative confirmation methods when using CAPTCHA, like human verification or text-based authentication, for example.<\/li><li><strong>Decorative non-text content<\/strong> &#8211; alt text for images and media that are purely decorative must use &#8220;null&#8221; so that assistive technologies ignore this content.<\/li><li><strong>Text alternatives for graphical representations<\/strong> &#8211; Graphs, charts, and other graphics must include text alternatives so assistive technologies can read them.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lists\">Lists<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/content-structure-separation-programmatic.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">See Info and Relationships 1.3.1<\/a>. The following guidelines have a Level A conformance.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Choose the appropriate HTML markup<\/strong> &#8211; lists must use ol, ul, or dl syntax relating to the content and have a list&#8217;s appearance (or structure) so as not to confuse users.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-controls\">Controls<\/h3>\n\n\n\n<p>Controls include all navigable UI elements like links and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/button-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">buttons<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/testing-user-behavior-pick-choose-1.png\" alt=\"testing user behavior pick choose 1\" class=\"wp-image-34888\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/testing-user-behavior-pick-choose-1.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/testing-user-behavior-pick-choose-1-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Opening a new tab or window warning (Level A)<\/strong> &#8211; users must know if a button or link opens a new window or tab using text or an icon. People with cognitive disabilities often get disorientated when a new tab\/window opens unannounced. <a href=\"https:\/\/www.w3.org\/TR\/2016\/NOTE-UNDERSTANDING-WCAG20-20161007\/consistent-behavior-receive-focus.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">See On Focus SC 3.2.1<\/a>.<\/li><li><strong>Focus states (Level A)<\/strong> &#8211; controls must have focus (or hover) states, so users (including those with assistive technologies) know when they&#8217;ve selected a link or button to activate. <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/navigation-mechanisms-focus-visible.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">See Focus Visible SC 2.4.7<\/a>.<\/li><li><strong>Make links recognizable (Level A)<\/strong> &#8211; designers must use a combination of <em>color and underline styling<\/em> so users can quickly identify links. <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-without-color.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">See Use of Color SC 1.4.1<\/a>.<\/li><li><strong>Use &#8220;skip links&#8221; (Level A)<\/strong> &#8211; skip links allow assistive technologies and keyboard users to bypass navigational menus and other blocks to jump straight to a web page&#8217;s content. <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/navigation-mechanisms-skip.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">See Bypass Blocks SC 2.4.1<\/a>.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-forms\">Forms<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Form labels (Level A)<\/strong> &#8211; designers must label every input for visual reference and use the <a href=\"https:\/\/www.w3schools.com\/tags\/tag_label.asp\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">HTML &#8216;label&#8217; tag<\/a> for assistive technologies. <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/consistent-behavior-unpredictable-change.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">See On Input SC 3.2.2<\/a>.<\/li><li><strong>Error messages (Level A)<\/strong> &#8211; place error messages above the corresponding input field with clear instructions for users to fix the problem. <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/minimize-error-identified.html\" target=\"_blank\" rel=\"noreferrer noopener\">See Erro<\/a><a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/minimize-error-identified.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">r<\/a><a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/minimize-error-identified.html\" target=\"_blank\" rel=\"noreferrer noopener\"> Identification SC 3.3.1<\/a>.<\/li><li><strong>Message states (Level A)<\/strong> &#8211; don&#8217;t rely solely on color for error, warning, and success message states. Adding an icon or text can help visually impaired users identify the type of error state. <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-without-color.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">See Use of Color SC 1.4.1<\/a>.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-multimedia\">Multimedia<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/camera-video-play.png\" alt=\"camera video play\" class=\"wp-image-34775\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/camera-video-play.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/camera-video-play-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Disable autoplay by default (Level A)<\/strong> &#8211; autoplay can be problematic for users with cognitive disabilities or seizure disorders. <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-dis-audio.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">See Audio Control SC 1.4.2<\/a>.<\/li><li><strong>Video captions (Level A)<\/strong> &#8211; videos must have captions with a notice confirming their presence. <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/media-equiv-captions.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">See Captions (Prerecorded) SC 1.2.2<\/a>.<\/li><li><strong>Remove seizure triggers (Level A)<\/strong> &#8211; strobes or flashing video can induce seizures. W3C&#8217;s documentation recommends no more than three flashes on a web page or video. <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/seizure-does-not-violate.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">See Three Flashes or Below Threshold SC 2.3.1<\/a>.<\/li><li><strong>Transcripts for Audio (Level A)<\/strong> &#8211; including transcripts in the audio description allows hearing-impaired users to digest audio content. <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/text-equiv-all.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">See Non-text Content SC 1.1.1<\/a>.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-color-contrast\">Color Contrast<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Test color contrast for text (Level AA)<\/strong> &#8211; use a contrast checker and color blindness tester to ensure visually impaired users can read body text and UI elements. <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-contrast.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">See Contrast (Minimum) SC 1.4.3<\/a>,\u00a0<\/li><li><strong>Text contrast for non-text (Level AA)<\/strong> &#8211; non-text elements like icons, form inputs, etc., must be distinguishable for visually impaired users. <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/non-text-contrast.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">See Non-text Contrast 1.4.11<\/a>.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-mobile-and-touch\">Mobile and Touch<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Avoid horizontal scroll on mobile (Level AA)<\/strong> &#8211; horizontal scroll can be difficult (or impossible) for users with hand or finger disabilities. W3C provides guidelines for horizontal and vertical scrolling. <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/reflow.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">See Reflow SC 1.4.10<\/a>.<\/li><li><strong>Website orientation (Level AA)<\/strong> &#8211; websites must be visible in any orientation for mobile and tablet devices. <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/orientation.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">See Orientation 1.3.4<\/a>.<\/li><li><strong>Ensure adequate target sizing (Level AA)<\/strong> &#8211; there&#8217;s nothing more frustrating than not being able to activate a link or hitting the wrong one because they&#8217;re too close together\u2013test targets with a wide range of hand and stylus sizes. <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/target-size.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">See Target Size SC 2.5.5<\/a>.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-extra-web-accessibility-resources\">Extra Web Accessibility Resources<\/h2>\n\n\n\n<p>Web accessibility can seem overwhelming at first, but there are many helpful resources to help find and test your user interfaces.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/Overview.html#contents\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Official Web Content Accessibility Guidelines Website<\/a><\/li><li><a href=\"https:\/\/www.a11yproject.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">The A11Y Project<\/a><\/li><li><a href=\"https:\/\/www.essentialaccessibility.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Essential Accessibility<\/a><\/li><li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s Web Accessibility Guide<\/a><\/li><\/ul>\n\n\n\n<p>Streamline your web accessibility testing with UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/accessibility-features\" target=\"_blank\" rel=\"noreferrer noopener\">build accessibility tools<\/a>, including a <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/accessibility-features#contrast-checker\" target=\"_blank\" rel=\"noreferrer noopener\">contrast checker<\/a> and <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/accessibility-features#color-blindness-simulator\" target=\"_blank\" rel=\"noreferrer noopener\">color blindness simulator<\/a>. Sign up for a free trial to discover how code-based design can enhance your prototyping and testing to deliver more inclusive user experiences.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin for free<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>There are loads of web accessibility guidelines designers and engineers must follow when designing a website or application. It can be overwhelming to digest them all or know when to use the different levels.\u00a0 This article simplifies the official web content accessibility guidelines with a web accessibility checklist for designers. We also explain the difference<\/p>\n","protected":false},"author":3,"featured_media":36541,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,15,21,7],"tags":[],"class_list":["post-36540","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-responsive-web-design","category-usability-2","category-web-design"],"yoast_title":"28-Point Web Accessibility Checklist for Web Design","yoast_metadesc":"How to make your web design accessible? Check your project against the most important points in terms of content, images, color, and more.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>28-Point Web Accessibility Checklist for Web Design<\/title>\n<meta name=\"description\" content=\"How to make your web design accessible? Check your project against the most important points in terms of content, images, color, and 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:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-checklist\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Accessibility Checklist \u2013 28 Points You Must Comply With\" \/>\n<meta property=\"og:description\" content=\"How to make your web design accessible? Check your project against the most important points in terms of content, images, color, and more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-checklist\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-26T07:42:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Web-accessibility-checklist.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-accessibility-checklist\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-accessibility-checklist\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Web Accessibility Checklist \u2013 28 Points You Must Comply With\",\"datePublished\":\"2022-09-26T07:42:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-accessibility-checklist\\\/\"},\"wordCount\":1678,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-accessibility-checklist\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/Web-accessibility-checklist.png\",\"articleSection\":[\"Blog\",\"Responsive Web Design\",\"Usability\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-accessibility-checklist\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-accessibility-checklist\\\/\",\"name\":\"28-Point Web Accessibility Checklist for Web Design\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-accessibility-checklist\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-accessibility-checklist\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/Web-accessibility-checklist.png\",\"datePublished\":\"2022-09-26T07:42:00+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"How to make your web design accessible? Check your project against the most important points in terms of content, images, color, and more.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-accessibility-checklist\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-accessibility-checklist\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-accessibility-checklist\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/Web-accessibility-checklist.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/Web-accessibility-checklist.png\",\"width\":1200,\"height\":600,\"caption\":\"Web accessibility checklist\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-accessibility-checklist\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Accessibility Checklist \u2013 28 Points You Must Comply With\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"28-Point Web Accessibility Checklist for Web Design","description":"How to make your web design accessible? Check your project against the most important points in terms of content, images, color, and 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:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-checklist\/","og_locale":"en_US","og_type":"article","og_title":"Web Accessibility Checklist \u2013 28 Points You Must Comply With","og_description":"How to make your web design accessible? Check your project against the most important points in terms of content, images, color, and more.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-checklist\/","og_site_name":"Studio by UXPin","article_published_time":"2022-09-26T07:42:00+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Web-accessibility-checklist.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-checklist\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-checklist\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Web Accessibility Checklist \u2013 28 Points You Must Comply With","datePublished":"2022-09-26T07:42:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-checklist\/"},"wordCount":1678,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-checklist\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Web-accessibility-checklist.png","articleSection":["Blog","Responsive Web Design","Usability","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-checklist\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-checklist\/","name":"28-Point Web Accessibility Checklist for Web Design","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-checklist\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-checklist\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Web-accessibility-checklist.png","datePublished":"2022-09-26T07:42:00+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"How to make your web design accessible? Check your project against the most important points in terms of content, images, color, and more.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-checklist\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-checklist\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-checklist\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Web-accessibility-checklist.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Web-accessibility-checklist.png","width":1200,"height":600,"caption":"Web accessibility checklist"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-checklist\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Web Accessibility Checklist \u2013 28 Points You Must Comply With"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36540","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=36540"}],"version-history":[{"count":6,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36540\/revisions"}],"predecessor-version":[{"id":36548,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36540\/revisions\/36548"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/36541"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=36540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=36540"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=36540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}