{"id":19208,"date":"2025-12-23T13:23:05","date_gmt":"2025-12-23T21:23:05","guid":{"rendered":"https:\/\/www.bellevuecollege.edu\/elearningfaculty\/?page_id=19208"},"modified":"2025-12-23T14:38:52","modified_gmt":"2025-12-23T22:38:52","slug":"9-core-practices","status":"publish","type":"page","link":"https:\/\/www.bellevuecollege.edu\/elearningfaculty\/9-core-practices\/","title":{"rendered":"9 Core Practices"},"content":{"rendered":"\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-7985f4eff0de349fc13a24e4f56970a3\">The Right Thing to Do<\/h2>\n\n\n\n<p class=\"wp-block-mayflower-blocks-lead lead\">Everyone deserves a great experience online. Making your content accessible isn\u2019t just the right thing to do, it also makes your message clearer, your design stronger, and your audience broader. These best practices will help you take simple, practical steps toward more inclusive content.<\/p>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-ce2e316f3b89ff94b0aeee4c31cf654a\">Explore the 9 Core Practices<\/h2>\n\n\n\n<p>Accessibility touches every part of your content. These nine focus areas highlight where to pay attention and what steps you can take to make your work more inclusive. Making these core practices part of your everyday approach to creating, updating, and reviewing your course materials will ensure that your instructional content is ALWAYS accessible to ALL students.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-mayflower-blocks-collapsibles accordion\" id=\"accordion_a7eb1f39-131a-4d7f-983a-b90625b18dc4\">\n<div class=\"wp-block-mayflower-blocks-collapse card bg-primary text-bg-primary\n\t\t text-white\"><div class=\"card-header\" id=\"heading_ce5957ec-1df6-4a4f-9cd6-2f5f97340676\"><h3 class=\"mb-0\"><button class=\"btn collapsed text-white\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapse_ce5957ec-1df6-4a4f-9cd6-2f5f97340676\" aria-expanded=\"false\" aria-controls=\"collapse_ce5957ec-1df6-4a4f-9cd6-2f5f97340676\">1. Text &amp; Formatting<\/button><\/h3><\/div><div id=\"collapse_ce5957ec-1df6-4a4f-9cd6-2f5f97340676\" class=\"collapse \" aria-labelledby=\"heading_ce5957ec-1df6-4a4f-9cd6-2f5f97340676\" data-parent=\"#accordion_a7eb1f39-131a-4d7f-983a-b90625b18dc4\" data-bs-parent=\"#accordion_a7eb1f39-131a-4d7f-983a-b90625b18dc4\"><div class=\"card-body bg-light text-dark\">\n<h4 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-002aa1747f348270acd8fa4fb52de74d\"><strong>Why Readability Matters<\/strong><\/h4>\n\n\n\n<p>Clear, well-formatted text helps everyone. It\u2019s especially important for people with disabilities, like users with dyslexia, low vision, or cognitive challenges\u2014who rely on simple language, clean fonts, and consistent spacing. Readable text also supports non-native speakers and anyone who\u2019s short on time. When content is easier to read, it\u2019s more accessible for all.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-c32e3319f24e28546e233f67583c7684\"><strong>Use simple language:<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Avoid jargon or complex vocabulary<\/li>\n\n\n\n<li>Use plain, direct sentences<\/li>\n<\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>Use: <em>&#8220;Log in with your college username and credentials.&#8221;<\/em><\/p>\n\n\n\n<p><strong>NOT<\/strong>: <em>&#8220;Initiate the login protocol using your institutional settings.&#8221;<\/em><\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-1fe2c2ab7a5c3f8138f13b968ce7e4c0\"><strong>Spell out acronyms:<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First use: <em>Learning Management System (LMS)<\/em><\/li>\n\n\n\n<li>After that, just use the acronym<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-24b930c814eeda30a4e48812fe6732b3\"><strong>Break up walls of text:<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use headers, bullets, and short paragraphs<\/li>\n\n\n\n<li>Add visuals or whitespace to reduce visual fatigue<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-b47b3ff24520db07d9ac000cebb73f25\"><strong>Set a minimum font size:<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use at least&nbsp;<strong>12pt<\/strong>&nbsp;for body text<\/li>\n\n\n\n<li>Larger sizes for headers or key content<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-0361437ca76550b1f8e9cb6ac0d4980e\"><strong>Consider line and letter spacing:<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Aim for&nbsp;<strong>1.5 line spacing<\/strong>&nbsp;for readability<\/li>\n\n\n\n<li>Ensure no crowding or excessive spacing<\/li>\n\n\n\n<li>Use default browser \/ Operating System-friendly spacing unless needed<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-fa7bca24e98c4ebe6d31053871554b56\"><strong>Choose readable fonts<\/strong>:<\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use&nbsp;<strong>sans-serif fonts<\/strong>&nbsp;(e.g., Arial, Helvetica, Verdana)<\/li>\n\n\n\n<li>Avoid decorative or script fonts<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-1c4bc98997074e2731b0bf6e4d2a03a6\"><strong>Follow a style guide:<\/strong><\/h5>\n\n\n\n<p>Align with <a href=\"https:\/\/www.bellevuecollege.edu\/faculty-staff\/style-guide\/\" data-type=\"link\" data-id=\"https:\/\/www.bellevuecollege.edu\/faculty-staff\/style-guide\/\">Bellevue College&#8217;s&nbsp;institutional style guide<\/a> for consistency<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-mayflower-blocks-collapse card bg-primary text-bg-primary\n\t\t text-white\"><div class=\"card-header\" id=\"heading_0260f032-a657-4261-ab71-7411d7d55612\"><h3 class=\"mb-0\"><button class=\"btn collapsed text-white\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapse_0260f032-a657-4261-ab71-7411d7d55612\" aria-expanded=\"false\" aria-controls=\"collapse_0260f032-a657-4261-ab71-7411d7d55612\">2. Headings<\/button><\/h3><\/div><div id=\"collapse_0260f032-a657-4261-ab71-7411d7d55612\" class=\"collapse \" aria-labelledby=\"heading_0260f032-a657-4261-ab71-7411d7d55612\" data-parent=\"#accordion_a7eb1f39-131a-4d7f-983a-b90625b18dc4\" data-bs-parent=\"#accordion_a7eb1f39-131a-4d7f-983a-b90625b18dc4\"><div class=\"card-body bg-light text-dark\">\n<h4 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-7993fc256838010aaee6dfe88e4ed2ee\"><strong>Why Headings Matter<\/strong><\/h4>\n\n\n\n<p>Headings help everyone understand how your content is organized. They\u2019re especially important for people using screen readers, who can navigate a page by jumping from one heading to another. Using headings correctly saves time, improves readability, and supports users with cognitive disabilities.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-04976298abb372796c8ee3b1a6b89d7c\"><strong>Follow a logical order:<\/strong><\/h5>\n\n\n\n<p>Think of headings like an outline:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>H1&nbsp;is your page or document title (used only once)<\/li>\n\n\n\n<li>H2&nbsp;is a main section under H1<\/li>\n\n\n\n<li>H3&nbsp;is a subsection under H2<br>And so on.<\/li>\n<\/ul>\n\n\n\n<p>Never jump levels (e.g., H1 \u2192 H4), and don&#8217;t skip levels.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-f4fab324ede73617ea52791642cff93a\"><strong>One H1 per page:<\/strong><\/h5>\n\n\n\n<p>Each page or document should have&nbsp;<strong>only one H1<\/strong>, usually reserved for the title. Additional headings should start from&nbsp;<strong>H2<\/strong> downward.<\/p>\n\n\n\n<p>What counts as a heading?<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-444e09d2a652508a8055f28931e87df8\"><strong>Use headings to introduce:<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>New sections or topics<\/li>\n\n\n\n<li>Major steps in a process<\/li>\n\n\n\n<li>Important transitions in your content<\/li>\n<\/ul>\n\n\n\n<p>If it helps users understand the flow, it probably needs a heading!<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-a20b4db90cb671cbf3e995201ce3ab41\"><strong>Simple pages may need only one heading:<\/strong><\/h5>\n\n\n\n<p>If your document is short or has only one main point, an&nbsp;<strong>H1 might be all you need<\/strong>.&nbsp;Don\u2019t overuse headings just for decoration or spacing.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-cc6bb86c7f4212209824074bbc5f79eb\"><strong>Don&#8217;t like the heading style? Format it, don&#8217;t replace it:<\/strong><\/h5>\n\n\n\n<p>If you don\u2019t like how a heading&nbsp;looks,&nbsp;<strong>still use the correct style<\/strong>&nbsp;(like H2 or H3), and adjust the visual formatting with your editor tools. Don\u2019t downgrade headings just to get the visual you want.<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-mayflower-blocks-collapse card bg-primary text-bg-primary\n\t\t text-white\"><div class=\"card-header\" id=\"heading_1687e59f-58e3-4513-8330-5e35414ee5ce\"><h3 class=\"mb-0\"><button class=\"btn collapsed text-white\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapse_1687e59f-58e3-4513-8330-5e35414ee5ce\" aria-expanded=\"false\" aria-controls=\"collapse_1687e59f-58e3-4513-8330-5e35414ee5ce\">3. Lists<\/button><\/h3><\/div><div id=\"collapse_1687e59f-58e3-4513-8330-5e35414ee5ce\" class=\"collapse \" aria-labelledby=\"heading_1687e59f-58e3-4513-8330-5e35414ee5ce\" data-parent=\"#accordion_a7eb1f39-131a-4d7f-983a-b90625b18dc4\" data-bs-parent=\"#accordion_a7eb1f39-131a-4d7f-983a-b90625b18dc4\"><div class=\"card-body bg-light text-dark\">\n<h4 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-4d0571872cffd84ee647943cf74d45ed\"><strong>Why Lists Matter<\/strong><\/h4>\n\n\n\n<p>Lists make information easier to scan and understand. When built with proper formatting, screen readers announce how many items are in the list and read them in order. Manually creating lists with dashes or asterisks removes that structure. Accessible lists improve clarity and comprehension for everyone.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-a7d151064157ddc5340e5126bd2aee11\"><strong>Use proper list styles:<\/strong><\/h5>\n\n\n\n<p>Always use your platform\u2019s built-in&nbsp;list formatting tools&nbsp;(bullets or numbers), not manual characters like hyphens or tabs. This ensures screen readers can detect and announce the list correctly.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-5b84c0b5df332ab547efa619e3ff62ca\"><strong>Ordered vs. unordered lists:<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use&nbsp;ordered (numbered)&nbsp;lists when sequence or priority matters\u2014like steps in a process.<\/li>\n\n\n\n<li>Use&nbsp;unordered (bulleted)&nbsp;lists for grouped items with no specific order.<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-a099e23965c5f0e492a474ffc004bc2c\"><strong>Nested lists:<\/strong><\/h5>\n\n\n\n<p>If you need sub-points, use&nbsp;nested lists&nbsp;created with the formatting tool (e.g., tab to indent). This helps screen readers communicate the hierarchy of information.<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-mayflower-blocks-collapse card bg-primary text-bg-primary\n\t\t text-white\"><div class=\"card-header\" id=\"heading_6851558e-53ed-43a0-80b4-30e7b0d9362d\"><h3 class=\"mb-0\"><button class=\"btn collapsed text-white\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapse_6851558e-53ed-43a0-80b4-30e7b0d9362d\" aria-expanded=\"false\" aria-controls=\"collapse_6851558e-53ed-43a0-80b4-30e7b0d9362d\">4. Links<\/button><\/h3><\/div><div id=\"collapse_6851558e-53ed-43a0-80b4-30e7b0d9362d\" class=\"collapse \" aria-labelledby=\"heading_6851558e-53ed-43a0-80b4-30e7b0d9362d\" data-parent=\"#accordion_a7eb1f39-131a-4d7f-983a-b90625b18dc4\" data-bs-parent=\"#accordion_a7eb1f39-131a-4d7f-983a-b90625b18dc4\"><div class=\"card-body bg-light text-dark\">\n<h4 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-aed33686d690f2dc428e1ba9a75ef111\"><strong>Why Links Matter<\/strong><\/h4>\n\n\n\n<p>Descriptive links help everyone navigate more easily. Screen reader users often browse links out of context, so vague text like \u201cclick here\u201d or \u201cread more\u201d isn\u2019t helpful. Clear, well-formatted links show where they lead and also support users who print content or use keyboard navigation.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-c0d1be7115d91886c03ab17f775920c4\"><strong>Use descriptive link text:<\/strong><\/h5>\n\n\n\n<p>Your link text should clearly describe the destination, not say: &#8220;Click here.&#8221;<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>Use: Learn more in the Accessibility in Canvas Guides<\/p>\n\n\n\n<p><strong>NOT<\/strong>: Click here for the guide<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-mayflower-blocks-collapse card bg-primary text-bg-primary\n\t\t text-white\"><div class=\"card-header\" id=\"heading_e552930d-4469-4557-8960-3d773b098f79\"><h3 class=\"mb-0\"><button class=\"btn collapsed text-white\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapse_e552930d-4469-4557-8960-3d773b098f79\" aria-expanded=\"false\" aria-controls=\"collapse_e552930d-4469-4557-8960-3d773b098f79\">5. Tables<\/button><\/h3><\/div><div id=\"collapse_e552930d-4469-4557-8960-3d773b098f79\" class=\"collapse \" aria-labelledby=\"heading_e552930d-4469-4557-8960-3d773b098f79\" data-parent=\"#accordion_a7eb1f39-131a-4d7f-983a-b90625b18dc4\" data-bs-parent=\"#accordion_a7eb1f39-131a-4d7f-983a-b90625b18dc4\"><div class=\"card-body bg-light text-dark\">\n<h4 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-6453557a3ab52d949d439a2e49470347\"><strong>Why Tables Matter<\/strong><\/h4>\n\n\n\n<p>Tables are useful for organizing data, but they need proper structure to be accessible. Screen readers depend on headers and a consistent layout to make sense of the information, without that, tables can become confusing or unreadable.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-48cb4853b61603a10aba6d85561bc9c1\"><strong>Use tables for data only:<\/strong><\/h5>\n\n\n\n<p>Use tables to present structured data, not for layout or formatting. Layout tables confuse screen readers and should be avoided.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-3eaeda91e01137f3029d33b73f10a9a1\"><strong>Mark row and column headers:<\/strong><\/h5>\n\n\n\n<p>Always use the formatting tools to designate headers. This helps screen readers identify how the data is organized.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-7078cf6152177037e2a1f702f1100cf7\"><strong>Add scope to headers:<\/strong><\/h5>\n\n\n\n<p>If possible, add a&nbsp;scope attribute&nbsp;(e.g., row or column) to headers. This tells assistive tech how to associate data cells with headers.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-023745b08cae637c1fd1f3191225307e\"><strong>Avoid merged cells:<\/strong><\/h5>\n\n\n\n<p>Merged cells can confuse screen readers. Keep table structures simple and consistent across rows and columns.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-cb026e9f84f3d1e1f447b4b39caecaa6\"><strong>Don&#8217;t leave cells blank:<\/strong><\/h5>\n\n\n\n<p>Avoid empty table cells\u2014screen readers will announce nothing. If data is not available, enter \u201cN\/A\u201d or another placeholder.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-f72362ff719461cca0eff2fd334298c7\"><strong>Add a table caption:<\/strong><\/h5>\n\n\n\n<p>Include a short caption summarizing what the table is about. Canvas screen readers will read this to give users context.<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-mayflower-blocks-collapse card bg-primary text-bg-primary\n\t\t text-white\"><div class=\"card-header\" id=\"heading_b0053170-422c-4f29-8ac3-2a671b47998f\"><h3 class=\"mb-0\"><button class=\"btn collapsed text-white\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapse_b0053170-422c-4f29-8ac3-2a671b47998f\" aria-expanded=\"false\" aria-controls=\"collapse_b0053170-422c-4f29-8ac3-2a671b47998f\">6. Color &amp; Contrast<\/button><\/h3><\/div><div id=\"collapse_b0053170-422c-4f29-8ac3-2a671b47998f\" class=\"collapse \" aria-labelledby=\"heading_b0053170-422c-4f29-8ac3-2a671b47998f\" data-parent=\"#accordion_a7eb1f39-131a-4d7f-983a-b90625b18dc4\" data-bs-parent=\"#accordion_a7eb1f39-131a-4d7f-983a-b90625b18dc4\"><div class=\"card-body bg-light text-dark\">\n<h4 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-699b47cf818ec779b3b8e01b1a7e1bec\"><strong>Why Color &amp; Contrast Matter<\/strong><\/h4>\n\n\n\n<p>When text and background colors don\u2019t have enough contrast, it can be tough to read, especially for people with low vision or color blindness. Since some users can\u2019t see certain colors, it\u2019s important not to rely on color alone. Strong contrast makes your content clearer for everyone, in any setting.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-6bca5c590b6255d783ea740888243fe0\"><strong>Use a contrast checker:<\/strong><\/h5>\n\n\n\n<p>Tools like WebAIM\u2019s or TPGi\u2019s contrast checkers help you confirm your color combinations are accessible.<\/p>\n\n\n\n<p>Meet contrast ratio standards:<\/p>\n\n\n\n<p>Ensure a&nbsp;<strong>4.5:1 contrast ratio<\/strong>&nbsp;for regular text, and&nbsp;<strong>3:1&nbsp;for large text<\/strong> (18pt+ or 14pt bold). Use a contrast checker to verify. You do not have to calculate on your own.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-0ba5cb0de1eba6ba365973ad38a1ce22\"><strong>Don&#8217;t rely on color alone:<\/strong><\/h5>\n\n\n\n<p>Avoid using color as the only way to show meaning (e.g., \u201cItems in red are incorrect\u201d). Use text labels, patterns, or icons.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-eb089710f151b42a4d5e7043e8a1087e\"><strong>Make visuals high contrast:<\/strong><\/h5>\n\n\n\n<p>Ensure charts, diagrams, and image overlays have enough contrast between colors, especially when labeling.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-1b79385c7589696c8a494c148811d50f\"><strong>Avoid light-on-light combinations:<\/strong><\/h5>\n\n\n\n<p>Low-contrast combos like light gray on white are hard to read. Always test your choices with real users or checkers.<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-mayflower-blocks-collapse card bg-primary text-bg-primary\n\t\t text-white\"><div class=\"card-header\" id=\"heading_6ebf0d64-f2ab-40fb-a06c-9e4a767d0a94\"><h3 class=\"mb-0\"><button class=\"btn collapsed text-white\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapse_6ebf0d64-f2ab-40fb-a06c-9e4a767d0a94\" aria-expanded=\"false\" aria-controls=\"collapse_6ebf0d64-f2ab-40fb-a06c-9e4a767d0a94\">7. Images<\/button><\/h3><\/div><div id=\"collapse_6ebf0d64-f2ab-40fb-a06c-9e4a767d0a94\" class=\"collapse \" aria-labelledby=\"heading_6ebf0d64-f2ab-40fb-a06c-9e4a767d0a94\" data-parent=\"#accordion_a7eb1f39-131a-4d7f-983a-b90625b18dc4\" data-bs-parent=\"#accordion_a7eb1f39-131a-4d7f-983a-b90625b18dc4\"><div class=\"card-body bg-light text-dark\">\n<h4 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-ea409e5673dddef3f5d5d9612ab4fd45\"><strong>Why Images Matter<\/strong><\/h4>\n\n\n\n<p>Images are great for explaining ideas, but not if some users can\u2019t access them. Screen readers rely on alt text to describe what\u2019s shown, so skipping it means people miss out. Clear visuals and good descriptions make content easier for everyone to understand.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-52bc52c5d9bf6a8cb5b39a03d7baa0a2\"><strong>Provide meaningful alt text:<\/strong><\/h5>\n\n\n\n<p>Describe the image based on its&nbsp;purpose in the context. What does the audience need to know from this image?<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-dbee8eb70b20f58873f8d11c084234dd\"><strong>Mark decorative images:<\/strong><\/h5>\n\n\n\n<p>If the image doesn\u2019t convey information (e.g., borders, filler graphics), mark it as&nbsp;decorative&nbsp;so screen readers skip it.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-31f8d2ab8f8ea7608cab15aba9f0694c\"><strong>Avoid including text in images:<\/strong><\/h5>\n\n\n\n<p>Text embedded in images isn\u2019t accessible to assistive technologies and can become unreadable when resized.&nbsp;If an image includes text, ALL text in the image must be provided via alt text or another accessible method.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-66d64371b73a216afb3858d3477a83f2\"><strong>Describe complex images in the body:<\/strong><\/h5>\n\n\n\n<p>For charts, graphs, or diagrams, include a&nbsp;full text description&nbsp;elsewhere on the page to explain the data or message.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-06ce597764998c5bb626a5a5f958a235\"><strong>Add link context in alt text:<\/strong><\/h5>\n\n\n\n<p>When an image acts as a link, the alt text should describe both the image and its destination or purpose. Since linked images provide navigation, they can\u2019t be decorative.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-9054036d6bb798a715e07674b6937ae9\"><strong>Avoid cognitive overload:<\/strong><\/h5>\n\n\n\n<p>Only include images that support your message. Avoid excessive visuals that don\u2019t add meaning. They can distract or overwhelm.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-c40861622c2f380378f81a089b94261a\"><strong>Tag icons and shapes:<\/strong><\/h5>\n\n\n\n<p>If icons or SmartArt carry meaning (e.g., a warning or tip icon), provide alt text so the meaning is clear to screen reader users.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-22639b4219c6d8187f7c39d1e9a58ca6\"><strong>Image use in exams:<\/strong><\/h5>\n\n\n\n<p>For graded assessments, write alt text that describes necessary details&nbsp;without revealing the answer.<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-mayflower-blocks-collapse card bg-primary text-bg-primary\n\t\t text-white\"><div class=\"card-header\" id=\"heading_02c67621-ec12-46f2-bfce-86b6c24aea08\"><h3 class=\"mb-0\"><button class=\"btn collapsed text-white\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapse_02c67621-ec12-46f2-bfce-86b6c24aea08\" aria-expanded=\"false\" aria-controls=\"collapse_02c67621-ec12-46f2-bfce-86b6c24aea08\">8. Video &amp; Audio<\/button><\/h3><\/div><div id=\"collapse_02c67621-ec12-46f2-bfce-86b6c24aea08\" class=\"collapse \" aria-labelledby=\"heading_02c67621-ec12-46f2-bfce-86b6c24aea08\" data-parent=\"#accordion_a7eb1f39-131a-4d7f-983a-b90625b18dc4\" data-bs-parent=\"#accordion_a7eb1f39-131a-4d7f-983a-b90625b18dc4\"><div class=\"card-body bg-light text-dark\">\n<h4 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-0a9248bf5ac954e4c7f8839afd31a09c\"><strong>Why Video &amp; Audio Matter<\/strong><\/h4>\n\n\n\n<p>Multimedia brings content to life, but it\u2019s not truly accessible without captions or descriptions. Adding transcripts and audio descriptions helps everyone follow along and even makes your videos easier to find and reuse.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-272e358cd04a8f202262beaee0696034\"><strong>Provide accurate captions:<\/strong><\/h5>\n\n\n\n<p>All pre-recorded videos must have&nbsp;edited captions. Automated captions often include errors and must be corrected.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-7459072553eb7f1969f1e6629d50a63c\"><strong>Record with good audio:<\/strong><\/h5>\n\n\n\n<p>Use a microphone or headset for clear sound. Poor audio quality impacts comprehension for all users.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-2874c95da86d5f96d788f7fcc6d378c7\"><strong>Live video? Use live captions:<\/strong><\/h5>\n\n\n\n<p>Enable&nbsp;real-time captioning&nbsp;for Zoom, Teams, or other live tools. Offer a transcript after the session if possible.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-01778d4cacce4f5d9de19f6d3dc7f461\"><strong>Describe visual-only content:<\/strong><\/h5>\n\n\n\n<p>If important information is only shown visually (e.g., a diagram), include&nbsp;<strong>audio description<\/strong>&nbsp;in the narration or separately.<\/p>\n\n\n\n<p><strong>Example:<\/strong> You&#8217;re showing a diagram of the water cycle in a video webinar.<\/p>\n\n\n\n<p>Use: <em>&#8220;This diagram shows the water cycle with arrows connecting four main stages: evaporation, condensation, precipitation, and collection. The arrows show water moving from oceans to clouds, then falling as rain and collecting in lakes and rivers.&#8221;<\/em><br>(This gives all users access to the same information, regardless of whether they can see the visual.)<\/p>\n\n\n\n<p><strong>NOT<\/strong>: <em>&#8220;As you can see in this diagram, everything flows in a cycle.&#8221;<\/em><br>(Audio-only users won\u2019t know what the diagram shows because the visual content isn\u2019t described.)<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-0d4211b62000c50859bb7ded4f471fed\"><strong>Avoid flashing content:<\/strong><\/h5>\n\n\n\n<p>Avoid rapid flashing or strobing (more than&nbsp;3 flashes per second) as this can cause seizures in some users.<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-mayflower-blocks-collapse card bg-primary text-bg-primary\n\t\t text-white\"><div class=\"card-header\" id=\"heading_a242caab-aca0-4724-b411-211e197629ff\"><h3 class=\"mb-0\"><button class=\"btn collapsed text-white\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapse_a242caab-aca0-4724-b411-211e197629ff\" aria-expanded=\"false\" aria-controls=\"collapse_a242caab-aca0-4724-b411-211e197629ff\">9. Forms<\/button><\/h3><\/div><div id=\"collapse_a242caab-aca0-4724-b411-211e197629ff\" class=\"collapse \" aria-labelledby=\"heading_a242caab-aca0-4724-b411-211e197629ff\" data-parent=\"#accordion_a7eb1f39-131a-4d7f-983a-b90625b18dc4\" data-bs-parent=\"#accordion_a7eb1f39-131a-4d7f-983a-b90625b18dc4\"><div class=\"card-body bg-light text-dark\">\n<h4 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-88a731cb7e5420c00160bb94aec324d9\"><strong>Why Forms Matter<\/strong><\/h4>\n\n\n\n<p>Forms are how people sign up, share input, or finish key actions\u2014but if they\u2019re hard to use, some users can\u2019t participate. Clear labels and keyboard-friendly design make forms smoother for everyone.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-60fa0258ecfe10b7c34b6a1667d1998e\"><strong>Label all fields clearly:<\/strong><\/h5>\n\n\n\n<p>Each form field must have a&nbsp;clear label either visible or programmatically assigned so screen readers can announce it.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-a4429f76f898e4e2f8aa5bc0145ea9a1\"><strong>Ensure keyboard navigation:<\/strong><\/h5>\n\n\n\n<p>Test your form using just the&nbsp;Tab key&nbsp;to move through fields. Users must be able to navigate without a mouse.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-2b5efc81ea06887b11c841dcaf3a2bf6\"><strong>Use accessible tools:<\/strong><\/h5>\n\n\n\n<p>Tools like&nbsp;<strong>Microsoft Forms<\/strong>,&nbsp;<strong>Qualtrics<\/strong>, and&nbsp;<strong>Gravity Forms<\/strong>&nbsp;have built-in accessibility checks. Use these rather than building from scratch when possible.<\/p>\n\n\n\n<h5 class=\"wp-block-heading has-bc-blue-color has-text-color has-link-color wp-elements-ed55d95f58551d6275b24b0a9de59b29\"><strong>Avoid CAPTCHA or use alternatives:<\/strong><\/h5>\n\n\n\n<p>If your form uses CAPTCHA, ensure there\u2019s an accessible version (e.g., audio CAPTCHA or alternative questions).<\/p>\n<\/div><\/div><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Right Thing to Do Everyone deserves a great experience online. Making your content accessible isn\u2019t just the right thing to do, it also makes your message clearer, your design stronger, and your audience broader. These best practices will help you take simple, practical steps toward more inclusive content. Explore the 9 Core Practices Accessibility <a class=\"read-more\" href=\"https:\/\/www.bellevuecollege.edu\/elearningfaculty\/9-core-practices\/\">...more about 9 Core Practices<\/a><\/p>\n","protected":false},"author":2741,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-19208","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.bellevuecollege.edu\/elearningfaculty\/wp-json\/wp\/v2\/pages\/19208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bellevuecollege.edu\/elearningfaculty\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bellevuecollege.edu\/elearningfaculty\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bellevuecollege.edu\/elearningfaculty\/wp-json\/wp\/v2\/users\/2741"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bellevuecollege.edu\/elearningfaculty\/wp-json\/wp\/v2\/comments?post=19208"}],"version-history":[{"count":6,"href":"https:\/\/www.bellevuecollege.edu\/elearningfaculty\/wp-json\/wp\/v2\/pages\/19208\/revisions"}],"predecessor-version":[{"id":19238,"href":"https:\/\/www.bellevuecollege.edu\/elearningfaculty\/wp-json\/wp\/v2\/pages\/19208\/revisions\/19238"}],"wp:attachment":[{"href":"https:\/\/www.bellevuecollege.edu\/elearningfaculty\/wp-json\/wp\/v2\/media?parent=19208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}