Certain accessibility issues need to be included in the creation of web pages. All images, graphics, and diagrams need understandable, explanatory, and concise alt tags. Within Drupal's content creation, there are a few ways to add alt tags.
- When you import the Media and insert it into a page, you will get an option to add the alt tag content.
-
- Go to the /Content/Media area in Drupals's heading area and edit the desired media. It will show the alt information next to the media's thumbnail.
-
- Use the Edit media button when an image is selected after it has been put on the page.
-
- Use HTML's
- <img src="img.jpg" alt="alt text" width="500" height="600">
Write Good Alt Text
- Add alt text to all non-decorative images.
- Keep it short and descriptive, like a tweet.
- Don’t include “image of” or “photo of.”
- Leave alt text blank if the image is purely decorative
- It's not necessary to add text in the Title field.
Write good Alt Text to Describe Images: Digital Accessibility
Headings
Use headings to organize the structure and NOT to look good. Screen readers will note the HTML heading tags, H1-H2-H3, etc., to describe the page. If you use heading 2 instead of heading 3 because it looks better, you will throw off the organization for screen readers. If you really want it to look a certain way, then you can use localized CSS for that heading only to just change the look and not the label.
Accessibility color checker and Canva Accessibility tips: