{"id":64,"date":"2020-11-05T21:58:29","date_gmt":"2020-11-05T21:58:29","guid":{"rendered":"http:\/\/sites.msudenver.edu\/accessible-design\/?page_id=64"},"modified":"2020-11-19T01:55:55","modified_gmt":"2020-11-19T01:55:55","slug":"buttons-vs-links","status":"publish","type":"page","link":"https:\/\/sites.msudenver.edu\/accessible-design\/buttons-vs-links\/","title":{"rendered":"Buttons vs Links"},"content":{"rendered":"<h2><span style=\"font-family: verdana, geneva, sans-serif\">Buttons vs. Links<\/span><\/h2>\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 14pt\">Buttons and links are often confused but, make a huge difference when using a screen reader. \u00a0<\/span><\/p>\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 14pt\">Buttons are activated by both the space bar and enter key. \u00a0While links can only be accessed by the enter key.<\/span><\/p>\n<p><strong><span style=\"font-family: verdana, geneva, sans-serif;font-size: 14pt\">When should a button be used?<\/span><\/strong><\/p>\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 14pt\">Whenever there is an action taking place, for example, a sign up, log out or download option.<\/span><\/p>\n<p><strong><span style=\"font-family: verdana, geneva, sans-serif;font-size: 14pt\">When should a link be used?<\/span><\/strong><\/p>\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 14pt\">When you want the user to access a different page or a different section on the same page.<span class=\"Apple-converted-space\">\u00a0 <\/span>Make sure links are unique and easy to identify.<span class=\"Apple-converted-space\">\u00a0 <\/span>Don\u2019t depend on color to distinguish a link from the rest of the text and underline when possible. Describe the link and its purpose. When using an icon or image as a link source supply a title attribute to give users who use screen readers context.<\/span><\/p>\n<p><strong><span style=\"font-family: verdana, geneva, sans-serif;font-size: 14pt\">Button Example<\/span><\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-111\" src=\"http:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Buttons-300x49.png\" alt=\"\" width=\"300\" height=\"49\" srcset=\"https:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Buttons-300x49.png 300w, https:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Buttons-1024x168.png 1024w, https:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Buttons-768x126.png 768w, https:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Buttons-1536x252.png 1536w, https:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Buttons-2048x337.png 2048w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p><strong><span style=\"font-family: verdana, geneva, sans-serif;font-size: 14pt\">Link Example<\/span><\/strong><\/p>\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 14pt\"><strong>Accessible:<\/strong> Use unique link text, that is short and easy to say.<\/span><\/p>\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 14pt\">ex. <span style=\"text-decoration: underline\"><span style=\"color: #333333\"><b>Today\u2019s Forecast.<\/b><\/span><\/span><\/span><\/p>\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 14pt\"><strong>Inaccessible:<\/strong> Use words like \u201cClick Here\u201d or \u201cMore.\u201d<\/span><\/p>\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 14pt\">ex. Click <span style=\"color: #00ff00\"><b>here<\/b><\/span> for forecast.<\/span><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Buttons vs. Links Buttons and links are often confused but, make a huge difference when using a screen reader. \u00a0 Buttons are activated by both the space bar and enter key. \u00a0While links can only be accessed by the enter key. When should a button [&hellip;]<\/p>\n","protected":false},"author":860,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"class_list":["post-64","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/pages\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/users\/860"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/comments?post=64"}],"version-history":[{"count":0,"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/pages\/64\/revisions"}],"wp:attachment":[{"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/media?parent=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}