{"id":1123,"date":"2019-05-01T15:41:17","date_gmt":"2019-05-01T19:41:17","guid":{"rendered":"https:\/\/wordpress.ocps.net\/presenceblog\/?p=1123"},"modified":"2019-05-01T15:45:26","modified_gmt":"2019-05-01T19:45:26","slug":"monsido-accessibility-level-aa-errors-with-links","status":"publish","type":"post","link":"https:\/\/wordpress.ocps.net\/presenceblog\/monsido-accessibility-level-aa-errors-with-links\/","title":{"rendered":"Monsido Accessibility Level AA Errors with Links"},"content":{"rendered":"<p>Last time, I looked at the Level A accessibility errors related to links.  This time, I am moving up to the Level AA link issues.  To be compliant at the AA level of WCAG, you must first be compliant at the A level.  So what does Level AA add to link compliance?  Color Contrast.<\/p>\n<p>Before reading this blog post, please read the following blog post and download the Colour Contrast Analyzer to help you check your link colors.<\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.ocps.net\/presenceblog\/monsido-and-how-to-fix-broken-links\/\"><span style=\"font-size:10pt\">https:\/\/wordpress.ocps.net\/presenceblog\/monsido-and-how-to-fix-broken-links\/<\/span><\/a><span style=\"font-size:10pt\"><br \/>\n<\/span><\/li>\n<li><a href=\"https:\/\/wordpress.ocps.net\/presenceblog\/do-users-really-want-to-see-the-url-of-your-hyperlinks\/\"><span style=\"font-size:10pt\">https:\/\/wordpress.ocps.net\/presenceblog\/do-users-really-want-to-see-the-url-of-your-hyperlinks\/<\/span><\/a><span style=\"font-size:10pt\"><br \/>\n<\/span><\/li>\n<li><a href=\"https:\/\/wordpress.ocps.net\/presenceblog\/quick-tip-you-need-to-do-more-than-just-say-click-here\/\"><span style=\"font-size:10pt\">https:\/\/wordpress.ocps.net\/presenceblog\/quick-tip-you-need-to-do-more-than-just-say-click-here\/<\/span><\/a><span style=\"font-size:10pt\"><br \/>\n<\/span><\/li>\n<li><a href=\"https:\/\/wordpress.ocps.net\/presenceblog\/hyperlink-colors-part-2\/\"><span style=\"font-size:10pt\">https:\/\/wordpress.ocps.net\/presenceblog\/hyperlink-colors-part-2\/<\/span><\/a><span style=\"font-size:10pt\"><br \/>\n<\/span><\/li>\n<li><span style=\"font-size:10pt\">Colour Contrast Analyzer: <a href=\"https:\/\/developer.paciellogroup.com\/resources\/contrastanalyser\/\">https:\/\/developer.paciellogroup.com\/resources\/contrastanalyser\/<\/a><br \/>\n<\/span><\/li>\n<\/ul>\n<h2>Level AA Link Errors:<\/h2>\n<p>There is only 1 severe error for links at this level:<\/p>\n<h3>Link text colour must contrast sufficiently with its background color<\/h3>\n<p>Normally, this would be an easy guideline to meet.  For the district as well as for the school sites, we have defined link colors that should provide a good contrast ratio with the background.  A problem may occur if you copy and paste content from another source without using the Paste Plain Text option that removes format settings including color from your web page.<\/p>\n<p>The Monsido Help Center states the color contrast rule as:<\/p>\n<p><span style=\"color:#555557; font-family:Arial; font-size:9pt; background-color:#f3f5f7\">The visual presentation of link text must have a contrast ratio of at least 4.5:1, except for large-scale text, which must have a contrast ratio of at least 3:1 as determined by a contrast algorithm specified by WCAG2.0. Large scale text is considered to be at least 18-point (or 14 point when bold).<\/span><\/p>\n<p>The simple solution is to remove any color attributes from your HTML since each site, include school sites, and use only the predefined link colors that should already be ADA compliant.  Then use the Colour Contrast Analyzer tool to check the text color compared to the background.  The following example comes from a district page:<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2019\/05\/050119_1940_MonsidoAcce1.png\"><\/p>\n<p>This results in a gray text with a 4.4:1 color contrast ratio to the white background.  However, a true black text is 21:1.  Simply remove the color references in the &#8216;style&#8217; attribute as shown here.<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2019\/05\/050119_1940_MonsidoAcce2.png\"><\/p>\n<h2>Level AA Link Reviews:<\/h2>\n<p>There is only 3 reviews for links at this level: that I am going to treat together:<\/p>\n<h3>Visited link text colour must contrast sufficient with its background colour.<\/h3>\n<h3>Active link text colour must contrast sufficient with its background colour.<\/h3>\n<h3>Selected link text colour must contrast sufficient with its background colour.<\/h3>\n<p>I am going to repeat the advice from the above error comment.  Perform these checks:<\/p>\n<ol>\n<li>Remove any color coding in the HTML for the links that either you added or were carried over from the source from which the text was copied.<\/li>\n<li>Use the Colour Contrast Analyzer to verify that the current colors meet the color contrast rules.<\/li>\n<\/ol>\n<p>If you did not overwrite the default link colors and still see these errors in your report, I am going to suggest the following:<\/p>\n<p>You did nothing wrong!<\/p>\n<p>The fact is, I have checked many instances of text and link colors and there seems to be a problem with the way the characters are displayed at smaller font sizes.  When I captured a section of the text and expanded it, I could see the individual pixels used to create the text.<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2019\/05\/050119_1940_MonsidoAcce3.png\"><\/p>\n<p>This is in part the way browsers &#8216;smooth&#8217; out the character shapes at smaller font sizes.  Some fonts are more affected than others are.  The bottom line is that this issue cannot be totally eliminated and is one of the reasons for sticking with sans-serif style fonts alike Ariel, Calibri, and others.<\/p>\n<p>If your content did not use the color attribute to modify the color of the link text or regular text and your report still says you have a color contrast issue, notify <a href=\"mailto:presence@ocps.net\">presence@ocps.net<\/a>.  Do not attempt to &#8216;find&#8217; colors that work on your website.  We will either verify that your page is correct or that we need to have SchoolMessenger modify the CSS that drives your pages to use a different color.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last time, I looked at the Level A accessibility errors related to links. This time, I am moving up to the Level AA link issues. To be compliant at the AA level of WCAG, you must first be compliant at the A level. So what does Level AA add to link compliance? Color Contrast. Before &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/wordpress.ocps.net\/presenceblog\/monsido-accessibility-level-aa-errors-with-links\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Monsido Accessibility Level AA Errors with Links&#8221;<\/span><\/a><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[28,33,32,87,31],"tags":[91],"class_list":["post-1123","post","type-post","status-publish","format-standard","hentry","category-news-related-to-ada-and-accessibility","category-post-that-explains-how-to-perform-a-specific-activity","category-news-related-to-internet-and-intranet-sites","category-monsido-news","category-news-related-specifically-to-school-sites","tag-monsido-broken-links-quality-assurance"],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":1143,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/are-you-a-new-editor-to-our-web-sites\/","url_meta":{"origin":1123,"position":0},"title":"Are You a New Editor To Our Web Sites?","author":"Carlos Hernandez","date":"May 23, 2019","format":false,"excerpt":"First, Happy 100th post! If you have just been assigned to work on your district department or school web site, you may be asking yourself where to begin. There is no quick 5-minute course on everything you need to know. However, here are some suggestions on how to start learning\u2026","rel":"","context":"In &quot;ADA News&quot;","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2019\/05\/Monsido-001-1024x576.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2019\/05\/Monsido-001-1024x576.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2019\/05\/Monsido-001-1024x576.png?resize=525%2C300 1.5x"},"classes":[]},{"id":1206,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/monside-news-2019-2nd-quarter\/","url_meta":{"origin":1123,"position":1},"title":"Monside News \u2013 2019 \u2013 2nd Quarter","author":"Carlos Hernandez","date":"July 17, 2019","format":false,"excerpt":"Product Updates Deep Link A 'Show on Page' button has been added that takes you directly to the error as it exists on the page. The issues highlighted will be based on the module that you are working within, e.g. if you are working within the Spellcheck module, you will\u2026","rel":"","context":"In &quot;ADA News&quot;","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1316,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/a-couple-of-table-issues\/","url_meta":{"origin":1123,"position":2},"title":"A Couple of Table Issues","author":"Carlos Hernandez","date":"October 1, 2019","format":false,"excerpt":"In this post, we will look at a couple of table issues and the corresponding Monsido Issues that they may raise. First, you need to understand that there are essentially two types of tables possible, layout tables and data tables. Layout Tables Web designers used layout tables from the early\u2026","rel":"","context":"In &quot;ADA News&quot;","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1117,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/monsido-accessibility-level-a-errors-with-links\/","url_meta":{"origin":1123,"position":3},"title":"Monsido Accessibility Level A Errors with Links","author":"Carlos Hernandez","date":"April 30, 2019","format":false,"excerpt":"This post examines Level A accessibility errors related to links that you can fix. Over the entire district's sites, there are 28 Level A compliance issues that the district must resolve and 8 warning issues at this level. In addition, 54 Level A issues require manual review. Your site may\u2026","rel":"","context":"In &quot;ADA News&quot;","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1458,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/style-and-suspicious-links\/","url_meta":{"origin":1123,"position":4},"title":"Style and Suspicious Links","author":"Carlos Hernandez","date":"March 9, 2020","format":false,"excerpt":"This time I want to talk a little about Suspicious Link Text. Monsido flags Suspicious links within the Accessibility section of the site report. In fact, suspicious links are considered to be a Level A requirement which means fixing them is a basic requirement for meeting Accessibility requirements. What is\u2026","rel":"","context":"In &quot;ADA News&quot;","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"Image with links having suspicious text","src":"https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2020\/03\/030920_1353_StyleandSus1.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2020\/03\/030920_1353_StyleandSus1.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2020\/03\/030920_1353_StyleandSus1.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":1444,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/web-accessibility-training-monsido\/","url_meta":{"origin":1123,"position":5},"title":"Web Accessibility Training &#8211; Monsido","author":"Carlos Hernandez","date":"February 14, 2020","format":false,"excerpt":"Monsido is proud to host this month's Web Accessibility Training! The Web Accessibility Training session will take place February 28th, 2020 at 9:00 AM PT. This course provides an overview of accessibility and how it applies to websites. It introduces different types of disabilities, assistive technology, various accessibility laws and\u2026","rel":"","context":"In &quot;Monsido News&quot;","block_context":{"text":"Monsido News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/monsido-news\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/1123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/comments?post=1123"}],"version-history":[{"count":2,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/1123\/revisions"}],"predecessor-version":[{"id":1125,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/1123\/revisions\/1125"}],"wp:attachment":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/media?parent=1123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/categories?post=1123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/tags?post=1123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}