One of the tests in the set of Core Web Vitals is the INP a.k.a Interaction to Next Paint. In this short guide, we’ll focus on an issue that can impact the INP score of your website. This common issue affects many websites built in WordPress. This will appear in your page speed test report as “Accessibility Issues were Detected”. In today’s post, we’ll see how can we fix accessibility issues with HTML tables in WordPress.
Also Read: How to Speed Up Your WordPress Website
What are Accessibility Issues with WordPress Tables?
The accessibility issue that can negatively affect your website’s INP score is as follows:
Accessibility Issues were Detected
Found 1 accessibility issues: 1 moderateThis issue may affect many elements on your web page. However, HTML tables are the most impacted elements among WordPress websites due to this.
How to Fix the Accessibility Issue Related to Tables in WordPress
To fix the accessibility issue reported in your page speed or Core Web Vitals report, you need to ensure that the scrollable regions in your HTML have keyboard access. It seems that the tables in your code lack focusable content. Here are some suggestions to address this issue:
Check This: Increase the Domain Authority of Your Website
1. Add an tabindex attribute
Make sure that the table or its parent element has an tabindex attribute set. This makes the element focusable.
Example:
<table tabindex="0" class="has-blush-light-purple-gradient-background has-background">
<!-- table content -->
</table>2. Ensure elements within the table are focusable
Check if the elements within the table (e.g., buttons, links, input fields) are focusable.
Add appropriate attributes like tabindex or href to make sure they can be accessed via keyboard navigation.
3. Use semantic HTML elements
Make sure you are using semantic HTML elements appropriately. For example, use <button> for buttons, <a> for links, and so on.
Semantic elements are usually more accessible by default.
4. Check for JavaScript interactions
You have to ensure that your table’s interactive features are accessible and support action using the keyboard if they depend on JavaScript.
5. Test with a screen reader
Use a screen reader to test the accessibility of your page. This helps you find additional issues not caught by automated tools.
Example with added tabindex:
<table tabindex="0" class="has-blush-light-purple-gradient-background has-background">
<!-- table content -->
</table>Apply these changes to every instance of the table reported with an accessibility issue. After implementing the changes, re-run the page speed tool to ensure issue resolution.
How to Implement the Solution in WordPress
There are multiple ways to fix the accessibility issues with tables in WordPress. Firstly, let’s find out how to get these to work in real-time.
1. Fix the Issue by Editing Functions.php in the Child Theme
To automatically add tabindex="0" to tables in WordPress posts, you can use a combination of a custom function and some JavaScript. Here’s a step-by-step guide:
If you’re not already using a child theme, create one. This will keep your changes safe during updates to the parent theme.
Edit the functions.php file in your Child Theme
Add the following code to automatically add tabindex="0" to all tables in your WordPress posts:
function add_tabindex_to_tables($content) {
// Check if it's a single post
if (is_single()) {
// Add tabindex="0" to all tables
$content = preg_replace_callback('/<table(.*?)>/i', function($matches) {
// Check if tabindex is already set
if (strpos($matches[1], 'tabindex') === false) {
return '<table tabindex="0"' . $matches[1] . '>';
} else {
return $matches[0];
}
}, $content);
}
return $content;
}
add_filter('the_content', 'add_tabindex_to_tables');Save your changes and test:
Save the functions.php file and test it on a single post page with tables. Ensure that the tabindex="0" attribute is automatically added to the tables.
Please note that modifying the functions.php file should be done carefully, and you should have a backup of your site before making changes. If you’re not comfortable editing theme files, consider seeking assistance from a developer or using a custom plugin for this purpose.
2. Fix the Issue by Using CSS :focus Property
Using CSS to style-focused elements within tables is a good alternative that doesn’t involve modifying the HTML or adding attributes like tabindex. You can use the :focus pseudo-class to apply styles to the focused elements. Here’s an example:
/* Apply styles when a table or its children receive focus */
table:focus,
table:focus * {
/* Add your desired styles for focused elements */
outline: 2px solid blue; /* Example: Adding a blue outline */
}
/* Optional: Improve focus styles for keyboard users */
table:focus,
table:focus * {
outline: 2px solid blue; /* Example: Adding a blue outline */
}
/* Remove the default focus outline on some browsers */
table:focus,
table:focus * {
outline: none;
}
/* Add a different style when using the keyboard */
@media (prefers-reduced-motion: no-preference) {
:focus:not(:focus-visible) {
outline: none;
}
}
/* Apply styles when using the keyboard */
@media (prefers-reduced-motion: reduce) {
:focus {
outline: 2px solid blue; /* Example: Adding a blue outline */
}
}In this example, when any element inside a table receives focus, it will get a blue outline. You can customize the styles as needed. This method provides a visual indication of focus without the need to modify each table individually.
Remember that the :focus styles might not be as noticeable for users navigating with a keyboard, so you may want to enhance focus styles using the :focus-visible pseudo-class. The prefers-reduced-motion media query is also used to consider users’ preferences for reduced motion.
Add this CSS code to your theme’s stylesheet or in the WordPress Customizer to apply it site-wide. Adjust the styles to fit your design and accessibility requirements.
3. Fix Using More Optimized CSS
If you want a simple and effective solution without adding too much complexity to your CSS, you can use the following:
/* Apply styles when any element inside a table receives focus */
table:focus,
table:focus * {
outline: 2px solid blue; /* Example: Adding a blue outline */
}
/* Remove the default focus outline on some browsers */
table:focus,
table:focus * {
outline: none;
}This code adds a blue outline to any element inside a table when it receives focus. The second rule removes the default focus outline on some browsers, ensuring a consistent and cleaner appearance.
This solution is straightforward and should provide a clear visual indication of focus without unnecessary CSS code. Adjust the outline color and style according to your design preferences.
4. Fix the Issue By Using JavaScript
Add a JavaScript file to your theme or child theme that targets tables and adds the tabindex attribute. This might be useful if you want to keep the logic on the client side.
Note: This approach assumes that JavaScript is enabled in the user’s browser.
Here’s a simplified example of the JavaScript approach:
// Create a new JavaScript file (e.g., add-tabindex.js)
document.addEventListener('DOMContentLoaded', function() {
var tables = document.querySelectorAll('table');
tables.forEach(function(table) {
if (!table.hasAttribute('tabindex')) {
table.setAttribute('tabindex', '0');
}
});
});Include this JavaScript file in your WordPress theme, and it will automatically add tabindex="0" to all tables on the page when it loads.
Choose the approach that best fits your specific needs and the level of customization you require. Each approach has its pros and cons, and the best solution depends on the complexity of your problem and your preferences. If you liked our tips, subscribe to our Facebook and YouTube channel.
Best,
TechBeamers.
