Associate the link with the text in the navigation area of the web site

Right now, the links and their associated texts like "encrypt", "decrypt" etc. are not associated with one another in a DOM logical fashion. The result is that screen readers such as VoiceOver on the Mac, Orca on Linux, and various on Windows with browsers such as Firefox or Safari, do not speak the link text when tabbing through. The text is somehow dynamically inserted and removed from the DOM, probably on some sort of hover or maybe even keyboard focus trigger, but the text itself is not within the link node itself, but in some adjacent one. The link itself looks like it's only some sort of UTF-8 character that symbolizes something. I am blind myself, so cannot tell for sure.

The solution would be to associate the link text with the link by either making the node that displays or hides the tool tip or whatever it is that appears and disappears, by moving it under the link tag, or associating them via aria-labelledby on the link node, pointing to the ID of the correct related text. That would make it a lot easier for blind users to navigate Keybase.io and always know what the links do.

Start by inspecting the website navigation DOM and how the link text or tooltip is inserted and removed around keyboard focus. The work is done when screen readers announce the associated action text, such as “encrypt” or “decrypt,” while tabbing through the navigation links.

Written by the indexing model from the issue text.