Commit | Code changes |
|---|
add ARIA, lang and title attributes | Add aria-label/ aria-labelledby (WCAG 2.5.3 - Label in Name & WCAG 3.3.2 - Labels or Instructions) to: Select boxes/switches that do not have a label, such as language switch toggle, mini-cart toggle, sorting select box, etc. Input fields that do not have a label, such as search input, promotion code input, order history search filter input, etc. Links that need more information (because they are images or the link is not meaningful enough), such as product comparison status link, recently viewed link, product brand link Non-text content such as star rating on the product detail page (WCAG 1.1.1 - Non-text Content)
Add role="img" and an aria-label to the product rating stars to treat them as a single image instead of individual stars, for example: https://codepen.io/svinkle/pen/oYjoNE. Add aria-haspopup, aria-expanded and aria-controls to elements with collapsible content such as mini-cart or promo code entry (WCAG 4.1.2 - Name, Role, Value). Add aria-required, aria-invalid to form fields (WCAG 3.3.1 - Error Identification) and aria-describedby to form fields with related error test and / or descriptions (WCAG 3.3.2 - Labels or Instructions, based on changes to ngx-formly/bootstrap). Add aria-hidden to prevent content from being read by screen readers, for example the "*" character at required fields and in the legend for the form (* Required field). Add title attribute to buttons only when they are used as an icon: Buttons can be displayed as default buttons icons. The title attribute is only used when the button is displayed as an icon. (WCAG 1.1.1 - Non-text Content). Add the corresponding lang attribute to each language select option in the header language switch (WCAG 3.1.2 - Language of Parts). Change language options to display the full name (e.g., "English") instead of the shortened version (e.g., "EN") in the header language switch (WCAG 2.5.3 - Label in Name). Remove the invalid role="img" attribute from the logo, as its function as a link to the homepage is more important than its graphical meaning (WCAG 4.1.2 - Name, Role, Value). Set a valid id attribute value for collapsible filter elements to fix the Lighthouse error “[aria-*] attributes do not have valid values“ for collapsible filter elements in the sub navigation. Ensure that alert messages with role="alert" are read by screen readers, including those rendered dynamically after REST requests.
|
replace <div role="main"> with <main> element for better semantics (WCAG 2.4.1 - Bypass Blocks) | The <main> element conveys its purpose directly to browsers, screen readers, and other assistive technologies without requiring additional attributes like role="main". Screen readers and assistive technologies natively recognize the <main> element as the page's main content area. Search engines and crawlers prefer semantic elements as they provide better context and meaning about the content of the page.
|
update tab-focus visibility to use browser's default focus styling (WCAG 2.4.7 - Focus Visible) | Fix styling of elements to be tab-focus visible and reset :focus-visible for form elements to use the browser's default tab-focus styling. Enlarge and harmonize dimensions of header elements for uniform focus styling. Fix tab-focus of elements in the sticky header. Fix tabbable elements on product lists (product images and action icons).
|
reorder headings to follow a correct, sequentially-descending hierarchy (WCAG 1.3.1 - Info and Relationships) | Fix Chrome Lighthouse error "Heading elements are not in a sequentially-descending order". Change headline markup (e.g., from <h3> to <h2>) to ensure the correct hierarchical order, and use special CSS classes, such as .h3, to apply the desired styling. . Update ICM Demo Data XML import: Change CMS content pages.
|
adjust colors to meet sufficient contrast ratio requirements (WCAG 1.4.3 - Contrast (Minimum) & WCAG 1.4.11 - Non-text Contrast) | Fix Lighthouse error "Background and foreground colors do not have a sufficient contrast ratio." Update primary color and gray colors, links on dark backgrounds, form elements and input placeholders. Link :hover status does not change the color to prevent contrast issues. Update colors in logo and home screen images, change file type from PNG to SVG for the logo file. Update ICM Demo Data XML import: Changed red promo text inline styling (e.g., "3% off", "free shipping!") from #ff0000 to #cc0000.
|
enlarge touch targets for links (WCAG 2.5.8 - Target Size (Minimum)) | |
ensure links are distinguishable without relying on color alone, update underline behavior (WCAG 2.4.4 - Link Purpose (In Context)) | |
add "Skip to main content" link (WCAG 2.4.1 - Bypass Blocks) | |
add missing <legend>-elements to form fieldsets (WCAG 1.3.1 - Info and Relationships) | |
improve keyboard support (WCAG 2.1.1 - Keyboard) | Make popover elements keyboard-accessible with TAB navigation: Popover elements are focusable using the TAB key and can be shown or hidden with a mouse click or the ENTER/SPACE key. A popover can be dismissed by clicking outside of its area. Exception: For budget bars in My Account, the popover is triggered by hover only.
Improve TAB key navigation in by using ngbDropdown. Fix the country select box to keep tab-focus after selecting a country and ensure operability via arrow keys (WCAG 2.4.7 - Focus Visible): Previously, changing the country caused the entire address form, including the country select box, to be updated/replaced, removing tab focus from the select box. This also removed focus when operating the select box with arrow keys. Now, the form is modified to update every field except the country select box, ensuring tab focus remains even when changing the country.
|
add/enhances attributes for better screen reader support | Add missing aria-labels and titles. More descriptive titles (e.g., infobox edit titles). Remove unnecessary attribute binding (e.g., for titles, alt attributes etc.). Refactor aria-describedBy for form field descriptions and form errors.
|
replace animated buttons by simple icon button | |
add accessible names for dialogs (WCAG 4.1.2 - Name, Role, Value) | |
provide/improve meaningful h1 headings | Separate buttons (e.g., create buttons on list pages) from h1 headings to make them more readable. Add h1 heading (for screen readers only) on homepage. Make sure each page has a h1 heading to give users an overview of the page content.
|
add password reveal button | Add functionality to toggle password visibility for password fields for desktop and larger touch devices. Replace TextInputFieldComponent with PasswordFieldComponent or PasswordNovalidateFieldComponent to provide password-specific functionality. Update error field indicator from "x" to "!" for improved clarity and accessibility.
The implementation follows Microsoft Edge guidelines: The password visibility toggle button remains disabled until the user enters text into the password field. If the focus moves away from the field, the button is disabled again to maintain security. To enable the button once more, the user must delete the contents of the password field. This behavior prevents someone from briefly changing focus to reveal the password if the user leaves the device unattended. The button does not appear when the password field is autofilled.
|
set focus to first invalid form field (WCAG 3.3.1 - Error Identification) | A directive ishFormSubmit has been introduced for form HTML elements to set the focus automatically on the first invalid form field after form submit. The form components have been refactored. After form submission, the markAsDirtyRecursive method is no longer called for Formly forms. The button is disabled using the submitted property from a corresponding FormGroupDirective, which defines a variable #form="ngForm" at the form HTML element.
|
sticky header feature toggle | |
