[Divider] Component is announced by screen readers

[paulschreiber]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Divider elements are announced by screen readers.

The HTML created looks like this:

<hr class="MuiDivider-root MuiDivider-fullWidth css-9mgopn-MuiDivider-root">

Expected behavior 🤔

Divider elements are not announced by screen readers.

The HTML created looks like this:

<hr class="MuiDivider-root MuiDivider-fullWidth css-9mgopn-MuiDivider-root" aria-hidden="true">

Steps to reproduce 🕹

import * as React from "react";
import { Divider } from "@mui/material";

export default function App() {
  return (
    <Divider />
  );
}

Context 🔦

This was flagged during an accessibility review of our application.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 12.5.1
  Binaries:
    Node: 18.7.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.15.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 105.0.5195.102
    Edge: Not Found
    Firefox: 104.0.1
    Safari: 15.6.1
  npmPackages:
    @emotion/react: ^11.10.0 => 11.9.3 
    @emotion/styled: ^11.10.0 => 11.9.3 
    @mui/base:  5.0.0-alpha.96 
    @mui/codemod:  5.10.4 
    @mui/core-downloads-tracker:  5.10.4 
    @mui/docs:  5.10.3 
    @mui/envinfo:  2.0.6 
    @mui/icons-material:  5.10.3 
    @mui/joy:  5.0.0-alpha.44 
    @mui/lab:  5.0.0-alpha.98 
    @mui/markdown:  5.0.0 
    @mui/material:  5.10.4 
    @mui/material-next:  6.0.0-alpha.52 
    @mui/private-theming:  5.10.3 
    @mui/styled-engine:  5.10.4 
    @mui/styled-engine-sc:  5.10.3 
    @mui/styles:  5.10.3 
    @mui/system:  5.10.4 
    @mui/types:  7.2.0 
    @mui/utils:  5.10.3 
    @mui/x-data-grid:  5.15.2 
    @mui/x-data-grid-generator:  5.15.2 
    @mui/x-data-grid-premium:  5.15.2 
    @mui/x-data-grid-pro:  5.15.2 
    @mui/x-date-pickers:  5.0.0-beta.5 
    @mui/x-date-pickers-pro:  5.0.0-beta.5 
    @mui/x-license-pro:  5.15.0 
    @types/react: ^18.0.17 => 18.0.14 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    styled-components:  5.3.5 
    typescript: ^4.8.2 => 4.6.4 

[oliviertassinari]

Expected behavior: Divider elements are not announced by screen readers.

@paulschreiber Why?

As far as I know, an <hr> has a semantic meaning that should be announced by the screen reader. However, there are cases where it's purely added for the aesthetic, in which case it's the responsibility of the developers to hide.

We might want to add an accessibility h2 for the divider component https://mui.com/material-ui/react-divider/.

[paulschreiber]

@oliviertassinari You are correct here. The review flagged some dividers as aesthetic, which should be suppressed by the screen reader, but it's fine for the default behaviour for Divider to be that it is announced.

[mnajdova]

We might want to add an accessibility h2 for the divider component https://mui.com/material-ui/react-divider/.

+1 on this. @paulschreiber I am closing the PR that changes the behavior of the Divider component as it doesn't look like a correct default behavior. I benchmarked other UI libraries and none of them uses aria-hidden by default.

Would you like to open a new PR that will add an accessibility section for this component explaining when the aria-hidden prop should be added?

[paulschreiber]

@mnajdova I am not the best person to write this. @jscholes can certainly explain better.

[jscholes]

I would love to see an "Accessibility" section for this component in the docs, explaining when a divider can/should be considered to be decorative. E.g. when preceded or followed by a heading which performs a similar but more appropriate semantic purpose.

Unfortunately, I don't have the cycles to write such a summary, nor the familiarity with this particular UI library that would qualify me to do so. As a representative of an accessibility agency engaged to evaluate a product maintained by @paulschreiber, that product contained some dividers that we indicated should be considered decorative, and hence use aria-hidden. That represents my sole involvement with this issue.

Thank you for your consideration of the nuances of this component usage, nevertheless. Attention to accessibility is always appreciated.