Tips for accessibility in custom CSS

Design, Branding, and Customization
#1

Hi @ebell,

I have a question about the accessibility implications of a piece of custom CSS I’m thinking of implementing. We’ve been thinking of using display:none on the section.media headers in stories, but I am assuming that they are partially there for accessibility purposes.

If we just had the image and audio blocks without the headings, would a screen reader still be able to provide a good account of them from the image alt text etc? If not, is there a screen reader friendly alternative to display:none I could use?

All the best,
James

#2

Here’s the class that is already in use for that purpose:

.hidden {
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

(You would use the class section.media h3 to apply those styles in the Custom CSS theme option.)

Here’s an article that explains the difference between display:none and visibility:hidden:

You might also want to look into some more complicated examples here (although for this case, it might be overkill):

#3

That’s really helpful @ebell. I’ve implemented that.

I have one more question, if I may.

I’m interested in explicitly identifying the h2 heading on a collection entry (where it gives you the choice of browsing items in the collection). Do you have any tips about what to enter into a :not() when adding CSS to hide some other h2 headings?

As you can see I’m getting more into CSS every day, but still very much a novice.

#4

As far as I can tell, there’s not really anything on the collections pages that would necessitate a :not selector. I think you might be able to target what you need with specificity rather than exclusion.

In the example below, I’ve added an h2 in the Description field. I’m kind of guessing that this might be what you mean, since there aren’t any other h2s on that page by default.

Screen Shot 2020-11-23 at 3.06.52 PM
Screen Shot 2020-11-23 at 3.06.52 PM2490×1434 585 KB

Here are some (overly-) specific selectors for targeting those h2s:

body.collections.show article h2{
    // your styles for the default H2 collection title on collections/show
}
body.collections.show article section#text{
    // your styles for any H2s that you might add using custom HTML on collections/show
}
body.collections.show article #collection-description h2{
    // your styles for a custom H2 in the description field on collections/show
}

As an aside, if this is what you’ve done, I’d suggest using an h3 instead in order to maintain a logical content hierarchy.

#5

Thanks @ebell. Your tip about filtering what you do want to exclude rather than using :not plus your examples helped me hide the h2s I wanted gone and leave the rest!