A11y space

What does penguin know about web accessibility?

not much, I'm afraid

This is initial state of the website, it's not accessible. Compare it with the latest one.
check commits on master branch and review accessibility improvements

What Harry Potter and his friends know about it?

Harry Potter

HTML landmarks improve page structure. Do you know 'main', 'footer', 'header', 'aside', 'article'?

Hermione Granger

Semantic HTML provide useful information about document, its structure and role. Don't forget about it

Ron Weasley

Headings and their order it's like a content menu - inform users about important sections and information.

Draco Malfoy

Don't forget about alternative text for image and graphic content.

Minerva McGonagall

If your button does not have visible text, use aria-label to provide an alternative.

Cedric Diggory

Mark all different states of interactive content well visible.

Cho Chang

Don't rely only on colors when you pass information.

Severus Snape

Put your mouse away and check if all features are available with keyboard.

Rubeus Hagrid

There are various Assistive Technologies to reach web content, go out of the box while testing.

Neville Longbottom

Do you know that ~4.5% of the world population (~350 million) people are colorblind? Check color contrast.

Luna Lovegood

Automatic accessibility testing tools can find up to ~60% of issues. Try it out

Ginny Weasley

Better not to use ARIA than using it in a wrong way

How make a modal dialog accessible?

Did you know that manu screen reader users have no idea about cookies on you website? What's visible on a screen, it's not always available for assistive technologies.

What features has accessible modal dialog?

Modal trigger should inform that the dialog opens when user clicks it.

Using `Tab` and `Shift + Tab` keys inside the dialog, user navigates thgough focusable elements only inside a dialog.

When dialog is opened, user cannot interact wwith content outside an active dialog.

`Escape` key close a dialog.

The element that is the dialog has `role="dialog"`

The element that is the dialog has `aria-modal="true"`