Skip to main content

Accessibility Features

Run's accessibility features and what's necessary on your end

Updated over a week ago

Run currently provides a range of accessibility features to ensure your site is accessible to all users.

What Run provides out of the box

  • Responsive zoom, reflow, and spacing: Text resizing and spacing overrides will not break site layout and readability.

  • Keyboard functionality: Run sites are fully operable with a keyboard. Use tab to navigate through links, Enter to click, and Esc to close.

  • Focus indicator: Run provides outlines on all clickable elements as you tab through them.

  • Skip to content: A “Skip to content” link lets keyboard users jump straight to the main content without tabbing through everything first.

  • DOM order, semantics, and landmarks: Pages are structured in a clear order and with clear labeling so that keyboard and screen reader users can navigate smoothly and easily.

  • ARIA support and Labels: We provide ARIA definitions and labels to give necessary context on the functionality of elements and status update on actions like form submissions.

  • Site language definition: We tell screen readers what the language is so they can pronounce your content properly.

  • Motion sensitivity: Run sites don't currently provide animating features. If and when add them in the future, we plan to include fallbacks for user that prefer static sites.

What Run provides that you need to think about

  • Text contrast: Run provides the option to enable AA accessibility on your color palette builder, along with displaying contrast levels for each individual color on your palette. By default, Run's palette builder users a contrast standard slightly lower than the AA level, but AA can be enabled with a single click on the palette builder. If you're overriding individual colors, the warning icon will tell you if haven't achieved the AA standard. In areas where text is sitting on images, you'll need to use your judgement on achieving a workable contrast level.

  • UI element contrast: Run's color system does not force UI element (buttons, form field backgrounds, etc.) contrast against the background, but our palette builder does allow you to view the contrast levels of buttons and form elements against the respective background colors and gives you a warning label if it doesn't meet AA contrast standards.

  • Heading tags: h1 through h5 tags create a clear structure, helping screen reader users scan and navigate your page. Use heading levels to reflect the meaning and hierarchy of the information you're presenting, and try to avoid using more than one h1 tag per page. Headlines in your Header block are always h1 tags, whereas none of other blocks automatically use h1, but we do have manually applicable h1 tags in the Text block if you're not showing a headline on your Header block.

  • Alt tags: Run allows the adding of Alt tags on your images, which allow people to read what the content of an image is. On the image editor for each image on your site, you can add an Alt tag, but you'll need to remember to do it.

Other things to consider

  • Accessibilty widget: Run does not directly provide an accessibility widget, but there's a free tool you can plug in to your website to provide this. The widget allows the user to adjust colors, text sizes, and other things to make it easier for them to navigate the site.

  • Video and file accessibility: Videos require captioning to meet accessibility standards and other assets like PDFs have their own accessibility requirements you may want to investigate if you're providing downloadable assets.

Did this answer your question?