Make It Unique<\/h3>\n
Many times, we have more than one link on a page or in a document. When creating meaningful text for each, try to keep track of the text you use. Since screen readers can announce all of the links, make sure you don’t use the same text for two different URLs. For example, it’s fine to link to the college website using the text, “MCC website,” in multiple places. However, you can’t have one of those “MCC website” links point to the directions. The link text should give the reader\/listener an idea of the destination. Similarly, if you have two pages about the same subject but with different content, such as “Tutoring for Students” and “Tutoring for Faculty,” links in the content and navigation can’t all be called “Tutoring.” The link text needs to explain the difference between the links.<\/p>\n
To sum up, links to different destinations (web pages, files, or email addresses) need unique link text. Links to the same destinations can use the same link text.<\/p>\n
Important Do’s and Don’ts<\/h3>\n
Consider these when creating hyperlink text:<\/p>\n
- \n\t
- Link text should not contain phrases like “click here,” “learn more,” or “article.” These are not meaningful<\/em>. (Why should I click here<\/em>? Learn more<\/em> about what? What is the article<\/em> about?)<\/li>\n\t
- Do not add the word “link” as part of the text. A screen reader will inform the user that the text is a link.\u00a0<\/li>\n\t
- Do not use the same link text for different destinations. If you have multiple \u201cRegister for Zoom Meeting\u201d links on a page that link to different registration forms, it is confusing and frustrating to the visitor. confusing and frustrating.<\/li>\n<\/ul>\n
Below are some things to keep in mind depending on the type of link.<\/p>\n
Link Text<\/strong><\/p>\n
Do:<\/p>\n
- \n\t
- Warn a reader if the link points to something other than a web page, such as “End of Year 2024 Report (XLS)” or “How to Crochet (Video).”<\/li>\n\t
- Only add URL links that are very short and clear, such as SUNY’s website (www.suny.edu)<\/a>.<\/li>\n<\/ul>\n
Don’t:<\/p>\n
- \n\t
- Link entire sentences. This is too much information.<\/li>\n\t
- Use very short links (like a character). Some users with physical difficulties might find clicking a hyperlink so small a challenge<\/li>\n\t
- Use a long URL as a hyperlink. Often, this is announced as letters, which will make no sense to the listener.<\/li>\n<\/ul>\n
Graphic Link<\/strong><\/p>\n
Do:<\/p>\n
- \n\t
- Always<\/strong> have alt text, even if it’s NULL (see below).\n\n
- \n\t
- For decorative images, such as a banner, a NULL alt tag ( alt=”” ) can be used.<\/li>\n<\/ul>\n<\/li>\n\t
- Alt text should be clear and include any text in the image.\n\n
- \n\t
- Logos should include the name of the company and describe the logo. For example, the main college logo uses the following alt text: MCC shield logo with text: Monroe Community College, State University of New York.<\/li>\n\t
- If the image contains a graph or chart, the alt text should summarize the information it is trying to convey.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Don’t:<\/p>\n
- \n\t
- Use phrases like, “image of \u2026” or “graphic of \u2026”.<\/li>\n\t
- Use redundant text (i.e. – the same as adjacent or body text)<\/li>\n\t
- Add very small (10px) images that are difficult to click on.<\/li>\n<\/ul>\n
Adding a Hyperlink to Text<\/h3>\n
- \n\t
- Select the meaningful<\/em> text you would like to use for the hyperlink.\n\n
- \n\t
- If this is intended for print, include the URL or email address. (You can\u2019t click a link on a piece of paper!)<\/li>\n<\/ul>\n<\/li>\n\t
- From the tool ribbon, select Insert, then click on “Link” from the Links section; or right-click on the selected text and click on Link from the pop-up menu.<\/li>\n\t
- \u00a0In the “Edit Hyperlink” task pane, choose the following:\n\n
- \n\t
- \n
![\"Screenshot](\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/05\/links-add-hyperlink-300x155.png\" "\\"Opens")
<\/a>Figure 1<\/figcaption><\/figure>\nLinking to a web page or file (such as a PDF)\n\n - \n\t
- Under “Link to,” select “Existing File or Web Page.” (See Figure 1.)<\/li>\n\t
- In the Address field, paste the URL of the web page or file you want to link.\u00a0<\/li>\n<\/ol>\n<\/li>\n\t
- Linking to an email address\n\n
- \n\t
- \n
![\"Screenshot](\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/05\/links-add-email-link-300x157.png\" "\\"Opens")
<\/a>Figure 2<\/figcaption><\/figure>\nUnder “Link to,” select “E-mail Address.” (See Figure 2.)<\/li>\n\t - \u00a0In the E-mail address field, paste or enter the email address.<\/li>\n<\/ol>\n<\/li>\n\t
- Click on the “ScreenTip…” button and add the link text without a hyperlink or email address. (This is especially helpful for those accessing the document with assistive technology.)<\/li>\n<\/ol>\n<\/li>\n\t
- Click OK to save the ScreenTip, and OK again to save the link.<\/li>\n<\/ol>\n
Reminder:<\/strong> While adding emphasis to text, do not use underlining. This is reserved for hyperlinks. Using it for regular text is confusing to the reader. Instead, use Strong<\/strong>, Emphasis<\/em>, or Intense Emphasis<\/strong><\/em>.<\/p>\n
Read more in WebAIM’s section about adding links to Word documents.<\/a><\/p>\n
<\/a>Meaningful Image Alt Text<\/h2>\n
Just as with hyperlinks, we need to provide a meaningful<\/em> description of images in relation to the context used, whether of a photo or a chart that corresponds to data. Also, it should include any text in the image. This description is entered in the image’s alternative, or alt, text. Without it, a screen reader will only announce the file name.<\/p>\n
Alt text will vary based on the context. It should be relevant to the content of the surrounding text or document. WebAIM offers some thoughts about image alt text in Word<\/a>\u00a0and CommonLook provides some guidelines to consider<\/a>. WebAIM also has some great examples of alt text as it relates to the content<\/a> (i.e. – the purpose of including the image). There is also a great alt text decision tree by W3C<\/a>. Alternatively, one way to test is if you replace your image with just the alt text. Does the alt text make sense in relation to the surrounding content?<\/p>\n
In addition to the relevance of the alt text, we need to be mindful of the number of characters. The recommended length of alt text is no more than 125 to 140 characters, with many screen readers cutting off alt text at 125 characters<\/strong>. For more complex images, consider explaining the content in a caption in addition to the alt text. The alt text would be a brief summary of the main idea from the image. The caption would describe the image in detail.<\/p>\n
Note:<\/strong> Don\u2019t include \u201cPhoto of\u201d or \u201cImage of\u201d in the alt text. Screen readers will announce the object as an image.<\/p>\n\n
![\"Screenshot](\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/05\/links-alt-text-255x300.png\" "\\"Opens")
<\/a>Figure 3<\/figcaption><\/figure>\n\n Adding Alternative (Alt) Text to an Image<\/h3>\n
- \n\t
- Right-click on an image and select, \u201cEdit Alt Text \u2026\u201d.<\/li>\n\t
- In the Alt Text task pane, enter a description of the image as it relates to the content.\u00a0(See Figure 3.)<\/li>\n<\/ol>\n
Below are some examples of\u00a0meaningful<\/em> image alt text.<\/p>\n
![\"MCC](\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2021\/05\/MCC-logo-300x60.jpg\")
<\/p>\nAlt Text: MCC shield logo with text: Monroe Community College, State University of New York<\/p>\n
![\"Based](\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2022\/03\/2021-fall_figure01-300x180.jpg\")
<\/p>\nAlt Text: Based on Receipt of CARES Act Funds. Fall 2020 62.2% recipients vs. 49.9% non-recipients. Spring 2021 44.8% recipients vs. 36.4% non. Fall 2021 27% recipients vs. 23.4% non. Still enrolled or has graduated: 55.1% recipients vs. 48.3% non.<\/p>\n
Insight Into Images<\/h3>\n
I know many people love to jazz up content with cool graphics and photos, but are we really helping the reader understand the information we’re trying to convey? Some images can actually confuse or even frustrate the reader, especially if the images are not directly related to the subject. This article, Research insight: accessibility of images<\/a>, discusses reactions by a group of disabled users that might change what images you add to a document or how many.<\/p>\n
Foreground\/Background Contrast<\/h3>\n
While we spend a great deal of time ensuring an equal experience for disabled visitors, we can’t neglect our sighted visitors. When adding images that contain text, we need to be mindful of the contrast between the foreground (the text) and the background (the image behind the text). If the foreground is too light or too similar to the background, it makes the text difficult to read. Tools, such as WebAIM’s Color Contrast Checker<\/a> and Who Can Use<\/a>, let you test the contrast levels. This article about ensuring high contrast for text over images<\/a> offers tips on how to improve your image.<\/p>","protected":false},"excerpt":{"rendered":"
Meaningful Hyperlink & Image Alt Text in Word When adding a hyperlink to content or alternative (alt) text to an image, the text must be meaningful. It should explain the purpose and make sense on its own (independent of surrounding content). Meaningful Hyperlink Text Those using a screen reader can “skim” a document by having […]<\/p>\n","protected":false},"author":665,"featured_media":0,"parent":1426,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1511","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/pages\/1511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/users\/665"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/comments?post=1511"}],"version-history":[{"count":40,"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/pages\/1511\/revisions"}],"predecessor-version":[{"id":2299,"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/pages\/1511\/revisions\/2299"}],"up":[{"embeddable":true,"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/pages\/1426"}],"wp:attachment":[{"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/media?parent=1511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- \n
- \n
- Select the meaningful<\/em> text you would like to use for the hyperlink.\n\n
- Always<\/strong> have alt text, even if it’s NULL (see below).\n\n