Photo by Julian Andres Carmona Serrato
Link
Introduction
Natura11y offers various styles and options to help you create accessible and visually distinct links.
Like buttons, links feature distinct hover and focus states for keyboard users, ensuring accessibility and ease of navigation.
In-paragraph links inside <p> tags are automatically colored and underlined when hovered over, making them easier to see.
The Link Selector
The .link utility class lets you style non-clickable elements to look like links. For example, you can apply the .link class to a <span> within an <a> tag to mimic the appearance of a standard link.
Figure 1 shows a span tag with the .link class.
<span class="link">
I look like a styled link
</span>
Text and Icon Links
To add an icon to a .link, use the .link--has-icon modifier class (refer to Figure 2). Creating links with icons involves two child elements.
The first is a <span> containing the appropriate icon classes. The second is a <span> with the .link__text class, which encapsulates the link text.
<a class="link link--has-icon" href="#1">
<span class="link__text">Label</span>
<span class="icon icon-arrow-right" aria-hidden="true"></span>
</a>
Skip Links
Skip links are specially designed to assist keyboard users by providing a mechanism to quickly jump to main sections of a page. They remain hidden from view until they are focused upon by keyboard navigation.
<body>
<!-- Place skip links directly after the opening body tag to ensure they are the first elements focused by keyboard navigation. -->
<div class="skip-links">
<a href="#main">
Jump to main content
</a>
<a href="#global-footer">
Jump to website footer
</a>
</div>
...