{"id":823,"date":"2018-09-21T13:42:59","date_gmt":"2018-09-21T17:42:59","guid":{"rendered":"https:\/\/wordpress.ocps.net\/presenceblog\/?p=823"},"modified":"2018-09-21T13:42:59","modified_gmt":"2018-09-21T17:42:59","slug":"hyperlinks-in-documents","status":"publish","type":"post","link":"https:\/\/wordpress.ocps.net\/presenceblog\/hyperlinks-in-documents\/","title":{"rendered":"Hyperlinks in Documents"},"content":{"rendered":"<p>As with links on a web page, links in a document must have alt-text. However, there is a major &#8216;gotcha&#8217; which I&#8217;ll explain a little latter in this post.\u00a0 Let&#8217;s begin though by looking at what are some of the considerations when composing Alt-text for a link (hyperlink) on a page or Word document?<\/p>\n<ul>\n<li>Where is the link going?<\/li>\n<li>What will be viewed?<\/li>\n<li>What happens when someone clicks the link?<\/li>\n<\/ul>\n<p>Let&#8217;s look at each of these questions one at a time.<\/p>\n<h2>Where is the link going?<\/h2>\n<p>You need to inform the user either in the visible text or the Alt-text where the browser will go when they click on the link. Simply saying: &#8220;Click <span style=\"color: #2e74b5; text-decoration: underline;\">here<\/span> for more&#8221; is not adequate. More what? Will clicking on the link keep the user within the same family of pages within the current website? Will clicking on the link take the user to an entirely different web site? If the user is taken to an entirely different web site, how will they get back to your site when they are done? You might use the visible text in the document to tell the user where the link goes as in: &#8220;Click <span style=\"color: #2e74b5; text-decoration: underline;\">here<\/span> to view our Extracurricular Activities.&#8221; Some recommendations go so far as to say that the entire sentence should be the link, not just the word &#8216;here&#8217;: &#8220;<span style=\"color: #2e74b5; text-decoration: underline;\">Click here to view our Extracurricular Activities.<\/span>&#8221;<\/p>\n<h2>What will be viewed?<\/h2>\n<p>In the above example, we saw how to tell the user where the link will take them, but we did not tell them what they will find there. Will they find just a list of activities? Will they find detailed information about where and when the activities meet and who to contact about the activities? Will they find a form to register for those activities? Will they find requirements to join those activities? It does not really say. Therefore, a better link might be: &#8220;<span style=\"color: #2e74b5; text-decoration: underline;\">Click here to view a list of our Extracurricular Activities.<\/span>&#8221; or &#8220;<span style=\"color: #2e74b5; text-decoration: underline;\">Click here to register for any of our Extracurricular Activities.<\/span>&#8221;<\/p>\n<h2>What happens when someone clicks the link?<\/h2>\n<p>Some links open a new browser tab. Others replace the current contents with the new page. This can be important to know in case the user wants to get back to the page that had the link, especially when the link goes to a different site. Therefore, we might expand the text for our link as follows: &#8220;<span style=\"color: #2e74b5; text-decoration: underline;\">Click here to view a list of our Extracurricular Activities in a separate window.<\/span>&#8221; Of course there is some difference between web pages and Word documents. For web pages, we recommend opening the linked content in a new page if the content is on a different website or if the content opens a Word document file. In a document, you can have internal and external links. An internal link essentially takes the user from one point in the document to another point in the same document (defined with bookmarks and hyperlinks to those bookmarks). Think of items in a Table of Contents in which each item is a link that takes you directly to the start of that topic within the document. An external link for a document is then any reference to other documents and\/or websites. An example might be: &#8220;<span style=\"color: #2e74b5; text-decoration: underline;\">Click here to open a separate window displaying our Activities Registration Form.<\/span>&#8221;<\/p>\n<h2>Examples<\/h2>\n<p>So how do you combine visible text with alt-text. Using the above examples, here are a few samples:<\/p>\n<div>\n<table style=\"border-collapse: collapse;\" border=\"0\">\n<colgroup>\n<col style=\"width: 468px;\" \/>\n<col style=\"width: 468px;\" \/><\/colgroup>\n<tbody valign=\"top\">\n<tr style=\"background: white;\">\n<td style=\"padding-left: 11px; padding-right: 11px; border-top: none; border-bottom: solid #c9c9c9 1.5pt; border-right: none;\"><strong>Text<\/strong><\/td>\n<td style=\"padding-left: 11px; padding-right: 11px; border-top: none; border-left: none; border-bottom: solid #c9c9c9 1.5pt;\"><strong>Alt-Text for Link<\/strong><\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 11px; padding-right: 11px; border-top: none; border-bottom: solid #c9c9c9 0.25pt; border-right: solid #c9c9c9 0.25pt;\">We offer a wide variety of <span style=\"color: #2e74b5; text-decoration: underline;\">extracurricular activities<\/span><\/td>\n<td style=\"padding-left: 11px; padding-right: 11px; border-top: none; border-left: none; border-bottom: solid #c9c9c9 0.25pt;\">Click here to view a list of our Extracurricular Activities<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 11px; padding-right: 11px; border-top: none; border-bottom: solid #c9c9c9 0.25pt; border-right: solid #c9c9c9 0.25pt;\"><span style=\"color: #2e74b5; text-decoration: underline;\">Register now<\/span> for your favorite extracurricular activity<\/td>\n<td style=\"padding-left: 11px; padding-right: 11px; border-top: none; border-left: none; border-bottom: solid #c9c9c9 0.25pt;\">Click here to open our Activities Registration Form in a separate window<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 11px; padding-right: 11px; border-top: none; border-bottom: solid #c9c9c9 0.25pt; border-right: solid #c9c9c9 0.25pt;\">Our curriculum meets the requirements of <a title=\"Click here to open the No Child Left Behind website in a new window and view the elementary and secondary education requirements.\" href=\"https:\/\/www2.ed.gov\/nclb\/landing.jhtml\"><span style=\"color: #034990;\">No Child Left Behind<\/span><\/a><\/td>\n<td style=\"padding-left: 11px; padding-right: 11px; border-top: none; border-left: none; border-bottom: solid #c9c9c9 0.25pt;\">Click here to open the No Child Left Behind website in a new window and view the elementary and secondary education requirements.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>It should be obvious from these examples, that alt-text requires some thought. It should augment the visible information about the link and not be a duplication of that information.<\/p>\n<h2>Adding Alt-Text to a Word Link<\/h2>\n<p>The <a href=\"https:\/\/intranet.ocps.net\/cms\/One.aspx?portalId=125187&amp;pageId=338087\">training videos created by SchoolMessenger\/West<\/a> adequately cover adding alt-text to web page content and will not be repeated here. So how do you add alt-text to a link in a Word document. With the document open, select the text that will serve as the link, right click on the selected area and select Hyperlink from the context dropdown menu. This option opens the <strong>Insert Hyperlink<\/strong> dialog. Be sure to add the correct URL\/Address where you want the hyperlink to go. Then click the <strong>ScreenTip<\/strong> button in the upper right corner.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2018\/09\/092118_1549_Hyperlinksi1.png\" alt=\"\" \/><\/p>\n<p>This button opens the <strong>Set Hyperlink ScreenTip<\/strong> dialog. Enter the text you want to appear when the user hovers the mouse over the link.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2018\/09\/092118_1549_Hyperlinksi2.png\" alt=\"\" \/><\/p>\n<p>Click <strong>Ok<\/strong> to exit both dialog windows. Now when you point to the text (or a screen reader gets to this point in the document) the Alt-text either appears or a screen reader reads it the user.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2018\/09\/092118_1549_Hyperlinksi3.png\" alt=\"\" \/><\/p>\n<h2>Additional Tips<\/h2>\n<p>Some additional tips before wrapping up this series on making your Office documents accessible:<\/p>\n<ol>\n<li>You can download a free screen reader from <a href=\"https:\/\/www.mvaccess.org\">https:\/\/www.mvaccess.org<\/a> that works on the Microsoft Windows platform and is trusted and supported by Microsoft, Google, and Adobe.<\/li>\n<li>Repeated blank characters might be interpreted by screen readers that it has reached the end of the document and not read the rest of the content. Instead of using blanks for spacing between paragraphs, use Paragraph settings in Word to modify the spacing between paragraphs. Another trick is to enter the word &#8216;blank&#8217; and change the font color to match the background so it &#8216;disappears&#8217; for visual readers but allows screen readers to tell the person that the line or cell is blank.<\/li>\n<li>Accessibility is for everyone, OCPS and non-OCPS viewers of your site. It includes people with vision disabilities, hearing disabilities, hand-motion disabilities and even people with no disabilities. Don&#8217;t only think of the visual aspects of your site when you think accessibility.<\/li>\n<li>Standard fonts like Arial, Book Antigua, Georgia, Tahoma, Times New Roman, Trebuchet MS, and Verdana are most likely to be found on all machines and are the easiest to read. Avoid decorative fonts, script fonts or handwriting-like fonts.<\/li>\n<li>Don&#8217;t use color alone to indicate differences in an image or chart. Use color with symbols. This helps even people who can distinguish colors to better understand your content.<\/li>\n<li>Emphasize selected text with bold and italic, not color, all caps, or underlines.<\/li>\n<li>The Internet and YouTube is a huge resource on learning about accessibility.<\/li>\n<\/ol>\n<h2>The Big Gotcha<\/h2>\n<p>I said at the beginning of this post that there is a &#8216;gotcha&#8217; in what I was going to say.\u00a0 That &#8216;gotcha&#8217; is this.\u00a0 If you use your document as a Word document, the alt-text added to links as described above will appear when someone hovers their mouse over a link or image.\u00a0 While it is acceptable to post native Office documents on the intranet for internal use, you typically want to create a PDF version for documents that must be accessed from outside of OCPS because not everyone has a word processor compatible with Microsoft Word document formats.\u00a0 While in the next post I will take you through the steps of PDF files from your native Word Documents, one thing that does not appear to convert is Alt-Text for links.\u00a0 This is mentioned at several places on the Internet.\u00a0 Perhaps a future version will support Alt-text so for now I will still recommend that you create Word documents with Alt-text.\u00a0 But that also means that I will make my visible text for hyperlinks more descriptive and not rely on Alt-Text to augment the visible text to explain the hyperlink as I did in the first few paragraphs of this post.<\/p>\n<p>I also looked at the Alt-Text for images coming from Microsoft Word and found a similar but slightly different issue.\u00a0 The Alt-text for images on a Word document converted to a PDF did not appear when opening the PDF with a recent browser and hovering over the image, but it did appear when using an older release of Internet Explorer 11.\u00a0 That implies that the Alt-text information is in the PDF, but cannot be accessed by more recent browsers for some reason.<\/p>\n<p>So it appears that changes in the more recent browser versions have an issue with displaying Alt-text out of PDF files while older browsers at least display the Alt-text associated with images.\u00a0 At this time, I am not sure if this is a browser issue or an issue with the structure of the PDF.<\/p>\n<p>For now, I recommend adding the Alt-text whether it appears or not because who knows, maybe the next version of your favorite browser will support it again.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As with links on a web page, links in a document must have alt-text. However, there is a major &#8216;gotcha&#8217; which I&#8217;ll explain a little latter in this post.\u00a0 Let&#8217;s begin though by looking at what are some of the considerations when composing Alt-text for a link (hyperlink) on a page or Word document? Where &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/wordpress.ocps.net\/presenceblog\/hyperlinks-in-documents\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Hyperlinks in Documents&#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,30,33,34,32,35,36],"tags":[48,47,59,50],"class_list":["post-823","post","type-post","status-publish","format-standard","hentry","category-news-related-to-ada-and-accessibility","category-news-related-to-site-governance-at-ocps","category-post-that-explains-how-to-perform-a-specific-activity","category-something-to-think-about-related-to-web-sites","category-news-related-to-internet-and-intranet-sites","category-opinions-from-the-district-about-web-sites","category-post-showing-a-specific-tip-or-trick-related-to-web-sites","tag-accessibility","tag-ada","tag-images","tag-links"],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":1595,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/short-topics-image-and-link-alt-text\/","url_meta":{"origin":823,"position":0},"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":1355,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/style-and-consistency-part-1-links\/","url_meta":{"origin":823,"position":1},"title":"Style and Consistency \u2013 Part 1 &#8211; Links","author":"Carlos Hernandez","date":"December 4, 2019","format":false,"excerpt":"Style and consistency on your web pages are very important issues when publishing your finished web page. I am going to take a portion of a web page and highlight some of the things you need to review before publishing your next web page. The following is a portion of\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":1018,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/do-users-really-want-to-see-the-url-of-your-hyperlinks\/","url_meta":{"origin":823,"position":2},"title":"Do Users Really Want to See the URL of Your Hyperlinks?","author":"Carlos Hernandez","date":"March 5, 2019","format":false,"excerpt":"Working with links When you enter a hyperlink within the content area of a page, the link has to surround either text or an image. (If not, the link is still checked whether it is valid or broken, but it is not visible on the page.) On many pages, I've\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":1117,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/monsido-accessibility-level-a-errors-with-links\/","url_meta":{"origin":823,"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":847,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/quick-tip-you-need-to-do-more-than-just-say-click-here\/","url_meta":{"origin":823,"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":926,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/a-tooltip-reminder\/","url_meta":{"origin":823,"position":5},"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":[]}],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/823","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=823"}],"version-history":[{"count":3,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/823\/revisions"}],"predecessor-version":[{"id":827,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/823\/revisions\/827"}],"wp:attachment":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/media?parent=823"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/categories?post=823"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/tags?post=823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}