Skip to content

Make a11y compliant

The site was designed to be accessibility in mind, but it still has some open issues that should be addressed asap. I aim to fulfill a11y, since it looks appropriate for our target audience, from my POV.

What has to be done:

  • Basic Audit (Checklist from a11y project) – Needs validation:
    • Content (@dermicha / @bengoshi)
      • Use plain language and avoid figures of speech, idioms, and complicated metaphors.
      • Make sure that button, a, and label element content is unique and descriptive.
      • Not applicable Use left-aligned text for left-to-right (LTR) languages, and right-aligned text for right-to-left (RTL) languages.
    • Global code (@cobalt)
      • 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 at en
      • Provide a unique title for each page or view.
      • Ensure that viewport zoom is not disabled.
      • Use landmark elements to indicate important content regions.
      • Ensure a linear content flow. – Needs validation
      • Avoid using the autofocus attribute.
      • Not applicable Allow extending session timeouts.
      • Remove title attribute tooltips.
    • Keyboard (@cobalt)
      • 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.
      • Remove invisible focusable elements.
    • Images (@cobalt / @dermicha / @bengoshi)
      • Make sure that all img elements have an alt attribute.
      • Make sure that decorative images use null alt (empty) attribute values.
      • Provide a text alternative for complex images such as charts, graphs, and maps.
      • For images containing text, make sure the alt description includes the image's text.
    • Headings (@cobalt)
      • 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 (@cobalt)
      • Use list elements (ol, ul, and dl elements) for list content.
    • Controls (@cobalt)
      • 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 ^^)
    • Tables (@cobalt)
      • Use the table element to describe tabular data.
      • Use the th element for table headers (with appropriate scope attributes).
      • Use the caption element to provide a title for the table.
    • Not applicable – Forms
    • Media (@cobalt)
      • Make sure that media does not autoplay.
      • Ensure that media controls use appropriate markup.
      • Check to see that all media can be paused.
    • Video (not yet applicable) (@cobalt)
      • Confirm the presence of captions.
      • Remove seizure triggers.
    • Audio (@dermicha / @bengoshi)
      • Confirm that transcripts are available.
    • Appearance (@cobalt)
      • 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 (@cobalt)
      • Ensure animations are subtle and do not flash too much.
      • Not applicable Provide a mechanism to pause background video.
      • Make sure all animation obeys the prefers-reduced-motion media query.
    • Color contrast (@cobalt)
      • 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.).
      • Not applicable – Check text that overlaps images or video.
      • Check custom ::selection colors.
    • Mobile and touch (@cobalt)
      • 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.

What will be done to ensure our content is accessible in the future:

  • Moved to #14 Integrate automatic checks for accessibility …
Edited by Cobalt