{"id":2371,"date":"2024-08-11T10:15:14","date_gmt":"2024-08-11T14:15:14","guid":{"rendered":"https:\/\/sites.bu.edu\/marcom-team\/?page_id=2371"},"modified":"2025-12-01T10:11:21","modified_gmt":"2025-12-01T15:11:21","slug":"accessibility-tips","status":"publish","type":"page","link":"https:\/\/sites.bu.edu\/marcom-team\/departments\/interactive-design\/role-specific-info\/designers-developers\/accessibility-tips\/","title":{"rendered":"Accessibility"},"content":{"rendered":"<p>Compliance with accessibility guidelines is important both for adhering to BU web guidelines and for ensuring your visitors have a good experience on your site. It\u2019s also a requirement for new websites under the<span>\u00a0<\/span><a href=\"http:\/\/www.bu.edu\/mwas\/\">BU Minimum Web Accessibility Standards (MWAS)<\/a>.<\/p>\n<p><a href=\"http:\/\/www.bu.edu\/mwas\/\" class=\"button-secondary\" target=\"_blank\" rel=\"noopener noreferrer\">Learn About BU&#8217;s Accessibility<\/a><\/p>\n<p><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" class=\"button-secondary\" target=\"_blank\" rel=\"noopener noreferrer\">Check Colors<\/a><\/p>\n<p>While more content-based, there&#8217;s also a valuable<span>\u00a0<\/span><a href=\"http:\/\/www.bu.edu\/tech\/services\/comm\/websites\/www\/wordpress\/how-to\/accessible-content\/\" target=\"_blank\" rel=\"noopener noreferrer\">guide on TechWeb<\/a> of 10 easy improvements for client<span>\u00a0<\/span><span class=\"glossary-tooltip\"><span class=\"glossary-link\"><a href=\"https:\/\/wpdocs.bu.edu\/glossary\/content\/\">content<\/a> <\/span><span class=\"glossary-tooltip-content clearfix\"><span class=\"glossary-tooltip-text\">consisting of text, images, headings, and other information to keep in mind when designing.<\/span><\/span><\/span><\/p>\n<p>It&#8217;s important to also remember <a href=\"https:\/\/wcet.wiche.edu\/frontiers\/2024\/08\/22\/the-web-content-accessibility-guidelines-the-adas-requirements-for-digital-content\/\">WCAG<\/a>.<\/p>\n<p><a href=\"https:\/\/docs.google.com\/presentation\/d\/1uOwHGyEhghUdX1xYs0e5pKU8IVCH2IftTABkBWRfrQE\/edit?usp=sharing\" class=\"button-secondary\" target=\"_blank\" rel=\"noopener noreferrer\">Digital Accessibility Presentation<\/a><\/p>\n<p><img loading=\"lazy\" src=\"\/marcom-team\/files\/2024\/08\/5-the-law-636x523.png\" alt=\"\" width=\"636\" height=\"523\" class=\"size-medium wp-image-3019 aligncenter\" srcset=\"https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/5-the-law-636x523.png 636w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/5-the-law-1024x842.png 1024w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/5-the-law-768x631.png 768w, https:\/\/sites.bu.edu\/marcom-team\/files\/2024\/08\/5-the-law.png 1506w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><\/p>\n<div class=\" bu-callout aligncenter\"><\/p>\n<h4>Accessibility Reporting<\/h4>\n<p>If there&#8217;s an accessibility issue from a vendor, client, or AE, it should be submitted <a href=\"https:\/\/sites.bu.edu\/marcom-team\/departments\/interactive-design\/what-we-do\/id-offerings\/servicenow-ticket-process\/\">as a bug through ServiceNow<\/a>.<\/p>\n<p><\/div>\n<h2>Tips<\/h2>\n<p><a href=\"https:\/\/validator.w3.org\/\" class=\"button-secondary\" target=\"_blank\" rel=\"noopener noreferrer\">Validate HTML Markup<\/a><\/p>\n<p><a href=\"https:\/\/web.dev\/articles\/color-and-contrast-accessibility\" class=\"button-secondary\" target=\"_blank\" rel=\"noopener noreferrer\">Check for APCA Colors <\/a><\/p>\n<div class=\"bu_collapsible_container \" aria-live=\"polite\" data-customize-animation=\"false\"><h4 class=\"bu_collapsible\" aria-expanded=\"false\"tabindex=\"0\" role=\"button\">Keep Links Underlined<\/h4><div class=\"bu_collapsible_section\" style=\"display: none;\"><\/p>\n<p>Ensure all links are easily identifiable by using more than just color to indicate they&#8217;re clickable. The simplest way? Keep the underline.<\/p>\n<h4>Key Points:<\/h4>\n<ul>\n<li><strong>MWAS requires accessibility compliance, including clear link indicators.<\/strong><\/li>\n<li><strong>Checkpoints to watch<\/strong>:\n<ul>\n<li><strong>Color Conveyance<\/strong>: Don\u2019t rely on color alone for conveying information.<\/li>\n<li><strong>Navigation<\/strong>: Don\u2019t remove underlines unless there\u2019s another clear indicator that text is a link.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>Best Practices:<\/h4>\n<ul>\n<li>Links should look like links\u2014underlined by default.<\/li>\n<li>For body text links not underlined, ensure:<br \/>\n1. A 3:1 contrast ratio between link and surrounding text.<br \/>\n2. A non-color indicator (like an underline) on hover and focus.<\/li>\n<\/ul>\n<p>Ensure hover and focus effects work with both mouse and keyboard using `:hover` and `:focus`.<\/p>\n<p><strong>Exceptions:<\/strong> Main navigation, buttons, and social media links can use shapes to indicate clickability instead of underlines.<\/p>\n<p>Happy coding!<\/p>\n<p><\/div>\n<\/div>\n\n<p>&nbsp;<\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"jl6EMkMfdG\"><p><a href=\"https:\/\/css-tricks.com\/the-checkbox-hack\/\">The &#8220;Checkbox Hack&#8221; (and things you can do with it)<\/a><\/p><\/blockquote>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;The &#8220;Checkbox Hack&#8221; (and things you can do with it)&#8221; &#8212; CSS-Tricks\" src=\"https:\/\/css-tricks.com\/the-checkbox-hack\/embed\/#?secret=cyxNE2KPer#?secret=jl6EMkMfdG\" data-secret=\"jl6EMkMfdG\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"U7FxmkvvfR\"><p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/v\/valid\/\">:valid<\/a><\/p><\/blockquote>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;:valid&#8221; &#8212; CSS-Tricks\" src=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/v\/valid\/embed\/#?secret=MEdMaP07bN#?secret=U7FxmkvvfR\" data-secret=\"U7FxmkvvfR\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"tNehrAttjC\"><p><a href=\"https:\/\/css-tricks.com\/another-stab-at-truncated-text\/\">Another Stab at Truncated Text<\/a><\/p><\/blockquote>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;Another Stab at Truncated Text&#8221; &#8212; CSS-Tricks\" src=\"https:\/\/css-tricks.com\/another-stab-at-truncated-text\/embed\/#?secret=hxNHQ70roU#?secret=tNehrAttjC\" data-secret=\"tNehrAttjC\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Compliance with accessibility guidelines is important both for adhering to BU web guidelines and for ensuring your visitors have a good experience on your site. It\u2019s also a requirement for new websites under the\u00a0BU Minimum Web Accessibility Standards (MWAS). Learn About BU&#8217;s Accessibility Check Colors While more content-based, there&#8217;s also a valuable\u00a0guide on TechWeb of [&hellip;]<\/p>\n","protected":false},"author":12906,"featured_media":0,"parent":315,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages\/2371"}],"collection":[{"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/users\/12906"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/comments?post=2371"}],"version-history":[{"count":20,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages\/2371\/revisions"}],"predecessor-version":[{"id":4152,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages\/2371\/revisions\/4152"}],"up":[{"embeddable":true,"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/pages\/315"}],"wp:attachment":[{"href":"https:\/\/sites.bu.edu\/marcom-team\/wp-json\/wp\/v2\/media?parent=2371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}