RAMP accessibility issues

Hello,

I am working on the RAMP COVID-19 initiative. We chose Discourse for our forum and are very happy with it.

A colleague and I have been looking at accessibility. I believe that we have addressed low-contrast issues by means of the admin CSS functionality. But we have some issues, says WAVE, that we are not sure we can tackle ourselves, as follows:

  • Linked image missing alternative text: these are to do with the avatar pictures. There is a descriptive title, but alt is empty.

  • There is a missing label in every page:

    <div><input type="text"></div>

  • There is an empty heading in every page:

    <div class="title"><h3></h3><!-- --></div>

  • There are numerous reported empty buttons, associated with svg.

  • There are empty links, e.g.:
    <a href="" aria-hidden="true" tabindex="-1" class="tabLoc"></a>
    and
    <a href="" class="edit-topic" title="edit the title and category of this topic" data-ember-action="" data-ember-action-27="27"><svg class="fa d-icon d-icon-pencil-alt svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#pencil-alt"></svg></a>.

  • There is an empty table header: <th data-sort-order="posters" class="posters"></th>

I will be very surprised if we are the only ones to have these, so I am wondering if WAVE is overthinking things or if perhaps we are missing a trick or two. Any help will be most appreciated.

Many thanks in advance,
Kostas

8 Likes

These are all visible in the rendered page html, via the browser f12 inspector?

Thanks for taking an interest. There is one I am not sure I can find (the empty heading) but the rest I pick up from the WAVE “code” functionality and can find (with some effort) with the F12 inspector.

I am not sure timezones are on our side (I am in the UK, UTC+01:00) but I would be happy to go on a Teams or similar call to demonstrate, if helpful.

1 Like

The aria-hidden should be properly hiding this link from accessibility tools.

4 Likes

If there are any of these which are easy-ish to address, can we do so @awesomerobot?

3 Likes

Yes, I believe at least a couple of these are easy fixes. I’ll take a closer look.

3 Likes

The blank alt attribute itself is ok… that’s supposed to signal to a screen reader that the image is decoration only and it can be ignored… BUT we also include the title attribute… so this can be problematic sometimes according to `img` with null `alt `and non-null `title` attributes - Screen reader compatibility

Some screen readers are properly ignoring avatars, but others are reading the name/username twice because of this.

I made a PR to remove the title attribute from post avatars:

This is the input where we show the URL to copy and share, PR to add an aria label here:

I couldn’t find this one… might be based on site settings? need to look a little more

We don’t label this for sighted users because we can glance at the column and make an assumption about its contents… that’s a lot harder to do if you can’t see… adding a label for screen readers makes sense:

The remaining issues I didn’t cover are button-related, I still need to look into those…

6 Likes