Dawn Theme Accessibility Issues

Hey there,

I was very happy to use the Dawn theme, which is elegant and professional. I found some accessibility issues, however, and wanted to share those, as many can be improved.

These notes refer to the official dawn theme of 21st June 2022.

most serious

  • There is no option in the theme for alternate text of the publication image
  • The burger menu was not visible at all to a colleague using a screenreader on iOS/mobile. It is currently implemented as a <div> - this would be more accessible if it was a <button>. In the case it’s kept as a <div>, then modifications can be made (including the aria-role and giving aria reference for expanded/collapsed).

Affecting Usability of the theme

  • Default secondary theme colour has low colour contrast
  • Keyboard navigation is negatively affected by outline focus being “none” for buttons (as the focus is not clear)

Consider action

  • the alternate text for featured images in the carousel is the title of the post, where it is probably better as the alt text of the image

There are some issues with the portal (I don’t think that’s the theme though?) I will post separately regarding access issues to do with Ghost.

For a narrative of how I approached accessibility on the theme, see my post with reflections.

Thanks again for all the great stuff you make. Hope these adjustments can be made so that it will be more usable for everyone. It would also be good to consider testing of the theme in this regard and documenting how accessibility has been approached.

Cheers,

Peter

Hi @peterfremlin,

It’s always great to see someone taking an interest in web accessibility! :slight_smile:

As the Dawn theme is publicly available on GitHub (GitHub - TryGhost/Dawn: A minimal newsletter theme for Ghost), perhaps you could submit some Pull requests to fix what you found?

Have a nice day!

Hey Benjamin,

Thanks for kind reply. You might also be interested in the other posts I made about ghost accessibility in bugs: here’s a full list.

happy to share what I did here (sorry that I’m not able to do the github thing; albeit as you will see a fair bit of this is kludges so I’m sure can be done better)

Color Contrasts

I forgot to say: there should be a warning about using the publication brand colour in dark mode, as that might lead to very bad contrast on links.

So in css I changed that and also the default secondary colour to ensure better contrast.

Alternate text

In publication image: solved by hard-coding in partials/cover.hbs

In featured images: used the featured image alternate text

In author profile images: I am misusing the author location information as the field to store alt-text about the profile image, and so changed the author pages accordingly.

Burger Menu

Change in partials/header.hbs: <div class="burger hidden-lg hidden-xl" tabindex="0" role="button" aria-label="Toggle Menu" aria-expanded="false">.

Change in assets/js/main.js to give aria-roles and allow keyboard navigation:

function burger() {
‘use strict’;
$(‘.burger’).on(‘click’, function () {
body.toggleClass(‘menu-opened’);
if ($(‘.burger’).attr(“aria-expanded”) == “true”) {
$(‘.burger’).attr(“aria-expanded”, “false”)
} else {
$(‘.burger’).attr(“aria-expanded”, “true”)
}
});
$(‘.burger’).on(‘keydown’, function(e) {
if (e.keyCode == 32 || e.keyCode == 13) {
body.toggleClass(‘menu-opened’);
if ($(‘.burger’).attr(“aria-expanded”) == “true”) {
$(‘.burger’).attr(“aria-expanded”, “false”)
} else {
$(‘.burger’).attr(“aria-expanded”, “true”)
}
return false;
}
});
}

Keyboard navigation

As you can see above I added a tabindex=0 to the burger menu, several places in the css removed the outline: none, and the function above also allows keyboard expansion of the burger menu.

Cheers,

Peter