-
Notifications
You must be signed in to change notification settings - Fork 576
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add ERC: NFT Alternative Text in Metadata #191
Changes from all commits
21aa6a4
ab88687
986d44a
7e9bf33
c62ea75
f2c6fc1
b6f5ae7
b7e337a
d663ae0
666a14f
e5a98c5
09e6836
b6a55df
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,124 @@ | ||
--- | ||
eip: 7515 | ||
title: NFT Alternative Text in Metadata | ||
description: Populate alternative text field in NFT Metadata with image description for screen reader. | ||
author: Mona Rassouli (@DecoratedWings) | ||
discussions-to: https://ethereum-magicians.org/t/proposal-for-informational-eip-simple-accessibility-recommendation/14639 | ||
status: Draft | ||
type: Standards Track | ||
category: ERC | ||
created: 2023-08-15 | ||
--- | ||
|
||
## Abstract | ||
|
||
This ERC advocates for the consistent inclusion of alternative text in NFT metadata. Marketplaces, creators, and decentralized applications should adopt this best practice to improve accessibility. When rendering NFT images on frontend interfaces, these platforms can leverage the `alt` attribute effectively. | ||
|
||
## Motivation | ||
|
||
Alternative text assists different users who leverage assistive technology. Users who leverage screen readers for instance, benefit from an accurate, concise description of the image. | ||
|
||
Given that NFTs are portable between marketplaces, websites, and dapps, it is more efficient to create a suitable description upon creation (minting) of the NFT. In this way, the description can be attached to the image and ported between interfaces. The alternative text only needs to be written one time, eliminating the need to recreate it from scratch on every interface. | ||
|
||
## Specification | ||
|
||
The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "NOT RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be interpreted as described in RFC 2119 and RFC 8174. | ||
|
||
The `alt` attribute should be positioned at the root level within the metadata structure. It MUST provide a concise and accurate description of the image. | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
```json | ||
{ | ||
"name": "NFT Name", | ||
"alt": "Alternative text describing the image.", | ||
"description": "Short description of the NFT image.", | ||
"image": "ipfs://path_to_image", | ||
} | ||
|
||
``` | ||
|
||
When the metadata is fetched for the NFT in the frontend, the alternative text for the image can simply be rendered as: | ||
|
||
```js | ||
<img src={metadata.image} alt={metadata.alt} /> | ||
``` | ||
|
||
In this context, `metadata` refers to the JSON response obtained from some fetch operation or method of retrieval. This retrieval can be executed through various means, such as using a specific library or a node provider SDK. | ||
|
||
## Rationale | ||
|
||
### 1. Guaranteed Alternative Text at Inception | ||
|
||
By embedding the alternative text during the minting phase, NFTs are equipped with accessibility features from the start. This method ensures that the foundation of accessibility is built into the NFT from the very beginning. | ||
|
||
### 2. Responsibility & Simplicity | ||
|
||
By placing the responsibility on the collection creator, we ensure that those who are most familiar with the content craft the alternative text. This not only ensures accuracy but also empowers creators to adhere to best alternative text practices—a task that, with proper guidance, is straightforward and simple. | ||
|
||
### 3. Optimal Approach | ||
|
||
This approach eliminates the potentially overwhelming task for interfaces to manually add alternative text for thousands of images and collections. The interfaces, such as marketplaces, simply need to validate that the alt field is present. | ||
|
||
### 4. Flexibility | ||
|
||
While the alt text is provided, it's not a strict imposition. Dapps retain the freedom to use the supplied alternative text, modify it, or even replace it altogether, depending on their specific needs or circumstances. | ||
|
||
## Backwards Compatibility | ||
|
||
While this ERC does not introduce a protocol-level change to existing ERC standards, there are two primary scenarios to consider: | ||
|
||
* This proposed method is not applicable to NFTs that have their metadata frozen or locked. Such NFTs will necessitate manual adjustments on the frontend to incorporate alternative text. | ||
|
||
* For NFTs that have already been minted but possess non-frozen (modifiable) metadata, updates can be made to introduce or adjust the alternative text as deemed appropriate. | ||
|
||
## Test Cases | ||
|
||
### Best Practices For Alternative Text | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. These all should be in the Specification section, since they are giving requirements on the content of the field. |
||
|
||
The guidelines below are derived from the established Web Content Accessibility Guide (WCAG) standards. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you add the link to the specific WCAG standard here? |
||
|
||
#### 1. Avoid Redundancy | ||
|
||
Screen readers inherently detect content as an image due to the `img` tag. Avoid phrases like "image of" or "picture of". | ||
|
||
#### 2. Concise & Relevant Descriptions | ||
|
||
Ideally, aim for descriptions around 150 characters, though this isn't a strict limit. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Length limit shall be in the specification instead of test case |
||
|
||
#### 3. Correct Sentence Structure & Punctuation | ||
|
||
Ensure that descriptions are grammatically accurate and punctuated correctly. | ||
|
||
#### 4. Include Text Within the Image | ||
|
||
If the NFT image embeds any text, ensure it's reflected in the alt description. | ||
|
||
#### 5. Simple Sentences | ||
|
||
Use straightforward sentences and avoid run-on sentences. | ||
|
||
#### 6. Generative Collections | ||
|
||
Begin with a description of the base image and dynamically add specific attributes. For instance: "Penguin wearing a {hat_type} and a {color} t-shirt." | ||
|
||
#### 7. Separate Description | ||
|
||
The alt text should solely depict the image's content. Reserve collection-specific details for the description field in the metadata. | ||
|
||
#### 8. Human Review | ||
|
||
Always have the content reviewed to ensure its accuracy. | ||
|
||
#### Note On Audio or Video Content | ||
|
||
* While this ERC centers on alternative text for static images, the significance of captions for video or music-based NFTs should not be overlooked. It's crucial to adhere to captioning best practices for such content. | ||
* When applicable, captions should be embedded directly within the video or music content, separate from the metadata. Refer to WCAG for comprehensive guidelines and resources on proper captioning. | ||
|
||
## Security Considerations | ||
|
||
A primary concern is cross-site scripting (XSS) since the process involves fetching and displaying text. Some frameworks, like React, mitigate this risk by default through automatic content escaping. To bolster security, implement proper XSS mitigation strategies, which include both sanitizing input and escaping output. | ||
|
||
It is worth noting that this potential vulnerability isn't limited to alternative text but extends to any text data sourced from metadata. | ||
|
||
## Copyright | ||
|
||
Copyright and related rights waived via [CC0](../LICENSE.md). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @DecoratedWings thanks for the draft. can you help me see the necessity of not using
description
but having anotheralt
?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @xinbenlv,
Absolutely, thank you for the question. Typically I've noticed that the description field in the metadata is used more to describe aspects of the collection or longer details even for that particular token. Alternative Text should be limited to a specific description of what is actually in the image.
I grabbed an example at random from opensea to help illustrate: https://opensea.io/assets/ethereum/0x5463612c30cd4deac35af4a930c6f997dba24ad1/287
In this case, the description field was used to explain the collection. Token 287 has the following metadata: https://app.bueno.art/api/contract/24vXZhPEzz593uVhdyoCE/chain/1/metadata/287
If it were to have the
alt
field it would actually described the image of token 287, stating something like: "An abstract portayal of a woman with brown hair and white shirt playing a game of chess. There is a black and white patterned background with pink flowers along the left frame."