NFT Marketplaces

Intro

NFT Marketplaces and any equivalent type of decentralized, blockchain, or web3 related marketplace resembles any existing form of ecommerce. As such, many of the accessibility rules that would apply to e-commerce sites like Amazon, E-bay, and others are directly applicable.

Static Carousels

• Although rotating carousels (those that move automatically) can also be made accessible. It is a requirement to allow appropriate stopping and pausing functionality.

• We encourage developers to avoid carousels if possible, but if they must be used to instead opt for static ones.

Carousels

• Ideally, many experts argue that carousels shouldn't be used at all. They should be avoided if possible.

• However, there are documented better standards for making them accessible, so we leave this decision to the project/teams scrutiny.

• Firstly, our opinion is that carousels should ideally be static. The images shouldn't move on their own, at least as a default option. Starting the animation could be supported separately.

• The left and right arrow keys should have proper spacing between them, ideally they should also be a panel below the carousel, as opposed to left and right of all the images.

• Dragging the images should not be the sole means for operating the carousel

• See our example from our accessible NFT Marketplace, below.

WCAG 2.2 Reference

• Success Criterion 2.5.7 Dragging Movements

• Success Criterion 2.5.8 Target Size (Minimum)

• WAI ARIA Carousel Pattern

Skip Buttons

• Relevant to any app displaying lists of items, the most prominent examples being NFT marketplaces

• They are conceptually the exact same as "Skip to Main Content" button which appears usually on the first tab on a webpage. If you navigate to our accessible markeplace and tab as soon as the page loads, this button will appear.

Skip Filters

• Relevant to keyboard users, strong enhancement for everyone on a keyboard.

• Skip Filter button appears at the beginning of a long list of filters to allow the user to bypass the entire list of filters and jump directly to the list of NFTs or other items (this applies to any type of marketplace)

• Instead of forcing the user to navigate through all the filters on the /explore tab, a skip filter button pops up on tabbing. This allows the user to jump to the main content past the filters.

• Conceptually similar as Skip to Naviation buttons which are already prevalent and general best practice.

WCAG 2.2 Reference

• Success Criterion 2.4.1 Bypass Blocks

  • Understanding Bypass Blocks Success Criterion

Skip Filter Button Appears on Tab

Breadcrumbs

• Providing links for the user to backtrack as they venture deeper into specific collection items.

  A good breadcrumb example can be:

home > category > collection_name > specific_item

• We've highlighted this section under General Guidelines > Navigation, however it appears to be most pertinent to NFT Marketplaces as they are likely to have the greatest level of page nesting.

No infinite scroll

• There is a default "show all" with pagination in our accessible NFT Marketplace dapp. Infinite scroll should be a toggle-able option if present. "Load more" buttons work a bit better than pagination for many users, but both are valid.

Default Currency Convention

• We are suggesting marketplaces to use fiat (dollars for example), values for pricing info

• Volume and ranking data is often portrayed in terms of ETH. For newcomers the default should be their local currency, with an optional toggle to switch to the current chain's native coin or some other alt-coin of choice.

NFT Ranking Table

Tables & Tabs

• Tables and Tabs of the tables should be properly navigable.

• In our application, the content of the lists were not selectable, however if they were to lead to different collections, they should be navigable in a logical fashion.

• The keyboard focus should be as clear as possible, this is arguably even more important for table cells.

Reference

• WAI ARIA Grid Pattern

• Success Criterion 2.4.13 Focus Appearance

Alternative Text

• Alternative Text: Every NFT should have a proper description, describing what the image looks like. We have proposed ERC-7515 as the best way to achieve this.

• For pre-existing collections, consider storing the descriptions in a data store (decentralized ideally), and doing an api fetch for the alt="" field in img.

• We've written a blog post that explains the ERC proposal more clearly:

NFT Alt Text: A Simple, Straightforward EIP

ERC-7515 Blog Explaination