Set Screen Reader Text (and Meta-information Text) To A Different Value Than Visible Text
I am dealing with a website where the author wants several key titles/headers to be in big ASCII art. For example, if a title said "sandwitch", it would show up as:
.::::::. :::. :::. :::.:::::::-. .:: . .:::::::::::::::::: .,-::::: :: .: ;;;` ` ;;`;; `;;;;, `;;; ;;, `';,';;, ;; ;;;' ;;;;;;;;;;;'''',;;;'````' ,;; ;;, '[==/[[[[, ,[[ '[[, [[[[[. '[[ `[[ [[ '[[, [[, [[' [[[ [[ [[[ ,[[[,,,[[[ ''' $c$$$cc$$$c $$$ "Y$c$$ $$, $$ Y$c$$$c$P $$$ $$ $$$ "$$$"""$$$ 88b dP 888 888,888 Y88 888_,o8P' "88"888 888 88, `88bo,__,o, 888 "88o "YMmMY" YMM ""` MMM YM MMMMP"` "M "M" MMM MMM "YUMMMMMP"MMM YMM
And the code is just:
<div class="head" id="a"> .::::::. :::. :::. :::.:::::::-. .:: . .:::::::::::::::::: .,-::::: :: .: ;;;` ` ;;`;; `;;;;, `;;; ;;, `';,';;, ;; ;;;' ;;;;;;;;;;;'''',;;;'````' ,;; ;;, '[==/[[[[, ,[[ '[[, [[[[[. '[[ `[[ [[ '[[, [[, [[' [[[ [[ [[[ ,[[[,,,[[[ ''' $c$$$cc$$$c $$$ "Y$c$$ $$, $$ Y$c$$$c$P $$$ $$ $$$ "$$$"""$$$ 88b dP 888 888,888 Y88 888_,o8P' "88"888 888 88, `88bo,__,o, 888 "88o "YMmMY" YMM ""` MMM YM MMMMP"` "M "M" MMM MMM "YUMMMMMP"MMM YMM </div>
Now, I personally think this is a terrible choice and makes things really hard to read without any benefit. But ultimately it wasn't my call and so it stuck. This has created two additional problems that I'm trying to address:
- By including the ASCII art in the literal source code for the page, screen readers are unable to read the header, and instead try to read out this mismatch of punctuation and random letters.
- Because these letters are the section titles of the webpage, a search engine will not be able to see that this text is supposed to be a word.
Now, it seems like I can hide the label from screen readers using
aria-hide, but I would like to tell the screen reader what that blob of characters should say (when spoken aloud).
aria-label seems to let me give it a label that's read aloud, but then it doesn't hide all of the extra junk punctuation.
So, is there any way I can tell both screen readers, and search engines, what this mess of text is supposed to say (if they were able to look at it like a human), rather than just as a mess of punctuation? Something like
alt text, but for a
aria-label on a heading will not help because the heading is not focusable with a keyboard.
The design you have is fine. Having ascii art is creative, albeit only readable to a subset of the population. I have decent eyesight but still have to think about what I'm looking at to find the word.
But, be that as it may be, if that's what the client wants, then go with it. It's easy to make it accessible.
<div aria-hidden="true"> <!-- ascii art here --> </div> <h2 class="sr-only">Sandwich</h2>
So the ascii art is visible to sighted users but hidden from screen readers. The heading is visible to screen readers (and SEO) but hidden from sighted users.
You can search for the "sr-only" class (sometimes called the "visually-hidden" class). Here's one example. It basically pushes the text off the screen or makes it one pixel tall.
If you're talking about food, just make sure "sandwich" is spelled correctly in the ascii art :-)
- → October CMS create a multi select Form field
- → How to update data attribute on Ajax complete
- → laravel blade templating error
- → should I choose reactjs+f7 or f7+vue.js?
- → How to dynamically add class to parent div of focused input field?
- → Setting the maxlength of text in an element that is displayed
- → Expanding search bar not expanding before search
- → Get the calling element with vue.js
- → Blade: how to include a section in one page but not in another
- → How to print/log reactjs rendered dom?
- → how to write react component to construct HTML DOM