Goal
- Allow users in environments where images are not seen (text browsers, screen readers or browsers with the images disabled)
- Understand the meaning of the images that they cannot see.
- Enable bots to exploit the information carried by the images (to reference, index and perform machine translation on the image text alternatives).
- Enable the display of relevant text while images are loading.
- Improve the accessibility of content for people with disabilities.
- Improve the way content is taken into account by search engines and indexing tools.
Implementation
- Give each img element concerned an alt attribute reproducing the information
- Give each area element concerned an alt attribute reproducing the information
- Reproduce the information in the content of each object element concerned
- Reproduce the information in the content of each affected canvas
- element. Repeat the information in a textual label associated with each affected svg element through its aria-label attribute or the desc tag.
- either via the longdesc attribute of the image indicating the URL of the description,
- or via a link adjacent to the image playing the same role,
- either in the content of the page, or close to the image. In the latter case, the alternative can show the presence of this description and refer to it.
Control
- Check that the alt attribute of each img element in question reproduces the information in the image.
- Check that the alt attribute of each area element in question reproduces the information in the image.
- Check that the content of each object element in question reproduces the information in the image.
- Check that the content of each canvas element in question reproduces the information of the image.
- Check that each svg element in question is associated with wording reproducing the information in the image through its aria-label attribute or the desc tag.
- If applicable, check that there is an extended description and that it is suitable.
Overview and background
The 240 Opquast rules are defined and agreed upon by an extensive community of web professionals and academics. These web quality assurance guidance rules started as a list of best practices 20 years ago. They have since been revised every five years and have been tried and tested via millions of web interactions by Opquast community’s customers, including the leading CMS communities which have developed plugins for WordPress, Drupal and Prestashop. The most recent version, v4, was established in 2020.
Each rule has individual technical sheets and the rules can be searched by project phase or various topics: e-commerce, data-privacy, internationalization, security, code, etc, or by themes: accessibility, SEO, mobile, privacy, and ecodesign. The complete checklist is available on a creative commons license BY-SA.
To learn more about the Opquast approach, read this article published at Smashing Magazine
Broad 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.
Discover Opquast training and certification
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 17,000 web professionals to have their skills certified. Train your teams, contact us
We offer a 1 hour free discovery module.