open-telemetry / opentelemetry.io

Accessibility - open-telemetry/opentelemetry.io

Accessibility in OpenTelemetry.io

OpenTelemetry.io aims to ensure that its website is accessible to all users, including those with disabilities. This document outlines the key technologies and dependencies used in OpenTelemetry.io and provides examples of how to make the website more accessible.

Key Technologies and Dependencies

  • Hugo: Hugo is a static site generator that can be used to create fast and SEO-friendly websites. To ensure accessibility in Hugo, use the --cleanSession flag when building the site to avoid any cached data that may cause issues. Additionally, use semantic HTML5 elements and ensure that all images have appropriate alt text. (Source: https://gohugo.io/about/hugo-and-accessibility/)
  • Netlify CLI: Netlify CLI is a command-line interface for Netlify that can be used to build, deploy, and manage websites. To ensure accessibility in Netlify CLI, follow the same guidelines as for Hugo, as Netlify CLI is often used in conjunction with Hugo.
  • Prettier: Prettier is a code formatter that can be used to ensure consistent and readable code. While Prettier does not have specific accessibility features, using it can help ensure that the code is easier to read and understand for all users.
  • Textlint: Textlint is a linter for text that can be used to ensure that the content on the website is grammatically correct and easy to read. Textlint has several accessibility rules that can be used to check for issues such as missing alt text or incorrect heading levels. (Source: https://textlint.github.io/textlint/rules/)
  • Markdown-link-check: Markdown-link-check is a tool that can be used to check for broken links in Markdown files. Ensuring that all links are functional is an important part of accessibility.
  • Gulp: Gulp is a task runner that can be used to automate tasks such as minification, compression, and concatenation. While Gulp does not have specific accessibility features, using it can help ensure that the website is fast and efficient, which is important for all users.
  • PostCSS-CLI: PostCSS-CLI is a tool that can be used to transform CSS using JavaScript plugins. While PostCSS-CLI does not have specific accessibility features, using it can help ensure that the website’s CSS is consistent and easy to read.
  • Autoprefixer: Autoprefixer is a PostCSS plugin that can be used to add vendor prefixes to CSS properties. While Autoprefixer does not have specific accessibility features, using it can help ensure that the website’s CSS is consistent and easy to read.
  • Markdownlint: Markdownlint is a linter for Markdown files that can be used to ensure that the content on the website is formatted correctly. Markdownlint has several accessibility rules that can be used to check for issues such as missing alt text or incorrect heading levels. (Source: https://github.com/DavidAnson/markdownlint/blob/master/doc/Rules.md)
  • Cspell: Cspell is a spell checker that can be used to ensure that the content on the website is free of spelling errors. While Cspell does not have specific accessibility features, using it can help ensure that the content is easier to read and understand for all users.

Online Documentation

The OpenTelemetry documentation provides several resources for ensuring accessibility in OpenTelemetry.io:

  • OpenTelemetry: The OpenTelemetry documentation provides an overview of the OpenTelemetry project and its goals. While accessibility is not explicitly mentioned, the project’s commitment to openness and inclusivity suggests that accessibility is an important consideration. (Source: https://grafana.com/docs/opentelemetry/collector)
  • Getting Started: The OpenTelemetry documentation provides a guide for getting started with OpenTelemetry based on the user’s role. While accessibility is not explicitly mentioned, following the guide can help ensure that the user’s OpenTelemetry implementation is accessible. (Source: https://opentelemetry.io/docs/getting-started)
  • Community: The OpenTelemetry documentation provides information on how to get involved in the OpenTelemetry community. The community page includes links to the project’s mailing lists, Mastodon and Twitter accounts, Stack Overflow page, and meeting recordings. Following these resources can help users stay up-to-date on accessibility best practices and guidelines. (Source: https://opentelemetry.io/community)
  • Client Instrumentation SIG: The OpenTelemetry documentation provides information on the Client Instrumentation SIG, which is responsible for the JavaScript implementation of OpenTelemetry. The SIG’s repository contains information on how to contribute to the project and how to report issues. Following these guidelines can help ensure that any contributions to the project are accessible. (Source: https://opentelemetry.io/docs/instrumentation/js)

Examples

Here are some examples of how to make OpenTelemetry.io more accessible:

  • Use semantic HTML5 elements: Semantic HTML5 elements provide important context for assistive technologies such as screen readers. For example, use <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer> elements to structure the content on the website.
  • Provide alt text for images: Alt text provides a text description of images for users who are unable to see them. For example, <img src="example.png" alt="A description of the image">.
  • Use appropriate heading levels: Heading levels provide a hierarchical structure for the content on the website. Use headings in a logical order, starting with <h1> and moving down to <h2>, <h3>, and so on.
  • Use ARIA roles: ARIA roles provide additional context for assistive technologies. For example, use <button role="button"> to indicate that an element is a button.
  • Use ARIA attributes: ARIA attributes provide additional information about elements for assistive technologies. For example, use aria-label to provide a label for an element, or aria-describedby to provide a description.
  • Use ARIA landmarks: ARIA landmarks provide a way to navigate the website for users of assistive technologies. For example, use <div role="main"> to indicate the main content of the website.
  • Use ARIA live regions: ARIA live regions provide a way to notify users of changes to the website. For example, use <div aria-live="polite"> to indicate that changes to the region are polite notifications that should not interrupt the user.
  • Use ARIA modal dialogs: ARIA modal dialogs provide a way to display dialogs to users of assistive technologies. For example, use <div role="dialog" aria-modal="true"> to indicate that a dialog is modal and should be given focus.
  • Use ARIA menus: ARIA menus provide a way to create menus for users of assistive technologies. For example, use <ul role="menu"> to create a menu.
  • Use ARIA tooltips: ARIA tooltips provide a way to display additional information about elements for users of assistive technologies. For example, use <div aria-describedby="tooltip"> to associate a tooltip with an element.

By following these guidelines and using the tools and resources provided by OpenTelemetry, it is possible to ensure that OpenTelemetry.io is accessible to all users.