ODS > Stickers

[ffoodd]

Requirement

For a Developer
Who is creating an Orange Website
The Sticker Integration
is an automated component
that proposes the web site's Orange Sticker component to promote content
unlike the default bootstrap framework
Boosted will provide this ready to use component compatible with the Orange Design and the accessibility requirements

Description

Started as a POC using SVG in v5 Design Guidelines – but that need to be tested for accessibility and browser support, obviously.

If we stick to SVG:

1. use <title id="">
2. use aria-labelledby on <svg>
3. maybe use role="img"?
4. Regarding accessibility, maybe have a look at a11y-guildeines: https://a11y-guidelines.orange.com/fr/web/exemples-de-composants/vocalisation-des-prix/

References

• Orange Design System: Components > Stickers
  • Service Offer On One Line — WEB-PRM-STK-001
  • Service Offer Icon — WEB-PRM-STK-002
  • Service Offer On Two Lines — WEB-PRM-STK-003
  • Service Offer On Two Lines With Icon — WEB-PRM-STK-004
  • With Price — WEB-PRM-STK-005
  • With Old And New Price — WEB-PRM-STK-006
  • Bonus Minutes — WEB-PRM-STK-007
  • Bonus Offer — WEB-PRM-STK-008
  • Additional Minutes — WEB-PRM-STK-009
  • Additional Offer — WEB-PRM-STK-010