I am designing a website for our small company and would like to make
use of both semantic tags (<article>, <section>, etc.) and JSON-LD structured data snippets.
In addition to semantic tags and JSON-LD, we want to make out website more accessible to people with disabilities, and I have been learning about WAI-ARIA attributes.
Can the WAI-ARIA attributes be used simultaneously alongside semantic tags and structured data? Or, is there a risk of a conflict that would affect their functionality?
WAI-ARIA support is iffy between both browsers and screen reader technologies.
I would recommend only using ARIA attributes in situations where you can not achieve the same result in native HTML, as HTML5 has greatly improved semantics. Adding ARIA attributes unnecessarily will do nothing to improve the accessibility of your website, and is just more work for you. Only use it as needed.
The first rule of ARIA states:
If you can use a native HTML element [HTML51] or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.
For example, you wouldn't want to add aria-label to an image when you can just use an alt. There is also no need to explicitly assign roles with aria-role when many are already implied through their equivalent HTML elements (eg: button, nav, article). It's also prefered to use HTML states such as required and disabled rather than the ARIA equivalents: aria-disabled and aria-required.
WAI-ARIA Resources
PowerMapper WAI-ARIA Screen Reader Compatibility - This is a really good mapping of which ARIA attributes are compatible with which screen readers and browsers.
What is WAI-ARIA, what does it do for me, and what not? - Key sections I'd recommend reading are "When should I not use it?" and "When should I use it?".