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

As a content manager, I want to know which Accessibility and SEO issues my page has, and how to fix them

    Details

    • Sprint:
      TANGO | #54 DIS | Feb05-Feb19, TANGO | #55 DIS | Feb19-Mar05, TANGO | #56 DIS | Mar05-Mar19, TANGO | #60 DEV | Apr30-May14, TANGO | #61 DEV | May14-Jun04, TANGO | #62 DEV | Jun04-Jun25

      Description

      Motivation

      Accessibility checks provided by PageSpeed can help content authors & marketers to be compliant with accessibility standards (WCAG 2.1)

      Design

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

      Technical Requirements

       

        Requirement
       
      Specifications
       
      1.  When displaying the sections Accessibility and SEO in the Page Audit panel, a list of checks and number of failing elements for each one will be shown.  
      1.1 Accessibility and SEO sections will be open by default  
       2 Only those checks with failing elements retrieved will appear on the list.  
       3. Clicking on the matching line will lead to the detail level.   
       4. All checks in the detail view will have 4 sections: Title, Description, Tips and list of failing elements.  
      5. Fields for description and tips will be collapsable and they will be collapsed by default.  
      6. There will be a Show more button every 10 failing elements, that will turn into Show less when clicked It will show 10 more items each time it is clicked. There is no show less.
      7. Failing elements will be ordered as given back by the API  -- 
      8. 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"
      9. Each section will show the following texts for each one of the issues. List of Titles, Descriptions and Tips:  
      9.1 Retrieve check for color-contrast
      • Title: Low contrast ratio
      • Description: 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 [link to https://web.dev/color-contrast/ ]
      • Tips: 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:1Contrast between colors may be defined in the style book, the page / fragment template or the fragment itself.
      9.2 Retrieve check for missing image-alt
      • Title: Missing img-alt attributes
      • Description: Image elements do not have [alt] attributes. Informative elements should aim for short, descriptive alternate text. Learn more [link to https://web.dev/image-alt/ ]
      • “Tips” text: Image-alt attributes can be added both in the web content and the fragment editors.
      9.3 Retrieve check for input-image-alt
      • Title: Missing input-alt attributes
      • Description: <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 [link to_ https://web.dev/input-image-alt/ ]
      • “Tips” text: Input-alt attributes can be added in the fragment editor.
      SEO    
      9.4 Retrieve check for image-aspect-ratio
      • Title: Incorrect image aspect ratios.
      • Description: 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 [link to https://web.dev/image-aspect-ratio/ ]
      • Tips: Image aspect ratio can be caused by a fixed height&width in the template that doesn’t fit the original image’s ratio.
      9.5  Retrieve Check for meta-description
      • Title: Missing meta-description
      • Description: 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 [link to https://web.dev/meta-description/ ]
      • Tips: Meta description can be added in the Configuration section of this page.
      9.6 Retrieve Check for link-text
      • Title: Link texts
      • Description: 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 [link to https://web.dev/link-text/ ]
      • “Tips” text: Make link texts more descriptive by avoiding click here, click this or learn more like expressions.
      9.7 Retrieve Check for is-crawlable
      • Title: Page blocked from indexing.
      • Description: 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 [link to https://web.dev/is-crawable/ ]
      • “Tips” text: "noindex" specification for robots can be changed in the Configuration section of this page.
      9.8 Retrieve check for hreflang
      • 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 [link to https://web.dev/hreflang/ ]
      • “Tips” text: In a Liferay site, hreflang links are automatically generated. If it's missing, the issue could be originated by the theme or in the OpenGraph extension point.
      9.9 Retrieve check for canonical
      • 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 [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.
      9.10 Retrieve check for font-size (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 [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.
      9.11 Retrieve check for tap-targets
      • 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 [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.
      9.12 Check for document-title*
      • 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 [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.
      9.13 Check for crawlable-anchors*
      • Title: Not all links are crawlable
      • Description: Search engines may use 'href' attributes on links to crawl websites. Learn More [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.

       Acceptance Criteria

       

      Requirements
       
      Acceptance Criteria
       
      Test Strategy
       
      Covered by frontend / backend test? (Yes/No)
       
      1. When displaying the section Accessibility in the Page Audit panel, a list of checks and number of failing elements for each one will be shown.
      • Given the page audit panel
      • When the users display the Accessibility section
      • Then they can see a list of checks and number of failing elements
      Medium  Yes
       
      • Given the page audit panel
      • When the users display the SEO section
      • Then they can see a list of checks and number of failing elements
      Medium  Yes
      1.1. Accessibility and SEO sections will be open by default
      • Given the page audit panel
      • Then the Accessibility section is open by default
      Low  Yes
       
      • Given the page audit panel
      • Then the SEO section is open by default
      Low  Yes
      2 Only those checks with failing elements retrieved will appear on the list.  
      •  Given the list of checks of the Accessibility section
      • Then only those checks with failing elements retrieved appear
      High  Yes
         
      •  Given the list of checks of the SEO section
      • Then only those checks with failing elements retrieved appear
      High  Yes
      3 Clicking on the matching line will lead to the detail level.   
      • Given the page audit panel
      • When the users click on any element of the list of checks
      • Then they navigate to the detail view of that issue
      High No 
      4 All checks in the detail view will have 4 sections: Title, Description, and Tips.
      5 Fields for description and tips will be collapsable and they will be collapsed by default.
      • Given the page audit panel
      • When the users access the second level
      • Then they can see the title of the issue, the description and tips sections
      Medium  No
       
      • Given the page audit panel
      • When the users access the second level
      • Then the description and tips sections are collapsed by default 
      Low  No
      9 Titles, Descriptions and Tips sections will show the matching texts for each one of the issues. 
      • Given the detail view of the page audit panel
      • Then the users can see the title of the issue and the matching description and tips texts
      High  No

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              support-qa Support QA
              Reporter:
              julia.molano Julia Molano
              Engineering Assignee:
              Alejandro Tardín
              Recent user:
              Susana Vázquez
              Participants of an Issue:
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  Packages

                  Version Package
                  Master