My new blog present here.

Featured Post

Insights into Sitecore Search: A Definitive Introduction

A key component of digital experience management is effective information retrieval. A simplified approach is required for websites, applications, and platforms containing a lot of material so that consumers can easily get the data they require. This need is met by Sitecore, a well-known name in the field of digital experience platforms (DXPs), which provides powerful and comprehensive search functionality. We will travel into the realm of Sitecore Search in this article, learning about its capabilities, architecture , and the enormous value it offers both developers and end users. Introduction to Sitecore Search    A headless content discovery platform powered by AI , Sitecore Search enables you to build predictive and custom search experiences across various content sources. To extract and ...
Post a Comment

Sitecore SXA Web Accessibility Testing: Fix for Sitecore SXA Gallery Video component



Sitecore Experience Accelerator (SXA) Web Accessibility Testing: Fix for Sitecore SXA Gallery Video component

The Web Accessibility of a website is very important NFR and needs to be taken care before going LIVE and best approach is to take care this activity during the development phase, it means developer (HTML mockup and Backend Developer) should include this activity during the development.

There are some web content accessibility guidelines (WCAG) needs to be taken care:
• WCAG 1.0
• WCAG 2.0

Web accessibility guidelines will help in creating the website so that public content of the website accessible to all types of people including people with disabilities via correctly designed, developed and edited website.

In order to make Web Content Accessibility Guidelines (WCAG) compliant website we have to do the Web accessibility testing of website. We can select the web accessibility testing tool as per client need from the available list at Web Accessibility Evaluation Tools List.

 You can also use the Google Chrome browser add-on WAVE Evaluation Tool.

After installation of above add-on restart the Google Chrome browser and access the required web-site and click on the WAVE Evaluation Tool icon beside browser or right click on the page and select WAVE this page: 


In the above screen show, the output of Web accessibility test using the WAVE Evaluation Tool are displaying, which depict: Errors, Alerts, etc….

I have used WAVE Evaluation Tool in the Sitecore XP 9.0 (9.0 rev. 180604 Update-2, SXA 1.7 rev. 180604) Experience Accelerator (SXA) website and some of the error details are:

If you click on the Contrast Option, then it will show you the Contrast related errors:

If you click on the Styles Option, then it will show you the Styling related errors:


With the help of above findings, we can resolve Web accessibility related errors and make site Web Content Accessibility Guidelines (WCAG) compliance.

While doing the Web accessibility testing I found Web accessibility bug in the Sitecore SXA Gallery Video component.

Issue Details: Thumbnail Image for SXA Gallery Video does not contain "alt" attribute in the generated HTML markup.

* In Gallery Component > Gallery Video item added
* In Gallery Video item added the image for "Custom local thumbnail" attribute which having the ALT text also.
But after rendering of image, its not showing the ALT Text for image:

<img width="1000" height="40" style="left: 0px; top: 0px; width: 1000px; height: 40px; display: block; position: absolute; min-height: 0px; max-height: none; min-width: 0px; max-width: none; opacity: 1; transform: translate3d(0px, 0px, 0px);" src="/-/media/Project/Site1/shared/Img1.png">

Fix: The alternate text not showing for the Gallery Video item image is a BUG and for that Sitecore support team provided the fix

1. Backup the /sitecore/media library/Base Themes/Core Libraries/Galleria/galleria-classic-min media attachment;
2. Download the attached galleria-classic-min-fixed.js file:


3. Attach it to the /sitecore/media library/Base Themes/Core Libraries/Galleria/galleria-classic-min item;
On the related Video item, please fill the "Description" field. It will be used for the "alt" attribute of the related Custom Thumbnail image:

Output after applying the fix:

Sitecore Stack Exchange query: Sitecore SXA Gallery Video item Thumbnail Image

Thanks to Peter Prochazka a.k.a chorpo (@Chorpo) for SXA Logo 

Issue Listing:
  • what is web accessibility initiative
  • how to use web accessibility toolbar
  • what is web accessibility and why is it important
  • what are web accessibility guidelines
  • what is web accessibility and usability
  • what is web content accessibility guidelines (wcag) 2.0
  • who benefits from web accessibility
  • what is web accessibility testing
  • web accessibility in html5
Reference:

Comments

Post a Comment

Popular posts from this blog

Sitecore GraphQL Queries

Image
This article will provide the details about Sitecore GraphQL queries usage and how it will be useful in creating Sitecore projects especially Sitecore JSS projects. The topics covered under this Sitecore GraphQL article are: •    Overview of Sitecore GraphQL (GQL) •    Setup GraphQL (GQL) in Sitecore •    Usage of Sitecore GraphQL (GQL) in Sitecore JSS •    GraphQL (GQL) Queries Usage         o   Get an item by path and show field id and name       o   Return the name and value from all fields       o   Get the values of Treelist or Multilist field type       o   Get the template field details with values of current item       o   Get the field values using Aliases       o   Return a specific field with Alias ...
Read more

Sitecore Experience Manager Cloud (XM Cloud) Building blocks

Image
Sitecore Experience Manager Cloud, or XM Cloud is a game-changing force in the field of digital experience management in the age of cloud computing. We must identify the fundamental components that make up this cutting-edge platform in order to fully appreciate its capabilities. Join us as we dissect the fundamental elements that make up the Sitecore Experience Manager Cloud (or XM Cloud) architecture and investigate how they work together to produce a dynamic, scalable, and customized digital experience environment. Sitecore XM Cloud Overview    The SaaS enterprise-ready , cloud-native CMS from Sitecore called the Experience Manager Cloud (XM Cloud) allows for the creation of content only once and delivers it to every channel for exceptional client experiences. Developers and marketers can q...
Read more

Sitecore Experience Edge GraphQL Queries

Image
The Headless development in Sitecore is powered by a layer of services, API endpoints, and rendering SDKs: Services and API endpoints Sitecore Headless Services Sitecore Experience Edge for XM Rendering SDKs Sitecore ASP.NET Rendering SDK Sitecore JavaScript Rendering SDKs (JSS) In this article, we will explore about Sitecore scalable API layer called Sitecore Experience Edge which provides you a Sitecore-hosted GraphQL (GQL) API. With these Edge GraphQL (GQL) endpoint you can build your solution in any language and pull the required content with the help of GraphQL (GQL) . The major GraphQL APIs of Sitecore Experience Edge are: Preview API Delivery API You can check more details about these APIs at Type of Sitecore Experience Edge API . GraphQL is a query language for these APIs t...
Read more