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:

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ā€¦

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