Sometimes you want to find pages on your site that contain specific HTML elements, or elements that are required to be structured a certain way.
This can in some instances be done using regular expressions set up by our dedicated Siteimprove team, but many cases they can be extremely hard to address.
Therefore, based on user-cases put forward to us by Policy customers, we are introducing a new rule within the Content category - CSS Selector.
If your requirements, or those of your customers, can be expressed as a CSS selector this is for 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 what can be done
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 the body of the page that don't 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 of course 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: