mirror of
https://github.com/onsonr/nebula.git
synced 2025-03-11 09:49:12 +00:00
523 lines
18 KiB
HTML
523 lines
18 KiB
HTML
![]() |
<!doctype html>
|
|||
|
<html lang="en" data-layout="default" data-shoelace-version="0.0.10">
|
|||
|
<head>
|
|||
|
<meta charset="utf-8" />
|
|||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|||
|
<meta
|
|||
|
name="description"
|
|||
|
content="Nebula recognizes the need for all users to have undeterred access to the websites and applications that are created with it."
|
|||
|
/>
|
|||
|
<title>Accessibility Commitment</title>
|
|||
|
|
|||
|
<meta name="turbo-cache-control" />
|
|||
|
|
|||
|
<link rel="stylesheet" href="/assets/styles/docs.css" />
|
|||
|
<link rel="stylesheet" href="/assets/styles/code-previews.css" />
|
|||
|
<link rel="stylesheet" href="/assets/styles/search.css" />
|
|||
|
|
|||
|
<link rel="icon" href="/assets/images/logo.svg" type="image/x-icon" />
|
|||
|
|
|||
|
<meta name="twitter:card" content="summary" />
|
|||
|
<meta name="twitter:creator" content="shoelace_style" />
|
|||
|
<meta name="twitter:image" content="https://nebulaui.org/assets/images/og-image.png" />
|
|||
|
|
|||
|
<meta property="og:url" content="https://nebulaui.org/resources/accessibility/" />
|
|||
|
<meta property="og:title" content="Accessibility Commitment" />
|
|||
|
<meta
|
|||
|
property="og:description"
|
|||
|
content="Nebula recognizes the need for all users to have undeterred access to the websites and applications that are created with it."
|
|||
|
/>
|
|||
|
<meta property="og:image" content="https://nebulaui.org/assets/images/og-image.png" />
|
|||
|
|
|||
|
<link rel="stylesheet" href="/dist/themes/light.css" />
|
|||
|
<link rel="stylesheet" href="/dist/themes/dark.css" />
|
|||
|
<script type="module" src="/dist/shoelace-autoloader.js"></script>
|
|||
|
|
|||
|
<script>
|
|||
|
(() => {
|
|||
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|||
|
const theme = localStorage.getItem('theme') || 'auto';
|
|||
|
document.documentElement.classList.toggle(
|
|||
|
'sl-theme-dark',
|
|||
|
theme === 'dark' || (theme === 'auto' && prefersDark)
|
|||
|
);
|
|||
|
})();
|
|||
|
</script>
|
|||
|
|
|||
|
<script src="/assets/scripts/turbo.js" type="module"></script>
|
|||
|
<script src="/assets/scripts/docs.js" defer=""></script>
|
|||
|
<script src="/assets/scripts/code-previews.js" defer=""></script>
|
|||
|
<script src="/assets/scripts/lunr.js" defer=""></script>
|
|||
|
<script src="/assets/scripts/search.js" defer=""></script>
|
|||
|
</head>
|
|||
|
<body>
|
|||
|
<a id="skip-to-main" class="visually-hidden" href="#main-content" data-smooth-link="false">
|
|||
|
Skip to main content
|
|||
|
</a>
|
|||
|
|
|||
|
<button id="menu-toggle" type="button" aria-label="Menu">
|
|||
|
<svg width="148" height="148" viewBox="0 0 148 148" xmlns="http://www.w3.org/2000/svg">
|
|||
|
<g stroke="currentColor" stroke-width="18" fill="none" fill-rule="evenodd" stroke-linecap="round">
|
|||
|
<path d="M9.5 125.5h129M9.5 74.5h129M9.5 23.5h129"></path>
|
|||
|
</g>
|
|||
|
</svg>
|
|||
|
</button>
|
|||
|
|
|||
|
<div id="icon-toolbar">
|
|||
|
<a
|
|||
|
href="https://github.com/onsonr/nebula"
|
|||
|
title="View Nebula on GitHub"
|
|||
|
class="external-link"
|
|||
|
rel="noopener noreferrer"
|
|||
|
target="_blank"
|
|||
|
>
|
|||
|
<sl-icon name="github"></sl-icon>
|
|||
|
</a>
|
|||
|
|
|||
|
<a
|
|||
|
href="https://twitter.com/shoelace_style"
|
|||
|
title="Follow Nebula on Twitter"
|
|||
|
class="external-link"
|
|||
|
rel="noopener noreferrer"
|
|||
|
target="_blank"
|
|||
|
>
|
|||
|
<sl-icon name="twitter"></sl-icon>
|
|||
|
</a>
|
|||
|
|
|||
|
<sl-dropdown id="theme-selector" placement="bottom-end" distance="3">
|
|||
|
<sl-button slot="trigger" size="small" variant="text" caret="" title="Press \ to toggle">
|
|||
|
<sl-icon class="only-light" name="sun-fill"></sl-icon>
|
|||
|
<sl-icon class="only-dark" name="moon-fill"></sl-icon>
|
|||
|
</sl-button>
|
|||
|
<sl-menu>
|
|||
|
<sl-menu-item type="checkbox" value="light">Light</sl-menu-item>
|
|||
|
<sl-menu-item type="checkbox" value="dark">Dark</sl-menu-item>
|
|||
|
<sl-divider></sl-divider>
|
|||
|
<sl-menu-item type="checkbox" value="auto">System</sl-menu-item>
|
|||
|
</sl-menu>
|
|||
|
</sl-dropdown>
|
|||
|
</div>
|
|||
|
|
|||
|
<aside id="sidebar" data-preserve-scroll="">
|
|||
|
<header>
|
|||
|
<a href="/">
|
|||
|
<img src="/assets/images/wordmark.svg" alt="Nebula" />
|
|||
|
</a>
|
|||
|
<div class="sidebar-version">0.0.10</div>
|
|||
|
</header>
|
|||
|
|
|||
|
<div class="sidebar-buttons">
|
|||
|
<sl-button
|
|||
|
size="small"
|
|||
|
class="repo-button repo-button--github"
|
|||
|
href="https://github.com/onsonr/nebula"
|
|||
|
target="_blank"
|
|||
|
>
|
|||
|
<sl-icon slot="prefix" name="github"></sl-icon> Code
|
|||
|
</sl-button>
|
|||
|
<sl-button
|
|||
|
size="small"
|
|||
|
class="repo-button repo-button--star"
|
|||
|
href="https://github.com/onsonr/nebula/stargazers"
|
|||
|
target="_blank"
|
|||
|
>
|
|||
|
<sl-icon slot="prefix" name="star-fill"></sl-icon> Star
|
|||
|
</sl-button>
|
|||
|
<sl-button
|
|||
|
size="small"
|
|||
|
class="repo-button repo-button--twitter"
|
|||
|
href="https://twitter.com/shoelace_style"
|
|||
|
target="_blank"
|
|||
|
>
|
|||
|
<sl-icon slot="prefix" name="twitter"></sl-icon> Follow
|
|||
|
</sl-button>
|
|||
|
</div>
|
|||
|
|
|||
|
<button class="search-box" type="button" title="Press / to search" aria-label="Search" data-plugin="search">
|
|||
|
<sl-icon name="search"></sl-icon>
|
|||
|
<span>Search</span>
|
|||
|
</button>
|
|||
|
|
|||
|
<nav>
|
|||
|
<ul>
|
|||
|
<li>
|
|||
|
<h2>Getting Started</h2>
|
|||
|
<ul>
|
|||
|
<li><a href="/">Home</a></li>
|
|||
|
<li><a href="/getting-started/installation">Installation</a></li>
|
|||
|
<li><a href="/getting-started/usage">Usage</a></li>
|
|||
|
<li><a href="/getting-started/themes">Themes</a></li>
|
|||
|
<li><a href="/getting-started/customizing">Customizing</a></li>
|
|||
|
<li><a href="/getting-started/form-controls">Form Controls</a></li>
|
|||
|
<li><a href="/getting-started/localization">Localization</a></li>
|
|||
|
</ul>
|
|||
|
</li>
|
|||
|
<li>
|
|||
|
<h2>Frameworks</h2>
|
|||
|
<ul>
|
|||
|
<li><a href="/frameworks/react">React</a></li>
|
|||
|
<li><a href="/frameworks/vue">Vue</a></li>
|
|||
|
<li><a href="/frameworks/angular">Angular</a></li>
|
|||
|
</ul>
|
|||
|
</li>
|
|||
|
<li>
|
|||
|
<h2>Resources</h2>
|
|||
|
<ul>
|
|||
|
<li><a href="/resources/community">Community</a></li>
|
|||
|
<li>
|
|||
|
<a
|
|||
|
href="https://github.com/onsonr/nebula/discussions"
|
|||
|
class="external-link"
|
|||
|
rel="noopener noreferrer"
|
|||
|
target="_blank"
|
|||
|
>Help & Support</a
|
|||
|
>
|
|||
|
</li>
|
|||
|
<li><a href="/resources/accessibility" class="active-link">Accessibility</a></li>
|
|||
|
<li><a href="/resources/contributing">Contributing</a></li>
|
|||
|
<li><a href="/resources/changelog">Changelog</a></li>
|
|||
|
</ul>
|
|||
|
</li>
|
|||
|
<li>
|
|||
|
<h2>Components</h2>
|
|||
|
<ul>
|
|||
|
<li>
|
|||
|
<a href="/components/alert"> Alert </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/animated-image"> Animated Image </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/animation"> Animation </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/avatar"> Avatar </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/badge"> Badge </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/breadcrumb"> Breadcrumb </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/breadcrumb-item"> Breadcrumb Item </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/button"> Button </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/button-group"> Button Group </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/card"> Card </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/carousel"> Carousel </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/carousel-item"> Carousel Item </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/checkbox"> Checkbox </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/color-picker"> Color Picker </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/copy-button"> Copy Button </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/details"> Details </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/dialog"> Dialog </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/divider"> Divider </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/drawer"> Drawer </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/dropdown"> Dropdown </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/format-bytes"> Format Bytes </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/format-date"> Format Date </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/format-number"> Format Number </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/icon"> Icon </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/icon-button"> Icon Button </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/image-comparer"> Image Comparer </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/include"> Include </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/input"> Input </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/menu"> Menu </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/menu-item"> Menu Item </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/menu-label"> Menu Label </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/mutation-observer"> Mutation Observer </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/option"> Option </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/popup"> Popup </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/progress-bar"> Progress Bar </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/progress-ring"> Progress Ring </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/qr-code"> QR Code </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/radio"> Radio </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/radio-button"> Radio Button </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/radio-group"> Radio Group </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/range"> Range </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/rating"> Rating </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/relative-time"> Relative Time </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/resize-observer"> Resize Observer </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/select"> Select </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/skeleton"> Skeleton </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/spinner"> Spinner </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/split-panel"> Split Panel </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/switch"> Switch </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/tab"> Tab </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/tab-group"> Tab Group </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/tab-panel"> Tab Panel </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/tag"> Tag </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/textarea"> Textarea </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/tooltip"> Tooltip </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/tree"> Tree </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/tree-item"> Tree Item </a>
|
|||
|
</li>
|
|||
|
|
|||
|
<li>
|
|||
|
<a href="/components/visually-hidden"> Visually Hidden </a>
|
|||
|
</li>
|
|||
|
</ul>
|
|||
|
</li>
|
|||
|
<li>
|
|||
|
<h2>Design Tokens</h2>
|
|||
|
<ul>
|
|||
|
<li><a href="/tokens/typography">Typography</a></li>
|
|||
|
<li><a href="/tokens/color">Color</a></li>
|
|||
|
<li><a href="/tokens/spacing">Spacing</a></li>
|
|||
|
<li><a href="/tokens/elevation">Elevation</a></li>
|
|||
|
<li><a href="/tokens/border-radius">Border Radius</a></li>
|
|||
|
<li><a href="/tokens/transition">Transition</a></li>
|
|||
|
<li><a href="/tokens/z-index">Z-index</a></li>
|
|||
|
<li><a href="/tokens/more">More Tokens</a></li>
|
|||
|
</ul>
|
|||
|
</li>
|
|||
|
<li>
|
|||
|
<h2>Tutorials</h2>
|
|||
|
<ul>
|
|||
|
<li><a href="/tutorials/integrating-with-astro">Integrating with Astro</a></li>
|
|||
|
<li><a href="/tutorials/integrating-with-laravel">Integrating with Laravel</a></li>
|
|||
|
<li><a href="/tutorials/integrating-with-nextjs">Integrating with NextJS</a></li>
|
|||
|
<li><a href="/tutorials/integrating-with-rails">Integrating with Rails</a></li>
|
|||
|
</ul>
|
|||
|
</li>
|
|||
|
</ul>
|
|||
|
</nav>
|
|||
|
</aside>
|
|||
|
|
|||
|
<main>
|
|||
|
<a id="main-content"></a>
|
|||
|
<article id="content" class="content content--with-toc">
|
|||
|
<div class="content__toc">
|
|||
|
<ul>
|
|||
|
<li class="top"><a href="#">Accessibility Commitment</a></li>
|
|||
|
</ul>
|
|||
|
</div>
|
|||
|
|
|||
|
<div class="content__body">
|
|||
|
<h1>Accessibility Commitment</h1>
|
|||
|
<p>
|
|||
|
Nebula recognizes the need for all users, regardless of ability and device, to have undeterred access to the
|
|||
|
websites and applications that are created with it. This is an important goal of the project.
|
|||
|
</p>
|
|||
|
<p>
|
|||
|
Oftentimes, people will ask “is Nebula accessible?” I’m reluctant to answer because accessibility isn’t
|
|||
|
binary — there’s no simple “yes” or “no” response to provide. What seems accessible to a sighted user might
|
|||
|
be completely inaccessible to a non-sighted user. And even if you optimize for various screen readers, you
|
|||
|
still have to account for low-level vision, color blindness, hearing impairments, mobility impairments, and
|
|||
|
more.
|
|||
|
</p>
|
|||
|
<p>
|
|||
|
Accessibility is something you have to continuously strive for. No individual contributor — or perhaps even
|
|||
|
an entire team — can claim their software is 100% accessible because of the sheer diversity of abilities,
|
|||
|
devices, assistive technologies, and individual use cases.
|
|||
|
</p>
|
|||
|
<p>
|
|||
|
Furthermore, accessibility doesn’t stop at the component level. Using accessible building blocks doesn’t
|
|||
|
magically make the rest of your webpage or application compliant. There is no library or overlay that will
|
|||
|
make your software “fully accessible” without putting in the effort. It’s also worth noting that web
|
|||
|
components are still somewhat bleeding edge, so browsers, assistive devices, and
|
|||
|
<a href="https://wicg.github.io/aom/spec/" class="external-link" rel="noopener noreferrer" target="_blank"
|
|||
|
>even specifications</a
|
|||
|
>
|
|||
|
are still evolving to help improve accessibility on the web platform.
|
|||
|
</p>
|
|||
|
<p>
|
|||
|
My commitment to Nebula users is this: Everything I develop will be built with accessibility in mind. I will
|
|||
|
test and improve every component to the best of my ability and knowledge. I will work around upstream
|
|||
|
issues, such as browser bugs and limitations, to the best of my ability and within reason.
|
|||
|
</p>
|
|||
|
<p>
|
|||
|
I’m fully aware that I may not get it right every time for every user, so I invite the community to
|
|||
|
participate in this ongoing effort by submitting
|
|||
|
<a
|
|||
|
href="https://github.com/onsonr/nebula/issues?q=is%3Aissue+is%3Aopen+label%3Aa11y"
|
|||
|
class="external-link"
|
|||
|
rel="noopener noreferrer"
|
|||
|
target="_blank"
|
|||
|
>issues</a
|
|||
|
>,
|
|||
|
<a
|
|||
|
href="https://github.com/onsonr/nebula/pulls?q=is%3Aopen+is%3Apr+label%3Aa11y"
|
|||
|
class="external-link"
|
|||
|
rel="noopener noreferrer"
|
|||
|
target="_blank"
|
|||
|
>pull requests</a
|
|||
|
>, and
|
|||
|
<a
|
|||
|
href="https://github.com/onsonr/nebula/discussions"
|
|||
|
class="external-link"
|
|||
|
rel="noopener noreferrer"
|
|||
|
target="_blank"
|
|||
|
>discussions</a
|
|||
|
>. Many accessibility improvements have already been made thanks to contributors submitting code, feedback,
|
|||
|
and suggestions.
|
|||
|
</p>
|
|||
|
<p>
|
|||
|
This is the path forward. Together, we will continue to make Nebula accessible to as many users as possible.
|
|||
|
</p>
|
|||
|
<p>
|
|||
|
— Cory LaViska<br />
|
|||
|
<em>Creator of Nebula</em>
|
|||
|
</p>
|
|||
|
</div>
|
|||
|
</article>
|
|||
|
</main>
|
|||
|
</body>
|
|||
|
</html>
|