I've recently been creating a sample project based off of Ionic Framework's sidemenu starter app.

Yesterday, I realized the starter was using onClick handlers instead of links to navigate between views. Of course, this results in a less than stellar experience for people needing accessibility features.

After a bit of discussion, I opened a PR for the starters project that added <Link> tags (from the react-router-dom module) to the sidemenu and tabs starter. The <Link> tag automatically generates anchor tags around children components. This was a pretty quick way to solve this major accessibility issue.

Today, while reading the docs for IonItem, I discovered that any IonItem that has an href attribute will automatically render an anchor tag! So, I set off to update my PR and remove the <Link> tags and just make sure each element used an href. When I tested the builds in Safari, there were no anchor tags but they still magically worked.

Since my whole goal was to make sure the sidemenu items were accessible, I figured out how to use VoiceOver on a Mac to test the Ionic Framework sidemenu starter for accessibility. Sure enough, VoiceOver recognized the items as links.

How is that possible when the source code shows no links? Shadow DOM! In the Safari inspector, there is an option to display Shadow DOM nodes. By default, this is off. Now, after inspecting the generated code, I can see that IonItem actually does generate anchor tags and works great with VoiceOver.

I also tested VoiceOver with the "tabs" starter project. The tab strip on the bottom is fully accessible because it uses href as well like:

<IonTabButton tab="schedule" href="/tab1">

I updated my PR to fix the "Go to detail" link in Tab2. Unfortunately, I was not able to test the accessibility of this link inside Tab2 or the links on Tab1. The content area of tabs does not seem keyboard accessible. No matter what I did (clicking in the tab, using the VoiceOver Rotor, etc), I couldn't get the keyboard to interact with links inside tab content.

Fixing Accessibility in macOS Safari

UPDATE: I finally figured out why the links in the Tabs starter are not accessible via Safari and VoiceOver. By default, Safari on a Mac does not fully enable navigation via the tab key. You have to enable this feature.

Once this is fixed, the Tabs starter project is fully accessible. You can tab through all the links in Tab One and Tab Two.