Improve Keyboard Navigation and Screen-Reader Accessibility on Uyuni Website

[Rakielle]

Details

As part of openSUSE/mentoring#205, the goal of this issue is to improve keyboard navigation on the Uyuni website and make it screen-reader friendly.

Description

The images below visually represent how a screen reader interprets the contents of the website, highlighting the elements that are skipped and not accessible for a screen reader.
This improvement will help users to navigate and interact with the website using only the keyboard.
It's beneficial for users with no vision or low vision, and those who may have difficulty controlling a pointing device.

Proposed Solution

To improve accessibility and address this issue, we can;

1. Use semantic HTML and ensure that the HTML code follows semantic standards.
2. Use ARIA attributes like role, aria-label, aria-labelledby, and aria-describedby where needed.