{"id":5679,"date":"2022-09-20T16:09:33","date_gmt":"2022-09-20T19:09:33","guid":{"rendered":"https:\/\/www.handtalk.me\/en\/?p=5679"},"modified":"2023-09-11T12:27:46","modified_gmt":"2023-09-11T15:27:46","slug":"learn-how-to-reach-a-larger-public-with-accessible-uxui-design","status":"publish","type":"post","link":"https:\/\/www.handtalk.me\/en\/blog\/learn-how-to-reach-a-larger-public-with-accessible-uxui-design\/","title":{"rendered":"Accessible UX|UI design: everything you need to know"},"content":{"rendered":"\n<p>The internet is a revolutionary tool that has changed our lives since it was born! However, unfortunately, <strong>more than <\/strong><a href=\"https:\/\/www.isemag.com\/professional-development-leadership\/article\/14267164\/98-of-websites-fail-to-comply-with-accessibility-requirements-for-people-with-disabilities\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>98% of the websites are failing to comply with accessibility requirements in the United States<\/strong><\/a>. That&#8217;s right, it has facilitated the daily lives of many people, but, on the other hand,<a href=\"https:\/\/www.handtalk.me\/en\/blog\/main-barriers-accessibility\/\" target=\"_blank\" rel=\"noreferrer noopener\"> it still has numerous barriers<\/a>, especially for people with disabilities. In order to end inequalities, <strong>there is something called accessible UX|UI design<\/strong>. So, if you want to learn more about it, just stay here with us!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Accessible UX|UI design: why is it important?<\/h2>\n\n\n\n<p>To start talking about it, we need to understand what UX|UI design is.<strong> <\/strong><a href=\"https:\/\/www.handtalk.me\/en\/blog\/ux-and-accessibility-in-the-digital-environment\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>\u201cUX design\u201d refers to the user experience<\/strong><\/a>, it is linked to a person&#8217;s level of satisfaction when using a digital platform, service or product. Here we are talking about emotion,<strong> what the visitor feels when coming into contact with a page.<\/strong><\/p>\n\n\n\n<p>The term <strong>\u201cUI design\u201d means \u201cuser interface design\u201d<\/strong>. So, the \u201cUI\u201d is part of the physical experience of navigation, <strong>it is how the user interacts with the product<\/strong> (site, app, machine).<\/p>\n\n\n\n<p>But what does this have to do with <a href=\"https:\/\/www.handtalk.me\/en\/blog\/digital-accessibility\/\" target=\"_blank\" rel=\"noreferrer noopener\">digital accessibility<\/a>? <strong>The lack of digital accessibility directly impacts the user experience and interface (UX|UI design)<\/strong>, as websites and apps designed for people without disabilities have <a href=\"https:\/\/www.handtalk.me\/en\/blog\/accessibility-barriers\/\" target=\"_blank\" rel=\"noreferrer noopener\">many barriers<\/a> in general, <strong>which are excluding a large portion of the population.<\/strong><\/p>\n\n\n\n<p>For example, when some deaf people, who communicate using ASL (American Sign Language), try to navigate a page that does not have a translation to their natural language, they will find it <strong>very difficult to understand the content written in English<\/strong>. As well as blind people who browse with the help of screen readers, <a href=\"https:\/\/www.handtalk.me\/en\/blog\/learn-about-the-main-web-accessibility-tools-and-their-relevance\/\" target=\"_blank\" rel=\"noreferrer noopener\">accessibility tools<\/a> that read all online content. It is necessary that the images have good alternative descriptions (ALT), otherwise, they will not have a good experience either, <strong>as they will not understand the visual information being transmitted there.<\/strong><\/p>\n\n\n\n<p><strong>That&#8217;s where accessible UX|UI design comes in. It&#8217;s when we think about the experience and the user interface in a complete and inclusive way, allowing everyone to navigate with autonomy and comfort.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tips for an accessible UX|UI design&nbsp;<\/h2>\n\n\n\n<p>Now that you know what <strong>accessible UX\/UI design<\/strong> is and what it is all about,<a href=\"https:\/\/www.handtalk.me\/en\/blog\/web-accessibility\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong> let&#8217;s learn some ways to put it in practice:<\/strong><\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Install ASL translators to translate the text into Sign Language<\/strong>, contributing to greater inclusion of people who communicate in this language.<\/li><li><strong><a href=\"https:\/\/www.handtalk.me\/en\/blog\/accessible-videos\/\" target=\"_blank\" rel=\"noreferrer noopener\">Include subtitles and audio description in videos on your page<\/a><\/strong>. This practice is accessible to all people, not just people with hearing impairments, for example.<\/li><li><a href=\"https:\/\/www.handtalk.me\/en\/blog\/beautiful-and-accessible-website\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Ensure that all images have a good alternative text<\/strong><\/a>. With this feature, blind and low vision people, who use screen readers, will be able to absorb the information that is being transmitted via image.<\/li><li><strong>Avoid transmiting information through images and emojis<\/strong>. This habit is not accessible to blind people.<\/li><li>Develop accessible codes in website programming. This also makes it easier for blind and low vision people to use screen-reading software to understand.<\/li><li>Include fonts with good readability. Texts with the proper fonts and sizes make it possible for everyone to read with comfort.<\/li><li><strong>Enable the user to change the font size in your website&#8217;s interface<\/strong>.<\/li><li>High contrast. Thinking about colors and making sure the contrast is right not only benefits people with visual impairments, but also improves design for everyone.<\/li><li>Enable contrast and brightness customization.<\/li><li>Be careful with overly saturated colors! They can annoy people with autism, for example.<\/li><li>Don&#8217;t overdo the animations, they can distract anyone, especially those with attention difficulties.<\/li><li>Create a touch area (like clickable buttons) of at least 44 pixels. This helps people with physical disabilities or the elderly.<\/li><li><a href=\"https:\/\/www.handtalk.me\/en\/blog\/wcag-2-2\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Follow the Web Content Accessibility Guidelines (WCAG)<\/strong><\/a><strong>. These guidelines ensure greater accessibility for all people, not just those with disabilities.<\/strong><\/li><li>Check if your solution is compatible with all types of screens.<\/li><li>Provide voice command search. This makes it easier for blind people and also people with cerebral palsy, among other disabilities, as well as being useful for anyone.<\/li><li>Ensuring that your layout follows a logical and uncomplicated sequence.<\/li><li>Thinking about the hierarchy of sources and content is also a good practice to make navigation easier for everyone.<\/li><li><strong>Avoid complex sentences and texts<\/strong>. Do the exercise to think if semi-illiterate people would be able to understand the message, or if when the content is translated into ASL, will it still make sense?<\/li><\/ul>\n\n\n\n<p><strong>An accessible UX|UI design is a responsibility not only of the entire team involved in programming, but also of the entire company.<\/strong> It is recommended that you think about accessibility from the beginning of the project, as it is easier to implement the most appropriate solutions than when it is already finalized.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Who does it benefit?<\/h2>\n\n\n\n<p>Maybe you are still a little in doubt about who is the public that benefits from accessibility. Many people believe that it is only the people with disabilities,<strong> but this is a huge mistake!<\/strong><\/p>\n\n\n\n<p><strong>As we have said before, investing in a good UX|UI design will certainly bring very positive results,<\/strong> <strong>as it impacts everyone&#8217;s usability<\/strong>. Children, young people, people with and without disabilities, and also the elderly. But it does not stop there!<strong> <\/strong><a href=\"https:\/\/www.handtalk.me\/en\/blog\/digital-accessibility-to-build-your-brand\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Brands also benefit from this<\/strong><\/a><strong>, as websites that have accessible design open their doors to an audience that was not seen before and even guarantees a better positioning in Google Search.<\/strong><\/p>\n\n\n\n<p>\u201c<strong><a href=\"https:\/\/www.handtalk.me\/en\/blog\/accessibility-ux-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX Design means focusing on the user and making them the main objective within the project<\/a>.<\/strong> Having an approach focused on accessibility means making this product accessible to all people, regardless of context. That means making your designs user-friendly for everyone, including people with disabilities. Thinking about accessibility doesn&#8217;t limit creativity, and it will help in the problem-solving process.<\/p>\n\n\n\n<p>Using good accessibility practices does not favor only people with disabilities. People without disabilities may have some temporary limitation, or even develop a permanent one. For example, if the person is very tired, they may have difficulty understanding the information, or seeing the contents because of the excess light.<\/p>\n\n\n\n<p>It is important to design inclusive interfaces thinking about information architecture, use of colors, layout and visual design, text formatting, content and microcopy.\u201d &#8211; Cybele Silva UX|UI Designer at Hand Talk.<\/p>\n\n\n\n<p>Promoting a good experience and user interface involves several steps. And if you want to know more about it, <a href=\"https:\/\/www.handtalk.me\/en\/blog\/\" target=\"_blank\" rel=\"noreferrer noopener\">visit our blog!&nbsp;<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The internet is a revolutionary tool that has changed our lives since it was born! However, unfortunately, more than 98% of the websites are failing to comply with accessibility requirements in the United States. That&#8217;s right, it has facilitated the daily lives of many people, but, on the other hand, it still has numerous barriers, [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":5682,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[633,626,632],"tags":[640,637,639],"class_list":["post-5679","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-assistive-technology","category-digital-accessibility","category-inclusion","tag-accessibility","tag-digital-accessibility","tag-inclusion"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.handtalk.me\/en\/wp-json\/wp\/v2\/posts\/5679","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.handtalk.me\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.handtalk.me\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.handtalk.me\/en\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.handtalk.me\/en\/wp-json\/wp\/v2\/comments?post=5679"}],"version-history":[{"count":7,"href":"https:\/\/www.handtalk.me\/en\/wp-json\/wp\/v2\/posts\/5679\/revisions"}],"predecessor-version":[{"id":6470,"href":"https:\/\/www.handtalk.me\/en\/wp-json\/wp\/v2\/posts\/5679\/revisions\/6470"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.handtalk.me\/en\/wp-json\/wp\/v2\/media\/5682"}],"wp:attachment":[{"href":"https:\/\/www.handtalk.me\/en\/wp-json\/wp\/v2\/media?parent=5679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.handtalk.me\/en\/wp-json\/wp\/v2\/categories?post=5679"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.handtalk.me\/en\/wp-json\/wp\/v2\/tags?post=5679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}