Understand web Accessibility: Global A11y Requirements (part 7)

#a11y #webdev #html #learning

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.