< Back to Demos | Learn more at PaulJAdam.com >

Highlights

CSS ::before ::after content

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark

WCAG stands for Web Content Accessibility Guidelines. HTML stands for HyperText Markup Language. CSS stands for Cascading Style Sheets. ARIA stands for Accessible Rich Internet Applications.

, Start Highlight,
VoiceOver macOS Speaks ", Start Highlight, " before and ", End Highlight, " after the highlight.

* Works on iOS and macOS VoiceOver, JAWS, NVDA

Title Attribute

WCAG stands for Web Content Accessibility Guidelines. HTML stands for HyperText Markup Language. CSS stands for Cascading Style Sheets. ARIA stands for Accessible Rich Internet Applications.

WCAG, highlighted
VoiceOver macOS Speaks "WCAG, highlighted" when focused on the mark tag.

* Works on macOS VoiceOver ONLY

ARIA role=img, aria-label &nbsp; span

WCAG stands for  Web Content Accessibility Guidelines . HTML stands for  HyperText Markup Language . CSS stands for  Cascading Style Sheets . ARIA stands for  Accessible Rich Internet Applications .

Start Highlight,, image
VoiceOver macOS Speaks "Start Highlight,, image" before and "End Highlight,, image" after the highlight.

* Works on iOS and macOS VoiceOver, JAWS, NVDA

aria-label on link

dimmed, link, WCAG Highlighted
VoiceOver macOS Speaks "dimmed, link, WCAG Highlighted" when focused on the a href.

* Works on iOS and macOS VoiceOver, JAWS, NVDA

Title Attribute and CSS ::before ::after content

WCAG stands for Web Content Accessibility Guidelines. HTML stands for HyperText Markup Language. CSS stands for Cascading Style Sheets. ARIA stands for Accessible Rich Internet Applications.

Web Content Accessibility Guidelines, highlighted
VoiceOver macOS Speaks "Web Content Accessibility Guidelines, highlighted" when focused on the a mark tag. Also speaks ", Start Highlight, " before and ", End Highlight, " after the highlight.

* Works on iOS and macOS VoiceOver, JAWS, NVDA