Evergreen

Evergreen’s Accessibility Insights section is dedicated to helping you make your website inclusive and usable for all people, including those with disabilities. Accessibility (often abbreviated as a11y) is not only important for ethical and legal reasons, but also overlaps with good practice in SEO and UX. This tool scans your pages for common accessibility issues and provides guidance to fix them, making it easier to move toward compliance with standards like WCAG (Web Content Accessibility Guidelines).

What Accessibility Insights Checks:

The platform likely uses automated accessibility testing rules (similar to those in tools like axe or Lighthouse) to evaluate pages. Here are common issues it will detect:

Missing Alt Text on Images: (This appears in SEO too, but is critical for accessibility.) Images without alt attributes will be flagged, since screen readers rely on alt text to describe images to users who can’t see them.
Insufficient Color Contrast: Text and background color combinations that don’t meet contrast ratio guidelines will be listed. For instance, light gray text on a white background might be too hard to read. Evergreen will point out which elements on which pages have low contrast, often providing the contrast ratio and the minimum needed (e.g., “Contrast 2.5:1, needs to be at least 4.5:1 for small text”).
Missing Form Labels: If there are forms on your site, each input (text field, dropdown, checkbox, etc.) should have an associated label. The audit will find inputs without proper <label> tags or ARIA labels. For example, a search box with no label or an icon-only button without a discernible text will be flagged.
Keyboard Navigation Traps: Ensures that all interactive elements (links, buttons, form fields) can be focused and used via keyboard (tab, enter/space keys). If an element is focusable but nothing happens on pressing Enter, or if some modal traps focus, those might be flagged (though some of these are dynamic issues not always caught by static analysis).
ARIA roles and attributes: Checks for improper use of ARIA (Accessible Rich Internet Applications) attributes. For example, using role="button" on something that’s not clickable, or having ARIA labels that are empty or mismatched. It might warn if ARIA is used where semantic HTML would suffice, or if there are ARIA ID references that don’t exist.
Heading Structure: While having at least one H1 is an SEO check, accessibility also prefers a logical heading order (H1 followed by H2, etc., no skipping levels arbitrarily). If your pages skip levels (e.g., jump from H1 to H4 with no H2/H3), it might note that as a structural issue affecting screen reader users who often navigate by headings.
Link/Text Alternatives: If you have media like video or audio, the checker might remind you that transcripts or captions should be provided (though it likely can’t tell if you have them without manual input). Some accessibility tools list an item if a <video> has no captions or a <audio> has no transcript link, etc.
Interactive Element Names: Every link or button should have a clear name or text. If the page has generic “Click here” links or icons without labels (like just an icon of a phone that is a link to contact), it may flag those: “Link text is unclear” or “Button has no accessible name”.
General Compliance Areas: It might group things by WCAG guideline numbers or levels (A, AA, AAA). Common checks are for WCAG 2.1 AA standards (which is what most laws require). Evergreen likely focuses on those.

Viewing and Interpreting Accessibility Issues:

Similar to SEO, issues will be listed with descriptions and affected elements/pages:

You might see a list like “Errors: 3 (critical issues that severely impact users), Warnings: 15 (moderate issues), Reviews: 5 (items to manually check)”. Automated tools often have some items they can’t be sure about and mark for human review (e.g., “This page has an image that might need alt text – verify if it’s decorative or informative”).
Click on an issue to see details. For example, “Low Contrast Text” might show: Page /pricing – the text “Save 50%” in the hero banner has #888888 on #FFFFFF (contrast 3:1). It likely needs a darker color for visibility.
“Image missing alt” will list images with either their file name or some identifier to locate them, along with the page URL. E.g., “/about – <img src="team-photo.jpg"> has no alt attribute.”
“Form label missing” might show which form field (maybe by placeholder text or something) is unlabeled.
“Button missing accessible name” could highlight a button element that has no text inside and no aria-label (common if you have an icon-only button).
Many tools also show the snippet of HTML or element that has the issue, which can help developers find it in the code.

Guidance for Fixing Accessibility Issues:

For each issue, Evergreen will typically describe why it matters for users with disabilities and how to fix it in general terms:

For contrast issues: “Ensure text has sufficient color contrast. You can darken the text color or lighten the background color. Aim for a contrast ratio of at least 4.5:1 for normal text .” (It might not cite WCAG directly in text to the user, but might mention WCAG 2.1 AA standards).
For missing alt: “Provide a descriptive alt text for images that convey information. If an image is decorative, include an empty alt (alt=\"\") so it’s skipped by screen readers.”
For form labels: “Every form input should have a corresponding <label> element or an aria-label/aria-labelledby. Add a visible label like <label for=\"email\">Email:</label> and ensure the input has a matching id=\"email\".”
For missing button names: “Buttons or links that only have icons need an accessible name. This can be done by adding a descriptive aria-label (e.g., aria-label=\"Call us\" on a phone icon link) or include visually hidden text within the button for screen readers.”
It might link out to more documentation or reference guidelines for further reading.

Taking Action on Accessibility Insights:

Improving accessibility often requires changes in the website’s code or content similar to SEO fixes. Here’s how to proceed:

Identify Low-Hanging Fruit: Some fixes are simple – adding alt text, adding labels – these you can often do quickly in your CMS (if it has fields for alt text or form labels) or with minor code edits. Tackle those first.
Involve Designers for Contrast Issues: If text color needs changing, coordinate with your design team. The fix might be as easy as using a darker shade of the brand color for text. Evergreen highlighted where it fails; you can use that info to pick a new color that meets standards. There are contrast checker tools that designers can use as well.
Developers for Structural Issues: Some items, like fixing heading order or ensuring focus states and ARIA attributes, might require developer intervention. Provide them the Evergreen report details. For instance, if a dev wasn’t aware, now they’ll know to add aria-label to that icon button or to restructure the heading levels in a template.
Manual Testing: Automated checks catch a lot but not everything. Use Evergreen’s report as a baseline, then consider doing some manual tests: navigate your site with keyboard only, try a screen reader on critical pages, etc. Evergreen might have flagged a “manual review” item like “Ensure link text is meaningful out of context” – you’d then check those yourself to decide if it’s fine or needs change.
Re-run audits: After fixes, run the Accessibility Insights again. Hopefully errors drop to zero or near zero. Over time, aim to maintain an accessible site by incorporating accessibility into your content and development process (like always adding alt text when uploading images, using proper headings, etc., so issues don’t creep in).
Accessibility Standards: Know that Evergreen’s suggestions align with WCAG criteria. Achieving a good score in Evergreen likely means you’re meeting at least WCAG 2.1 Level AA on those points. Keep records especially if you operate in regions with accessibility laws (like ADA in the US or EN 301 549 in the EU) – an Evergreen report can help demonstrate your proactive steps if ever needed.

Why this matters beyond compliance: Improving accessibility often improves overall user experience for everyone. For example, better contrast helps users in bright sunlight, not just those with low vision. Well-structured content (with headings and labels) helps search engines and improves SEO. So by fixing these, you often get multi-fold benefits: happier users, wider reach, and possibly SEO gains too.

In conclusion, use the Accessibility Insights to ensure no visitors are left behind. It’s a satisfying process to watch your site go from having a bunch of accessibility issues to being much more inclusive. And once you’ve fixed the major items, maintaining that standard is easier – Evergreen will help catch any new issues that might arise as you continue to update your site.