Saurus Accessibility Guide

Explore our Saurus Accessibility Guide to discover essential tips and best practices for creating a website that everyone can navigate and enjoy. Join us in making the digital world more inclusive!

Every link, button, form label, or image should have a descriptive label, regardless of whether it’s a menu toggle button or a hidden anchor. Without proper labeling, screen readers used by people with visual impairments won’t be able to convey what the elements are, making it difficult for them to navigate your website.

Text Labels for Interactive Elements

There are two main ways to provide descriptive labels for elements like buttons and links:

Include Text Inside the Element: This is the most common approach. If you need to visually hide the text while still making it accessible to screen readers, avoid using display: none; or visibility: hidden;, as these will also hide the text from assistive technologies. Instead, use a CSS class like Tailwind's sr-only, which is designed for screen reader accessibility. You can replicate this with the following CSS:
```
position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border-width: 0;
```
Use the aria-label Attribute: If you don’t want to add visible text for certain elements (perhaps to prevent it from appearing in search results), you can use the aria-label attribute to provide an accessible name. For example:
```
<button aria-label="Open menu">...</button>
```

This approach ensures that screen readers can still convey the purpose of the element to users, even if the text is not displayed on the screen.

Making Images Accessible with the alt Attribute

To make images accessible, always use the alt attribute to provide a text description. This helps screen readers convey the image's content or purpose to visually impaired users.

Descriptive Text: Set the alt attribute to briefly describe what the image shows or its function. For example:

<img src="dinosaur.jpg" alt="A cartoon dinosaur holding a magnifying glass">

Using alt text ensures that all users can access and understand the content on your website.

Having readable font sizes is crucial for website accessibility, especially for older users who may struggle with smaller text. Ensuring text is easy to read helps make the web more inclusive. Here are some best practices:

Use Relative Units for Flexibility: Instead of setting font sizes with fixed units like "px" (pixels), use relative units such as "em" or "rem." These units adapt better to user preferences and browser settings, allowing the font size to scale smoothly across different devices and screen sizes.

em is based on the font size of the parent element. For example, if the parent font size is set to 20px, then 1em will also equal 20px.
rem is relative to the root font size (typically the <html> or <body> element). The default browser value is 16px, but this can be adjusted in the site's CSS or user settings.

Allow for Font Resizing: Using relative units ensures that text can scale naturally when users zoom in or adjust font settings. This is particularly helpful for people with visual impairments, who might need larger text to read comfortably.

Making these changes not only improves accessibility but also provides a better user experience for everyone.

Skip links, like "Skip to content" or "Skip to footer," make navigating a website faster and more accessible, especially for people who rely on keyboard navigation or screen readers. For users with disabilities, it can be frustrating to reach a new page only to have to tab through an entire navigation menu again. Skip links help solve this by allowing users to jump directly to the main content or other important sections.

How Skip Links Work

Skip links function like anchors, using an href attribute that points to a specific ID on the page (e.g., href="#main-content" would jump to an element with id="main-content"). To improve accessibility and user experience, keep these tips in mind:

Make the Link Descriptive: The link should not be empty. Use a meaningful description, like "Skip to main content," to help users understand where the link will take them.
Prevent Indexing by Search Engines: If you don't want the skip link to be indexed by search engines like Google, use the aria-label attribute instead of visible text.
Avoid Keyboard Traps: If the skip target is hidden, users may find themselves in a "trap" where the content isn't visible even though it's technically in focus. To prevent this, you can:
1. Disable tabbing for hidden elements by setting tabindex="-1".
2. Use CSS to make the skip link visible when focused (e.g., :focus:before { content: attr(aria-label); ... }).

Implementing skip links effectively can significantly improve accessibility, providing a smoother browsing experience for all users.

Example:

<a id="skip" href="#content" aria-label="skip to content" title="skip to content"></a>

#skip:focus:before{
    content: attr(aria-label);
    position: fixed;
    top: 0px;
    left: 0px;
    display: block;
    padding: 4px 8px;
    background-color: white;
}

Labels

Text Labels for Interactive Elements

Making Images Accessible with the alt Attribute

Font sizes

Skip Links

How Skip Links Work

Follow me