The first element of the accordion widget stays open unless clicked where it should automatically close when any other element is clicked.

It happens only with the first element of the first accordion component (see screenshot below).

Project Title: Uyuni Website Refresh - Accessibility and Responsiveness (#205)

Accessibility Issue

Page
News page
Severity: Error

Description
There are 142 low contrast errors - links mostly.
These can be fixed by (#217)

There is very low contrast between link text and background colors.
Text is present that has a contrast ratio less than 4.5:1, or large text (larger than 18 point or 14 point bold) has a contrast ratio less than 3:1. WCAG requires that page elements have both foreground AND background colors defined (or inherited) that provide sufficient contrast. When text is presented over a background image, the text must have a background color defined (typically in CSS) that provides adequate text contrast when the background image is disabled or unavailable.

Proposed Solution

• Solution: The visual presentation of text/background has a contrast ratio of at least 4.5:1 (minimum recommendation AA)

Additional Notes

• WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
• WCAG Level AA - Minimum

Details

As part of openSUSE/mentoring#205, this issue aims to improve the accessibility of Uyuni website, by addressing issues dentified by WAVE.

1. Logo Alt Text:
   The current text logo has no alt text. This is an accessibility issue because the content and purpose of the image will not be available to screen reader users or when the image is unavailable.
   Adding an alt text will help to convey the content to people who use assistive technologies.
   
   
   

2. Plus Icon Alt Text:
   The plus icons have no alt text. Since it signifies expandable sections, adding an alt text would help users who rely on screen readers understand what it's for.
   

Reference

Non-text content

Project Title: Uyuni Website Refresh - Accessibility and Responsiveness (#205)

Accessibility/Responsive Issue

Page
Development version page
Severity: Warning (low)

Description
Adjacent links go to the same URL. When adjacent links go to the same location (such as a linked product image and an adjacent linked product name that go to the same product page) this results in additional navigation and repetition for keyboard and screen reader users that could cause confusion.

Notes
The spec specifies that "The purpose of each link can be determined from the link text alone, or from the link text and its context" is sufficient - so I've noted it as 'low' priority as each link text is different and that WAVE flags it as an 'alert' only.

Proposed Solution
Solution 1: Adjacent link text can be grouped together if they both point to the same resource, eg.
openSUSE Leap 15.* (x86_64, aarch64) AND openSUSE Leap Micro 5.* (x86_64, aarch64)
Solution 2: Further clarify the purpose of the link element using a title attribute.

Additional Notes

• 2.4.4 Link Purpose (In Context) (Level A)
• Supplementing link text with the title attribute

Screenshot

Project Title: Uyuni Website Refresh - Accessibility and Responsiveness (#205)

Accessibility/Responsive Issue

Page
Patches version page
Severity: Alert
Impacts: Body content

Description
Heading levels are skipped from H1 to H4, there is no intermediate H2 or H3.

Headings provide document structure and facilitate keyboard navigation by users of assistive technology. These users may be confused or experience difficulty navigating when heading levels are skipped.

Proposed Solution
Solution 1: Restructure the document headings to ensure that heading levels are not skipped.

Additional Notes

• 1.3.1 Info and Relationships (Level A)
• 2.4.6 Headings and Labels (Level AA)
• G141: Organizing a page using headings

Related issue
218

Project Title: Uyuni Website Refresh - Accessibility and Responsiveness (#205)

Accessibility

Page
Stable version page
Severity: Warning (low)

Description
Adjacent links go to the same URL. When adjacent links go to the same location (such as a linked product image and an adjacent linked product name that go to the same product page) this results in additional navigation and repetition for keyboard and screen reader users that could cause confusion.

Notes
The spec specifies that "The purpose of each link can be determined from the link text alone, or from the link text and its context" is sufficient - so I've noted it as 'low' priority as each link text is different and that WAVE flags it as an 'alert' only.

Proposed Solution
Solution 1: Adjacent link text can be grouped together if they both point to the same resource, eg.
openSUSE Leap 15.* (x86_64, aarch64) AND openSUSE Leap Micro 5.* (x86_64, aarch64)
Solution 2: Further clarify the purpose of the link element using a title attribute.

Additional Notes

• 2.4.4 Link Purpose (In Context) (Level A)
• Supplementing link text with the title attribute

Related

Related issue
226

Project Title: Uyuni Website Refresh - Accessibility and Responsiveness (#205)

Accessibility/Responsive Issue

Page
Contact page

Description
There are 36 low contrast warning for the page.

Very low contrast between text and background colors. These are all CSS styles effecting links in the page body.
Adequate contrast of text is necessary for all users, especially users with low vision.

The link text that is present that has a contrast ratio less than 4.5:1, or large text (larger than 18 point or 14 point bold) has a contrast ratio less than 3:1.
WCAG requires that page elements have both foreground AND background colors defined (or inherited) that provide sufficient contrast.
When text is presented over a background image, the text must have a background color defined (typically in CSS) that provides adequate text contrast when the background image is disabled or unavailable.

WCAG Level AA requires a contrast ratio of at least 1.4.3 Contrast (Minimum)
WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Proposed Solution

• Solution 1: Increase the contrast between the foreground (text) color and the background color. Large text (larger than 18 point or 14 point bold) does not require as much contrast as smaller text.

Additional Notes

• WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
• 1.4.3 Contrast (Minimum) (Level AA)

Related issue
222

Project Title: Uyuni Website Refresh - Accessibility and Responsiveness (#205)

Accessibility/Responsive Issue

Page
Stable version page
Severity: Alert
Impacts: Body content

Description
Heading levels are skipped from H1 to H4, there is no intermediate H2 or H3.

Headings provide document structure and facilitate keyboard navigation by users of assistive technology. These users may be confused or experience difficulty navigating when heading levels are skipped.

Proposed Solution
Solution 1: Restructure the document headings to ensure that heading levels are not skipped.

Additional Notes

• 1.3.1 Info and Relationships (Level A)
• 2.4.6 Headings and Labels (Level AA)
• G141: Organizing a page using headings

Related issue
218

Project Title: Uyuni Website Refresh - Accessibility and Responsiveness (#205)

Accessibility Issue

Page
Stable version page
Severity: Error

Description
The CSS on the code tags have a very low contrast rating (3.5:11) between text and background colors.
Text is present that has a contrast ratio less than 4.5:1. WCAG requires that page elements have both foreground AND background colors defined (or inherited) that provide sufficient contrast.

Proposed Solution
Solution: Increase contrast ratio to meet the WCAG Level AA minimum.

Additional Notes

• 1.4.3 Contrast (Minimum) (Level AA)
• 1.4.6 Contrast (Enhanced) (Level AAA)

Screenshot

Project Title: Uyuni Website Refresh - Accessibility and Responsiveness (#205)

Accessibility Issue

Page
Stable Version page
Severity: Warning

Description
A link to jump to another position within the page assists users in navigating the web page, but only if the link target exists.
A user might be confused when the browser page does not change. In-page links should generally be presented so it is visually and/or contextually apparent that they are in-page link

Proposed Solution

• Solution 1: Create a permalink that is not a heading with an appropriate aria-label (thus giving it the target a reference)

Screenshot

Related Issue
221

Project Title: Uyuni Website Refresh - Accessibility and Responsiveness (#205)

was: openSUSE/mentoring#230

Accessibility Issue

Page
Patches page
Severity: Alert
Impacts: Body content

Description
Text is structured like a list but lacks proper list semantics.

Ordered and unordered lists, when properly defined, provide useful information to users, such as an indication of the list type and number of list items. When text alone is used to present list structures and content, these benefits are lost.

Proposed Solution
Solution: If list content is presented, use <ul> or <ol> markup to semantically define the list.

Additional Notes

• 1.3.1 Info and Relationships (Level A)

Screenshot

Project Title: Uyuni Website Refresh - Accessibility and Responsiveness (#205)

Accessibility Issue - accordian component

Page
Home/landing page
Severity: Error

Description
The Bootstrap (v4.2.1) accordion component has several issues that can resolved by following the implementation provided on the Bootstrap website.

Among them are:

• 6 broken references marked as aria-labelledby that do not point to a target reference. ARIA labels and descriptions will not be presented if the element referenced does not exist in the page.
• 2 heading levels are skipped, meaning they aren't accessible by keyboard tabbing

Proposed Solution

• Solution: Follow the Bootstrap implementation ensuring that the element referenced in the aria-labelledby or aria-describedby attribute value is present within the page and presents a proper label or description.

Additional Notes

• There are other issues within the accordion, but thats for another issue
• 1.3.1 Info and Relationships (Level A)
• 4.1.2 Name, Role, Value (Level A)

Screenshot

Details

As part of openSUSE/mentoring#205, the goal of this issue is to improve the low contrast errors identified by WAVE.

1. Very low contrast between texts and background colours:
WAVE identified sections where the text and background colours have very low contrast. This presents a challenge for users with visual impairments.
According to the WCAG, the minimum recommended contrast ratio for normal text should be 4.5:1. and the contrast ratios of the identified errors fall below this requirement.

This can be fixed by increasing the contrast between the foreground and background colours, while still maintaining Uyuni theme colours.

Reference

Contrast Minimum

See https://matrix.to/#/!hmhBzMsPSlnAgDeTDS:gitter.im/$PGauH--YV1ml81QgV4bpi5SAyQ8T517JdvGCxGqW7zI?via=gitter.im&via=matrix.org&via=opensuse.org

@cbosdo suggested to have this feature:

• Get a quickstart link from uyuni-project.org to https://www.uyuni-project.org/uyuni-docs/en/uyuni/quickstart/container-deployment/uyuni/quickstart-deploy-uyuni-server.html

This would probably be more user friendly. And that would help fitting this criteria from OpenSSF best practices: The project MUST provide a "quick start" guide for new users to help them quickly do something with the software. (URL required)

As part of openSUSE/mentoring#205 this issue hopes to improve the responsiveness of Uyuni website.
The current Uyuni website is not responsive across different screen sizes, and this affects the experience of users accessing the site on mobile devices, tablets, and smaller desktop screens.
Also, this issue affects how screen readers interpret and read the website's content, as many elements overlap.

To fix this, we could add CSS media queries to adjust the layout and styling based on viewport size.

Details

As part of openSUSE/mentoring#205 goal of this issue is to implement a scrolling effect on the Uyuni Project image displayed in the provided link. The desired effect is to make the image appear as if it is revolving or moving when the user scrolls.

Proposed Solution

To achieve the scrolling effect without relying on JavaScript dependencies, we can utilize CSS animations combined with scroll events. Here's a proposed solution:

HTML Structure: Place the image within a container element.

<div class="image-container">
    <img src="" alt="Uyuni Project Image">
</div>

CSS Styling: Apply necessary CSS styles to the container and image to prepare for the scrolling effect.

.image-container {
    overflow: hidden;
    width: 100%;
    height: 400px; /* Adjust height as needed */
    position: relative;
}

.image-container img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}

CSS Animation: Define a CSS animation that will create the revolving effect.

@keyframes scroll {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

Apply Animation on Scroll: Trigger the animation when the user scrolls.

.image-container img {
    /* Other styles */
    animation: scroll 10s infinite linear; /* Adjust timing as needed */
}

Adjust the duration (10s in this example) and timing function (linear in this example) of the animation according to preference.

Optional: Fine-tune the animation properties such as easing, duration, and direction to achieve the desired scrolling effect.

With this solution, the image should exhibit a revolving effect when the user scrolls, providing an engaging visual experience without the need for JavaScript dependencies.

cc : @deneb-alpha

Project Title: Uyuni Website Refresh - Accessibility and Responsiveness (#205)

Accessibility/Responsive Issue

Page
FAQ page
Type: Stylistic

Description
On the FAQ page list items show bullet points that are 'off' - stylistically it looks offsetting

Proposed Solution

• Solution 1: Use CSS to remove bullet points
• Solution 2: Use CSS to align bullet point to the question being addressed

Screenshot

Details

As part of openSUSE/mentoring#205, this issue hopes to improve the responsiveness of Uyuni website.
The current Uyuni website is not responsive across different screen sizes, and this affects the experience of users accessing the site on mobile devices, tablets, and smaller desktop screens.
Also, this issue affects how screen readers interpret and read the website's content, as many elements overlap.

To fix this, we could add CSS media queries to adjust the layout and styling based on viewport size.

Project Title: Uyuni Website Refresh - Accessibility and Responsiveness (#205)

Accessibility Issue

Page
Patches page
Severity: Error

Description
There are 27 low contrast errors - links mostly.

Very low contrast between text and background colors. These are all CSS styles effecting links in the page body.
Adequate contrast of text is necessary for all users, especially users with low vision.

The link text that is present that has a contrast ratio less than 4.5:1, or large text (larger than 18 point or 14 point bold) has a contrast ratio less than 3:1.
WCAG requires that page elements have both foreground AND background colors defined (or inherited) that provide sufficient contrast.
When text is presented over a background image, the text must have a background color defined (typically in CSS) that provides adequate text contrast when the background image is disabled or unavailable.

WCAG Level AA requires a contrast ratio of at least 1.4.3 Contrast (Minimum)
WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Proposed Solution

• Solution: The visual presentation of text/background has a contrast ratio of at least 4.5:1 (minimum recommendation AA)

Additional Notes

• WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
• WCAG Level AA - Minimum

Related issue
222

https://www.uyuni-project.org/pages/stable-version.html

With container deployment now preferred (and soon to be only) method of installing Uyuni the above page needs updating to reflect this. Currently it covers installing Uyuni (in legacy mode) on Leap 15.5 so anyone now coming to Uyuni might follow this only to then have to migrate/reinstall with container. I'd suggest now is the time to update these "quick start" instructions for container install.

Project Title: Uyuni Website Refresh - Accessibility and Responsiveness (#205)

Accessibility/Responsive Issue

Page
Home/landingpage

Description
Alt text is missing on the image tags for the '+' svgs on the accordion section headers

Proposed Solution
This is an interesting one, because there's a couple ways to think about it...
The accordion is already open and displays the description under the title to the user - is the '+' an icon as in, does it convey meaning, or is it decorative.
A '+' would universally be understood as addition, but in the context of a collapsible accordion maybe a 'v' is more informative for 'expand' and '^' for 'collapse would be a better choice.
Or are we trying to build semantic markup.

Solutions
Solution 1 (quick): Give the in the accordions an alt attribute.
Solution 2 (semantic): Pull the tag out of the image, and use aria-hidden (if decorative) and role attributes.

Additional Notes

• Article on font icons/icons and svg for consideration.
• Article on semantics.

Screenshot

Project Title: Uyuni Website Refresh - Accessibility and Responsiveness (#205)

Accessibility Issue

Page
Stable version page
Severity: Warning

Description
Links to a PDF document are present.
Unless authored with accessibility in mind, PDF documents often have accessibility issues. Additionally, PDF documents are typically viewed using a separate application or plug-in, and can thus cause confusion and navigation difficulties.

Because PDF documents may have limitations in accessibility (particularly for complex content) and require a separate program, HTML content should often be used in place of or in addition to the PDF document.

Proposed Solution
Solution: Ensure the PDF document is natively accessible. Additionally, inform the user that the link will open a PDF document by adding a more informative descriptive link text. This can help users understand what to expect when clicking the link.
An example of link text being: "Quick Start Guide (PDF)".

Screenshot

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.

Project Title: Uyuni Website Refresh - Accessibility and Responsiveness (#205)

Accessibility/Responsive Issue

Page
Contact page
Severity: Alert
Impacts: Body content

Description
Heading levels are skipped from H1 to H4, there is no intermediate H2 or H3.

Headings provide document structure and facilitate keyboard navigation by users of assistive technology. These users may be confused or experience difficulty navigating when heading levels are skipped.

Proposed Solution

• Solution 1: Restructure the document headings to ensure that heading levels are not skipped.

Additional Notes

• 1.3.1 Info and Relationships (Level A)
• 2.4.6 Headings and Labels (Level AA)
• G141: Organizing a page using headings

Screenshot

Gitter moved to matrix:

• update the links
• remove old IRC references that are now invalid
  • index.html
  • pages/contact.html
  • pages/devel-version.html
  • pages/faq.html
  • pages/news.html
  • pages/patches.html
  • pages/source-code.html
  • pages/stable-version.html
  • templates/subpage.html

Project Title: Uyuni Website Refresh - Accessibility and Responsiveness (#205)

Accessibility

Page
Contact page
Type: Warning

Description
There are 8 links to another location within the page is present but does not have a corresponding target.

A link to jump to another position within the page assists users in navigating the web page, but only if the link target exists.
A user might be confused when the browser page does not change. In-page links should generally be presented so it is visually and/or contextually apparent that they are in-page link

Proposed Solution
Ensure that the target for the link exists or remove the same-page link.

• Solution 1: Create a permalink that is not a heading with an appropriate aria-label (thus giving it the target a reference)

Additional Notes

• Notes additional

Screenshot

The press release link currently points to http://beta.suse.com/private/uyuni-project/ and not to https://news.opensuse.org/2018/05/26/uyuni-forking-spacewalk-with-salt-and-containers/

Project Title: Uyuni Website Refresh - Accessibility and Responsiveness (#205)

Accessibility/Responsive Issue

Page
Home/landing page

Description
The year is out of date in the footer.
This is not an accessibility or responsive issue - but an update

Proposed Solution

• Solution 1: Bump year from 2023 to 2024

Screenshot