Sanna Kramsi - I would if I could a guide to web accessibility

Website styles

Each interactive element should have visual cues to help users understand what elements they can interact with. This also means the elements should have hover styles and focus styles. If you work with a designer, these are on their territory.

Prefer using relative units for texts. That way your users can get a larger font while zooming. There is often a recommendation to only use scalable units everywhere but do note that sometimes pixel values will work better especially for element margins and paddings. Always check how the content works while zooming to ensure the best user experience for each element you create, don't follow a guideline without thinking and testing.

Focus styles

Never just remove the focus styles of elements. Custom focus styles can be designed and implemented if the default styles won't be good in your project. Visible Focus is covered by criterion 2.4.7 (Level AA). There will also be more focus-related guidelines in WCAG 2.2.

Focus styles should be different than the element hover styles because it's very possible that you have focused one element but are hovering another. It can get confusing if the styles are the same. But it's better to have the same styles than no styles!

You can define the focus styles nowadays also with :focus-visible that will not activate when the element is clicked. Using :focus is still very much ok. But with :focus-visible you can solve the problem of someone complaining about the focus style showing when using a mouse.

Icon fonts

Be careful if you use icon fonts. Make sure you use the icons the way the font means them to be used. And always test they properly work on screen readers as well. Make sure you have fallbacks to accessible text.

List-style: none

If and when you remove the default bullet styles from a list element by using list-style: none, Safari will ignore the list completely. This has two fixes. You can recover the list functionality by adding a role="list" to the list element. This is, of course, not the best way because the role is implied already by the list element itself. But this will fix the bug/feature in Safari, just know that you will see notices about this. The other option is to use CSS to fix it. You can add a zero-width space to the before-element of the <li>. I added two articles to the resource list about this issue. I also created a demo of this list element issue.


If you use animations, make sure to check the criteria under 2.3 (Level A and AAA). Animations can easily cause nausea or discomfort so it is important to make sure your website won't cause people to have physical reactions.

I also recommend making all the animations obey the prefers-reduced-motion media query. This is covered by criterion 2.3.3 (Level AAA) but I always recommend doing this, even if you aren't aiming for the AAA level.

Read more info about designing animations and moving content from the designer section.