0

I want to render some text, like from <span class="divided">ABCD</span> to A | B | C | D.

' | ' should not be rendered as a normal text because it would lower the screen-reader accessibility.

Maybe I could do this with JavaScript, like

  1. split the text
  2. join them with <span class="divider">, where .dividier:not(:last-child)::after { content: ' | '; }
  3. apply the result

But I think it's not a good way. I don't want to change the html itself.

Would it be possible only with CSS?

Improve this question
5
  • @Le____ we can find tricks with CSS
    – Temani Afif
    Commented Jan 14, 2022 at 8:26
  • There are screenreaders that execute JavaScript as well, so you are not winning much in terms of accessibility, simply by doing this via JavaScript. You need to insert the content in a way that it properly gets hidden from screenreaders.
    – CBroe
    Commented Jan 14, 2022 at 8:31
  • Does this answer your question? Is there a way to write content that screen readers will ignore?
    – CBroe
    Commented Jan 14, 2022 at 8:31
  • @CBroe I think I wanted to separate some letters without changing the text itself, so that user can copy the original text "ABCD", not "A | B | C | D", and also screen readers can read the text "ABCD", not "A | B | C | D".
    – Vrisel
    Commented Jan 21, 2022 at 0:45
  • Using a border instead of the pipe symbol not an option? Borders don't get copied :-)
    – CBroe
    Commented Jan 21, 2022 at 8:05

2 Answers 2

Reset to default
1

Using javascript you can use .split('') and split the string into and array of characters, then use .join(' | ') to join the array back together into a string with the desired characters.

el.textContent.split('').join(' | ');

let divided = document.querySelector('.divided');

divided.textContent = divided.textContent.split('').join(' | ');
<span class="divided">ABCD</span>

Improve this answer
0

A CSS-only idea but you will need a monospace font

.divided {
  font-family: monospace;
  font-size: 50px;
  letter-spacing: 10px;
  background:
   repeating-linear-gradient(90deg,#000 0 3px,#0000 0 calc(1ch + 10px))
   -6.5px 50%/100% 80% no-repeat;
   /*-6.5px = -(5 + 1.5) half the letter-spacing + 3px
       1ch  = width of one letter
       3px  = width of the seperator
       80%  = height of the seperator
   */
}
<span class="divided">ABCD</span>

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.