{"id":2847,"date":"2025-11-17T15:54:04","date_gmt":"2025-11-17T20:54:04","guid":{"rendered":"https:\/\/it.rutgers.edu\/digital-accessibility\/?page_id=2847"},"modified":"2025-12-18T16:19:45","modified_gmt":"2025-12-18T21:19:45","slug":"create-meaningful-links","status":"publish","type":"page","link":"https:\/\/it.rutgers.edu\/digital-accessibility\/accessible-web-content\/create-meaningful-links\/","title":{"rendered":"Create meaningful links"},"content":{"rendered":"
\n\n
\n \n
\n
\n
\n
\n\t\t\t\t

Create meaningful links<\/h1>\n\n<\/div>\n\t\t\t\t
<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<\/div>\n\n <\/section>\n\n\n
\n\n
\n \n

Ensuring that your links and buttons have concise, meaningful labels allows screen reader users to discern what they are clicking on. Most blind users will navigate your site by pulling up a list of elements, like links, which doesn\u2019t allow them to have the context around the link. For example, they will only hear \u201cclick here\u201d opposed to the entire sentence (outside of the link) \u201cto enroll in our class, click here.\u201d<\/p>\n

Appropriate use<\/strong><\/h2>\n

Concise and meaningful text:<\/strong>\u00a0Links should have concise and meaningful text as in the examples below:<\/p>\n

\r\n<a href=\"\/links.html\"> Accessible Link <\/a>\r\n<\/code><\/pre>\n
Sometimes you may decide to use a button as a link. Buttons should be coded as buttons, and not as an image. You should avoid using images as links whenever possible. If you need to, the alt text should allow the user to know where that link takes them.<\/p>\n
\r\n<button type=\"submit\"> Submit Form <\/button>\r\n<a href=\"\/home.html\"> <img src=\"..\/path.jpg\" alt=\"home\"><\/a>\r\n\r\n<\/code><\/pre>\n
Non-color indicators:<\/strong>\u00a0We cannot use color alone to convey meaning, and that includes indicating to your users that the text is a link with color only. The easiest way to achieve this is by underlining your links.<\/p>\n
Below are the WCAG requirements:<\/p>\n