ADA compliancy

That worked perfectly! Thanks!

Hey Rikard,

I’ll post the rest of the accessibility report – I’d be curious if some of these items could be addressed in the next update for Enfold? They’re relatively “minor” but I’m having more and more people come to me quite concerned about whether or not their company will be sued.

Developer updates

Add :focus (tab) styling to all links (primarily an issue in the site’s footer)
Focus styles allow users to easily navigate the site using only their keyboard, which is a must for users who have difficulty using a mouse/trackpad.

Make sure that all“id” attributes are unique on every page
Duplicate “id” attributes is a violation of HTML standards, and can cause issues with older screen readers.

Add appropriate “aria-label” attributes to links that do not have discernible text (primarily for the social media links in the footer)
Links without discernible text in them cannot be read by screen readers. The solution to this is to use appropriate “aria-labels” to tag all textless links, allowing screen readers to infer their purpose.

Remove the “maximum-scale=1” attribute from “<meta name=”viewport”>” tag
The “maximum-scale=1” attribute disallows mobile users from zooming in on your website. Removing this is necessary to allow visually impaired visitors to enlarge any portion of the site when browsing on their phone/tablet.

Make sure all site content is contained within “landmark” regions (<header>, <nav>, <main>, <footer>)
Using these landmark tags allows screen readers to clearly understand the split between the site’s high-level sections.

Ensure that all elements have sufficient color contrast
Users with poor vision or color blindness are unable to distinguish text against a background without sufficient contrast. Ensuring that the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds is incredibly important for accessibility.

ARIA hidden element must not contain focusable elements
The site has a hidden “scroll to top” button that is still focusable via the tab key. A focusable element with aria-hidden=”true” is ignored as part of the reading order, but still part of the focus order, making its state of visible or hidden unclear.
Guidelines for the client to focus on moving forward

Make sure that all headings (H1-H6) are contextually appropriate, and ordered correctly
Screen readers use headings to summarize content sections, allowing non-sighted users to quickly navigate through the site. Ensuring that headings are contextually and semantically valid, as well as used to describe the structure of the page, not just highlight important text, speeds up this process.

Make sure that heading levels only increase by one (H1 followed by H2, never H1 followed by H4)
The underlying purpose of headers is to convey the structure of the page. While text size can be used to structure the page for sighted users, the same can not be done for non-sighted/visually impaired users. Only properly structured headings can achieve the same for screen readers, because a screen reader identifies a header only if it is properly marked-up.

Make sure that all pages contain a top-level H1 tag
Many of the site’s pages are missing H1 tags. Generally, it’s a best practice to ensure that the beginning of a page’s main content starts with an h1 tag, and also to ensure that the page contains only one h1 element. Screen readers have keyboard shortcuts to navigate directly to the first h1, which, in principle, should allow users to jump directly to the main content of the page. If there is no h1, or if the h1 appears somewhere other than at the start of the main content, screen reader users must listen to more of the page to understand its structure, wasting valuable time.

Ensure that all inline images have appropriate “alt” tags
Screen readers have no way of translating an image into words that gets read to the user (even if the image only consists of text). As a result, it’s necessary for images to have short, descriptive alt text so screen reader users clearly understand the image’s contents and purpose.