{"id":926,"date":"2019-01-04T15:26:13","date_gmt":"2019-01-04T20:26:13","guid":{"rendered":"https:\/\/wordpress.ocps.net\/presenceblog\/?p=926"},"modified":"2019-01-04T15:26:18","modified_gmt":"2019-01-04T20:26:18","slug":"a-tooltip-reminder","status":"publish","type":"post","link":"https:\/\/wordpress.ocps.net\/presenceblog\/a-tooltip-reminder\/","title":{"rendered":"A Tooltip Reminder"},"content":{"rendered":"<p>Today&#8217;s post is just a brief reminder that all links must have reasonable alt-text to help vision challenged visitors to our sites navigate with the existing links.  It will discuss two basic types of links:  Page\/document links and Email links.<\/p>\n<p>Page and document links take a user to either another page within the same site, a different site still within OCPS, or a site outside of OCPS or they reference and open a PDF document.  The tooltip property (which actually gets stored in the Title property of the link&#8217;s HTML), must emphasize that by clicking on the link text, the application will take the user to another page in either the same window or a new window.  To support consistency, there are some wording suggestions for links:<\/p>\n<p>All links should begin with: <strong>&#8220;Click here to open&#8221;<\/strong> or <strong>&#8220;Click here to go to&#8221;.<\/strong><\/p>\n<p>Links that go to a PDF or to a page\/site outside of OCPS must open a new window.  Therefore, the link text should include the phrase: <strong>&#8220;in a new window&#8221;<\/strong>.  Opening a page outside of your site (department or school) can optionally open in a new window or the same window.  Opening another page within your site (department or school) should open in the current window.<\/p>\n<p>To enter or update the tooltip for a link, first edit the content portlet containing the link.  If you right click on the link, you should see the properties of that link at the bottom of the dialog (see next image).  In this case, note that the tooltip link (Title property) merely said: <strong>Link<\/strong>.  This text is not adequate to meet accessibility standards.  In this case, since the Target for the link is: <strong>_blank<\/strong> (which is a new page), an appropriate tooltip text might be: <strong>Click here to go to the OCPS Volunteer page in a new window<\/strong>.  We want to emphasize that the next page opens in a new window so that the vision challenged person knows that they can simply close the window that the linked information opens in to return to their current page.<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2019\/01\/010419_2020_ATooltipRem1.png\"><\/p>\n<p>If you do not like working in the properties at the bottom of the edit dialog, you can right click on the link to open a dropdown list of two options.  Click Properties in this menu to open a dialog specifically for this link.<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2019\/01\/010419_2020_ATooltipRem2.png\"><\/p>\n<p>In the Hyperlink Manager dialog, you can select the Target for the display of the new information to be the Same Window or a New Window as shown below.  Also, you can type the tooltip text in a textbox with the label: <strong>Tooltip<\/strong>.<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2019\/01\/010419_2020_ATooltipRem3.png\"><\/p>\n<p>The next line in this page&#8217;s content area lets the user click on a link to open their email application to send an email to the person specified.  However, the Hyperlink Manager dialog that lets you define the email link as shown below, does not provide a field for the tooltip.  I&#8217;ll get back to that in a moment.<\/p>\n<p>First, I want to offer a suggestion for email addresses that are really more to a position than to a person.  In this case, a better choice than specifying the email of an OCPS employee in the link text (which is what appears in the document) would be to change this content line to say:  <strong>You may also email our ADDitions coordinator<\/strong> and select &#8220;ADDitions coordinate&#8221; as the link text.  Then instead of using an OCPS employee&#8217;s email (which could require frequent updates as people change positions), request a generic email address such as: <a href=\"mailto:ADDitionsCoordinator@ocps.net\">ADDitionsCoordinator@ocps.net<\/a> from ITS.  Then the person(s) assigned to this email address can be easily changed by the person who owns the generic email address or by ITS.  If this email address appears on multiple pages or in multiple content areas, this also simplifies updates to the email address by only needing to make the change in one place rather than (n) locations where (n) might not even be known.<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2019\/01\/010419_2020_ATooltipRem4.png\"><\/p>\n<p>As seen in the image above, the Hyperlink Manager displays properties that define the address for the TO: field of the email, the link text displayed in the content, and a Subject text box that can optionally define a subject for the email.  For example, for this page about volunteers, an appropriate subject might be: <strong>Re: Volunteer Information<\/strong>.<\/p>\n<blockquote><p><strong>Note:<\/strong> Never make changes to the CSS Class field.<\/p><\/blockquote>\n<p>To create a tooltip for an email address, you must use the other method for providing the text by right clicking on the text that will serve as the link and using the property fields at the bottom of the Edit Page Content dialog box as shown below.  Enter the text in the Title field.  Again, it should begin with something like: <strong>Click here to email<\/strong> followed by the name of the person (not their email address again) or the position title.<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2019\/01\/010419_2020_ATooltipRem5.png\"><\/p>\n<p>When done, remember to publish the changes to your content portlet.<\/p>\n<p>Next time, I will explore the proper use of the Heading X style where X is a number beginning with 1.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today&#8217;s post is just a brief reminder that all links must have reasonable alt-text to help vision challenged visitors to our sites navigate with the existing links. It will discuss two basic types of links: Page\/document links and Email links. Page and document links take a user to either another page within the same site, &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/wordpress.ocps.net\/presenceblog\/a-tooltip-reminder\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;A Tooltip Reminder&#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,36],"tags":[50,63],"class_list":["post-926","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-post-showing-a-specific-tip-or-trick-related-to-web-sites","tag-links","tag-tooltips"],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":888,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/adding-email-links-on-a-web-page\/","url_meta":{"origin":926,"position":0},"title":"Adding Email Links on a Web Page","author":"Carlos Hernandez","date":"November 20, 2018","format":false,"excerpt":"Most webpage editors know how to add a basic email link on their website. But let's start with an example content line that says the following: If you have any questions concerning any of the OCPS guidelines, please address them by emailing:\u00a0OCPS Presence Support. Suppose our intent is to make\u2026","rel":"","context":"In &quot;How-To&quot;","block_context":{"text":"How-To","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/post-that-explains-how-to-perform-a-specific-activity\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1039,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/quick-notes-on-site-content-and-accessibility-issues-for-march-28-2019\/","url_meta":{"origin":926,"position":1},"title":"Quick Notes on Site Content and Accessibility Issues for March 28, 2019","author":"Carlos Hernandez","date":"March 28, 2019","format":false,"excerpt":"As I have been going through many of the district and school sites, I have noticed several reoccurring problems. Use External Link References Rather Than Duplicating Pages I've seen several cases were the content for a page was duplicated exactly, or nearly exactly on another page within the same site\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":400,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/page-links-vs-external-links\/","url_meta":{"origin":926,"position":2},"title":"Page Links vs External Links","author":"Carlos Hernandez","date":"January 9, 2018","format":false,"excerpt":"When you look at the top-level navigation in your school site or the side navigation in your department site, you may have a series of links as shown in the following two images: For a School: For a Department: In either case, you add a new page by choosing your\u2026","rel":"","context":"In &quot;How-To&quot;","block_context":{"text":"How-To","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/post-that-explains-how-to-perform-a-specific-activity\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":916,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/adding-tooltips-to-email-hyperlinks\/","url_meta":{"origin":926,"position":3},"title":"Adding ToolTips to Email Hyperlinks","author":"Carlos Hernandez","date":"December 5, 2018","format":false,"excerpt":"One of the requirements for accessibility is that hyperlinks have tooltip text that appears when the user either hovers over the link text or is read to the user if a screen reader is being used. However, when that hyperlink is an email address, there does not seem to be\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":1595,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/short-topics-image-and-link-alt-text\/","url_meta":{"origin":926,"position":4},"title":"Short Topics: Image and Link Alt-text","author":"Carlos Hernandez","date":"December 7, 2020","format":false,"excerpt":"Image Alt-text Image and link alt-text is extremely important to the visually impaired who cannot see either the picture or the link text (link text is what appears on the page). Often the alt-text is the only clue to these people to tell them what the picture or link is\u2026","rel":"","context":"In &quot;Governance News&quot;","block_context":{"text":"Governance News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-site-governance-at-ocps\/"},"img":{"alt_text":"Example of poor alt-text for an image that tells the viewer nothing about the image.","src":"https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2020\/11\/112720_1355_ShortTopics1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":701,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/use-external-link-pages-wisely\/","url_meta":{"origin":926,"position":5},"title":"Use External Link Pages Wisely","author":"Carlos Hernandez","date":"July 31, 2018","format":false,"excerpt":"Using a whole content page to link to another site: In this first case, another site could be another OCPS site other than your own, or it could be a site outside of OCPS. An example might be a reference to the Code of Student Conduct, a document provided by\u2026","rel":"","context":"In &quot;Getting Ready for the New School Year&quot;","block_context":{"text":"Getting Ready for the New School Year","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-specifically-to-school-sites\/getting-ready-for-the-new-school-year\/"},"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\/926","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=926"}],"version-history":[{"count":2,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/926\/revisions"}],"predecessor-version":[{"id":928,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/926\/revisions\/928"}],"wp:attachment":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/media?parent=926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/categories?post=926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/tags?post=926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}