I'm working on web application and our team wants to make it more accessible. In particular, we want to do a better support for people who can't see (using screen readers).
One of the popular solutions is NVDA. After reading their doc here, it's not clear - do they support a custom markdown?
Can I use some attributes/tags/metadata so that NVDA read stuff differently? For example: Google will be read as 'Google'. Can I decorate it in some way, so that it will be read as 'Link to Google'?
Thank you.
There is no such thing as a custom mark-up for screen readers. Well, there is something like that, I'll tell you about it below.
Basically, when you try to make your web site more accessible (a very good thing to do, btw!), you should minimize your impact on screen reader users. By "impact" I mean that your goal should be that your blind user would see just the same thing as a sighted user, but as the web site developer, you give him/her this ability to see, navigate, open, click and so on, and so forth.
There is a way to customize the layout, though. It is called WAI-ARIA. You can do lots of crazy (and smart) stuff with it, it is great and mighty, but the first rule of the fight club, I mean, WAI-ARIA practices is:
If you can use a native HTML element or attribute with the semantics and behavior 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. — from here.
I.e.: If you can not to use ARIA, don't use it.
Let's take your example with the link to Google: you want your blind user to see the "Google" text and to understand that it is a link, right? Well, I'll tell you what you should do to achieve this. And you need to do... drum roll... nothing! NVDA, or JAWS (which you definitely should test with, it's a major player!), or TalkBack on Android, or VoiceOver on Apple devices, will say: "Link Google", or "Google link" (depends on the screen reader and on particular user's settings). that's all.
Of course you might have done this (but don't do it in any way!):
<a href="https://google.com" aria-label="Link to Google"><span aria-hidden="true">Google</span></a>
See how crazy (and mighty!) it is? Thus you're telling the screen reader that you need your custom text to be read and hide your main link text (just in case; I've just tested with JAWS, everything works even without the aria-hidden attribute, so it's merely for an example).
However, if your link is a span with some fancy styling, ARIA is your everything: you just say <span role="link">, and your users will get a pleasant experience instead of trying to find which word to click.
And a last example: in Bootstrap there are lots of decorations like
<i class="fas fa-arrow-up"></i>
If they are on a link (and mostly they are), some screen readers such as JAWS would report two links, one with text, and one empty, just "link". In those cases it is really good to hide this stuff from screen readers:
<i class="fas fa-arrow-up" aria-hidden="true"></i>