{"id":888,"date":"2018-11-20T10:33:11","date_gmt":"2018-11-20T15:33:11","guid":{"rendered":"https:\/\/wordpress.ocps.net\/presenceblog\/?p=888"},"modified":"2018-11-20T10:33:11","modified_gmt":"2018-11-20T15:33:11","slug":"adding-email-links-on-a-web-page","status":"publish","type":"post","link":"https:\/\/wordpress.ocps.net\/presenceblog\/adding-email-links-on-a-web-page\/","title":{"rendered":"Adding Email Links on a Web Page"},"content":{"rendered":"<p>Most webpage editors know how to add a basic email link on their website. But let&#8217;s start with an example content line that says the following:<\/p>\n<p><span style=\"font-family: Arial; font-size: 10pt;\"><em><span style=\"color: #282828; background-color: #fafafa;\">If you have any questions concerning any of the OCPS guidelines, please address them by emailing:\u00a0<\/span><span style=\"background-color: #fafafa;\">OCPS Presence Support<span style=\"color: #282828;\">.<br \/>\n<\/span><\/span><\/em><\/span><\/p>\n<p>Suppose our intent is to make the text &#8220;OCPS Presence Support&#8221; an email link. You might simply go into edit mode, select the text OCPS Presence Support, and click the Hyperlink button in the edit toolbar. This opens the Hyperlink Manager dialog as shown below.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2018\/11\/112018_1530_AddingEmail1.png\" alt=\"\" \/><span style=\"color: #282828; font-family: Arial; font-size: 10pt; background-color: #fafafa;\"><br \/>\n<\/span><\/p>\n<p>However, we do not want a standard hyperlink whose purpose is to jump to a different page in the current website or even a different website. Rather, we want to open the user&#8217;s default email application to send a message to someone. In this case, the text does not identify a specific individual, but rather a generic group referred to as OCPS Presence Support. To define the properties for email form, click on the tab E-mail instead of Hyperlink. The dialog now looks like the following:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2018\/11\/112018_1530_AddingEmail2.png\" alt=\"\" \/><\/p>\n<p>While the Link Text is carries over from the prior dialog, we must supply the email address to whom to send the email in the Address box at the top of the form. Without this information, an email form opens without any address in the TO: field. Most website guests will not know to whom to send the email. Therefore, we typically enter the email address to a person or a group in the Address box. This email address must not have the prefix &#8216;mailto:&#8217; in front of the group or person email address. Think of how you define the TO: field when in Outlook or Gmail.<\/p>\n<blockquote><p><strong>TIP: that it is possible to send to multiple people or groups if you separate each email address with a semi-colon.<br \/>\n<\/strong><\/p><\/blockquote>\n<p>You could click <strong>OK<\/strong> and this would add a perfectly valid email link into your content. However, consider adding a Subject in the dialog. Just as within Outlook or Gmail, Subject text helps the email recipient to quickly identify the purpose of the email. In addition, many people use the Subject text to classify email and even redirect it into different folders. In this example, since the email was initiated from a line on the webpage that askes the viewer to send an email if they have any questions about the OCPS Portal Guidelines, an appropriate subject text might be: &#8220;Questions concerning OCPS Portal Guidelines&#8221;<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2018\/11\/112018_1530_AddingEmail3.png\" alt=\"\" \/><\/p>\n<p>You may have noticed that when defining a hyperlink to go to another page, the Hyperlink dialog includes a Tooltip property, but the E-mail dialog does not include a Tooltip property. So if a user hovers over the link, how would they know the purpose of the link or even that they were hovering over a link? The trick here is to notice that while you are still in edit mode of the content, you can click anywhere within the email link text and refer to the bottom of the window looking for the Title property. You can enter appropriate text here that screen readers can read to tell the visually impaired that they are hovering over a link that sends an email.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2018\/11\/112018_1530_AddingEmail4.png\" alt=\"\" \/><\/p>\n<p>In this case, I have added the text: <em>Click here to submit a local heat ticket<\/em>. This text when read to the visually impaired person informs them that they are hovering over a link and what happens when they click on that link. Of course, the Tooltip is also visible to other users who hover over the link.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2018\/11\/112018_1530_AddingEmail5.png\" alt=\"\" \/><\/p>\n<p>After saving the email link definition in the content portlet, you can test the link by clicking on it. You email application should open a blank email preaddressed to the correct person or group and include a common, consistent subject to help the recipient identify the email&#8217;s purpose and if desired, move that email to an appropriate folder with similar emails using a rule.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2018\/11\/112018_1530_AddingEmail6.png\" alt=\"\" \/><\/p>\n<p>The only other comment I want to make here is to refrain from attempting to define your own colors for hyperlinks whether they go to another page, site, or an email. The District and SchoolMessenger defined a set of default colors to ensure color contrast ratios and consistency for district and school sites.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Most webpage editors know how to add a basic email link on their website. But let&#8217;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 the text &#8220;OCPS Presence Support&#8221; &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/wordpress.ocps.net\/presenceblog\/adding-email-links-on-a-web-page\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Adding Email Links on a Web Page&#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":[33,34,36],"tags":[39,50,51],"class_list":["post-888","post","type-post","status-publish","format-standard","hentry","category-post-that-explains-how-to-perform-a-specific-activity","category-something-to-think-about-related-to-web-sites","category-post-showing-a-specific-tip-or-trick-related-to-web-sites","tag-documentation","tag-links","tag-tips"],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":926,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/a-tooltip-reminder\/","url_meta":{"origin":888,"position":0},"title":"A Tooltip Reminder","author":"Carlos Hernandez","date":"January 4, 2019","format":false,"excerpt":"Today'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\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":1033,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/delete-that-hyperlink-before-you-delete-that-text\/","url_meta":{"origin":888,"position":1},"title":"Delete that Hyperlink before you delete that Text","author":"Carlos Hernandez","date":"March 8, 2019","format":false,"excerpt":"Back on March 5, 2019, I mentioned that I had found several cases where a hyperlink appeared to have been edited by visually deleting the text associated with the link, but not deleting the actual link. I mentioned there that you should select the link and delete the link portion\u2026","rel":"","context":"In &quot;Tips\/Tricks&quot;","block_context":{"text":"Tips\/Tricks","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/post-showing-a-specific-tip-or-trick-related-to-web-sites\/"},"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":888,"position":2},"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":916,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/adding-tooltips-to-email-hyperlinks\/","url_meta":{"origin":888,"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":847,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/quick-tip-you-need-to-do-more-than-just-say-click-here\/","url_meta":{"origin":888,"position":4},"title":"Quick Tip: You Need to do more than just say Click Here","author":"Carlos Hernandez","date":"October 19, 2018","format":false,"excerpt":"I am sure that as you look around the Internet, not just the OCPS web pages, you will find many instances where the text on the page asks you to 'Click Here' to go to another page, or to a form, or to open a document. However, according to accessibility\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":298,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/training-materials-available-from-schoolmessenger-for-presence\/","url_meta":{"origin":888,"position":5},"title":"Training Materials Available from SchoolMessenger for Presence","author":"Carlos Hernandez","date":"April 27, 2018","format":false,"excerpt":"There is a wide variety of training materials available through SchoolMessenger for our Presence website. To access these, go to https:\/\/resourcecentral.schoolmessenger.com. You must login with your SchoolMessenger account username and password (not your OCPS account). If you have not requested one yet, there is a box on the right side\u2026","rel":"","context":"In &quot;SchoolMessenger News&quot;","block_context":{"text":"SchoolMessenger News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-from-school-messenger-about-the-portal\/"},"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\/888","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=888"}],"version-history":[{"count":2,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/888\/revisions"}],"predecessor-version":[{"id":890,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/888\/revisions\/890"}],"wp:attachment":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/media?parent=888"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/categories?post=888"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/tags?post=888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}