Support » Theme: Gridd » Not Fully Accessible

  • I downloaded this theme to have a fully accessible WP site to showcase our Accessibility Task Manager Plugin. This theme is not accessible in the following areas:

    1) The Headings in the header are coded as Paragraphs not Headings. If it looks like a heading it must be coded as a heading. This code could not be edited in WP.

    2) There was no visible focus on the Paragraph elements (pretending to be headings) or the logo. Visible focus must be provided at a 3:1 contrast on all focusable elements.

    I tried to contact the designer about the inaccessibility of their theme but could not find free support or any contact information without having to pay for an account.

    Their slogan is Accessibility Matters and I completely agree so I will be searching for a truly accessible theme.

Viewing 1 replies (of 1 total)
  • Theme Author Ari Stathopoulos

    (@aristath)

    1) The Headings in the header are coded as Paragraphs not Headings. If it looks like a heading it must be coded as a heading. This code could not be edited in WP.

    Are you referring to the sitename & tagline? If you are, then this is a common compromise in most themes, and it’s more complicated than it looks.
    On the frontpage of your site the sitename is an h1 element. However, on a post the post-title is the h1 element. To avoid hierarchy issues the sitename gets “downgraded” to a paragraph. Having the wrong titles hierarchy would be more detrimental to accessibility than using the wrong style for the logo. If you have any ideas on a better compromise or solution then please by all means we’re open to suggestions.
    This is not unique to the Gridd theme, all themes do this. For example the twentytwenty theme has a similar approach, but instead of using a paragraph it uses a div (you can see the code here: https://github.com/WordPress/WordPress/blob/001ffe81fbec4438a9f594f330e18103d21fbcd7/wp-content/themes/twentytwenty/inc/template-tags.php#L43-L44)

    2) There was no visible focus on the Paragraph elements (pretending to be headings) or the logo. Visible focus must be provided at a 3:1 contrast on all focusable elements.

    If you try adding a logo you will see why we opted to do it this way for logos specifically. Most sites use an image logo and not the sitename… adding an outline for example on an image logo on focus completely destroys it.
    Do you have any suggestions? If you do I’d be more than happy to implement them in the next version! Adding visual focus to a text header is easy via CSS, if you need help with that I’d be more than happy to assist.

    I tried to contact the designer about the inaccessibility of their theme but could not find free support or any contact information without having to pay for an account.

    You just did! 🙂 Support for the free theme is handled here.

    Their slogan is Accessibility Matters and I completely agree

    I’m glad to hear that. If you can have any solutions to suggest on the 2 topics you mentioned above we’d appreciate your input. These 2 points were conscious compromises that all themes do. Fixing these 2 in the most obvious way (as in, just add an outline on focus and change to h1 on all pages and not just the frontpage) can cause more problems than it would solve..

    • This reply was modified 1 week, 3 days ago by Ari Stathopoulos. Reason: blockquotes formatting (this is not markdown...)
    • This reply was modified 1 week, 3 days ago by Ari Stathopoulos. Reason: another blockquote
    • This reply was modified 1 week, 3 days ago by Ari Stathopoulos. Reason: Seriously?
Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this review.