Showcase: Accessible hashtags

Here you can test how your screen reader will announce a long hashtag. It should be pronounced as "Easy web accessibility wins hashtags", depending on the software and browser you use.

Test case 1: All lowercase letters

A <div> with an WAI-ARIA role of "note".

#easywebaccessibilitywinshashtags

Test case 2: Uppercase letters for single words

A <div> with an WAI-ARIA role of "note".

#EasyWebAccessibilityWinsHashtags

Test case 3: Uppercase letters for single words, wrapped in a <p> element

#EasyWebAccessibilityWinsHashtags

Test case 4: WAI-ARIA manually added, wrapped in a <div> element

A <div> with an WAI-ARIA role of "note" and an aria-label containing the string "#EasyWebAccessibilityWinsHashtags". Inside is the actual element, which is another <div> with the aria-hidden='true' attribute.

Test case 5: WAI-ARIA added via JavaScript, wrapped in a <div> element

A <div> element with a WAI-ARIA role of "note". Inside is the actual element, which is another <div> with the aria-hidden='true' attribute. The content is injected via JavaScript, adding an aria-label to the parent <div>. This string has no "#" symbol and added white space between every word.