On all 11 pages we reviewed, the first screen has links and buttons that share the same background, text color and font size.
F4 · First screen and calls to action
Their appearance does not separate one action from another: someone arriving has no visual cue to choose by.
It appears on 11 of the 11 pages we reviewed. Among them: /, /start, /sell. Plus 8 more.
The count for each page
- https://www.shopify.com/ · 17
- https://www.shopify.com/start · 16
- https://www.shopify.com/sell · 17
- https://www.shopify.com/enterprise · 3
- https://www.shopify.com/checkout · 16
- https://www.shopify.com/sidekick · 16
- https://www.shopify.com/shop-pay · 15
- https://www.shopify.com/capital · 13
- https://www.shopify.com/blog/what-is-shopify · 15
- https://www.shopify.com/editions · 3
- https://www.shopify.com/careers · 3
About this check: Partial. We stopped before finishing: of the visible links and buttons on this page, we stored 68 of 70.
If you decide to change it: Change the style of whichever one should be the main action. We have not tested the change, so we do not know what else is affected.
One form asks for a single detail, and we found nothing that says whether it is required.
F3 · Observed forms
Why it matters: Whoever fills it in does not know what they can leave blank until they try to send it.
It appears on 2 of the 11 pages we reviewed. Among them: /start, /checkout.
We counted what the form asked for when it opened; it may ask for more as you go.
- One form asks for a single detail, and we found nothing that says whether it is required.
- One form asks for a single detail, and we found nothing that says whether it is required.
Where it is
§email::R14ln5:
About this check: Partial. On some pages the cookie notice covered what needed measuring, and there we did not measure it. On the rest, we did.
If you decide to change it: Mark each required field in its label, and declare it on the field itself with the required attribute. We have not tested the change, so we do not know what else is affected.
On all 11 pages we reviewed there are buttons that don't say what they do.
F1 · Computed accessibility
These are buttons with no text and no accessible name: not a word inside, no aria-label, no title. On screen they are usually an icon.
It appears on 11 of the 11 pages we reviewed. Among them: /, /start, /sell. Plus 8 more.
axe-core checks the page as it loads. We don't see buttons that appear after a click, and we don't measure whether their name is clear.
The count for each page
- https://www.shopify.com/ · 2
- https://www.shopify.com/start · 1
- https://www.shopify.com/sell · 1
- https://www.shopify.com/enterprise · 1
- https://www.shopify.com/checkout · 1
- https://www.shopify.com/sidekick · 1
- https://www.shopify.com/shop-pay · 1
- https://www.shopify.com/capital · 2
- https://www.shopify.com/blog/what-is-shopify · 1
- https://www.shopify.com/editions · 1
- https://www.shopify.com/careers · 1
Where it is
div[data-component-name="action-row"] > button
About this check: Partial. Visible focus does not show in a still capture, so we did not check it.
If you decide to change it: Add visible text or an aria-label that says what the button does. We have not tested the change, so we do not know what else is affected.
We found 3 areas hidden from accessibility that can be reached with the keyboard.
F1 · Computed accessibility
These are parts of the page marked aria-hidden="true", which removes them from the accessibility tree, but that contain links, buttons or fields you can reach with the Tab key.
It is on /capital.
only on mobile (390 px)
axe-core checks the page as it loads. We don't see what is hidden or shown after a click, such as a menu that opens.
Where it is
div[aria-label="Slide 4"]
About this check: Partial. Visible focus does not show in a still capture, so we did not check it.
If you decide to change it: Remove aria-hidden if that content should be usable, or stop its controls from receiving focus, with tabindex="-1" or inert, if it is really hidden. We have not tested the change, so we do not know what else is affected.
On 2 of the 11 pages we reviewed, there are pieces of text that barely stand out from their background.
F1 · Computed accessibility
Why it matters: It is hard to read against the color behind it.
It appears on 2 of the 11 pages we reviewed. Among them: /careers, /sell.
We measure against the reference the check itself brings: 4.5 to 1 for normal text and 3 to 1 for large text. We did not set it. We do not measure text that sits on an image or a gradient: the check cannot work out the background color, and those cases never get this far.
The measured colors, with their page
- Aa3.7The text is
#009689 on #ffffff · 3 times on https://www.shopify.com/careers · it says “What we do” - Aa2.48The text is
#9d9d9c on #f5f5f3 · 2 times on https://www.shopify.com/sell · it says “Unlock a built-in channel with millions of verified shoppers worldwide—with saved payment ”
About this check: Partial. Visible focus does not show in a still capture, so we did not check it.
If you decide to change it: Change one color in the stylesheet. We have not tested the change, so we do not know what else is affected.
On 9 of the 11 pages we reviewed, we found menus that open and close without saying which of the two states they are in.
F2 · Navigation and links
Why it matters: Someone using a screen reader cannot tell whether it is expanded.
It appears on 9 of the 11 pages we reviewed. Among them: /, /start, /sell. Plus 6 more.
at both widths
We found no aria-expanded attribute on the control that opens it, nor anything that changes it from false to true when it opens.
The count for each page
- https://www.shopify.com/ · 2
- https://www.shopify.com/start · 1
- https://www.shopify.com/sell · 1
- https://www.shopify.com/enterprise · 1
- https://www.shopify.com/checkout · 1
- https://www.shopify.com/sidekick · 1
- https://www.shopify.com/shop-pay · 1
- https://www.shopify.com/capital · 1
- https://www.shopify.com/blog/what-is-shopify · 1
Where it is
[aria-haspopup]
About this check: Partial. We checked links with no declared destination, but we did not follow any, so we do not detect a link that leads to a page that does not exist.
If you decide to change it: One attribute per menu. We have not tested the change, so we do not know what else is affected.
On 3 of the 11 pages we reviewed, there are external domains that load before anyone touches anything. On the page with the most, there are 5.
F6 · Third parties and consent
They showed up in the first load, before we answered the cookie notice on 10 of the 11 pages in this review. It is what someone finds when they arrive at the site and have not answered yet.
Among them: i.ytimg.com, www.gravatar.com, fonts.gstatic.com. Plus 4 more.
It appears on 3 of the 11 pages we reviewed. Among them: /blog/what-is-shopify, /careers, /start.
The count for each page
- https://www.shopify.com/blog/what-is-shopify · 2
- https://www.shopify.com/careers · 5
- https://www.shopify.com/start · 2
About this check: Partial. This check only covers the domains the page called while loading. We removed the cookie notice by rejecting it. We do not judge whether what the page does with those domains is lawful.
No fix proposed: this is a decision worth consulting on.
The headings on each page skip levels once.
F1 · Computed accessibility
Why it matters: Anyone navigating by headings loses the thread of the document.
It is on /checkout.
only on mobile (390 px)
We look at the order of the heading levels (h1, h2, h3…) as they appear in the document, and here there is a skip between levels. We do not judge what each heading says.
About this check: Partial. Visible focus does not show in a still capture, so we did not check it.
If you decide to change it: Change the level of the tag, not how it looks. We have not tested the change, so we do not know what else is affected.