Accessibility in Next.js version 13
Making your websites as user-friendly as feasible is known as accessibility and includes allowing users to alter the site’s colors, enlarge the text, or even activate text narration to hear the content read out. Next.js version 13 brings several new features and improvements related to accessibility, and this article will walk you through all its features so you can develop better websites that can be used with no restrictions.
Although we typically associate this with persons with impairments, making sites accessible also benefits other audiences, including those who use mobile devices or have sluggish network connections. Everybody should be able to use the Web, regardless of technology, software, language, location, or ability. When it satisfies this condition, the Web is usable by different persons, including those with hearing, movement, sight, and cognitive disabilities.
The most recent edition, Next.js 13, was made public by Vercel during the Next.js conference in October 2022. It provides several new accessibility features and enhancements that will be covered in this article. Accessibility on your website shows that you have moral character, which enhances your reputation, and Next.js didn’t leave it out in their recent upgrade, and these updates demonstrate Next.js’ commitment to accessibility and its efforts to make web development more inclusive for everyone.
Improved automatic generation of document head tags
The automatic generation of document head tags has been improved to provide better accessibility and SEO. With this improvement, developers no longer have to manually add head tags such as titles, meta descriptions, and link tags to their pages.
For example, you are building a Next.js application and have several pages that need different head tags, such as the title, meta descriptions, and link tags. Without the improved automatic generation of document head tags in version 13, you would have to add these tags to each page component manually. This can be time-consuming and error-prone, especially if your application has many pages.
With the improved automatic generation of document head tags in Next.js version 13, you can provide the necessary head tag information in your page components, and Next.js will generate the head tags for you.
For example, you can include the following code in your page component to specify the title, description, and link tags:
import Head from 'next/head';
function HomePage() {
return (
<Head>
<title>My Next.js Application</title>
<meta name="description" content="This is a Next.js application." />
<link rel="stylesheet" href="/styles.css" />
</Head>
);
}
export default HomePage;In this example, the Head component from Next.js is used to specify the head tags for the page. The title, description, and link tags are specified as children of the Head component. Next.js will automatically generate the necessary head tags based on the information provided when the page is rendered.
With this improvement, you can focus on writing your page content and styling without worrying about the head tags. Next.js will generate the head tags for you, ensuring that your pages are correctly indexed by search engines and accessible to users with disabilities.
Support for the aria-current attribute
Support for the aria-current attribute has been added. The aria-current attribute indicates the current item in related elements, such as navigation links. This information is helpful for users with disabilities who rely on assistive technologies such as screen readers to navigate web pages.
The aria-current attribute can specify whether an element represents the current item in related elements. For example, if you have a navigation menu with several links, you can use the aria-current attribute to indicate which link represents the current page.
In Next.js version 13, you can easily add the aria-current attribute to your navigation links using the Link component from Next.js.
For example, the following code demonstrates how to add the aria-current attribute to a navigation link:
import Link from 'next/link';
function Navigation() {
return (
<nav>
<Link href="/" aria-current="page">
Home
</Link>
<Link href="/about" aria-current="page">
About
</Link>
</nav>
);
}
export default Navigation;In this example, the Link component creates navigation links, and the aria-current attribute is added to indicate which link represents the current page. When the page is rendered, assistive technology can determine the current page based on the value of the aria-current attribute.
The support for the aria-current attribute in Next.js version 13 makes it easier to create accessible navigation menus and other related elements.
Accessibility support for the Link component
Accessibility support has been added to the Link component, which creates links that navigate between pages in a Next.js application. It is an important component for creating navigation menus, breadcrumb trails, and other navigation elements.
In accessibility, it is essential to ensure that navigation elements are properly accessible. Therefore, in Next.js version 13, the Link component has been updated to include accessibility features such as keyboard navigation and screen reader support.
For instance, the Link component now includes support for the tabIndex attribute, which controls the order in which elements receive focus when navigating with the keyboard. By default, the Link component has a tabIndex of 0, meaning it can receive focus and be activated with the keyboard. When a user presses the “Tab” key on the keyboard, the focus moves to the next element with the lowest tabIndex value.
Consider a Next.js application with two links, one for the Home page and one for the About page. Without the tabIndex attribute, the order in which these links receive focus when navigating with the keyboard would be determined by their position in the HTML. However, with the tabIndex attribute, you can specify the order in which these links receive focus.
import Link from 'next/link';
function Navigation() {
return (
<nav>
<Link href="/" tabIndex={1}>
Home
</Link>
<Link href="/about" tabIndex={2}>
About
</Link>
</nav>
);
}
export default Navigation;In this example, the Link component has a tabIndex attribute with a value of 1 for the home page link and 2 for the About page link. When navigating with the keyboard, the focus will move first to the Home page link and then to the About page link.
By including support for the tabIndex attribute in the Next.js version 13 Link component, you can easily control the order in which elements receive focus when navigating with the keyboard, helping to make your Next.js applications more accessible and user-friendly.
New methods for font optimization
The new methods for font optimization in Next.js version 13 aim to improve web pages’ performance and loading times that use custom fonts. These new methods address the issues of slow font loading and the Flash of Invisible Text (FOIT) problem, which can result in a poor user experience.
One method is font-display, a CSS property that specifies how a font should be displayed before it is fully loaded. With font-display, you can choose between several different values, including auto, block, swap, fallback, and optional, each of which provides another loading behavior for custom fonts.
For example, to use font-display with the swap value, you can add the following code to your CSS file:
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
font-display: swap;
}In this example, the font-display property is set to swap, which means that the custom font MyFont will be displayed using a system font (such as Arial or Times New Roman) until it is fully loaded; it will be swapped with the custom font. This helps to ensure that the text is always visible and readable, even if the custom font takes a long time to load.
Another method is font-preloading, which is a way to preload custom fonts before they are needed so that they can be displayed quickly and seamlessly when the page loads. This can be done using the <link rel="preload"> tag, a unique HTML tag that signals the browser to download a resource as soon as possible.
For example, to preload the custom font MyFont, you can add the following code to the section of your HTML file:
<link rel="preload" as="font" type="font/woff2" href="myfont.woff2">In this example, the rel="preload" attribute signals the browser to start downloading the custom font MyFont as soon as possible so that it can be displayed quickly and seamlessly when the page loads.
Using these new font optimization methods in Next.js version 13, you can improve your web page’s performance and loading times and ensure that custom fonts are displayed quickly and smoothly, providing a better user experience.
Session Replay for Developers
Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — an open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
Simplified API for navigating next/image
The simplified API for navigating next/image in Next.js version 13 makes it easier for developers to optimize images for performance and accessibility on their web pages.
In previous versions of Next.js, using next/image required passing many props to configure the component’s behavior. With the simplified API in version 13, the most commonly used options are now available as simple props, reducing the amount of code required to implement image optimization.
For example, in previous versions of Next.js, to optimize an image for performance and accessibility, you might have written code like this:
import Image from 'next/image'
const MyImage = () => (
<Image
src="myimage.jpg"
width={800}
height={600}
quality={85}
layout="responsive"
objectFit="cover"
objectPosition="center"
alt="A description of the image"
loading="eager"
decode={false}
/>
)With the simplified API in Next.js version 13, you can achieve the same result with much less code:
import Image from 'next/image'
const MyImage = () => (
<Image
src="myimage.jpg"
alt="A description of the image"
/>
)In this example, the most commonly used options for optimizing images for performance and accessibility are automatically set, and the alt text is the only required prop. This makes it much easier to implement image optimization and improve the performance and accessibility of your web pages.
In addition to the simplified API, Next.js version 13 also includes improved support for responsive images and improved performance and size of the generated JavaScript code. These improvements make it even easier to optimize images for performance and accessibility.
Improved focus management
In web development, focus management refers to determining which element on a page should have focus (i.e., receive keyboard input) at any given time. This is important for accessibility, as users who rely on a keyboard to navigate a website need to move quickly from one element to another.
Previous versions of Next.js provided basic support for focus management, but with the improvements in version 13, developers have greater control over the focus management of their pages. For example, developers can now specify the initial focus element for a page, which helps ensure that users can start interacting with the page as soon as it loads.
In addition, the improved focus management in Next.js version 13 also includes support for the tabIndex attribute, which allows developers to specify the order in which elements receive focus when navigating with the keyboard.
For example, consider the following code:
import { useState } from 'react';
const MyPage = () => {
const [showModal, setShowModal] = useState(false);
return (
<div>
<button onClick={() => setShowModal(true)}>Show Modal </button>
{showModal && (
<div tabIndex={0}>
<h1> My Modal </h1>
<button onClick={() => setShowModal(false)}> Close Modal </button>
</div>
)}
</div>
);
};In this example, when the modal is shown, it is given a tabIndex of 0, meaning it can receive focus and be navigated with the keyboard. This makes it easier for users to interact with the modal, even using a keyboard to navigate the website.
Improved a11y testing
Accessibility testing involves evaluating a web page to ensure that it meets specific standards and guidelines for accessibility. For example, Next.js version 13 includes new APIs for testing the accessibility of components and pages, making it easier for developers to identify and fix accessibility issues.
In addition, the improved a11y testing in Next.js version 13 also includes support for more sophisticated accessibility testing tools and techniques, such as automated and visual regression testing. This makes it easier for developers to catch accessibility issues early in the development process, reducing the risk of these issues being introduced into the production codebase.
For example, consider the following code:
import { render, screen } from '@testing-library/react';
test('My Page is accessible', async () => {
render(<MyPage />);
const heading = screen.getByRole('heading');
expect(heading).toBeInTheDocument();
expect(heading).toHaveTextContent('My Page');
});In this example, a simple accessibility test is being performed on a component called MyPage. The test checks that the component includes a heading with the text ‘My Page’ and that this heading is in the document and can be found using the ‘screen.getByRole’ method from the ‘@testing-library/react library’.
Improved color contrast
The improved color contrast in Next.js version 13 helps to ensure that the text and other content on web pages are legible and easy to read, even for users with visual impairments.
Color contrast refers to the difference in luminance between a web page’s foreground (text, images, etc.) and background. A high contrast ratio (the difference between the lightest and darkest colors) makes text and other content more readable, especially for users with visual impairments or color blindness.
For example, Next.js version 13 includes new APIs for adjusting the contrast ratio of text and other content, making it easier for developers to ensure that their pages are accessible to all users, regardless of their ability.
For example, consider the following code:
import { css } from '@emotion/core';
const styles = css`
background-color: #333;
color: #fff;
padding: 1rem;
font-size: 1.5rem;
@media (prefers-color-scheme: dark) {
background-color: #fff;
color: #333;
}
`;
function MyPage() {
return (
<div css={styles}>
<h1>My Page</h1>
<p>This is my page.</p>
</div>
);
}In this example, a simple color contrast style is applied to a component called MyPage. The style sets the background color to dark grey and the text color to white, providing a high contrast ratio for legibility. The style also includes a media query for users who prefer a dark color scheme, in which the background color is set to white and the text color is set to dark grey.
Importance of considering accessibility in all stages of web development
Considering accessibility from the start, you’ll be able to create applications that are usable for everyone without having to make significant changes later on. This can lead to a more efficient development process and reduce the risk of costly remediation. Below are some of the importance of considering accessibility in web development.
-
Improved user experience and overall usability: Ensuring that applications are accessible can lead to a better user experience for all visitors, regardless of their abilities or disabilities.
-
Compliance with legal requirements: Many countries have laws that require websites and applications to be accessible, and failure to comply with these laws can result in significant financial penalties.
-
Increased audience reach: By making applications accessible, organizations can reach a wider audience and expand their customer base.
-
Improved search engine optimization (SEO): Applications that are accessible can be more easily indexed by search engines, improving their visibility and ranking in search results.
-
Improved brand reputation: By demonstrating a commitment to accessibility and inclusivity, organizations can improve their reputation and build trust with their customers.
Conclusion
The accessibility features in the recently upgraded Next.js version have seen considerable improvements that demonstrate a commitment to making web applications more usable and accessible for a wider range of users like those who use assistive technologies such as screen readers, magnifiers, or switch-controlled devices to access the web.
Gain Debugging Superpowers
Unleash the power of session replay to reproduce bugs and track user frustrations. Get complete visibility into your frontend with OpenReplay, the most advanced open-source session replay tool for developers.
