Picto thématique

Rule n° 183 - Content generated via styles is provided with a suitable alternative.

Some CSS instructions to display text and images that are actually invisible to users and tools that do not support style sheets. For example, if deactivated colors or CSS, a CSS file (background-image property) will not be visible when a HTML element (<img> element) would have been.

#Presentation #Development #SEO

Goal

  • Ensure access to the content, regardless of whether or not the CSS formatting layer is handled.
  • Allow content to be reused on media and platforms that do not handle formatting for on-screen display.
  • Give users in environments where styles are
  • not reproduced (text browsers, screen readers or browsers with the images disabled) access to information that takes the form of CSS-generated content (particularly background images).
  • Enable bots to exploit the information carried by CSS styles (to reference, index and perform machine translation on the alternatives).
  • Improve the way content is taken into account by search engines and indexing tools.
  • Improve the accessibility of content for people with disabilities.

Implementation

Provide hidden content for display via CSS:

  • for all information carried by the CSS background-image or content properties;
  • for all information displayed via a CSS pseudo-element: before or: after;
  • and more generally, for all information also missing on the page and which uses styles support in order to be rendered.

Find out more:

Control

Directly examine the CSS code and visually compare the normal display of the page with its rendering after disabling the background images. For each page:
  • Display the style sheets using a dedicated toolbar and check that the properties and elements mentioned in the “Technical solution” paragraph are absent from the CSS or are not used to produce information otherwise absent from the HTML code.
  • Disable CSS background images with a dedicated toolbar.
  • Check that there is no loss of information, by comparing the display with and without background images.

By Opquast - Read the license

Business application and benefits

The rules should be applied to your projects from the design phase through to post-implementation , and they should be understood by all professionals with web and customer experience (CX) responsibilities: from strategy to operations, marketers to project managers, and editorial to technical staff. The benefits of using this ruleset are numerous, including improving customer satisfaction, web performance, and e-commerce, and expanding your client base, while also decreasing your errors and costs.

Multidisciplinary verticles - accessiiblity, SEO, e-commerce, ecodesign etc..- starting from the foundational Opquast base.

The objective of these rules and the Opquast community mission is ‘making the web better’ for your customers and for everyone! Opquast rules cover the key major areas of risk that can negatively affect website users such as privacy, ecodesign, accessibility and security.

Opquast training has already allowed over 11,000 web professionals to have their skills certified. Train your teams or your students, contact us