WagerCard / Accessibility
There are mainly two accessibility concerns when using the WagerCard. Firstly, provide the correct text for the screen readers. Secondly, render the card with a semantically correct element appropriate for your use case.
Screen-reader text
Since the contents of the WagerCard are somewhat visually scattered, we choose to represent the
complete screen reader label in a dedicated prop (accessibleLabel). This text must match the visual
representation of the card as closely as possible so that the accessible name can be used in assistive
technologies more easily as pr the WCAG-rule "2.5.3: Label in Name."
Semantics
For clickable cards, use an anchor element when the clickable action navigates the user away from the current page. Otherwise, use a button element.
For non-clickable cards, use a paragraph element and set the passive-prop to true. This will remove
the default hover-effect and visually differentiate the card from the clickable ones.
Relevant WCAG Success Criteria
2.5.3: Label in Name (A)
For user interface components with labels that include text or images of text, the name contains the text that is presented visually.
A best practice is to have the text of the label at the start of the name.
Label: Visible text identifying the control immediately above, inside, or beside the element.
Name: The programmatic name / Accessible Name. Examples include
aria-labelandalt.
For details and examples of this criterion, see the Accessibility-page for the Button-component.
3.2.4 Consistent Identification (AA)
Components that have the same functionality within a set of Web pages are identified consistently.
3.2.4 and the button-component
When labeling buttons it is important to do so consistently for the same functionality across our pages.