Oscar Salazar • Wednesday, December 28, 2022
AUTHOR
OS
Oscar Salazar, Senior Software Engineer
Oscar is a Software Engineer passionate about frontend development and creative coding, he has worked in several projects involving from video games to rich interactive experiences in different web applications. He loves studying and playing with the newest CSS features to create fantastic art.
JSX is a syntax extension for JavaScript that allows developers to write HTML-like code in their React components. It is a powerful tool that helps developers build user interfaces more efficiently, but it is important to ensure that the elements created using JSX are accessible to all users, including those with disabilities. In this article, we will discuss some best practices for making JSX elements accessible.
Accessibility is an important consideration when working with JSX elements. By using proper semantic HTML tags, using aria-* attributes, and ensuring that elements are keyboard accessible, developers can create user interfaces that are accessible to all users.
JSX Rule: img alt-text
The alt attribute specifies an alternate text for an image, if the image cannot be displayed for some reason. The alt attribute is required for the img element, and it should describe the image in a way that is meaningful to someone who cannot see the image.
Here's an example of using the alt attribute in an img element:
<!-- Good -->
<img src="kitten.jpg" alt="A fluffy white kitten with blue eyes" />
<!-- Bad -->
<img src="kitten.jpg" />
<img src="kitten.jpg" alt="an image of a kitten" />
The alt attribute is important for accessibility, as it provides a text equivalent for the image that can be read by screen readers and other assistive technologies. It is also used by search engines to understand the content of an image, which can help improve the visibility of a website in search results.
It's worth noting that the alt attribute is not intended to be a caption or a description of the image. If you want to provide more detailed information about the image, you can use the figure and figcaption elements, or you can use the title attribute to provide additional context.
You can combine the previous rule with img-redundant-alt to avoid words such as image, photo, or picture in your images alt text.
JSX Rule: html-has-lang
The HTML lang attribute is used to specify the language of the content of an HTML element. It is used to help search engines and browsers better understand the content of the page and provide a more relevant experience for the user.
Here's an example of how to use the lang attribute in an HTML element:
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This page is written in English.</p>
</body>
</html>
In this example, the lang attribute is set to "en" to indicate that the content of the page is written in English.
It's important to note that the lang attribute should be set on the html element, not on individual elements within the page. This ensures that the language is correctly identified for the entire page, rather than just for specific elements.
Using the lang attribute can help search engines and assistive technologies provide a better user experience by correctly identifying the language of the content and providing appropriate translations or accessibility features. It can also help search engines understand the relevance of the content to users in different regions or who speak different languages.
JXS Rule: no-distracting-elements
The marquee and blink HTML elements are not widely used and are generally considered to be outdated and not a best practice for modern web development.
The marquee element is used to create a scrolling effect for text or other content on a web page. However, it has limited browser support and can be disruptive to the user experience, as it can make it difficult to read the content. Additionally, the marquee element does not conform to web accessibility guidelines, as it can make it difficult for users with visual impairments to read the content.
The blink element is used to cause text or other content to blink on and off. However, it has limited browser support and can also be disruptive to the user experience. It is also not compliant with web accessibility guidelines, as it can cause problems for users with visual impairments.
Instead of using the marquee or blink elements, it is generally better to use other techniques to achieve similar effects in a more modern and accessible way. For example, you can use CSS to create a scrolling effect, or use JavaScript to create a blinking effect.
In general, it is important to consider the user experience and accessibility when designing a website, and to use modern techniques that conform to web standards and best practices.
Here's an example of the deprecated elements:
<!-- Bad AVOID-->
<marquee width="60%" direction="up" height="100px">
This is a sample scrolling text that has scrolls in the upper direction.
</marquee>
<!-- Bad AVOID-->
<blink>The <blink> element is deprecated.</blink>
JSX Rule: tabindex-no-positive
The tabindex attribute in HTML is used to specify the tab order of elements on a web page. It allows developers to control which elements will receive focus when a user tabs through the page. The attribute can take on a positive integer value, a negative integer value, or the value "0".
If an element has a positive tabindex value, it will receive focus in the order specified by the value. For example, if an element has a tabindex value of "2", it will receive focus after the element with a tabindex value of "1" and before the element with a tabindex value of "3".
It is generally not recommended to use a positive tabindex value, as this can disrupt the natural tab order of the page and make it more difficult for users to navigate. Instead, developers should use the default tab order of the page, which follows the order of the elements on the page as they appear in the HTML source code.
If you want to control the tab order of elements on your page, it is generally better to use other methods, such as changing the order of the elements in the HTML source code or using CSS to change the visual order of the elements on the page.
JSX Rule: no-autofocus
HTML includes the autofocus attribute, which can be used to specify that a particular form input should be focused automatically when a webpage loads. This can be useful for forms that require a specific input to be filled out first, or for pages that include a search bar that the user may want to use immediately.
However, it's important to use the autofocus attribute sparingly, as it can be annoying or disruptive to users if it causes the focus to automatically change while they are interacting with the page. In general, it's a good idea to allow users to control their own focus and not have it automatically moved for them.
<!-- Bad -->
<input type="text" autofocus />
Automatically follow React best practices
To use all of these React rules consistently, all you need to do is to install the integration in your IDE (for VS Code or JetBrains) or code management system and add a codiga.yml file at the root of your profile with the following content:
rulesets:
- jsx-a11y
You can also run and test these React JSX best practice rules within the React JSX Best Practices ruleset on the Codiga Hub.
Feel free to copy and try them in our playground or duplicate a rule to make your own updates.
We look forward to seeing what kind of rules you can create! They don't have to be about best practices in React, so get creative and tailor them for yourself.
If you have any suggestions or feedback, don't hesitate to contact us.
More Resources
If you've ever used ESLint before, these React rules may look familiar.
Here are some links to similar rules from ESLint: