Medicover Digital Brandbook

> Accessibility

Legibility

Make sure all text is legible by following the WCAG standards for contrast ratio. All colour combinations(background/text/buttons) outlined in this document are taking this into consideration, so you can safely use the combinations presented in text and buttons colours.

Follow the typography guidelines to make sure that the text has good legibility. Avoid using small and tiny paragraph sizes for body text.
Don’t rely exclusively on colour. Include a second indicator to allow colour-blind users to differentiate content. For example, you can also use an icon alongside colour to show a state; like error, warning, success, etc.

HTML Structure

Optimise for screen readers. Avoid poor HTML practices like lack of labelling and always provide alt text for images. You can also add text that is only readable by screen readers (for example to indicate or explain functionality wherever icons are used - like the previous/next arrows in pagination).
Structure HTML properly and provide mechanisms to skip over repeated links and content.
Separating content under header tags, and including a table of contents can help screen readers to read and navigate web pages faster.
Use headings correctly to organise the structure of your content. Screen readers use heading structure to navigate content. Do not pick a header just because it looks good visually (which can confuse screen reader users); instead, create a new CSS class to style your text. This is also a good SEO practice.

Links and Navigation

Enable keyboard navigation. Providing shortcuts and logical keyboard navigation allows more users to experience your website.

Screen reader users can list every link on a page to decide where they want to navigate next. However, this feature is meaningless if the text says “click here” or “learn more.” Out of context, it’s impossible to know where these links go.

Also, avoid using the complete URL as a link as screen readers have to read or spell the entire string, which can be especially problematic for long, ambiguous URLs with letters and numbers. Instead, hyperlink a meaningful string of text (like an article title).

Media

Always use descriptive, relevant alt text for images, icons, and other still media.
Include a transcript for audio and captions for video content.
Caption every image in a carousel (and remember to allow keyboard navigation).
Disable autoplay which may harm users with cognitive disabilities or seizure disorders.
Don’t use any media with strobe or flashing effects as these could trigger seizures.

WCAG