Theme accessibility
All things that might need validation or fixes at the theme level to ensure a11y compliance. (Moved here from #13 / Removed inapplicable)
- Global code
-
Validate your HTML. – The HTML compressor is currently not producing compliant HTML (needs config) -
Use a lang
attribute on the HTML element. – In use but currently aten
-
Provide a unique title for each page or view. -
Use landmark elements to indicate important content regions. -
Ensure a linear content flow. – Needs validation -
Remove title attribute tooltips.
-
- Keyboard
-
Make sure there is a visible focus style for interactive elements that are navigated to via keyboard input. -
Check to see that keyboard focus order matches the visual layout.
-
- Appearance
-
Check your content in specialized browsing modes. -
Increase text size to 200%. -
Double-check that good proximity between content is maintained. -
Make sure color isn't the only way information is conveyed. -
Make sure instructions are not visual or audio-only. -
Use a simple, straightforward, and consistent layout.
-
- Animation
-
Ensure animations are subtle and do not flash too much. -
Make sure all animation obeys the prefers-reduced-motion media query.
-
- Color contrast
-
Check the contrast for all normal-sized text. – The colored headings & nav-links are problematic -
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 custom ::selection colors.
-
- Mobile and touch
-
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.
-
- Headings
-
Use heading elements to introduce content. -
Use only one h1 element per page or view. -
Heading elements should be written in a logical sequence. -
Don't skip heading levels.
-
- Lists
-
Use list elements (ol, ul, and dl elements) for list content.
-
- Controls
-
Use the a element for links. -
Ensure that links are recognizable as links. -
Ensure that controls have :focus states. -
Use the button element for buttons. -
Provide a skip link and make sure that it is visible when focused. -
Identify links that open in a new tab or window. (no popups on our site ^^)
-