There Are Times for Hyperlinks and Times for Separate Buttons

While hyperlinks comprising text are acceptable as methods that allow a web page's viewers to reach a separate page or feature on a website, there are various circumstances and environments in which allowing viewers to click visually appealing buttons is clearly the preferred option. Various websites are better served aesthetically by having their navigational elements presented as symbols enclosed in rounded shapes. This is all the more true of apps and websites that are meant to be displayed on mobile devices, which often have narrow screens; buttons that trigger commonly understood functions are often circles containing informative shapes because fully spelled words occupy horizontal stretches of space.

Buttons that contain icons instead of text are nonetheless expected to allow users with impairments to discern what they are used for. Typically, images on web pages use "alt" tags in the HTML code to have lines of prose associated with them so that visually impaired users can have programs read this text out loud. This is critically important in the case of buttons because it allows users who may not be able to see to understand whether they are currently highlighting a button worth pressing. Even users without impairments can benefit from this hidden text if it is displayed when they right-click a button in Google Chrome and use the browser's "Inspect" function.

If a button is not formed out of a separately loaded image but is instead a set of SVG syntax that directly renders it onto the web page itself, there exist several methods of associating text with it while keeping it hidden. The text can be hidden through either a "hidden" attribute that is part of the SVG markup or a separately defined piece of CSS syntax. The text can also be encompassed within an attribute called "aria-label," which can be directly showcased within Chrome's developer tools and is often what assistive programs are designed to parse on behalf of impaired users. The "aria-labelledby" version of this attribute is conceptually similar but is meant to be used on buttons that feature text as part of their visible designs. For more information click here https://www.sarasoueidan.com/blog/accessible-icon-buttons/.