ARTICLE AD BOX
My project uses a custom plugin for pulling in open data from multiple sources and outputs those sources in different areas of a profile page. For example: title, URL, social icons, list of categories like a tag cloud. The source of each data point is added to a title tag so hovering over a URL, a list, etc. displays a standard title tooltip with "Data sourced from X", "Data sourced from Y", and so on.
This method isn't accessible for assistive technologies or mobile users. In fact, it has the annoying result of screen-readers potentially reading the source for each data point on the page. That repetitive content is annoying, especially as it's meant to be supplementary to the displayed information.
The methods I've researched for creating mobile-friendly tooltips can give mobile users access to the data sources but they aren't accessible. They either hide the content from AT entirely or leave the same problem with the hidden data being repetitive and unskippable.
The data sources cannot be included in the visible page layout, the project brief doesn't allow for it. If I were to implement a mobile-friendly solution, I can solve that problem. But is there a way to include these data points in such a way that they're available to AT but can be skipped or ignored by the user? If necessary, the data sources could be injected repeatedly if, for example, they remain as title tags on desktop, or maybe switched to data-* attributes to cover both desktop/mobile, and then something else for AT.
My coding skills extend mostly to HTML and CSS but I'm open to potentially handling this with JS or other means. Thanks!
