Accessibility with Tab – making it more visible

Hey Martin,
To add a red border to items that you tab to, you can add this css:

a:focus,button:focus {
  border:1px solid red !important;
}

adjust the color and size to suit.
Your accessibility plugin is at the bottom of the page in the DOM, so you would need to tab the whole page to get to it, perhaps the plugin settings has an option to move it to the top of the DOM? The plugin button also has a tabindex of -1 so you can’t tab to it, check the plugin settings.
If you can’t change these in the settings, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function() {
	const accessibilityButton = document.querySelector('#accessibility-trigger-button');
    const messageBar = document.querySelector('#accessibility-button');
    const body = document.querySelector('body#top');
    body.prepend(messageBar);
    accessibilityButton.setAttribute('tabindex', '1');
});
</script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
This javascript will move the accessibility-button in the DOM to the top of the page so it is the first tab, the icon will still show at the bottom of the page, it will also change the tabindex so you can tab to it. With the css above to add a red border, the first tab will show this:

and then if you hit the enter key it will open:

Best regards,
Mike