{"id":22384,"date":"2023-06-23T07:13:46","date_gmt":"2023-06-23T14:13:46","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=22384"},"modified":"2023-06-23T07:28:51","modified_gmt":"2023-06-23T14:28:51","slug":"web-accessibility-guide","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-guide\/","title":{"rendered":"Web Accessibility Guide \u2013 Everything Designers Should Consider and Implement"},"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\/2023\/06\/Web-Accessibility-Guide-for-2023-1024x512.png\" alt=\"Web Accessibility Guide for 2023\" class=\"wp-image-48313\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Web-Accessibility-Guide-for-2023-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Web-Accessibility-Guide-for-2023-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Web-Accessibility-Guide-for-2023-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Web-Accessibility-Guide-for-2023.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>Billions of people visit websites every day, some are able-bodied and others are not. How does a designer ensure that everyone can access and use their website? The answer is web accessibility.<\/p>\n\n\n\n<p>Build accessible prototypes with UXPin, a design tool that has a built-in contrast checker and more. Explore all the features during a free trial. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free UXPin&#8217;s trial<\/a>.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-why-is-web-accessibility-important\"><strong>Why is Web Accessibility Important?<\/strong><\/h2>\n\n\n\n<p>Web accessibility is designing websites that can be used by people who have disabilities like low vision, color blindness, blindness, cognitive disabilities, deafness or hearing impairment, and mobility impairments.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"282\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/08\/01_WebAccessibility.png\" alt=\"Web Accessibility with UXPin\" class=\"wp-image-22385\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/08\/01_WebAccessibility.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/08\/01_WebAccessibility-700x263.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Web accessibility is important because it makes websites responsive to the needs of all users. &nbsp;At the moment, there are more <a href=\"https:\/\/www.worldbank.org\/en\/topic\/disability#:~:text=Results-,One%20billion%20people%2C%20or%2015%25%20of%20the%20world's%20population%2C,million%20people%2C%20experience%20significant%20disabilities.\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">than 1 billion people who have disabilities in the world<\/a> while in the United States, <a href=\"https:\/\/www.cdc.gov\/ncbddd\/disabilityandhealth\/infographic-disability-impacts-all.html#:~:text=61%20million%20adults%20in%20the,is%20highest%20in%20the%20South.\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">61 million people live with disabilities<\/a>. When you design websites with accessibility in mind, you make your creations available to people who have disabilities.&nbsp;<\/p>\n\n\n\n<p>Accessible web design is not just a \u2018nice to have\u2019 it is required by law in countries such as the US, Israel, Canada, the United Kingdom among others. In fact, <a href=\"https:\/\/www.jdsupra.com\/legalnews\/2019-trends-and-predictions-for-2020-53083\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">2,000 website accessibility lawsuits<\/a> were filed in the United States in 2019 alone.&nbsp;<\/p>\n\n\n\n<p>Research has shown that there is <a href=\"https:\/\/www.w3.org\/WAI\/business-case\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">a strong business case<\/a> for accessible website design because it improves <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-seo-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">SEO rankings<\/a>, increases customer satisfaction, improves usability, and increases the reach of a website. &nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-pour-the-4-web-accessibility-standards\">POUR \u2013 The 4 Web Accessibility Standards<\/h2>\n\n\n\n<p>According to the <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Web Content Accessibility Guidelines (WCAG)<\/a> put forward by the <a href=\"https:\/\/www.w3.org\/WAI\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Website Accessibility Initiative (WAI)<\/a> of the <a href=\"https:\/\/www.w3.org\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">World Wide Web Consortium (W3C)<\/a>, web content must be POUR.&nbsp;<\/p>\n\n\n\n<p>This means it has to fulfill the following principles:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>P<\/strong>erceivable Information<\/li>\n\n\n\n<li><strong>O<\/strong>perable UI and Navigation&nbsp;<\/li>\n\n\n\n<li><strong>U<\/strong>nderstandable Information and UI<\/li>\n\n\n\n<li><strong>R<\/strong>obust Content and Reliable Interpretation&nbsp;<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-perceivable-information-principles\"><strong>Perceivable Information Principles<\/strong><\/h3>\n\n\n\n<p>All the Information and UI components must be presented in a way that all users can understand in different ways. There should be no invisible or difficult to understand information or <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-interface-elements-every-designer-should-know\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI elements<\/a>.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-here-are-the-guidelines-that-your-design-must-follow-to-fulfill-this-principle\"><strong>Here are the guidelines that your design must follow to fulfill this principle:<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Alternative text for all content that is not text such as pictures and graphics. This ensures that non-text content can be transformed into other forms like speech, braille, or larger fonts.<\/li>\n\n\n\n<li>Give alternatives such as subtitles and closed captions for all time-based media such as <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-of-videos\/\" target=\"_blank\" rel=\"noreferrer noopener\">videos<\/a> and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-animation-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">animations<\/a>.&nbsp;<\/li>\n\n\n\n<li>Create adaptable <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-content-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">content<\/a> that can be presented in a variety of ways such as a simple layout without interfering with its structure.&nbsp;<\/li>\n\n\n\n<li>Make it simple for users to see and hear your content by differentiating between your foreground and background.&nbsp;<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-operable-ui-and-navigation-principles\"><strong>Operable UI and Navigation Principles&nbsp;&nbsp;<\/strong><\/h3>\n\n\n\n<p>This principle requires that your website\u2019s <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/interactive-components\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI components<\/a> and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/navigation-ui\/\" target=\"_blank\" rel=\"noreferrer noopener\">navigation<\/a> can be operated easily without a mouse and it should not require interactions that a user cannot do.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-here-s-how-to-make-your-web-design-operable\"><strong>Here\u2019s how to make your web design operable:<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Make all functionalities keyboard accessible.&nbsp;<\/li>\n\n\n\n<li>Give your users ample time to interact with your content.&nbsp;<\/li>\n\n\n\n<li>Avoid designing content (flashing elements) that can cause seizures.<\/li>\n\n\n\n<li>Give users ways to find out where they are, navigate your site, and find the content that they are looking for.&nbsp;<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-understandable-information-and-ui-principles\"><strong>Understandable Information and UI Principles<\/strong><\/h3>\n\n\n\n<p>You should ensure that users can understand how your site\u2019s <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-user-interface\/\" target=\"_blank\" rel=\"noreferrer noopener\">user interface<\/a> works and the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/organizing-information\/\" target=\"_blank\" rel=\"noreferrer noopener\">information<\/a> presented on your site.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-here-s-how-to-accomplish-that\"><strong>Here\u2019s how to accomplish that:<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ensure that the text on your site is <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/website-design-for-scannability\/\" target=\"_blank\" rel=\"noreferrer noopener\">easy to read and understand<\/a>.&nbsp;<\/li>\n\n\n\n<li>Create and present web pages that work in predictable ways.&nbsp;<\/li>\n\n\n\n<li>Make it easy for users to avoid and correct <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/form-input-design-best-practices\/\" target=\"_blank\" rel=\"noreferrer noopener\">input<\/a> mistakes on your website.&nbsp;<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-robust-content-and-reliable-interpretation-principles\"><strong>Robust Content and Reliable Interpretation Principles&nbsp;<\/strong><\/h3>\n\n\n\n<p>Robust content is content that can be interpreted accurately by assistive technologies such as screen readers. Your content should continue being accessible to and compatible with these assistive devices even as their technologies evolve.&nbsp;<\/p>\n\n\n\n<p>For each of the WCGA principles, there is a success rating of either A (minimum rating), AA (good), and AAA (gold standard).&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-makes-websites-accessible-use-cases-and-examples\"><strong>What Makes Websites Accessible? Use Cases and Examples<\/strong><\/h2>\n\n\n\n<p>Here are some changes that you can make to your web designs to make them accessible.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-color-contrast\"><strong>Color Contrast&nbsp;<\/strong><\/h3>\n\n\n\n<p>When designing your website ensure that there is enough contrast between the background color and the foreground text. The principles of <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/evaluate-design-color-contrast\/\" target=\"_blank\" rel=\"noreferrer noopener\">color contrast<\/a> also apply to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/button-design\/\">buttons<\/a>, the text that\u2019s on images, and other UI elements.&nbsp;<\/p>\n\n\n\n<p>Color contrast has a significant impact on how easy it is for users to read the content on your website. Low contrast makes it difficult for people with low vision to read. According to the WCAG, the minimum acceptable contrast ratio is 3:1 while the gold standard is 7:1.&nbsp;<\/p>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/\">UXPin<\/a> has a color contrast checker that helps you ensure that your designs are up to WCAG standards. The tool also lets you view your design the way people with the eight different types of color blindness would.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"895\" height=\"203\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/08\/image2.png\" alt=\"Color contrast - web accessibility\" class=\"wp-image-22784\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/08\/image2.png 895w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/08\/image2-700x159.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/08\/image2-768x174.png 768w\" sizes=\"auto, (max-width: 895px) 100vw, 895px\" \/><\/figure>\n\n\n\n<p>An example of the difference that color contrast makes from <a href=\"https:\/\/www.w3.org\/WAI\/tips\/designing\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">W3C<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-alternative-text\"><strong>Alternative text<\/strong><\/h3>\n\n\n\n<p>For each image and graphic, provide descriptive alternative text that passes on the same meaning as seeing the text. Screen readers read this alternative text for visually impaired people so avoid using numeric descriptors or those that do not convey any meaning.<\/p>\n\n\n\n<p>Additionally, for time-based media such as video or audio recordings, provide closed captions and transcripts that have visible links. This also applies to icons, buttons, tables, and graphs.&nbsp;<\/p>\n\n\n\n<p>You can present alternative text using the &lt;alt&gt; tag or use captions to provide context.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-easy-to-read-content\"><strong>Easy to read content<\/strong><\/h3>\n\n\n\n<p>Users interact with websites primarily through text content. This makes it important to use simple language that is free of jargon and uncommon words, WCAG requires that websites use language that is at a \u201clower secondary level\u201d to make it as accessible as possible.&nbsp;<\/p>\n\n\n\n<p>You can use tools such as the <a href=\"http:\/\/hemingwayapp.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Hemmingway App<\/a> to determine the readability level of your website copy.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-use-header-tags-appropriately\"><strong>Use header tags appropriately&nbsp;<\/strong><\/h3>\n\n\n\n<p>Header tags make it easy for users to skim through web content and they give screen readers signals about the importance, relationship, and hierarchy of different pieces of information.<\/p>\n\n\n\n<p>Start with the &lt;h1&gt; and use the tags consistently and in the correct order.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"359\" height=\"457\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/08\/image4.png\" alt=\"Header tags - web accessibility\" class=\"wp-image-22785\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/08\/image4.png 359w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/08\/image4-236x300.png 236w\" sizes=\"auto, (max-width: 359px) 100vw, 359px\" \/><\/figure>\n\n\n\n<p>How to use header tags correctly from <a href=\"https:\/\/www.w3.org\/WAI\/tips\/designing\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">W3C<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-design-clear-focus-states\"><strong>Design clear focus states&nbsp;<\/strong><\/h3>\n\n\n\n<p>Focus states make it easy for people navigating your website using the tab key to know where they are when using your site. They are used by screen readers, people with limited mobility, and power users.&nbsp;<\/p>\n\n\n\n<p>Ensure that your menu items, forms, links, and buttons have clear, high contrast focus indicators that help them stand out.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"344\" height=\"306\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/08\/image1.png\" alt=\"Focus states - web accessibility\" class=\"wp-image-22786\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/08\/image1.png 344w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/08\/image1-337x300.png 337w\" sizes=\"auto, (max-width: 344px) 100vw, 344px\" \/><\/figure>\n\n\n\n<p>An example of clear focus states from <a href=\"https:\/\/www.w3.org\/WAI\/tips\/designing\/\">W3C<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-design-helpful-error-states\"><strong>Design helpful error states<\/strong><\/h3>\n\n\n\n<p>Provide helpful and contextual information to users when they make errors. Also, explain to them how they can fix the errors and give them a chance to reverse their submissions.&nbsp;<\/p>\n\n\n\n<p>Present instructions clearly and instances where user action is required should be displayed prominently.&nbsp;<\/p>\n\n\n\n<p>An example of easily identifiable error states from <a href=\"https:\/\/www.w3.org\/WAI\/tips\/designing\/\">W3C<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-label-all-form-fields\"><strong>Label all form fields &nbsp;<\/strong><\/h3>\n\n\n\n<p>Make sure that you have descriptive labels next to every form field. Additionally, avoid using placeholder text as the form label because it is often low contrast making it hard to read. Placeholder text also creates confusion because users can\u2019t tell what to do after the text disappears.&nbsp;<\/p>\n\n\n\n<p>Form labels are also useful for people using screen readers to understand your form, screen readers only read the information that is tagged as &lt;label&gt; and skip over placeholder text.&nbsp;<\/p>\n\n\n\n<p>A form with clear labels from <a href=\"https:\/\/www.w3.org\/WAI\/tips\/designing\/\">W3C<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-don-t-use-flashing-ui-animations\"><strong>Don\u2019t use flashing UI animations<\/strong><\/h3>\n\n\n\n<p>UI animations that flash more than 3 times per second can trigger seizures or physical reactions for some people. So it\u2019s best to avoid them.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-avoid-using-only-color-to-pass-a-message\"><strong>Avoid using only color to pass a message<\/strong><\/h3>\n\n\n\n<p>Color is a good way to pass on a message but it should not be the only way as some people are color blind. Instead, use color plus other elements such as asterisks. For graphs and other charts, use labels plus color.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"282\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/10\/unnamed.png\" alt=\"Color and message - Web Accessibility\" class=\"wp-image-22787\"\/><\/figure>\n\n\n\n<p>Using color plus other elements to pass on a message from <a href=\"https:\/\/www.w3.org\/WAI\/tips\/designing\/\">W3C<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-use-easy-to-read-fonts\"><strong>Use easy to read fonts&nbsp;<\/strong><\/h3>\n\n\n\n<p>Use a font size and style that is easy to read. The readability of a font is often determined by its style rather than its type. As a rule, cursive or decorative fonts are hard to read. Use large text, with short line lengths, tall line heights, and more space between letters for improved readability.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-new-accessibility-considerations-for-2020-and-beyond\"><strong>New Accessibility Considerations for 2020 and Beyond<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-wcag-2-2-to-be-released-in-2020\"><strong>WCAG 2.2 to Be Released in 2020&nbsp;<\/strong><\/h3>\n\n\n\n<p>The<strong> <\/strong><a href=\"https:\/\/www.w3.org\/\">World Wide Web Consortium (W3C)<\/a> released the first draft of <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/\">WCAG 2.2<\/a> on the 27th of February 2020. This update aims to further improve web accessibility for disabled persons, especially on mobile devices.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-here-s-what-you-need-to-know-about-wcag-2-2\"><strong>Here\u2019s what you need to know about WCAG 2.2:<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It is backward compliant with WCAG 2.0 and 2.1 meaning that if your website meets the criteria of 2.2 it also meets the criteria of the previous versions.<\/li>\n\n\n\n<li>It includes new criteria for focus visible states such as the size of focus area and color contrast.&nbsp;<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-growing-importance-of-vui-and-voice-interface-design\"><strong>Growing Importance of VUI and Voice Interface Design&nbsp;<\/strong><\/h2>\n\n\n\n<p>With more people using voice-controlled devices like Alexa, Siri, and Amazon Echo for their search needs, there is a growing need for voice interface design.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-here-s-how-designers-can-make-their-voice-interface-designs-more-accessible\"><strong>Here\u2019s how designers can make their voice interface designs more accessible:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tell users what they can do.<\/li>\n\n\n\n<li>Let users know the functionality that they are using.<\/li>\n\n\n\n<li>Don\u2019t give too many options.<\/li>\n\n\n\n<li>Give visual feedback whenever possible<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-don-t-over-promise-on-full-or-100-ada-compliance\"><strong>Don\u2019t Over-Promise on \u201cFull\u201d or \u201c100%\u201d ADA Compliance&nbsp;<\/strong><\/h3>\n\n\n\n<p>The Americans with Disability Act (1990) was signed into law to prevent discrimination against people with disabilities. However, this law does not explicitly mention web accessibility and is therefore open to different interpretations. This means that as a designer you should not over-promise on full ADA compliance because it is not clear how ADA applies to web accessibility.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-prototyping-designing-and-developing-with-accessibility-in-mind\"><strong>Prototyping, Designing and Developing With Accessibility in Mind<\/strong><\/h2>\n\n\n\n<p>To fully comply with accessibility web design, you need the best tools to help you with prototyping, design, and development. UXPin offers an all in one platform where you can check your designs for WCAG compliance and handoff your designs smoothly.&nbsp;<a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Try UXPin for free<\/a>.<\/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>Billions of people visit websites every day, some are able-bodied and others are not. How does a designer ensure that everyone can access and use their website? The answer is web accessibility. Build accessible prototypes with UXPin, a design tool that has a built-in contrast checker and more. Explore all the features during a free<\/p>\n","protected":false},"author":156,"featured_media":48313,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-22384","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-ui-design"],"yoast_title":"Web Accessibility Guide for 2020 | UXPin","yoast_metadesc":"How does a designer ensure that everyone can access and use their website? The answer is web accessibility.","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>Web Accessibility Guide for 2020 | UXPin<\/title>\n<meta name=\"description\" content=\"How does a designer ensure that everyone can access and use their website? The answer is web accessibility.\" \/>\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-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Accessibility Guide \u2013 Everything Designers Should Consider and Implement\" \/>\n<meta property=\"og:description\" content=\"How does a designer ensure that everyone can access and use their website? The answer is web accessibility.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-23T14:13:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-23T14:28:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Web-Accessibility-Guide-for-2023.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: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-guide\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-accessibility-guide\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/dfa8a72ffa3bb472596d4442937c7c6a\"},\"headline\":\"Web Accessibility Guide \u2013 Everything Designers Should Consider and Implement\",\"datePublished\":\"2023-06-23T14:13:46+00:00\",\"dateModified\":\"2023-06-23T14:28:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-accessibility-guide\\\/\"},\"wordCount\":1740,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-accessibility-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/Web-Accessibility-Guide-for-2023.png\",\"articleSection\":[\"Blog\",\"UI Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-accessibility-guide\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-accessibility-guide\\\/\",\"name\":\"Web Accessibility Guide for 2020 | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-accessibility-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-accessibility-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/Web-Accessibility-Guide-for-2023.png\",\"datePublished\":\"2023-06-23T14:13:46+00:00\",\"dateModified\":\"2023-06-23T14:28:51+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/dfa8a72ffa3bb472596d4442937c7c6a\"},\"description\":\"How does a designer ensure that everyone can access and use their website? The answer is web accessibility.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-accessibility-guide\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-accessibility-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-accessibility-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/Web-Accessibility-Guide-for-2023.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/Web-Accessibility-Guide-for-2023.png\",\"width\":1200,\"height\":600,\"caption\":\"Web Accessibility Guide for 2023\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-accessibility-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Accessibility Guide \u2013 Everything Designers Should Consider and Implement\"}]},{\"@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\\\/dfa8a72ffa3bb472596d4442937c7c6a\",\"name\":\"UXPin\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/zbigniew-trzeciakuxpin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Web Accessibility Guide for 2020 | UXPin","description":"How does a designer ensure that everyone can access and use their website? The answer is web accessibility.","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-guide\/","og_locale":"en_US","og_type":"article","og_title":"Web Accessibility Guide \u2013 Everything Designers Should Consider and Implement","og_description":"How does a designer ensure that everyone can access and use their website? The answer is web accessibility.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-guide\/","og_site_name":"Studio by UXPin","article_published_time":"2023-06-23T14:13:46+00:00","article_modified_time":"2023-06-23T14:28:51+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Web-Accessibility-Guide-for-2023.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","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-guide\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-guide\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/dfa8a72ffa3bb472596d4442937c7c6a"},"headline":"Web Accessibility Guide \u2013 Everything Designers Should Consider and Implement","datePublished":"2023-06-23T14:13:46+00:00","dateModified":"2023-06-23T14:28:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-guide\/"},"wordCount":1740,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Web-Accessibility-Guide-for-2023.png","articleSection":["Blog","UI Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-guide\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-guide\/","name":"Web Accessibility Guide for 2020 | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Web-Accessibility-Guide-for-2023.png","datePublished":"2023-06-23T14:13:46+00:00","dateModified":"2023-06-23T14:28:51+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/dfa8a72ffa3bb472596d4442937c7c6a"},"description":"How does a designer ensure that everyone can access and use their website? The answer is web accessibility.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-guide\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Web-Accessibility-Guide-for-2023.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/06\/Web-Accessibility-Guide-for-2023.png","width":1200,"height":600,"caption":"Web Accessibility Guide for 2023"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Web Accessibility Guide \u2013 Everything Designers Should Consider and Implement"}]},{"@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\/dfa8a72ffa3bb472596d4442937c7c6a","name":"UXPin","url":"https:\/\/www.uxpin.com\/studio\/author\/zbigniew-trzeciakuxpin-com\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/22384","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\/156"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=22384"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/22384\/revisions"}],"predecessor-version":[{"id":48319,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/22384\/revisions\/48319"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/48313"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=22384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=22384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=22384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}