ADA Best Practices

When adding images to your website, it’s crucial to include an alt attribute for each image to enhance accessibility. Here’s how to craft effective alt text:

• Text In Images: If the image contains text, the alt text must include every word in the image. For example, if the image has a sign that says “Welcome to Our Website,” the alt text should be: “Welcome to Our Website.”
• Graphical Content: If the image contains meaningful graphical elements, describe them in a way that helps users understand the content. For instance, if the image shows a truck driving over rough terrain, the alt text could be: “A truck driving over rough terrain.”
• Use visual imagery: Use descriptive words to convey visual information, such as “A green truck driving over rough, wet and shiny mud.” Visual impairments vary from reduced vision and color blindness to motion confusion and total blindness, so detailed descriptions are crucial.
• Image Links: If the image is a link, the alt text should describe the purpose or destination of the link. For example, if the image links to a page where users can download an app, the alt text might be: “Download the Bittrex app on the App Store.”
• Presentational Images: If the image is purely decorative and does not add to the understanding of the content, it should be marked as presentational with a null alt text (alt=""). This ensures screen readers ignore it.
  • Example: <img src="image.jpg" alt="" />
• Avoid Repetitive Alt Text: Ensure that nearby images do not have repeated alt text. Images generally should not have identical alt text on a page, even if they’re the same image. Instead, aim to keep alt text short and in-context with the surrounding page.
• Avoid Repeating Captions / Description:  Avoid repeating information between captions and alternative text. Alternative text should still describe the image on it’s own, but reduce the amount of repeated information. Never duplicate the caption into the alt-text.
• Avoid “Image Of”: Screen readers announce and search engine’s know that the alt text is for an image, so do not describe a photo with “Image of”, “Photo of”, “Picture of”
• Avoid “Keyword Stuffing”: Google and other search engines do not consider alt-text content in the ranking of web searches (they do for image searches only). They only care that alt text is present.

For effective accessibility, follow these guidelines for links:

• Descriptive Links: Links should be descriptive and provide clear context about their purpose or destination. Avoid vague phrases like “Click Here” or “Learn More.” Instead, use text that describes the link’s target.
• Unique Link Text: Each link text should be unique and not duplicated for different destinations. This helps users differentiate between links.
• Proper Tag Usage: Always use <a> tags for links and avoid using <button> tags or other tags for linking purposes. If you need a link to look like a button, use CSS for styling.
  • Example: <a href="page.html">Learn more about our menu</a>
• Avoid Nesting Links: Do not place a link inside another interactable tag, such as another link or a button. Each link should be standalone.
• Appropriate Link Usage: Use <a> tags only for navigating to different pages or anchors, not for triggering on-page interactions.
• Accessible CTAs: For call-to-action links that need to be short, use visually hidden text to provide additional context for screen readers.
  • Example: <a href="/page">LEARN MORE<span class="sr-only"> about our sustainability initiatives</span></a>

Proper labeling of interactive elements ensures better accessibility:

• Button Labels: Use clear and descriptive text between <button> tags
  • Example: <button>Submit</button>
• Form Element Labels: Each form element should have a corresponding <label> element. If a visual label is not present, use the aria-label attribute.
  • Example: <label for="name">Name</label><input id="name" name="name" placeholder="Enter Your Name" />
  • Example 2: <input aria-label="Search" type="search" name="search" />

Proper use of headings enhances navigation and comprehension:

• Sequential Heading Levels: Headings should follow a logical, sequential order without skipping levels. Each page should have one <h1> tag for the main title, followed by <h2> for section titles, and so on.
  • <h1>Page Title</h1>
  • <h2>Section Title</h2>
  • <h3>Subsection Title</h3>
• Visual Styling: If non-heading text needs to appear like a heading, use CSS for styling instead of heading tags.

GIFs are generally considered to be harmful due to flashing / repeated animations triggering visual epilepsy or other sensory sensitivities. They can cause seizures, migraines, and nausea.

In general all animated effects on a site need the ability to be paused on demand. 

Alternatives include using <video> elements with the controls attribute to ensure proper playback control.

<video controls>
<source src="video.mp4" type="video/mp4">
</video>

You can also utilize Lottie animations. Lottie players generally have the ability to pause playback and will generally obey a viewer’s prefers-reduced-motion setting.

Tables: Use tables only for displaying data, not for layout. If you must use a table for layout, add a role="presentation" attribute.

<table role="presentation">
<!-- Table content -->
</table>

iFrames: Ensure all <iframe> elements have a title attribute to describe their content.

<iframe title="YouTube Video" src="video_url"></iframe>

Use these tools to ensure your site meets accessibility standards:

• Wave by WebAim: Analyze your site for accessibility barriers at Wave by WebAim.
• Google Lighthouse: Use Google Lighthouse in Chrome DevTools to check accessibility and performance. Alternatively, you can check via Google PageSpeed, but this is less accurate.
• HTML Validator: Validate your HTML code with the W3C Validator to ensure it meets web standards.

This expanded content should provide a comprehensive guide for implementing ADA best practices on your website.