x;margin:1.5rem 0px 0px;max-width:68ex;padding:0px;vertical-align:baseline;"> le="box-sizing:border-box;color:var(--color-heading-text);font-size:2rem;font-weight:400;line-height:1.3;margin:4ex 0px 0px -1rem;overflow-wrap:break-word;padding:0px;vertical-align:baseline;"> Success criteria
gs:normal;font-size:1em;line-height:1.3;list-style-image:none;margin:0px;overflow-wrap:break-word;overflow:autog:border-box;padding:0px;vertical-align:baseline;width:754.055px;" data-checklist-item-id="use-only-one-h1-element-per-page-or-view">
Animation
Content that moves, either on its own, or when triggered by a person activating a control.
Ensure animations are subtle and do not flash too much.
Provide a mechanism to pause background video.
Make sure all animation obeys the prefers-reduced-motion media query.
Color contrast
Color contrast is how legible colors are when placed next to, and on top of each other.
Check the contrast for all normal-sized text.
Check the contrast for all large-sized text.
Check the contrast for all icons.
Check the contrast of borders for input elements (text input, radio buttons, checkboxes, etc.).
Check text that overlaps images or video.
Check custom ::selection colors.
Mobile and touch
Things to check mobile experiences for.
Check that the site can be rotated to any orientation.
Remove horizontal scrolling.
Ensure that button and link icons can be activated with ease.
Ensure sufficient space between interactive items in order to provide a scroll area.
Next steps
Remember to periodically check your site to ensure it is still accessible. The A11Y Project also strongly encourages you to verify your testing by hiring a professional tester.
Further reading
TetraLogical has a good in-depth, yet still high-level explanation of the WCAG. Check it out if you want to learn more about its history and principles.
Отримуй актуальні новини та щотижневий дайджест перевіреної інформації.
