{"id":161,"date":"2023-10-23T14:44:22","date_gmt":"2023-10-23T14:44:22","guid":{"rendered":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/?post_type=chapter&p=161"},"modified":"2024-01-12T21:54:03","modified_gmt":"2024-01-12T21:54:03","slug":"links-in-reference-lists","status":"publish","type":"chapter","link":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/chapter\/links-in-reference-lists\/","title":{"rendered":"Links: In Reference Lists"},"content":{"raw":"Citation styles often require a URL to be provided for all web-based content. For example, in APA style, the\u00a0Accessibility Toolkit<\/em>\u00a0would be referenced as follows:\r\n\r\nCaprette, Heather, A. Goodsett, B. Loomis, E. Zickel (2023).\u00a0Accessibility Toolkit<\/em>. Cleveland State University. https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/<\/a>\r\n\r\nThe URL is provided to make it easy for people to navigate to the original source. However, it can be frustrating when screen readers read out the full URL for every source. As such, how can we make this link accessible to people using screen readers while still adhering to citation guidelines?\r\n\r\nOption 1: WAI-ARIA labels<\/em>\r\n\r\nOne solution is WAI-ARIA.[footnote]Thank you to Baldur Bjarnason for sharing this workaround on the Rebus Community help page<\/a>[\/footnote]\u00a0WAI-ARIA allows you to add attributes to HTML to provide instructions that are recognized by assistive technologies. As such, we can hyperlink the URL and use an ARIA label to specify what the screen reader should read aloud. This way, the URL will still appear visually and can be clicked to navigate to the source, but when a screen reader encounters it, it will read out the ARIA label rather than the URL.\r\n\r\nHere is what the citation would look like:\r\n

Caprette, Heather, A. Goodsett, B. Loomis, E. Zickel (2023).\u00a0Accessibility Toolkit<\/em>. Cleveland State University. https:\/\/pressbooks.ulib.csuohio.edu\/<\/a><\/p>\r\nHere is what the HTML would look like.\r\n

\r\n\r\n<p class=\"hanging-indent\"> Caprette, Heather, A. Goodsett, B. Loomis, E. Zickel (2023). <em>Accessibility Toolkit<\/em>. Cleveland State University. <a aria-label=\"Accessibility Toolkit\" href=\"https:\/\/pressbooks.ulib.csuohio.edu\/\u201d>https:\/\/pressbooks.ulib.csuohio.edu\/<\/a><\/p>\r\n\r\n<\/div>\r\nOption 2: Link the citation title<\/em>\r\n\r\nIf editing HTML is out of your comfort zone, another option is to use the title in the citation as the link text and leave the URL unlinked.\r\n\r\nHere is an example:\r\n

Caprette, Heather, A. Goodsett, B. Loomis, E. Zickel (2023).\u00a0Accessibility Toolkit <\/em><\/a>. Cleveland State University. https:\/\/pressbooks.ulib.csuohio.edu\/<\/p>\r\nWith this method, screen readers would still read out the URL if references were being read through from beginning to end. However, if a person using a screen reader wanted to navigate through the page by links, they would hear the title rather than the URL.","rendered":"

Citation styles often require a URL to be provided for all web-based content. For example, in APA style, the\u00a0Accessibility Toolkit<\/em>\u00a0would be referenced as follows:<\/p>\n

Caprette, Heather, A. Goodsett, B. Loomis, E. Zickel (2023).\u00a0Accessibility Toolkit<\/em>. Cleveland State University. https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/<\/a><\/p>\n

The URL is provided to make it easy for people to navigate to the original source. However, it can be frustrating when screen readers read out the full URL for every source. As such, how can we make this link accessible to people using screen readers while still adhering to citation guidelines?<\/p>\n

Option 1: WAI-ARIA labels<\/em><\/p>\n

One solution is WAI-ARIA.[1]<\/sup><\/a>\u00a0WAI-ARIA allows you to add attributes to HTML to provide instructions that are recognized by assistive technologies. As such, we can hyperlink the URL and use an ARIA label to specify what the screen reader should read aloud. This way, the URL will still appear visually and can be clicked to navigate to the source, but when a screen reader encounters it, it will read out the ARIA label rather than the URL.<\/p>\n

Here is what the citation would look like:<\/p>\n

Caprette, Heather, A. Goodsett, B. Loomis, E. Zickel (2023).\u00a0Accessibility Toolkit<\/em>. Cleveland State University. https:\/\/pressbooks.ulib.csuohio.edu\/<\/a><\/p>\n

Here is what the HTML would look like.<\/p>\n

\n

<p class=”hanging-indent”> Caprette, Heather, A. Goodsett, B. Loomis, E. Zickel (2023). <em>Accessibility Toolkit<\/em>. Cleveland State University. <a aria-label=”Accessibility Toolkit” href=”https:\/\/pressbooks.ulib.csuohio.edu\/\u201d>https:\/\/pressbooks.ulib.csuohio.edu\/<\/a><\/p><\/p>\n<\/div>\n

Option 2: Link the citation title<\/em><\/p>\n

If editing HTML is out of your comfort zone, another option is to use the title in the citation as the link text and leave the URL unlinked.<\/p>\n

Here is an example:<\/p>\n

Caprette, Heather, A. Goodsett, B. Loomis, E. Zickel (2023).\u00a0Accessibility Toolkit <\/em><\/a>. Cleveland State University. https:\/\/pressbooks.ulib.csuohio.edu\/<\/p>\n

With this method, screen readers would still read out the URL if references were being read through from beginning to end. However, if a person using a screen reader wanted to navigate through the page by links, they would hear the title rather than the URL.<\/p>\n

  1. Thank you to Baldur Bjarnason for sharing this workaround on the Rebus Community help page<\/a> ↵<\/a><\/li><\/ol><\/div>","protected":false},"author":3,"menu_order":10,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-161","chapter","type-chapter","status-publish","hentry"],"part":33,"_links":{"self":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/wp\/v2\/users\/3"}],"version-history":[{"count":9,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/161\/revisions"}],"predecessor-version":[{"id":244,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/161\/revisions\/244"}],"part":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/parts\/33"}],"metadata":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/161\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/wp\/v2\/media?parent=161"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapter-type?post=161"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/wp\/v2\/contributor?post=161"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/wp\/v2\/license?post=161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}