Accessibility Tweaks for Discourse


(Sarah Hawk) #1

I’ve spent the morning optimising the Discourse side of our platform for accessibility. My ultimate goal is to limit the extraneous cognitive load required to consume the site. Extraneous cognitive load is anything taking up mental resources outside of the primary goal of the page (i.e. understanding or learning).

The key changes that I’ve made are:

  • Increased the base font size of posts to 16pt
  • Changed the body font colour to #2F4F4F (dark slate grey)
  • Changed the background colour to #FBFBFB (e-paper light)
  • Changed the unvisited links to #e63e00 (dark orange) and visited links to #2F4F4F (dark slate grey)

I’ve also made a few other small changes and are a few others to come (like upping the font size in the create post window).

Dark grey text on a light grey background is more comfortable to read than black on white because there is less contrast, and it goes without saying that a larger font size is easier to read.

Clearly differentiating between link colours is an easy way to provide short term memory support (you don’t have to remember where you’ve been because you can see at a glance) which is a good way to reduce extraneous cognitive load.

The great thing about Discourse is that I am easily able to make these changes by customising our CSS through the AdminCP.


Handling negative views about Discourse
(Colleen Young) #2

Hi Hawk,
I’m going through a similar exercise for the newly launch MayoSMHN community. Our accessibility expert, which we are lucky to have on our External Advisory Board, shared that infinite scroll is not accessible to some users. Have you considered removing infinite scroll?

Here are a few articles that PF Anderson share with me. First this very useful accessibility checklist from the University of Michigan. Nice and concise and actionable: http://hr.umich.edu/webaccess/

And a few links on the infinite scroll problem, and how to make it more or less accessible. You’ll note that one article is from SitePoint (wink)

2015:
http://www.ssbbartgroup.com/blog/infinite-scrolling-impact-on-assistive-technologies-series-1/

2014:
http://www.nngroup.com/articles/infinite-scrolling/
http://adrianroselli.com/2014/05/so-you-think-you-built-good-infinite.html (bravo!)
http://simplyaccessible.com/article/infinite-scrolling/
http://www.sitepoint.com/ux-infinite-scroll-good-bad-maybe/

2013:
http://www.smashingmagazine.com/2013/05/infinite-scrolling-lets-get-to-the-bottom-of-this/ (hear, hear!)


(Sarah Hawk) #3

Excellent resource, thanks @colleenyoung

Great question. I did give it lots of consideration, and decided that it is appropriate in our case.

Infinite scrolling is one of those interesting edge cases. It’s neither always good nor always bad, but rather something that should be decided on a case by case basis by weighing up the pros and cons.

This is the outcome if I tackle the most common cons in our case:

Focus is lost when navigating back
Discourse actually handles this so it’s not an issue. (Scroll down through this page a while, click on a link, click the back button and you’ll find that you’re exactly where you were when you clicked the link.)

Unable to access footer content
We made sure that all necessary home page footer content was accessible through the main navigation, and in the footer of posts (scroll down on this page).

Inability to get to the end
This argument has always confounded me somewhat – there is nothing of value at the end so why do you need to get to it?

Performance issues
This can be an issue in some cases (and is very slightly so on our homepage I concede, but in actual fact it is less of an issue than other factors, like analytics) but isn’t here on Discourse, which is where the infinite scroll is predominantly used.

Screen readers
In some cases infinite scroll messes with screen readers, and that is quite likely an issue here for a very small percentage of users (but most likely none). Discourse has quite a bit of work to do around accessibility (keyboard shortcuts are about as far as it gets), and I hope that happens soon. We made a decision based on how appropriate it is to our audience.

I am a huge fan of the Neilsen Norman Group when it comes to accessibility, and their stance on infinite scrolling is that infinite scrolling is not recommended for goal-oriented finding tasks, but that it is “advantageous for content that streams constantly and has a relatively flat structure, where each unit of content belongs at the same level of hierarchy and has similar chances of being interesting to users”. We fall firmly into the latter category.

It is important to remember that a lot of those articles were written before infinite scrolling became fairly commonplace (Twitter/Facebook etc). What people are used to is a large part of UX (and has a huge affect on extraneous cognitive load).

I’d be interested in hearing your take on it now. :slight_smile:


(Colleen Young) #4

@hawk forgot that I owed you’d you a response here. Or at least a response by proxy. This is the response our External Advisory Board member sent. Patricia is a medical librarian and very knowledgeable in accessibility. She replies,

"Well, I cannot see the thread, so responding only to her email.

She is right in that everything about accessibility is not-one-size-fits-all. Everything you do for accessibility for one group or target audience will make things difficult for someone else. That’s why the accessibility community recommends implementing options that make it easy for people to customize / personalize / optimize their own experience for their own needs. CSS is part of that.

The main issue that she addresses well is the footer problem. Ensuring that there IS NO FOOTER is a solution for that part.

Regarding performance issues, I haven’t used her site, so I can’t comment on that, but every site with infinite scroll that I have used has ended up making my browser crash. I’m far from being the only person who reports that problem. The idea is that most people don’t go deeply into a browse or search experience, only a couple screens down, usually. For me, I dig into search results up to around 50 pages (this is both in Google, Twitter, and other sites). Infinite scroll prevents me from getting deep into the results and makes older content impossible to refind because of crashing the browser as I dig deep. This is also part of the problem with “inability to get to the end.” I can’t find what content I’m missing or lacking, because I can’t get there. Assuming that there is nothing of value at the end is … absolutely shocking to me…

Screen readers. Yeah. Well, whoa. OK, read this, and then click to open the comments, and read those.

http://simplyaccessible.com/article/infinite-scrolling/

My two cents!"


(Sarah Hawk) #5

That is absolutely awesome. Thanks for going to such lengths!

I think Patricia and I are on the same page here. There are pros and cons to both and a lot of it comes down to usage.


(Colleen Young) #6

Personally, I really like infinite scrolling for discussions and comments - any user-generated content. When I found out that they make sites crash I was dashed. Does anyone have any data on this?

For SMHN we will likely implement a compromise put forward by Patricia. It will imitate Flickr’s “infinite scroll” where the scroll is only for one extra page, then it locks and gives you the footer and next page options. This repeats. So each “page” is really two.

Would really like to hear what @RPSupportOrg has to add to this thread.


(Colleen Young) #7

@hawk I will pass your thanks along to Patricia. She always goes deep. She’s a medical librarian after all. I learn so much from her.


(Sarah Hawk) #8

I was pretty surprised to hear that too. In all my years of working in a web dev company, I have never heard that before. I’ve definitely never experienced it.


(Dj Cyry) #9

This modifications are for the actual style or the old style ?
Can you share the palette colors ? Thanks


(Shreyas) #10

When the Mozilla community had moved from mailing list to discourse, I found it really hard to adapt to the change. I thought it was a ‘Discourse’ problem, but then I found FeverBee Experts to be very visually appealing.

Then I figured this played a very important role. I’ve suggested a lot of changes (guess I’ve developed an eye for UI+UX :grin:) to the Mozilla team. Hopefully those would be implemented in the next couple of months.


(Sarah Hawk) #11

The actual style. The colours are in the screen shot of my code in the original post. :slight_smile: