When you create a new page, you might take care of some a11y requirements, like:
- keyboard focus must be visible on all interactive elements like links, buttons and form fields
- user can zoom at least at 200% without any loss of information or functionality
- user can change orientation of device without any loss of information or functionality
- user can change text spacing without any loss of information or functionality (see https://codepen.io/stevef/pen/YLMqbo/ to see this spacing WCAG criterion 1.4.12)
- user can activate button using enter key and space key
- user can activate link using enter key
- the page must be unique and explicit
- has lang="xx" attribute where xx = language code of the language used in the page
- content that appears with fade/parallax effect on scroll is by default hidden with opacity="0" (no "display:none" or "visibility:hidden" code)
- all content between and elements is inside a
- the "sr-only" CSS class is the one described in https://hugogiraudel.com/2016/10/13/css-hide-and-seek
- always use CSS for styling text. For ALL CAPS, please use the text-transform: uppercase CSS rule
- when high contrast is activated text have at least a 4.5 contrast ratio and icon have at least a 3.0 contrast ratio.
This list isn't exhaustive but will avoid some common mistakes as developer.
For more info:
https://web.dev/learn/accessibility/
Top comments (0)