Tests: no role, role=img, role=text

Each of the h2 sections below contains 3 almost identical code snippets, except that the first has no role or aria-label, the next uses role=img with an aria-label that describes the image, and the last uses role=text with an aria-label that has the desired text.

Classic example of specifying desired text for symbols (span within paragraph)

I ❤️ New York

I ❤️ New York

I ❤️ New York

Another example specifying desired text for symbols (span within list item)

  1. Your answer: Nasal cannula. ✓
  2. Your answer: Morphine. ❌
  1. Your answer: Nasal cannula. ✓
  2. Your answer: Morphine. ❌
  1. Your answer: Nasal cannula. ✓
  2. Your answer: Morphine. ❌

International Phonetic Alphabet (English and French spans within paragraph)

IPA: /bəˈnɑːnə/ est la prononciation du mot banane en anglais.

IPA: /bəˈnɑːnə/ est la prononciation du mot banane en anglais.

IPA: /bəˈnɑːnə/ est la prononciation du mot banane en anglais.

ASCII art (div containing pre)

                     |\___/|
                     ) e e (
                    =\  Y  /=
                      )===(
      
                     |\___/|
                     ) e e (
                    =\  Y  /=
                      )===(
      
                     |\___/|
                     ) e e (
                    =\  Y  /=
                      )===(

Screen reader only text (without CSS offscreen element) (div - note that some or all of the divs in this section may not be read)

Clarifying visually clear content for screen reader users (div containing spans)

Price: $499
Price: $499
Price: $499

Clarifying visually clear "bot blocking" obfuscation (div containing spans)

webmastergoawayrandommailcrawlerexample34534gfdcom
webmastergoawayrandommailcrawlerexample34534gfdcom
webmastergoawayrandommailcrawlerexample34534gfdcom