H2 to H3 for YaleSites sidebar block

Request Type:

General Assistance

Forums:

Author:

Katie Goodridge

Issue/Request:

Hi,

I’m having some issues on how to change a built-in style for a sidebar block. With Yale’s accessibility initiative, we want to change the ‘link block title’ from h2 to h3 in the ‘related links block for basic pages’. This style will be for all the related link blocks that have more information/key contacts. I tried using the CSS injector but couldn’t pinpoint the code to change it. I’ve also read that themes CSS should never be modified directly as it could impact the entire site if system updates are made. Is there a way this could be modified? I’ve attached some screenshots below.

Thanks very much,
Katie

Christine Mongillo on May 21, 2018:

Hi Kaitlyn,

I spoke with Alyssa Dechairo since she did the bulk of the Giving site migration. Looking at the link you included in your note (giving.yale.edu/ways-to-give/annual-giving) I see that the current heading structure on the production page is actually incorrect from an accessibility standpoint. The second block, Increase your contribution, should be an h2 rather than h3. Likewise, Gift Guide should be h2 and Browse by: h3 rather than h3 and h4.

The use of keyboard shortcuts to read only headings, or only specific heading levels allows a screen reader user to glimpse a page without having the whole thing read to them, much the way sighted people would skim a website. Otherwise they are left to listen while an entire page is read to them before getting to a specific section. Keeping headings sequential is important, and block headings should start with h2.

Alyssa mentioned that she recalls giving Eamonn Crowley-Edge an option of shortening those block titles on the development site: dev.giving.yale.edu/ways-to-give/annual-giving. We don’t think he ever responded to this option, but you can take a look if you so choose.

I hope this information is helpful. Let me know if you have any further questions.

Kind regards,

Chris

Katie Goodridge on May 29, 2018:

Hi Christine,

Thank you for your quick reply! Our goal for the sidebar was to make it an ‘also’/ ‘sub-secondary’ informational tool. We did not intend for that information to be at the same level of importance as that on the pages it lives on. If you look at the entire page of https://giving.yale.edu/ways-to-give/annual-giving/yale-college, you will see we use H2s and H3s on the main body page and currently it looks like the sidebar has the same importance (if not more importance) than those sub-heads (h3s) on that page.

As it is now: the screen reader ignores the sidebars? Is there any way we can css stylize the size of those sidebar headings so they don’t appear as large? I apologize if I’m misunderstanding the functionality; is there a downloadable screen reader to test out our pages with?

Thank you,
Katie