RAMP accessibility issues

ux
1

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
2

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

1 Like
3

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
4

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

4 Likes
5

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

3 Likes
6

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

3 Likes
8

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:

https://github.com/discourse/discourse/pull/10719

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

https://github.com/discourse/discourse/pull/10717

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:

https://github.com/discourse/discourse/commit/23b962d9340b52b509d4adf25f1574fe40d7e062

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

8 Likes
9

Hello,

Many thanks for the quick responses and action at the time. Can I confirm that the merged requests are now in the code from some version?

Also, would it be helpful if I (tidied up and) shared the theme we modified so as to pass WAVE accessibility tests?

Regards,
Kostas

1 Like
10

Sure, latest discourse contains the fixes

Sharing a theme would be welcome

2 Likes
11

I will pluck the courage to do all the updates later (hopefully) and report again.

Re theme, it all got a bit messy. We use (and modified) the Light theme. We made the following high-level changes to the colours:

Tertiary:   #0088cc → #006498
Quaternary: #e45735 → #C93C1B
Danger:     #e45735 → #C93C1B
Success:    #009900 → #007A00

The clever trick I thought of late is to just test the colours page for accessibility. :slight_smile:

We then made a large number of changes using the CSS editor (admin/customize/themes/3/common/scss/edit) that I am not sure how to pass on (I can copy-paste, but I am not sure that’s what you want nor if you want it on this thread). I think if we could see the other colours mentioned (e.g. var(–primary-medium)) on a high-level interface, things may become easier. E.g. a classic one was #919191 → #595959, but my method just treats symptoms that I somehow see when traversing pages (and then again the dynamic nature of the “site” means that what passes today may not pass tomorrow).

Happy to try in a different fashion too, just let me know, though at no point will I be able to run a demo service, check out code etc.

I should also note that I could not fix admin/upgrade at all (and it has numerous contrast issues); I am not sure if it does not follow CSS or what the reason is.

3 Likes
12

The styleguide plugin will show you all of the colors :slight_smile:

https://theme-creator.discourse.org/styleguide/atoms/colors

13

My recollection is the admin side of Discourse has separate (harder to edit) style sheets to make it harder for people to accidentally lock themselves out of a usable admin interface with CSS changes.

14

I fell a bit behind with this, though we upgraded the forum. But thought to reply to the people who took the time (many thanks!) to look into this thread.

Thanks. If I click on your link, Wave finds 13 accessibility (low contrast) issues, but not on the colours themselves. That’s because, unlike the colours page, it does not show how they are used (as background or foreground with lettering).

Let me know how I can help; it does have many contrast errors.

15

Hello again.

I had another look and the number of errors is greatly reduced, many thanks @awesomerobot and others who have helped!

I still get the following errors:

  • Visiting a category: Empty button on the following code:
    • <button name="Filter by: [missing %{name} value]" role="combobox" data-name="regular" data-value="1" aria-expanded="false" aria-haspopup="menu" aria-owns="ember41-body" tabindex="0" id="ember41-header" class="select-kit-header single-select-header btn-default dropdown-select-box-header btn no-text btn-icon ember-view" type="button">
    • Also on other pages with different numerals after ember.
  • Visiting a category: Empty table header:
    • <th data-sort-order="posters" class="posters" aria-label="Posters"></th>
  • Post by user “system”: Linked image missing alternative text:
    • <img alt="" src="/user_avatar/ramp-forums.epcc.ed.ac.uk/system/90/1_2.png" class="avatar" width="45" height="45">
  • Any post: Empty link
    • <a href="" aria-hidden="true" tabindex="-1" class="tabLoc"></a>
    • And permutations of the elements in the above statement
  • Search with valid results: Empty heading
    • <h3 class="search-footer"><!----></h3> (I edited the formatting here, deleting whitespace and line feeds)
  • Search with valid results: Five missing form labels on the advanced search (I can provide more info if needed)

Any help will be most appreciated.

16

And another one:

  • In rated posts (not sure how well adopted this is across Discourse, it is an extension that @angus kindly developed for us): Missing form label
    • Numerous (40 in the page I am looking at, with two users rating it) instances looking like this: <input class=" disabled" type="radio" value="1" checked="" disabled="">. That’s under <span class="star-rating">.
1 Like
17

Hey @KKavoussanakis :slight_smile:

@fzngagan Will take a look at that one asap.

1 Like
18

I should have acknowledged @fzngagan too; apologies. Thanks for taking an interest and good to hear from you again.

2 Likes