| |
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:1. Contrast 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.
|
Story
Minor
LPS-135376 Test automation for "As a content manager, I want to know which Accessibility and SEO issues my page has, and how to fix them"