Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-132234

As a content manager, I want to know the detail of the failing elements affecting my page

    XMLWordPrintable

    Details

      Description

      Design

      https://www.figma.com/file/I0BImwTEY740kKEseduLU5/LPS-111803-Page-audit-check-one-page-issues?node-id=253%3A6600

      Requirements

       1 There will be a section "Failing elements" in the detail view of every check
       2 It will show a list of elements that have been given back by the API. The number of elements will appear next to the Failing elements title and it has to coincide with the number in the first level list.
      3. There will be a Show more button every 10 failing elements. It will show 10 more items each time it is clicked. There is no show less.
      4. Failing elements will be ordered as given back by the API
      5. Limit of failing elements shown. The number of failing elements shown will be 100. When surpassing that number, a message will show above of the elements' list: "There are more than 100 elements to fix"

      Checks details:

      ACCESSIBILITY    
      1 Retrieve check for color-contrast
      • There can be several issues
      • Title: Low contrast ratio
      • There will be a general description coming from the API: Background and foreground colors do not have a sufficient contrast ratio. Low contrast ratio is difficult or impossible for many users to read. Learn more about Low contrast ratio [link to https://web.dev/color-contrast/ ]
      • There will be a “Tips” text to contextualize the possible solutions: Text that is 18 pt, or 14 pt and bold, needs a contrast ratio of 3:1. All other text needs a contrast ratio of 4.5:1. Contrast between colors may be defined in the style book, the page / fragment template or the fragment itself.
      • Failing elements: They will be titled as Failing Element 1, 2, 3, n... Body: Fix any of the following: Element has insufficient color contrast of 3.4 (foreground color: #858C94, background color: #FFFFFF, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1
      2 Retrieve check for missing image-alt
      • There can be several issues
      • Title: Missing img-alt attributes
      • There will be a general description coming from the API: Image elements do not have [alt] attributes. Informative elements should aim for short, descriptive alternate text. Learn more about Missing img-alt attributes [link to https://web.dev/image-alt/ ]
      • “Tips” text: Image-alt attributes can be added both in the web content and the fragment editors.
      • Failing elements: 
        • They will be titled as Failing Element 1, 2, 3, n... 
        • They will list all inputs where there are missing alt texts
        • Each failing element will show the <img src> snippet
      3 Retrieve check for input-image-alt
      • There can be several issues
      • Title: Missing input-alt attributes
      • Description coming from the API: <input type="image"> elements do not have [alt] text. When an image is being used as an <input> _button, providing alternative text helps users of screen readers and other assistive technologies understand the purpose of the button. Learn more about Missing input-alt attributes [link to_ https://web.dev/input-image-alt/ ]
      • “Tips” text: Input-alt attributes can be added in the fragment editor.
      • Failing elements:
        • They will be titled as Failing Element 1, 2, 3, n... 
        • They will list all images where there are missing alt texts
        • Each failing element will show the <input type="image" src=URL"> snippet
      SEO    
      4 Retrieve check for image-aspect-ratio
      • There can be several issues.
      • Title: Incorrect image aspect ratios.
      • Description coming from the API: Page displays images with incorrect aspect ratio. If a rendered image has an aspect ratio that's significantly different from the aspect ratio in its source file (the natural aspect ratio), the rendered image may look distorted, possibly creating an unpleasant user experience. Learn more about Incorrect image aspect ratios. [link to https://web.dev/image-aspect-ratio/ ]
      • There will be a “Tips” text to contextualize the possible solutions: Image aspect ratio can be caused by a fixed height&width in the template that doesn’t fit the original image’s ratio.
      • Failing elements:
        • They will be titled as Failing Element 1, 2, 3, n... 
        • They will show all images with aspect ratio issues, and all occurrences of the same image where there are aspect ratio issues
        • Each failing element will show the URL of the image (source file), the Displayed Aspect Ratio and the Actual Aspect Ratio
      5  Retrieve Check for meta-description
      • Single issue.
      • Title: Missing meta-description
      • There will be a general description coming from the API: Page does not have a meta description. The meta description provides a summary of a page's content that search engines include in search results. A high-quality, unique meta description makes your page appear more relevant and can increase your search traffic. Learn more about Missing meta-description [link to https://web.dev/meta-description/ ]
      • There will be a “Tips” text to contextualize the possible solutions: Meta-description can be added in the Configuration section of this page.
      • Failing elements will show a message: Add a meta-description from the Configuration section of this page. When the user has permissions to edit the configuration, the message will be a link to the SEO tab in the configuration page.|_
        |6|Retrieve Check for link-text| * There can be several issues.
        * Title:Link texts
        * Description coming from the API:Link text is the clickable word or phrase in a hyperlink. When link text clearly conveys a hyperlink's target, both users and search engines can more easily understand your content and how it relates to other pages. Learn more      about Link texts [link to https://web.dev/link-text/ ]
        * “Tips” text: Make link texts more descriptive by avoiding click here (italic), click this or learn more like expressions.
        * Failing elements:
        ** They will be titled as the link text if possible. If not, as_Failing Element 1, 2, 3, n..._ 
        ** They will show the link text and the link destination URL|
        |7|Retrieve Check for is-crawlable| * Single issue.
        * Title: Page blocked from indexing.
        * There will be a general description coming from the API: _Search engines are unable to include your page in search results if they don’t have permission to crawl it. Only block indexing for content that you don't want to appear in search results. Learn more about Page blocked from indexing. [link to https://web.dev/is-crawable/ ]
      • “Tips” text: "noindex" specification for robots can be changed in the Configuration section of this page.
      • Failing elements will show a message: Change the robots.txt setting from the Configuration section of this page. When the user has permissions to edit the configuration, the message will be a link to the SEO tab in the configuration page.
      8 Retrieve check for hreflang
      • Single issue.
      • Title: Invalid hreflang
      • Description: Many sites provide different versions of a page based on a user's language or region. hreflang links tell search engines the URLs for all the versions of a page so that they can display the correct version for each language or region. Learn more about Invalid hreflang [link to https://web.dev/hreflang/ ]
      • “Tips” text: In a Liferay site, hreflang links are automatically generated. If it's missing or invalid, the issue could be originated by the theme or in the OpenGraph extension point.
      • Failing elements:
        • The incorrect hreflang links, as for example: 
        • Failing element 1: <link rel="alternate" hreflang="en" href="https://example.com" />
          Failing element 2: <link rel="alternate" hreflang="es" href="https://es.example.com" />
          Failing element 3: <link rel="alternate" hreflang="de" href="https://de.example.com" />
      9 Retrieve check for canonical
      • Single issue.
      • Title: Invalid canonical URL
      • Description: When multiple pages have similar content, search engines consider them duplicate versions of the same page. Valid canonical links let you tell search engines which version of a page to crawl and display to users in search results. Learn more about Invalid canonical URL [link to https://web.dev/canonical/ ]
      • “Tips” text: In a Liferay site, canonical URLs are automatically generated. If it's missing, the issue could be originated by the theme. If the problem is that it doesn't match the URL of the page, you can change the configuration for using localized canonical URLs from Instance settings > Pages > SEO. 
      • Failing elements:
        • The incorrect canonical URL
        • Help text: If the problem is that the canonical URL doesn't match the URL of the page, try changing the configuration for using localized canonical URLs from Instance settings > Pages > SEO. When the user has permissions to edit the configuration, the message will be a link to the SEO tab in the Pages section in Instance settings.
      10 Retrieve check for font-size (single issue?)
      • Single issue.
      • Title: Illegible font sizes
      • Description: Many search engines rank pages based on how mobile-friendly they are. _Font sizes smaller than 12 px are often difficult to read on mobile devices and may require users to zoom in to display text at a comfortable reading size. Learn more about I_llegible font sizes_ [link to_ https://web.dev/font-size/ ]
      • Tips: This issue occurs when 60% or more of the text has a font size smaller than 12 px. Check set font sizes in the web content editor, the fragment, the template or the style book to find the rule that is causing the illegible text.
      • Failing elements:
        • Each failing element will show the size of the illegible font and the percentage of text it covers
      11 Retrieve check for tap-targets
      • Several issues.
      • Title: Small tap targets
      • Description: Tap targets are the areas of a web page that users on touch devices can interact with. Buttons, links, and form elements all have tap targets. Making sure tap targets are big enough and far enough apart from each other makes your page more mobile-friendly and accessible. Learn more about Small tap targets_ [link to_ https://web.dev/tap-targets/ ]
      • Tips: Targets that are smaller than 48 px by 48 px or closer than 8 px apart fail the audit, so make sure your layout respects these rules.
      • Failing elements:
        • They will be titled with the name of the node or, if not possible, as_Failing Element 1, 2, 3, n..._ 
        • They will show the tap target snippet, size and Overlapping Target if there is one
      12 Check for document-title*
      • Single issue.
      • Title: Missing <title> element
      • Description: Search engine users rely on the title to determine whether a page is relevant to their search. It also gives users of screen readers and other assistive technologies an overview of the page. Learn more about Missing <title> element [link to https://web.dev/document-title/ ]
      • Tips: <Title> element is automatically generated from the asset Title, but you can change it in the Configuration section of this page.
      • Failing elements will show a message: Add a title from the Configuration section of this page. When the user has permissions to edit the configuration, the message will be a link to the SEO tab in the configuration page.
      13 Check for crawlable-anchors*
      • Several issues.
      • Title: Not all links are crawlable
      • Description: Search engines may use 'href' attributes on links to crawl websites. Learn More about Not crawlable links [https://support.google.com/webmasters/answer/9112205]
      • Tips: Google can follow links only if they are an <a> tag with an href attribute. Ensure that the links have this format: <a href="https://example.com"> and link to an appropriate destination, so more pages of the site can be discovered.
      • Failing elements:
        • They will be titled as Failing element 1, 2, 3, n...
        • They will show the link snippet with its current form

       Acceptance Criteria

      Requirements
             		 Acceptance Criteria
             		 Test Strategy
             		 Covered by frontend / backend test? (Yes/No)
       
      There will be a section "Failing elements" in the detail view of every check
      • Given the page audit panel 
      • When the users access the detail view
      • Then they can see a section Failing elements below the Tips one
      		 Low  NO
      It will show a list of elements that have been given back by the API. The number of elements will appear next to the Failing elements title and it has to coincide with the number in the first level list.
      • Given the page audit panel 
      • When the users access the detail view
      • Then they can see as the list of failing elements that the API has given back for that issue, and the number of them coinciding with the number in the first level of the panel
      		 Medium YES
      There will be a Show more button every 10 failing elements. It will show 10 more items each time it is clicked. There is no show less.
      • Given the page audit panel detail view
      • When there are more than 10 failing elements for a single issue
      • Then the users can see a Show more button every 10 failing elements, and when they click on it another 10 elements are displayed
      		 Medium  NO
      Failing elements will be ordered as given back by the API      NO
      Checks under the Accessibility and SEO sections
      • Given the detail view of the page audit panel
      • Then the checks related to Low contrast ratio, Missing image-alt and Missing input-image-alt will appear under the Accessibility section
      		 Medium NO 
       
      • Given the detail view of the page audit panel
      • Then the checks related to Incorrect image-aspect-ratio, Missing meta-description, Invalid Hreflang, Invalid canonical URL, Illegible font sizes, Small tap targets, Missing <title> element and Crawlable-anchors will appear under the SEO section
      		 Medium NO 
       Low contrast ratio check  
      • Given the page audit panel detail view
      • When there are texts on the page with insufficient contrast ratio
      • Then the users will see the matching failing elements, with its current ratio, foreground color code, background color code, font size, font weight and expected ratio
      		 High NO
          * Given the page audit panel detail view for low contrast ratio
      • When the user display the Description section
      • Then There will be a general description coming from the API: Background and foreground colors do not have a sufficient contrast ratio. Low contrast ratio is difficult or impossible for many users to read. Learn more about Low contrast ratio [link to https://web.dev/color-contrast/ ]
      		 Low NO
          * Given the page audit panel detail view for low contrast ratio
      • When the user display the Tips section
      • Then There will be a “Tips” text to contextualize the possible solutions: Text that is 18 pt, or 14 pt and bold, needs a contrast ratio of 3:1. All other text needs a contrast ratio of 4.5:1. Contrast between colors may be defined in the style book, the page / fragment template or the fragment itself.
      		 Low NO
      Missing image-alt check
      • Given the page audit panel detail view
      • When there are images on the page with no alt text
      • Then the users will see the matching failing elements, and the current code snippet 
      		 High  NO
       
      • Given the page audit panel detail view for Missing image-alt check
      • When the user display the Description section
      • Then There will be a general description coming from the API: Image elements do not have [alt] attributes. Informative elements should aim for short, descriptive alternate text. Learn more about Missing img-alt attributes [link to https://web.dev/image-alt/ ]
      		 Low NO
       
      • Given the page audit panel detail view for Missing image-alt check
      • When the user display the Tips section
      • Then There will be a text: Image-alt attributes can be added both in the web content and the fragment editors.
      		 Low NO
      Missing input-image-alt check
      • Given the page audit panel detail view
      • When there are input-type images on the page with no alt text
      • Then the users will see the matching failing elements, and the current code snippet 
      		 High  NO
       
      • Given the page audit panel detail view for Missing input-image-alt check
      • When the user display the Description section
      • Then There will be a general description coming from the API: <input type="image"> elements do not have [alt] text. When an image is being used as an <input> _button, providing alternative text helps users of screen readers and other assistive technologies understand the purpose of the button. Learn more about Missing input-alt attributes [link to_ https://web.dev/input-image-alt/ ]
      		 Low NO
       
      • Given the page audit panel detail view for Missing image-alt check
      • When the user display the Tips section
      • Then There will be a text: Input-alt attributes can be added in the fragment editor.
      		 Low NO
      Incorrect image-aspect-ratio
      • Given the page audit panel detail view
      • When there are images on the page with a displayed ratio different from the actual one
      • Then the users will see the matching failing elements, with its source link and the occurrences separately, and the Displayed Aspect Ratio and the Actual Aspect Ratio  for each one of them
      		 High NO 
       
      • Given the page audit panel detail view for Incorrect image-aspect-ratio check
      • When the user display the Description section
      • Then There will be a general description coming from the API: Page displays images with incorrect aspect ratio. If a rendered image has an aspect ratio that's significantly different from the aspect ratio in its source file (the natural aspect ratio), the rendered image may look distorted, possibly creating an unpleasant user experience. Learn more about Incorrect image aspect ratios. [link to https://web.dev/image-aspect-ratio/ ]
      		 Low NO
       
      • Given the page audit panel detail view for Incorrect image-aspect-ratio check
      • When the user display the Tips section
      • Then There will be a text: Image aspect ratio can be caused by a fixed height&width in the template that doesn’t fit the original image’s ratio.
      		 Low NO
      Missing meta-description check
      • Given the page audit panel detail view and a user with permissions for editing the page
      • When there is no meta description for the page
      • Then the users will see a text with a link to the configuration section: Add a meta-description from the Configuration section of this page.
      		 High  NO
       
      • Given the page audit panel detail view for Incorrect Missing meta-description check
      • When the user display the Description section
      • Then There will be a general description coming from the API: Page does not have a meta description. The meta description provides a summary of a page's content that search engines include in search results. A high-quality, unique meta description makes your page appear more relevant and can increase your search traffic. Learn more about Missing meta-description [link to https://web.dev/meta-description/ ]
      		 Low NO
       
      • Given the page audit panel detail view for Missing meta-description check
      • When the user display the Tips section
      • Then There will be a text: Meta-description can be added in the Configuration section of this page.
      		 Low NO
       
      • Given the page audit panel detail view and a user with NO permissions for editing the page
      • When there is no meta description for the page
      • Then the users will see a text: Add a meta-description from the Configuration section of this page.
      		 High NO
      Page Blocked from Indexing check
      • Given the page audit panel detail view and a user with permissions for editing the page
      • When the page is blocked from indexing
      • Then the users will see a text with a link to the configuration section: Change the robots.txt setting from the Configuration section of this page.
      		 High  NO
       
      • Given the page audit panel detail view for Page Blocked from Indexing check
      • When the user display the Description section
      • Then There will be a general description coming from the API: Search engines are unable to include your page in search results if they don’t have permission to crawl it. Only block indexing for content that you don't want to appear in search results. Learn more about Page blocked from indexing. [link to https://web.dev/is-crawable/ ]
      		 Low NO
       
      • Given the page audit panel detail view for Page Blocked from Indexing check
      • When the user display the Tips section
      • Then There will be a text: "noindex" specification for robots can be changed in the Configuration section of this page.
      		 Low NO
       
      • Given the page audit panel detail view and a user with NO permissions for editing the page
      • When the page is blocked from indexing
      • Then the users will see a text: Change the robots.txt setting from the Configuration section of this page.
      		 High NO
      Link texts
      • Given the page audit panel detail view and a user with permissions for editing the page
      • When  the link texts are not title as the link text
      • Then the users will see the link text and the link destination URL
      		 High  NO
       
      • Given the page audit panel detail view for Link texts check
      • When the user display the Description section
      • Then There will be a general description coming from the API: Link text is the clickable word or phrase in a hyperlink. When link text clearly conveys a hyperlink's target, both users and search engines can more easily understand your content and how it relates to other pages. Learn more_      about Link texts_ [link to https://web.dev/link-text/ ]
      		 Low NO
       
      • Given the page audit panel detail view for Link texts check
      • When the user display the Tips section
      • Then There will be a text: Make link texts more descriptive by avoiding click here (italic), click this or learn more like expressions.
      		 Low NO
      Invalid __ hreflang check
      • Given the page audit panel detail view and a user with permissions for editing the page
      • When the page has any invalid hreflang link 
      • Then the users will see the matching failing elements, with the incorrect hreflang links
      		 High NO 
       
      • Given the page audit panel detail view for Invalid hreflang check
      • When the user display the Description section
      • Then There will be a general description coming from the API: Many sites provide different versions of a page based on a user's language or region. hreflang links tell search engines the URLs for all the versions of a page so that they can display the correct version for each language or region. Learn more about Invalid hreflang [link to https://web.dev/hreflang/ ]
      		 Low NO
       
      • Given the page audit panel detail view for Invalid hreflang check
      • When the user display the Tips section
      • Then There will be a text: In a Liferay site, hreflang links are automatically generated. If it's missing or invalid, the issue could be originated by the theme or in the OpenGraph extension point.
      		 Low NO
       Invalid canonical URL check  
      • Given the page audit panel detail view and a user with permissions to edit Instance Settings
      • When there is no canonical URL, or it doesn't coincide with the page's URL
      • Then the users will see the invalid canonical URL, and a text with a link to the instance settings: If the problem is that the canonical URL doesn't match the URL of the page, try changing the configuration for using localized canonical URLs from Instance settings > Pages > SEO. 
      		 High NO 
       
      • Given the page audit panel detail view for Invalid canonical URL check
      • When the user display the Description section
      • Then There will be a general description coming from the API: When multiple pages have similar content, search engines consider them duplicate versions of the same page. Valid canonical links let you tell search engines which version of a page to crawl and display to users in search results. Learn more about Invalid canonical URL [link to https://web.dev/canonical/ ]
      		 Low NO
       
      • Given the page audit panel detail view for Invalid canonical URL check
      • When the user display the Tips section
      • Then There will be a text: In a Liferay site, canonical URLs are automatically generated. If it's missing, the issue could be originated by the theme. If the problem is that it doesn't match the URL of the page, you can change the configuration for using localized canonical URLs from Instance settings > Pages > SEO.
      		 Low NO
       
      • Given the page audit panel detail view and a user with NO permissions to edit Instance Settings
      • When there is no canonical URL, or it doesn't coincide with the page's URL
      • Then the users will see the invalid canonical URL, and a text: If the problem is that the canonical URL doesn't match the URL of the page, try changing the configuration for using localized canonical URLs from Instance settings > Pages > SEO. 
      		 High  NO
      Illegible font sizes check
      • Given the page audit panel detail view
      • When there is more than the 60% of the texts on the page with insufficient font sizes
      • Then the users will see the matching failing elements, with the size of the illegible font and the percentage of text it covers
      		 High  NO
       
      • Given the page audit panel detail view for Illegible font sizes check
      • When the user display the Description section
      • Then There will be a general description coming from the API: Many search engines rank pages based on how mobile-friendly they are. Font sizes smaller than 12 px are often difficult to read on mobile devices and may require users to zoom in to display text at a comfortable reading size. Learn more about I_llegible font sizes [link to_ https://web.dev/font-size/ ]
      		 Low NO
       
      • Given the page audit panel detail view for Illegible font sizes check
      • When the user display the Tips section
      • Then There will be a text: This issue occurs when 60% or more of the text has a font size smaller than 12 px. Check set font sizes in the web content editor, the fragment, the template or the style book to find the rule that is causing the illegible text.
      		 Low NO
      Small tap targets check
      • Given the page audit panel detail view
      • When there tap targets on the page that are too small or are overlapping with others
      • Then the users will see the matching failing elements, with the tap target snippet, size and Overlapping Target if there is one
      		 High  NO
       
      • Given the page audit panel detail view for Small tap targets check
      • When the user display the Description section
      • Then There will be a general description coming from the API: Tap targets are the areas of a web page that users on touch devices can interact with. Buttons, links, and form elements all have tap targets. Making sure tap targets are big enough and far enough apart from each other makes your page more mobile-friendly and accessible. Learn more about Small tap
      		 Low NO
       
      • Given the page audit panel detail view for Small tap targets check
      • When the user display the Tips section
      • Then There will be a text: Targets that are smaller than 48 px by 48 px or closer than 8 px apart fail the audit, so make sure your layout respects these rules.
      		 Low NO
      Missing <title> element check
      • Given the page audit panel detail view and a user with permissions for editing the page
      • When there is no title for the page
      • Then the users will see a text with a link to the configuration section: Add a title from the Configuration section of this page.
      		 High  NO
       
      • Given the page audit panel detail view for Missing <title> element check
      • When the user display the Description section
      • Then There will be a general description coming from the API: Search engine users rely on the title to determine whether a page is relevant to their search. It also gives users of screen readers and other assistive technologies an overview of the page. Learn more about Missing <title> element [link to https://web.dev/document-title/ ]
      		 Low NO
       
      • Given the page audit panel detail view for Missing <title> element check
      • When the user display the Tips section
      • Then There will be a text: <Title> element is automatically generated from the asset Title, but you can change it in the Configuration section of this page.
      		 Low NO
      Crawlable-anchors check
      • Given the page audit panel detail view
      • When there links on the page that are not formatted with the a href attributes or have invalid target URLs
      • Then the users will see the matching failing elements, with current link snippet
      		 High  NO
       
      • Given the page audit panel detail view for Crawlable-anchors check
      • When the user display the Description section
      • Then There will be a general description coming from the API: Search engines may use 'href' attributes on links to crawl websites. Learn More about Not crawlable links https://support.google.com/webmasters/answer/9112205
      		 Low NO
       
      • Given the page audit panel detail view for Crawlable-anchors check
      • When the user display the Tips section
      • Then There will be a text: Google can follow links only if they are an <a> tag with an href attribute. Ensure that the links have this format: <a href="https://example.com"> and link to an appropriate destination, so more pages of the site can be discovered.
      		 Low NO

       

        Attachments

          Issue Links

          is duplicated by

          Story - Created by Jira Software - do not edit or delete. Issue type for a user story. LPS-127672 As a content manager, I want to know which SEO issues my page has

          • Minor - Minor loss of function, or other problem where easy workaround is present.
          • Closed
          is related to

          Technical Testing - LPS-138206 Test automation related to LPS-132234: 'As a content manager, I want to know the detail of the failing elements affecting my page'

          • Minor - Minor loss of function, or other problem where easy workaround is present.
          • Closed
          mentioned in

          Page Loading...

          Page Loading...

            Activity

              People

              Assignee:
              support-qa Support QA
              Reporter:
              julia.molano Julia Molano
              Engineering Assignee:
              SE Support
              Recent user:
              Sophia Zhang
              Participants of an Issue:
              Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  Packages

                  Version Package
                  7.4.2 CE GA3 DXP 7,4
                  7.4.13 DXP GA1
                  Master