Windows High Contrast (WHC) and ARIA

Reading time 1 minute

Showing how links and buttons marked up using ARIA differ in presentation from those marked up using native HTML elements.

Results

Screenshots of the different default WHC themes in Windows 11 using the test below.

Buttons look the same. The native link is blue whilst the aria one is white.
Aquatic
Buttons look the same. The native link is a grey-blue whilst the aria one is black.
Desert
Both native elements are teal and both aria elements are white
Dusk
The native button is yellow, the native link is purple. Both aria elements are white.
Night Sky

Tests

View this page in Windows High Contrast to see the difference using native elements for links and buttons makes.

Buttons

Native button

<button class="button">Click me</button>

Aria button

Click me
<div class="button" role="button" tabindex="0">Click me</div>

Links

Native link

Click me 
<a class="link" href="/">Click me</a>

Aria link

Click me
<div class="link" role="link" tabindex="0">Click me</div>