Siteimprove Policy can help users to find pages on that contain specific HTML elements, or elements that are required to be structured a certain way.
This can be done using regular expressions set up by our dedicated Siteimprove team, or in some cases with CSS selectors.
Based on user-cases put forward to us by Policy customers, we introduced the CSS Selector Content category in Policy.
If the content you wish to highlight can be expressed as a CSS selector the information below will be of use to you.
About CSS selectors
CSS selectors are short expressions that are matched against each page on the website. If the CSS selector matches one or more elements the page will be considered a violation of the policy.
If you're not familiar with basic CSS selectors there are plenty of online guides that explain the concepts:
We support CSS2, CSS3 and some jQuery selector extensions. The full set we support is described here: https://github.com/jamietre/CsQuery#features
Since we're so closely aligned to the selectors supported by jQuery, an easy way of creating and testing selectors is to try it in your browser in the context of the website (if you have jQuery on the site).
Examples of possible matches using CSS selectors
Find all pages with <meta name="og:title"...>
Find all external links that don't open in a new window/tab
This will only match links going to HTTP or HTTPS and then filter those out pointing to your own domain.
Find any instance of Bold (font-weight: bold)
(*) is being used to target all page elements. NOTE: This will not take rules defined in the stylesheets.
Find links within the body of the page that do not have a title attribute, where 'mailto' links are excluded
Find all meta tags named 'og:title' where content attribute contains the company name
Be aware of the different types of attribute selectors available. Check the documentation links above for the details.
Find all images with an explicit width
This will verify that the attribute exists, but not that it has a value.
Find all images without an explicit width
Find all images without an explicit width or a width in the style attribute
Find all hidden H1s
This is a jQuery extension. It'll find H1s that are explicitly hidden, or that are contained in an element that is explicitly hidden. This won't take stylesheet rules into account, it will only consider style attributes on the page.
Find all pages that have a form in the main content area
This will have to be tailored to the specific website. ID selectors are usually quite specific to a particular website.
Find all H1 headings containing a specific word
Be aware that this is case-sensitive. To work around this you'll have to use multiple selectors: