{"id":365,"date":"2022-08-04T13:00:53","date_gmt":"2022-08-04T13:00:53","guid":{"rendered":"https:\/\/pc-keeper.tech\/index.php\/2022\/08\/04\/designing-for-accessibility-ieee-computer-society\/"},"modified":"2022-08-04T13:00:53","modified_gmt":"2022-08-04T13:00:53","slug":"designing-for-accessibility-ieee-computer-society","status":"publish","type":"post","link":"https:\/\/pc-keeper.tech\/index.php\/2022\/08\/04\/designing-for-accessibility-ieee-computer-society\/","title":{"rendered":"Designing for Accessibility | IEEE Computer Society"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div>\n<p style=\"color: #454545; font-size: 18px; font-family: Open Sans; font-weight: 400; line-height: 1.7em;\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-292253 img-responsive alignright\" src=\"https:\/\/ieeecs-media.computer.org\/wp-media\/2022\/08\/02171944\/Accessible-and-Inclusive-Design-for-Developers.jpg\" alt=\"Incorporating accessibility and inclusivity best practices in your website design\" width=\"250\" height=\"250\" srcset=\"https:\/\/ieeecs-media.computer.org\/wp-media\/2022\/08\/02171944\/Accessible-and-Inclusive-Design-for-Developers.jpg 250w, https:\/\/ieeecs-media.computer.org\/wp-media\/2022\/08\/02171944\/Accessible-and-Inclusive-Design-for-Developers-150x150.jpg 150w, https:\/\/ieeecs-media.computer.org\/wp-media\/2022\/08\/02171944\/Accessible-and-Inclusive-Design-for-Developers-100x100.jpg 100w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\"\/>If the past year has taught us anything, it\u2019s that a pandemic is far easier to get through with the internet. Working from home, e-commerce, online gaming, and cinematic experiences have become the norm, which is why they should be available to everyone.<\/p>\n<p style=\"color: #454545; font-size: 18px; font-family: Open Sans; font-weight: 400; line-height: 1.7em;\">Most of us expect seamless customer care and support whenever a website goes down for a couple of hours. But imagine a situation in which you have no access to your favorite websites. This is the reality for many people. In this article, we will be exploring how UX design can be inclusive and accessible to everyone.<\/p>\n<p>\u00a0<\/p>\n<hr style=\"width: 100%;\"\/>\n<p>\u00a0<\/p>\n<p style=\"text-align: center; color: #ff6600;\"><strong>Want More Tech News? Subscribe to <i>ComputingEdge<\/i> Newsletter Today!<\/strong><\/p>\n<p>\u00a0<\/p>\n<hr style=\"width: 100%;\"\/>\n<p>\u00a0<\/p>\n<h2 style=\"color: #002855; font-size: 24px; font-family: Montserrat; font-weight: 500; line-height: 29px;\">Links, Buttons, and Layout<\/h2>\n<hr style=\"text-align: left; width: 30%; height: 3px; color: #ffa300; background-color: #ffa300; border: none;\"\/>\n<p style=\"color: #454545; font-size: 18px; font-family: Open Sans; font-weight: 400; line-height: 1.7em;\">Whether you\u2019re a UX designer who has just been commissioned by a threat intelligence platform or a company that provides a business VoIP solution, the web design process is still similar. You begin with an idea. This evolves into a wireframe, a more detailed wireframe, and finally, a web page. Links, buttons, and layouts are all crucial elements of design. So they need to be inclusive and customizable.<\/p>\n<p style=\"color: #454545; font-size: 18px; font-family: Open Sans; font-weight: 400; line-height: 1.7em;\">You need to give people options. A small button or fashionable cursive text may be crucial for the \u201caesthetic,\u201d but it can often cause certain users to struggle. Ensure that your text can be made larger and that your call-to-action buttons are clear. Also, if you\u2019re linking anchor text, make sure you include a description of where this link will lead. This means instead of linking \u201cclick here,\u201d link a phrase or keyword.<\/p>\n<p style=\"color: #454545; font-size: 18px; font-family: Open Sans; font-weight: 400; line-height: 1.7em;\">A lot of website layouts include animation or pop-ups. As interesting as they may be to some, they can be distracting or even anxiety-inducing for others, leading to a bad review from your site\u2019s visitors. We\u2019re not saying don\u2019t include them, just ensure that there is a straightforward way to close the window and stop the content from playing. WCAG states that if the content plays for more than three seconds, there should be an option to switch it off.<\/p>\n<p>\u00a0<\/p>\n<h2 style=\"color: #002855; font-size: 24px; font-family: Montserrat; font-weight: 500; line-height: 29px;\">Contrast and Color<\/h2>\n<hr style=\"text-align: left; width: 30%; height: 3px; color: #ffa300; background-color: #ffa300; border: none;\"\/>\n<p style=\"color: #454545; font-size: 18px; font-family: Open Sans; font-weight: 400; line-height: 1.7em;\">The contrast and use of colors are vital for brand image. It makes customers pick you out of a crowd or stop their car on the highway to visit your store. It\u2019s also crucial online. But, color blindness or deficiency is common. Research shows that around 1 in 12 men and 1 in 200 women suffer from this condition. Such conditions can affect the appearance of red, green, orange, and many other colors.<\/p>\n<figure id=\"attachment_292255\" aria-describedby=\"caption-attachment-292255\" style=\"width: 300px\" class=\"wp-caption alignright\"><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-292255 img-responsive\" src=\"https:\/\/ieeecs-media.computer.org\/wp-media\/2022\/08\/02172710\/Accessibility-and-Inclusivity-3-300x128.jpg\" alt=\"WCAG standards of contrast colors\" width=\"300\" height=\"128\" srcset=\"https:\/\/ieeecs-media.computer.org\/wp-media\/2022\/08\/02172710\/Accessibility-and-Inclusivity-3-300x128.jpg 300w, https:\/\/ieeecs-media.computer.org\/wp-media\/2022\/08\/02172710\/Accessibility-and-Inclusivity-3.jpg 512w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\"\/><figcaption id=\"caption-attachment-292255\" class=\"wp-caption-text\">Source<\/figcaption><\/figure>\n<p style=\"color: #454545; font-size: 18px; font-family: Open Sans; font-weight: 400; line-height: 1.7em;\">The web content accessibility guidelines (WCAG) require any website builder to ensure that the contrast ratio is 4.5: 1 for standard text and 3: 1 for larger text, at a minimum.<\/p>\n<p style=\"color: #454545; font-size: 18px; font-family: Open Sans; font-weight: 400; line-height: 1.7em;\">UX designers should avoid using color to communicate a point or command. For example, red for \u2018no\u2019 and green for \u2018yes\u2019 can cause many visually impaired people stress and confusion. You should also stay away from colors that are very different in contrast, as this can trigger people on the autism spectrum.<\/p>\n<p>\u00a0<\/p>\n<h2 style=\"color: #002855; font-size: 24px; font-family: Montserrat; font-weight: 500; line-height: 29px;\">Navigation<\/h2>\n<hr style=\"text-align: left; width: 30%; height: 3px; color: #ffa300; background-color: #ffa300; border: none;\"\/>\n<p style=\"color: #454545; font-size: 18px; font-family: Open Sans; font-weight: 400; line-height: 1.7em;\">Website navigation can include everything from the drop-down menu style to the way content is organized. You need to be aware that not everyone is capable of using the mouse and keyboard together. This is why your website should provide users with additional navigation methods to improve the customer experience.<\/p>\n<p style=\"color: #454545; font-size: 18px; font-family: Open Sans; font-weight: 400; line-height: 1.7em;\">Support keyboard navigation is a technique often adopted by people with motor neuron conditions, muscle disorders, and the visually impaired. It enables them to navigate the screen using just the keyboard. It is vital for you, as a UX designer, to allow this type of navigation. If you\u2019re unsure that your website is capable of this, try navigating it using just the keyboard yourself. If it\u2019s difficult, make adjustments accordingly.<\/p>\n<p style=\"color: #454545; font-size: 18px; font-family: Open Sans; font-weight: 400; line-height: 1.7em;\">Another crucial feature that you need to include is breadcrumb navigation. This aid allows users to see their exact trail on the website and where they are now. Breadcrumb navigation is named after the popular fairy tale Hansel and Gretel, where the characters leave a breadcrumb trail so that they don\u2019t get lost in the forest. For example:<\/p>\n<p style=\"color: #454545; font-size: 18px; font-family: Open Sans; font-weight: 400; line-height: 1.7em;\">business advice &gt; customer experience &gt; customer service &gt; customer service tools &gt; customer service management system.<\/p>\n<p>\u00a0<\/p>\n<h2 style=\"color: #002855; font-size: 24px; font-family: Montserrat; font-weight: 500; line-height: 29px;\">Asset Alternatives<\/h2>\n<hr style=\"text-align: left; width: 30%; height: 3px; color: #ffa300; background-color: #ffa300; border: none;\"\/>\n<p style=\"color: #454545; font-size: 18px; font-family: Open Sans; font-weight: 400; line-height: 1.7em;\">A web page combines various media assets such as images, video, audio, infographics, etc. And these large sets of data are normally stored in cloud data lake tools that provide a seamless user experience on most days. That\u2019s why prioritizing the digital experiences of customers is a must and having alternatives is essential.<\/p>\n<p style=\"color: #454545; font-size: 18px; font-family: Open Sans; font-weight: 400; line-height: 1.7em;\">Visually impaired individuals often use a screen reader to experience a website. This assistive software renders written text and image content into speech or even braille\u2014so UX designers should spend time crafting the best <code>&lt;alt&gt;<\/code> text for their images.<\/p>\n<p style=\"color: #454545; font-size: 18px; font-family: Open Sans; font-weight: 400; line-height: 1.7em;\">For example, let\u2019s say you are designing a blog page with the title \u201cIn the UK, virtual receptionists provide professional services.\u201d You have placed an image of an agent and a video conference call solution. Instead of describing this image as just a \u201cvirtual receptionist example,\u201d you need to give it context: Explain in detail how many people there are and what they\u2019re all doing in relation to the text.<\/p>\n<figure id=\"attachment_292257\" aria-describedby=\"caption-attachment-292257\" style=\"width: 300px\" class=\"wp-caption alignright\"><img decoding=\"async\" loading=\"lazy\" class=\"img-responsive wp-image-292257 size-full\" src=\"https:\/\/ieeecs-media.computer.org\/wp-media\/2022\/08\/02172828\/Accessibility-and-Inclusivity-2.png\" alt=\"\" width=\"300\" height=\"255\"\/><figcaption id=\"caption-attachment-292257\" class=\"wp-caption-text\">Source<\/figcaption><\/figure>\n<p>\u00a0<\/p>\n<p style=\"color: #454545; font-size: 18px; font-family: Open Sans; font-weight: 400; line-height: 1.7em;\">If your website is heavy on video or audio content, it is crucial that you provide an alternative method for people to experience it. For example, turn an audio podcast into a transcript. Various AI tools can help with this process. Also, add captions to your videos.<\/p>\n<p style=\"color: #454545; font-size: 18px; font-family: Open Sans; font-weight: 400; line-height: 1.7em;\">Another thing you can do for more complex infographics or graphs is to add a clear description or summary of the data points.<\/p>\n<p>\u00a0<\/p>\n<h2 style=\"color: #002855; font-size: 24px; font-family: Montserrat; font-weight: 500; line-height: 29px;\">Feedback Awareness<\/h2>\n<hr style=\"text-align: left; width: 30%; height: 3px; color: #ffa300; background-color: #ffa300; border: none;\"\/>\n<p style=\"color: #454545; font-size: 18px; font-family: Open Sans; font-weight: 400; line-height: 1.7em;\">We all make mistakes when navigating the internet. We press the wrong buttons, misread instructions, and fill in forms incorrectly. People with disabilities can often find it challenging to know when they\u2019ve made a mistake online. Especially if the website only alerts them subtly, like with colors or sound effects.<\/p>\n<p style=\"color: #454545; font-size: 18px; font-family: Open Sans; font-weight: 400; line-height: 1.7em;\">This is why providing these users with clear and concise feedback is crucial for accessibility. Not only that, but you should also:<\/p>\n<ul style=\"padding-left: 5%; color: #454545; font-size: 18px; font-family: Open Sans; font-weight: 400; line-height: 1.7em;\">\n<li style=\"list-style-image: url('https:\/\/ieeecs-media.computer.org\/wp-media\/2021\/11\/17161248\/Icon_Right-Double-Arrow.png');\">Label boxes and other input forms clearly<\/li>\n<li style=\"list-style-image: url('https:\/\/ieeecs-media.computer.org\/wp-media\/2021\/11\/17161248\/Icon_Right-Double-Arrow.png');\">Allow Autocomplete to fill in the remainder of the form to reduce typing<\/li>\n<li style=\"list-style-image: url('https:\/\/ieeecs-media.computer.org\/wp-media\/2021\/11\/17161248\/Icon_Right-Double-Arrow.png');\">Allow the user a chance to verify and check for errors<\/li>\n<\/ul>\n<p style=\"color: #454545; font-size: 18px; font-family: Open Sans; font-weight: 400; line-height: 1.7em;\">The main thing here is finding a balance between being helpful and overbearing.<\/p>\n<p>\u00a0<\/p>\n<h2 style=\"color: #002855; font-size: 24px; font-family: Montserrat; font-weight: 500; line-height: 29px;\">To Summarize<\/h2>\n<hr style=\"text-align: left; width: 30%; height: 3px; color: #ffa300; background-color: #ffa300; border: none;\"\/>\n<p style=\"color: #454545; font-size: 18px; font-family: Open Sans; font-weight: 400; line-height: 1.7em;\">Accessing and navigating the internet is a right, not a privilege, especially in a 2022 world where everything has become a digital operation. There\u2019s plenty of technology out there that can assist people with disabilities, but the foundation of web design should also cater to these individuals. UX designers need to make it their mission to design inclusively. This article has only scratched the surface of inclusive web design. To ensure that your website is truly designed with disabilities in mind, you should consider appointing an accessibility auditor.<\/p>\n<p>\u00a0<\/p>\n<h2 style=\"color: #002855; font-size: 24px; font-family: Montserrat; font-weight: 500; line-height: 29px;\">About the Writer<\/h2>\n<hr style=\"text-align: left; width: 30%; height: 3px; color: #ffa300; background-color: #ffa300; border: none;\"\/>\n<p style=\"color: #454545; font-size: 18px; font-family: Open Sans; font-weight: 400; line-height: 1.7em;\">Tanhaz Kamaly is a Partnership Executive at Dialpad, a modern cloud-hosted business communications platform with virtual call center solutions that turns conversations into the best opportunities, both for businesses and clients. He is well-versed and passionate about helping companies work in constantly evolving contexts, anywhere, anytime. Check out his LinkedIn profile.<\/p>\n<\/p><\/div>\n<p>[ad_2]<br \/>\n<br \/><a href=\"https:\/\/www.computer.org\/publications\/tech-news\/trends\/designing-for-accessibility-and-inclusivity\/\">Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] If the past year has taught us anything, it\u2019s that a pandemic is far easier to get through with&hellip;<\/p>\n","protected":false},"author":1,"featured_media":366,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[308,81,309,96,2,310,159],"tags":[],"class_list":["post-365","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessibility","category-design","category-diversity-and-inclusion","category-inclusivity","category-tech-news-post","category-ux","category-web-development"],"_links":{"self":[{"href":"https:\/\/pc-keeper.tech\/index.php\/wp-json\/wp\/v2\/posts\/365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pc-keeper.tech\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pc-keeper.tech\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pc-keeper.tech\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pc-keeper.tech\/index.php\/wp-json\/wp\/v2\/comments?post=365"}],"version-history":[{"count":0,"href":"https:\/\/pc-keeper.tech\/index.php\/wp-json\/wp\/v2\/posts\/365\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pc-keeper.tech\/index.php\/wp-json\/wp\/v2\/media\/366"}],"wp:attachment":[{"href":"https:\/\/pc-keeper.tech\/index.php\/wp-json\/wp\/v2\/media?parent=365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pc-keeper.tech\/index.php\/wp-json\/wp\/v2\/categories?post=365"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pc-keeper.tech\/index.php\/wp-json\/wp\/v2\/tags?post=365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}