{"id":511,"date":"2022-05-11T08:10:38","date_gmt":"2022-05-11T12:10:38","guid":{"rendered":"https:\/\/www.montclair.edu\/25live\/?page_id=511"},"modified":"2025-03-05T11:28:05","modified_gmt":"2025-03-05T16:28:05","slug":"calendar-accessibility-guidelines","status":"publish","type":"page","link":"https:\/\/www.montclair.edu\/25live\/calendar-accessibility-guidelines\/","title":{"rendered":"Calendar Accessibility Guidelines"},"content":{"rendered":"<p>ÌÇÐÄvlog Events Calendar is publicly viewed, thus all published events must follow accessibility guidelines to comply with federal <a rel=\"noopener noreferrer\" href=\"https:\/\/www.access-board.gov\/law\/ra.html#section-508-federal-electronic-and-information-technology\" target=\"_blank\">Section 508<\/a> standards.<\/p>\n<p>This page contains best practices, examples, and resources to support the following guidelines.<\/p>\n<ul>\n<li>Images are inherently inaccessible to people who are unable to see them. However, they can help improve comprehension by reinforcing the information provided. <a rel=\"noopener noreferrer\" href=\"https:\/\/webaim.org\/techniques\/images\/#comprehension\" target=\"_blank\">Images can enhance comprehension<\/a>.<\/li>\n<li>Low-quality or low-resolution images are not permitted. The image resolution should be 96 or 150 pixels.\n<p>High-resolution images are important for low vision people. They need to be able to zoom in on them and magnify details as necessary without the image rendering as blurry. Images need to be accessible and scaled on different devices, including projectors and printers.<\/li>\n<li><a rel=\"noopener noreferrer\" href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\">Color contrast<\/a> must be clear. Aim for a 4.5:1 ratio between the foreground color and the background color. This ratio ensures people with moderately low vision can tell the colors apart and see your content.<br \/>\n<div class=\"prpl-row\"><div class=\"prpl-column one-half\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.montclair.edu\/25live\/wp-content\/uploads\/sites\/241\/2022\/05\/InsufficientContrast-e1652069803972.jpg\" alt=\"A Insufficient Contrast Image of MSU's Cole Hall Bell and Flag\" width=\"300\" height=\"225\" \/><br \/>\nInsufficient Contrast Image<\/div><\/div><br \/>\nUse the <a rel=\"noopener noreferrer\" href=\"https:\/\/www.color-blindness.com\/coblis-color-blindness-simulator\/\" target=\"_blank\">Color Blindness Simulator<\/a> tool to simulate what it is like to view your designs with various color vision impairments.<\/li>\n<li>Do not use images containing text, flyers, or logos. Screen readers cannot &#8220;read&#8221; an image. Mobile users struggle with images of text because the lines cannot re-flow, so the browser makes it smaller. Some images of text cannot be scaled up by people with reading difficulties or visual impairments without becoming blurry.<br \/>\n<div class=\"prpl-row\"><div class=\"prpl-column one-half\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.montclair.edu\/25live\/wp-content\/uploads\/sites\/241\/2022\/05\/Bad-Example-Image.png\" alt=\"Image of Text of a Campus Event\" width=\"300\" height=\"300\" \/><br \/>\nImage of Text Example<\/div><\/div><br \/>\nReview the WCAG 2.1 Guidelines on <a rel=\"noopener noreferrer\" href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#images-of-text-no-exception\" target=\"_blank\">Images of Text (No Exception)<\/a> for a comprehensive set of recommendations.<\/li>\n<li>Images should provide alternative texts for screen readers in the form of alternative text. Alternative texts should be brief (maximum of 80 characters). They should convey the purpose of the image, not describe the image. Same images can have different alt text depending on their context.<br \/>\n<div class=\"prpl-row\"><div class=\"prpl-column one-third\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.montclair.edu\/25live\/wp-content\/uploads\/sites\/241\/2025\/03\/061024_00904_Rocky-and-Roxy-2-225x300.jpg\" alt=\"Rocky the Red Hawk pointing\" width=\"225\" height=\"300\" \/><br \/>\n<\/div><br \/>\n<div class=\"prpl-column two-thirds\">\n<table width=\"200\">\n<tbody>\n<tr>\n<th><strong>Context<\/strong><\/th>\n<th><strong>Alt Text<\/strong><\/th>\n<\/tr>\n<tr>\n<td>Montclair State\u2019s School Mascot<\/td>\n<td>Rocky the Red Hawk<\/td>\n<\/tr>\n<tr>\n<td>Machuga Heights Building<\/td>\n<td>Rocky in front of the Machuga Heights Building<\/td>\n<\/tr>\n<tr>\n<td>ÌÇÐÄvlog Residence Life<\/td>\n<td>Rocky ready for a tour to Machuga Heights<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div><\/div><br \/>\nDon\u2019t include &#8220;image of,&#8221; &#8220;photo of,&#8221; or the name of the file itself (e.g., &#8220;image.jpg&#8221;). Avoid using the same alternative text everywhere an image is used.<br \/>\nReview the WebAim&#8217;s guide to <a rel=\"noopener noreferrer\" href=\"http:\/\/webaim.org\/techniques\/alttext\/\" target=\"_blank\">alternative text<\/a> to help you determine the best alternative text for your image.<\/li>\n<li>Avoid using link URLs in an event&#8217;s description. Screen readers will read each character. Instead, integrate the links as a clickable phrase. URLs may not be easily readable by humans or screen readers.<\/li>\n<li>Keep clickable phrases as short as possible while still being meaningful out of context. It will save screen reader users time, as less will require to be spoken.<br \/>\nExample: &#8220;Register&#8221; is preferable to &#8220;to register, please click here&#8221;<\/li>\n<li>Avoid vague or generic text such as Click Here or Read More. Linked text should make sense out of context because screen readers often navigate from link to link, skipping the surrounding text. They will read each link out loud, in sequential order.<br \/>\nExample: If the link text is &#8220;Red Hawk Central,&#8221; the screen reader will say &#8220;link Red Hawk Central&#8221; and the user will know that the webpage linked to is likely about the Red Hawk Central. Instead, if the link text is &#8220;click here,&#8221; the screen reader will say &#8220;link click here,&#8221; and the user will have no idea what the linked webpage is all about.<\/li>\n<li>Avoid linking to two different URLs using the same word or linking to the same URL using different words.<br \/>\nReview the WebAim&#8217;s guidelines on <a rel=\"noopener noreferrer\" href=\"https:\/\/webaim.org\/techniques\/hypertext\/\" target=\"_blank\">Links and Hypertext<\/a> and the W3C&#8217;s guide to <a rel=\"noopener noreferrer\" href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/navigation-mechanisms-refs.html\" target=\"_blank\">Link Purpose (In Context)<\/a> to carefully choose which words to hyperlink and provide context to people without functioning vision whom may be using a screen reader or other assistive technology.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>ÌÇÐÄvlog Events Calendar is publicly viewed, thus all published events must follow accessibility guidelines to comply with federal Section 508 standards. This page contains best practices, examples, and resources to support the following guidelines. Images are inherently inaccessible to people who are unable to see them. However, they can help improve comprehension by [&hellip;]<\/p>\n","protected":false},"author":259,"featured_media":449,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-511","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.montclair.edu\/25live\/wp-json\/wp\/v2\/pages\/511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.montclair.edu\/25live\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.montclair.edu\/25live\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/25live\/wp-json\/wp\/v2\/users\/259"}],"replies":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/25live\/wp-json\/wp\/v2\/comments?post=511"}],"version-history":[{"count":88,"href":"https:\/\/www.montclair.edu\/25live\/wp-json\/wp\/v2\/pages\/511\/revisions"}],"predecessor-version":[{"id":920,"href":"https:\/\/www.montclair.edu\/25live\/wp-json\/wp\/v2\/pages\/511\/revisions\/920"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/25live\/wp-json\/wp\/v2\/media\/449"}],"wp:attachment":[{"href":"https:\/\/www.montclair.edu\/25live\/wp-json\/wp\/v2\/media?parent=511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}