The website is inaccessible for keyboard only users and borks on screenreaders

[SleeplessByte]

Issue tracker is ONLY used for reporting bugs. New features should be discussed on our discord, in the #create-expo-stack channel.

Expected Behavior

Both the marketing website (landing page) and documentation pass accessibility standards so they can be comfortably used without requiring a mouse or touch device, and don't bork on assistive technology such as screen readers.

Current Behavior

Using a keyboard on the marketing site, I focus various invisible links, after which I get stuck in the "editor" (without it visually telling me I am there). There is no way to then reach the bottom of the page.
On the documentation site, the copy buttons lack a focus indicator.

After experiencing this, I tried my screen reader and then it becomes worse. The two biggest things are:

• heading order
• icon-only buttons without labels

Possible Solution

I assume no one who works on this needs AT in there daily life. The easiest way to experience this is try to browse the site and docs with just a keyboard. Whilst automatic tooling doesn't catch all accessibility issues (not even most), it is a great start for this great piece of software to be more inclusive.

[danstepanov]

Thanks for flagging this @SleeplessByte. You're right, we didn't consider this when building out the website.

I'll chat with @PickleNik and @sammoore this week about how we might make it possible to use rn.new via just a keyboard. If you know of any similar kind of website that does a great job of this, please let us know.

[SleeplessByte]

I've not yet seen a site that does this right, but if I do I'll be happy to report.

As for quick wins to make this marginally better:

1. Remove the "mobile" menu. The quick links don't add any functionality, and the "docs" button used on larger screen sizes works fine. If you don't want to do this: aria-expanded, focus management (keep inside the sidebar), and ensuring you cannot reach (tab into) the hidden items when not expanded are mandatory.
2. Add a better focus style to the npx command, and add a label of copy command as <title> element inside the copy svg. The title attribute on the entire element is not (necessarily) used by screen readers.
3. Increase all heading levels by one except for the first (so all h1 to h2), and replace the h2 in the "external links" at the bottom by a non-heading element, OR move the version numbers to the top-right. Right now you are relying on visual grouping, which doesn't work when browsing by screen reader.
4. You may want to consider to add a heading to the "contents" section with all the external links. It's then possible to navigate "past" the terminal section by using heading navigation.

Please note that this is nowhere near complete, but these things that shouldn't require much effort to fix.