Skip to content

Latest commit

 

History

History
34 lines (26 loc) · 2.76 KB

README.md

File metadata and controls

34 lines (26 loc) · 2.76 KB
Raw

SYZYGY PL - Accessibility Styleguide

HTML

  • Always declare language attribute -- globally on your html wrapper and locally on elements containing text in other languages.
  • Use HTML5 sectioning elements such as header, main, footer aside, section to create a comprehensive landmark structure of the website or application. Also, remember about headings hierarchy (h1 - h6).
  • Use semantic HTML5 elements to create components, i.e. if component requires user interaction, mark it as a or button (more on this topic).
  • Remember that all the img elements require alt attribute (in case of images that are purely decorative and do not have any semantic meaning leave the alt attribute empty).
  • If you do not provide text content in your links (for example you use image or icon as a link), add descriptive aria-label attribute to your a element. Helpful resource: An alt Decision Tree.
  • Use ARIA attributes with understanding, remembering that no ARIA is better than bad ARIA.

CSS

  • Do not add outline: none on focusable elements if you do not provide alternative styling for :focus. Consider using :focus-visible polyfill to add extra styling for those navigating with keyboard.

Testing

  • Test color contrast and for different types of color blindness. If some parts of application's UI do not have sufficient color contrast or are uncomprehensive for people who do not read colors, do not hesitate to discuss it with the designer you collaborate with.
  • Test navigation using keyboard only.
  • Test semantics with images and CSS turned off.

Further reading:

Tools for everyday use: