| |
Requirement
|
Specifications
|
| 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. |
|
| 1.1 |
Only those checks with failing elements retrieved will appear on the list. |
|
| 2. |
Clicking on the matching line will lead to the detail level. (Titles for checks are specified in the next requirements) |
|
| 3. |
All checks in the detail view will have 4 sections: Title, Description, Tips and list of failing elements. |
|
| 4. |
Fields for description and tips will be collapsable and they will be collapsed by default. |
|
| 5. |
Checks details: |
|
| 5.1 |
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 [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.
- List of failing elements
|
| 5.2 |
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 [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.
|
| 5.3 |
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 [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.
- List of failing elements
|
| 5.4 |
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. I want to know more [link to https://web.dev/is-crawable/ ]
- “Tips” text: "noindex" specification for robots can be changed in the Configuration section of this page.
|
| 5.5 |
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. I want to know 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.
|
| 5.6 |
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. I want to know 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.
|
| 5.7 |
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. I want to know 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.
|
| 5.8 |
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. I want to know 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.
|
| 5.9 |
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. I want to know 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.
|
| 5.10 |
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 [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.
|
| 6. |
There will be a Show more link every 10 failing elements |
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. |
When there are more than 100 failing elements retrieved, a message will be shown |
Showing up to 100 elements to fix. |
Story
Minor