import { Meta, Source } from '@storybook/addon-docs/blocks';

<Meta title="Layouts/Divider/Accessibility" />

# Accessibility

A Divider is used to separate sections of content. While it doesn't directly announce anything to screen readers, there are a few considerations:

<br />
<br />

## Using `<hr />` vs `<div />`

By default, our Divider is rendered as `<div role="presentation" />`. However, you can optionally set `isContent` to true, which many screen readers interpret as a “separator.”

<Source dark code={`
// By default: non-semantic divider
<Divider isContent={false} />

// Alternatively, to provide a semantic HR:

<Divider isContent={true} />
`}/>

Compared to a `<div>`, `<hr>` tells assistive technologies that a thematic break or separation has occurred. However, sometimes you may not want an audible separation. In that case, using `<div>` (which omits semantic meaning) might be preferable.

<br />

## Levels

The Divider supports levels like “section”, “subsection”, or “content” to visually change the separation style:

<Source
  dark
  code={`
// A few level examples
<>
  <Divider level="section" />
  <Divider level="subsection" />
  <Divider level="content" />
</>
`}
/>

Screen readers generally ignore these visual styling changes unless you explicitly provide more context (e.g., additional text or heading tags).

<br />

**Additional resources:**

1. [WAI-ARIA Authoring Practices: Separator Role](https://www.w3.org/TR/wai-aria-practices-1.2/#separator)
2. [MDN Web Docs: &lt;hr /&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)