{"id":63325,"date":"2024-11-06T21:28:46","date_gmt":"2024-11-06T21:28:46","guid":{"rendered":"https:\/\/staging.totara.fortyapp.com\/articles\/creating-inclusive-learning-experiences-the-role-of-visual-design\/"},"modified":"2024-11-25T22:53:07","modified_gmt":"2024-11-25T22:53:07","slug":"creating-inclusive-learning-experiences-the-role-of-visual-design","status":"publish","type":"article","link":"https:\/\/staging.totara.fortyapp.com\/us\/articles\/creating-inclusive-learning-experiences-the-role-of-visual-design\/","title":{"rendered":"Creating Inclusive Learning Experiences: The Role of Visual Design"},"content":{"rendered":"\n<div class='inline-text-container MobileAlignment DesktopAlignment'>\n  <div class='richText'><p><span style=\"font-weight: 400;\">Accessibility in design means creating visuals and graphs, whether in print or digital, that can be appreciated by a diverse audience regardless of their physical or cognitive abilities. It ensures inclusivity and a comprehensive user experience for everyone.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">While some designs are specifically aimed at people with disabilities, designing with accessibility in mind benefits everyone by enhancing the overall user experience.<\/span><\/p>\n<h3><b>\u00a0What is WCAG?<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">The Web Content Accessibility Guidelines (WCAG) provide recommendations for making the web more accessible, particularly for users with disabilities such as color blindness and other vision impairments. WCAG defines different contrast ratio levels, categorized into<\/span><a href=\"https:\/\/www.siteimprove.com\/glossary\/wcag-compliance-checker\/\"> <span style=\"font-weight: 400;\">three compliance levels:<\/span><\/a><span style=\"font-weight: 400;\"> Level A, Level AA, and Level AAA.<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Level A: This is the most basic level of compliance. Websites at this level may not be fully accessible in all situations.\u00a0<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Level AA: The most commonly required level in accessibility legislation. It ensures that your website is usable and understandable for most users in most situations.\u00a0<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Level AAA: The highest level of accessibility. This is the most difficult to achieve and should be a goal only after meeting Level AA standards.\u00a0\u00a0<\/span><\/li>\n<\/ul>\n<h3><b>\u00a0Designing with Accessibility in Mind<\/b><\/h3>\n<p><b>Color Contrast &amp; Font Selection\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Different devices and mediums, such as laptops, tablets, and print, create different visual experiences. Screens emit light and refresh constantly, which can cause eye strain. In contrast, paper reflects light and provides a stable image. This means color contrast and font selection are crucial when designing for screens.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To ensure readability, you should maintain sufficient color contrast between the text (foreground) and the background. The ideal combination is black text on a white background. WCAG recommends a contrast ratio of 4.5:1 for normal text (up to 24px) and 3:1 for larger or bold text. Tools like the<\/span><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/?fcolor=000000&amp;bcolor=EBF5FB\"> <span style=\"font-weight: 400;\">WebAIM Contrast Checker<\/span><\/a><span style=\"font-weight: 400;\"> can help you verify color contrast ratios based on text size.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Too much (or too little) contrast and poor color combinations can cause visual discomfort. For instance, red and blue can create an optical illusion called Chromostereopsis, making it hard to read text. Similarly, red and green combinations can be challenging for individuals with color blindness.\u00a0<\/span><\/p>\n<\/div>\n  <\/div>\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"2624\" height=\"1570\" src=\"https:\/\/staging.totara.fortyapp.com\/wp-content\/uploads\/2024\/10\/Community-homepage-seen-with-WAVE-extension-1.png\" alt=\"Totara Community homepage seen with WAVE browser extension\" class=\"wp-image-63379\" style=\"width:840px;height:auto\" srcset=\"https:\/\/staging.totara.fortyapp.com\/wp-content\/uploads\/2024\/10\/Community-homepage-seen-with-WAVE-extension-1.png 2624w, https:\/\/staging.totara.fortyapp.com\/wp-content\/uploads\/2024\/10\/Community-homepage-seen-with-WAVE-extension-1-300x179.png 300w, https:\/\/staging.totara.fortyapp.com\/wp-content\/uploads\/2024\/10\/Community-homepage-seen-with-WAVE-extension-1-1024x613.png 1024w, https:\/\/staging.totara.fortyapp.com\/wp-content\/uploads\/2024\/10\/Community-homepage-seen-with-WAVE-extension-1-768x460.png 768w, https:\/\/staging.totara.fortyapp.com\/wp-content\/uploads\/2024\/10\/Community-homepage-seen-with-WAVE-extension-1-1536x919.png 1536w, https:\/\/staging.totara.fortyapp.com\/wp-content\/uploads\/2024\/10\/Community-homepage-seen-with-WAVE-extension-1-2048x1225.png 2048w\" sizes=\"auto, (max-width: 2624px) 100vw, 2624px\" \/><\/figure>\n\n\n\n<div class='inline-text-container MobileAlignment DesktopAlignment'>\n  <div class='richText'><p><b>Font Selection\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">We recognize letters by familiar patterns, not by memorizing each letter version. Therefore, it is important to use fonts that allow for clear pattern recognition. While some argue that Times New Roman is the most legible, others believe sans serif fonts are better for web and small text. Factors such as height, counter size, letter spacing, and stroke width influence legibility more than the presence or absence of serifs.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Avoid overly decorative styles that can interfere with pattern recognition when choosing fonts. Below is an example of how different fonts can affect readability:<\/span><\/p>\n<\/div>\n  <\/div>\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"543\" height=\"120\" src=\"https:\/\/staging.totara.fortyapp.com\/wp-content\/uploads\/2024\/10\/Font-accessibility-example-2.png\" alt=\"Variations of font styles demonstrated with the letter &quot;A&quot;\" class=\"wp-image-63230\" srcset=\"https:\/\/staging.totara.fortyapp.com\/wp-content\/uploads\/2024\/10\/Font-accessibility-example-2.png 543w, https:\/\/staging.totara.fortyapp.com\/wp-content\/uploads\/2024\/10\/Font-accessibility-example-2-300x66.png 300w\" sizes=\"auto, (max-width: 543px) 100vw, 543px\" \/><\/figure>\n\n\n\n<div class='inline-text-container MobileAlignment DesktopAlignment'>\n  <div class='richText'><p><span style=\"font-weight: 400;\">We identify letters by recognizable patterns. We haven\u2019t memorised all the versions of the letter A. Instead, we have built a memory pattern of the letter A, and when we see something similar, the brain recognises that it\u2019s, in fact, the letter A.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The font is not crucial for legibility unless you pick a font that is too decorative and might interfere with the brain\u2019s ability to recognize patterns. The paragraphs below show different font styles. The first one is easy to read, but the others have progressively more difficulty in recognising the letter\u2019s pattern.<\/span><\/p>\n<\/div>\n  <\/div>\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"744\" height=\"286\" src=\"https:\/\/staging.totara.fortyapp.com\/wp-content\/uploads\/2024\/10\/Font-accessbility-example.png\" alt=\"Letter pattern demonstrated in various fonts\" class=\"wp-image-63235\" srcset=\"https:\/\/staging.totara.fortyapp.com\/wp-content\/uploads\/2024\/10\/Font-accessbility-example.png 744w, https:\/\/staging.totara.fortyapp.com\/wp-content\/uploads\/2024\/10\/Font-accessbility-example-300x115.png 300w\" sizes=\"auto, (max-width: 744px) 100vw, 744px\" \/><\/figure>\n\n\n\n<div class='inline-text-container MobileAlignment DesktopAlignment'>\n  <div class='richText'><p><span style=\"font-weight: 400;\">Additional Tips for Color Contrast &amp; Fonts\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Reading on screens is more challenging than reading on paper.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Avoid poor color combinations like red and blue.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use fonts that enhance pattern recognition, avoiding too decorative ones.\u00a0<\/span><\/li>\n<\/ul>\n<p><b>Font Size Matters\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Font size is another critical factor in accessibility. The text must be large enough for users of all ages to read comfortably. Typeface design also plays a role\u2014fonts with larger x-heights (the height of lowercase letters) are generally more legible.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The ideal font size for web body text is around 12pt (16px), with larger text being at least 18pt (24px).<\/span><a href=\"https:\/\/www.a11y-collective.com\/blog\/wcag-minimum-font-size\/\"> <span style=\"font-weight: 400;\">The Web Content Accessibility Guidelines (WCAG)<\/span><\/a><span style=\"font-weight: 400;\"> also recommends scalable text, meaning users can resize the text by up to 200% without losing any content or functionality.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Choose a font size that people of all ages can read comfortably.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The most accessible fonts are Tahoma, Calibri, Helvetica, Arial, and Verdana.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use a minimum font size of 14 to ensure legibility for print.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Type sizes six and below are difficult to read (hence why it is usually reserved for copyright, trademark information, and terms and conditions).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Avoid using fonts with very thin strokes when working with CMYK digital printing.<\/span><\/li>\n<\/ul>\n<h3><b>Designing Beyond Color: Hidden Fields and Visual Cues\u00a0<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Users with color blindness or other visual impairments need additional visual cues, not just color, to understand information. This includes using strokes, patterns, and icons alongside color to convey meaning.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For example, a focus indicator, like a blue outline around a clickable element, helps users identify interactive components. In graphs or infographics, redundant chromatic codes (color and line patterns) help colorblind users interpret the data without relying solely on color.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Additionally, always use alternative text (ALT text) for images to describe them for users who cannot see the visuals. ALT text should not repeat captions but instead, provide a description of the image. This practice applies to social media and forms as well. Descriptive labels and error messages also ensure that forms are accessible.<\/span><\/p>\n<p><b>\u00a0Resources for Improving Accessibility\u00a0<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/?fcolor=000000&amp;bcolor=EBF5FB\"><span style=\"font-weight: 400;\">WebAIM Contrast Checker<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/www.vischeck.com\/examples\/\"><span style=\"font-weight: 400;\">\u00a0<\/span><span style=\"font-weight: 400;\">Color Vision Simulator Examples<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/chromewebstore.google.com\/detail\/wave-evaluation-tool\/jbbplnpkjmmeebjpijfedlgcdilocofh?pli=1\"><span style=\"font-weight: 400;\">WAVE evaluation tool<\/span><\/a><span style=\"font-weight: 400;\">: WAVE is a web accessibility evaluation tool developed by WebAIM.org. It provides visual feedback about the accessibility of your web content.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"http:\/\/colorsafe.co\/\"><span style=\"font-weight: 400;\">Colorsafe.<\/span><\/a><span style=\"font-weight: 400;\">co accessible color palettes based on WCAG Guidelines of text and background contrast ratios.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/www.tpgi.com\/color-contrast-checker\/\"><span style=\"font-weight: 400;\">\u00a0<\/span><span style=\"font-weight: 400;\">Colour Contrast Analyser (CCA)<\/span><\/a><span style=\"font-weight: 400;\">\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/chromewebstore.google.com\/detail\/colorblindly\/floniaahmccleoclneebhhmnjgdfijgg\"><span style=\"font-weight: 400;\">Colorblindly<\/span><\/a> <span style=\"font-weight: 400;\">is a browser extension that helps people create website for the people with colorblindness by allowing them to simulate the experience those users have on websites.<\/span><\/li>\n<\/ul>\n<p><b>Additional Tips<\/b><\/p>\n<p><span style=\"font-weight: 400;\">People might be able to see an image, but not as you would expect (with colour changes that make it difficult to understand its information)\u2014e.g., a graph or diagram. That\u2019s why you should use Alternative Text to describe the image as much as possible. If you cannot see the picture, the ALT text provides a description of it. If you don\u2019t include any ALT text, a lot of information will be missing from the page.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The Alternative text (or ALT text) is a way to describe images or graphic elements on a website so people who cannot see them can still get an idea of what\u2019s represented in those visual assets. So, the ALT text should not replicate the text below the image (caption) because both texts are accessible by a screen reader. This also affects images on social media, where you can include captions and ALT text in the advanced settings.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The same goes for forms. It\u2019s good practice to ensure form fields have descriptive labels and instructions and show error messages clearly to ensure<\/span><a href=\"https:\/\/webaim.org\/techniques\/forms\/\"> <span style=\"font-weight: 400;\">an accessible form.<\/span><\/a><span style=\"font-weight: 400;\"> WebAIM is a fantastic page to check to design web elements with accessibility in mind.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use ALT text for all images, including those on social media.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Avoid duplicating caption text in ALT text.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Keep ALT text concise and informative.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Test various font sizes and designs to ensure readability for all users.\u00a0<\/span><\/li>\n<\/ul>\n<p><b>Other Visual Elements to Consider\u00a0<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Avoid justifying text (aligning both the left and right margins).\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Break text into sections with bullet points, line breaks, or short paragraphs for better readability.\u00a0<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><b>Prioritizing Accessibility for All<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Designing with accessibility in mind isn&#8217;t just about meeting compliance standards\u2014it&#8217;s about creating inclusive experiences that benefit everyone. By paying attention to color contrast, font selection, and visual cues, we can ensure that digital content is usable by a broader audience, including those with visual impairments or other disabilities.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The Web Content Accessibility Guidelines (WCAG) provide a solid foundation for making websites and digital designs more accessible. But accessibility isn&#8217;t just a one-time task\u2014it&#8217;s an ongoing commitment to improving user experiences, testing new designs, and refining them based on user feedback.<\/span><\/p>\n<p><a href=\"https:\/\/staging.totara.fortyapp.com\/us\/events\/empowering-through-accessibility-practical-insights-from-blind-veterans-uk-on-inclusive-learning\/\"><span style=\"font-weight: 400;\">Join our<\/span><span style=\"font-weight: 400;\"> upcoming <\/span><\/a><span style=\"font-weight: 400;\">webinar with Blind Veterans to learn more about the real-world challenges faced by vision-impaired learners and how simple, effective adjustments can significantly improve learning delivery<\/span><b>.<\/b><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n<p>If you found this article helpful, join 5,000 other L&amp;D professionals in the\u00a0<a href=\"https:\/\/totara.community\/?__hstc=239651228.46b594d7d6a18916e934f39cca8c1add.1722983435163.1729532571674.1729541812872.83&amp;__hssc=239651228.35.1729541812872&amp;__hsfp=1555716707\" target=\"_blank\" rel=\"noopener\">Totara Community<\/a>\u00a0for more resources and discussions about Totara and learning and development in the workplace.<\/p>\n<\/div>\n      <div class='cta'>\n      \n<a id=\"\" class=\"button-link \" target=\"\" href=\"https:\/\/totara.community\/\">\n  <span class='container darkPrimaryTheme'>\n    <div><\/div>\n    <div><\/div>\n    <div class='contents'>\n      <span>Join the Totara community<\/span>\n          <\/div>\n  <\/span>\n<\/a>    <\/div>\n  <\/div>","protected":false},"template":"","tax\/tags":[1311,1312,684,719],"tax\/solutions":[778],"tax\/topics":[1227,688],"tax\/industries":[],"tax\/article-types":[1021],"class_list":["post-63325","article","type-article","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/staging.totara.fortyapp.com\/us\/wp-json\/wp\/v2\/articles\/63325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.totara.fortyapp.com\/us\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/staging.totara.fortyapp.com\/us\/wp-json\/wp\/v2\/types\/article"}],"wp:attachment":[{"href":"https:\/\/staging.totara.fortyapp.com\/us\/wp-json\/wp\/v2\/media?parent=63325"}],"wp:term":[{"taxonomy":"tag","embeddable":true,"href":"https:\/\/staging.totara.fortyapp.com\/us\/wp-json\/wp\/v2\/tax\/tags?post=63325"},{"taxonomy":"solution","embeddable":true,"href":"https:\/\/staging.totara.fortyapp.com\/us\/wp-json\/wp\/v2\/tax\/solutions?post=63325"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/staging.totara.fortyapp.com\/us\/wp-json\/wp\/v2\/tax\/topics?post=63325"},{"taxonomy":"industry-tax","embeddable":true,"href":"https:\/\/staging.totara.fortyapp.com\/us\/wp-json\/wp\/v2\/tax\/industries?post=63325"},{"taxonomy":"article-type","embeddable":true,"href":"https:\/\/staging.totara.fortyapp.com\/us\/wp-json\/wp\/v2\/tax\/article-types?post=63325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}