Instructions for Alt Text - hackforla/website GitHub Wiki
Alt Texts
Creating an Alt Attribute Review
- Make a copy of the tab Template [Page Name] - Status
- With the copied tab replace [Page Name] with the page you are reviewing and [Status] with "Audit in Progress". Don't forget to remove brackets "[ ]"
- Add a link to the page you're working on to the Resources/Instructions section of the issue at the bottom where it says "Google sheet Tab for your page".
- For each image on the page identify if the alt text needs to be changed, or not, using the recourses below, and fill out the google sheet.
Alt Attribute Review Section
- Area on Page: Section of the image
- Current Alt text: Right-click the image and click Inspect to find the alt text (it's after alt>)
- Change (Y / N) : Decide if the alt text needs to be changed
- Reason for changing / not changing
- Change to? : Write the correct alt text
- Location in the code
- Webpage: Put the website from where the alt text came from
Identifying Alt Texts
- If images have words that are not explained anywhere: it needs alt text (need to be no more than 100 characters)
- Example: The alt text would be 16 Peace, Justice, and Strong Institutions because the surrounding texts didn't include those words
- If images are decorative (don’t convey meaning nor add information to the page) = put alt=""
When Finished
- Change your google sheet tabs status to Audit Complete
- Review with Design Lead or another designer/researcher
- Mark issue as done
- Send the issue to developers