Accessibility Plugin

[Kami]

Dec 15, 2022 8:34:56 GMT -8 @ssscadmin said:

I have seen JCINK sites with such widgets or plugins, but Proboards doesn't seem to have one! I would really love to see a plugin that makes sites more accessible to persons with physical/mental/learning disabilities and other neurodivergences.

Plugin wishlist:

• Ability to increase/decrease font size without zooming in/out on page
• High contrast options for persons with visual impairments
• Dyslexia-friendly option(s) that can be toggled on/off: dyslexia-friendly fonts, extra-large/bolded periods, increasing spaces between periods and beginning of next sentence
• Underlining linked text to distinguish it from regular text
• Black and white/greyscale option (an autistic member on my site pointed out that it's helpful when they feel overstimulated)
• Highly visible button or icon to make finding these options as easy as possible

While I realize that some of these may not be feasible, I would consider it a win to make as many of these as possible available to admins and users.

Aside from font scaling, you don't need a plugin for the rest of this as it can all be done in themes; it does require that you do this manually -- as in creating themes manually -- but it's entirely doable with honestly minimal effort. A plugin is just javascript (I'm not sure how plugins on JCINK work), sometimes it has some CSS or HTML overrides, but ultimately it's just javascript.

- High contrast can be created via themes
- Dyslexia friendly options can be added via themes, and themes switched as needed. extra large / bolded periods, and increased spacing should come with those fonts, but if not some simple CSS could impact this also via themes.
- Underlined links is available in themes through the visual editor
- B&W / Greyscale Can be manually created by themes

The only thing I can see that would actually need a plugin would be font scaling without zooming.

If you want to create themes for this with these options, you could create a menu button either through the menu links at the top of the forum in the admin panel to lead users to their individual settings, or add a link in each theme via templates.

I know a plugin is an "easier" one-click, boom here are all the options with toggles, but scripting isn't always the solution (and relying just on scripting to get these accessibility features added isn't best practice either).

**For the record in my opinion these should be built-in to PB's software, but that's not where we are with v5, sadly. Hopefully v6 will have some more built-in accessibility features / some default "accessible" theme templates so admins don't have to make it themselves.

[Kami]

Dec 15, 2022 12:03:28 GMT -8 @ssscadmin said:

Doing all of these things manually is very time-consuming, and when there are so many 'things' that need to be changed I often have to go over a theme multiple times before I fill in all of the gaps. The entire point of my request is that users would be able to use these settings regardless of what theme is displayed, and can use only the options that they need. It may be easy for you, or someone with a good grasp of coding, but for me it's a very tedious and frustrating process.

Additionally, it means that either disabled/ND persons are limited to the themes designed explicitly for them, or that the themes I can make are limited by the needs of disabled/ND persons.

If you want to create themes for this with these options, you could create a menu button either through the menu links at the top of the forum in the admin panel to lead users to their individual settings, or add a link in each theme via templates.

I'm afraid I don't follow?

I know a plugin is an "easier" one-click, boom here are all the options with toggles, but scripting isn't always the solution (and relying just on scripting to get these accessibility features added isn't best practice either).

I don't understand why scripting would be a problem here, especially since you already mentioned that v5 ought to have such options already available, but doesn't.

[Just for context, my day job is working with UX / UI & Accessibility, which I have been doing for nearly 20 years at this point]

I understand where you're coming from, but my goal here is to levelset expectations. I apologise for not elaborating further on my thoughts, leading to some me unfortunately implying the wrong things. Let me make up for that.

TLDR: Using Javascript to create accessibility overlays doesn't create a good user experience and does not increase accessibility. The short of it is that Javascript only applies after a page loads, so these aren't accessibility features at all, and just an overlay on top of the website. Accessibility overlays are widely recognised as a poor overall user experience. Here's some documentation on that: [1] [2] [3] [4] [5]

Longer answers:

1. Ability to increase/decrease font size without zooming in/out on page
This is possible with Javascript, which is all a plugin is (it's just in a more user-friendly interface). I don't see an issue with this getting made, and I do have a script you can add to the forum should you wish. I'd have to do some fiddling to make it into a plugin, but can do if you need it. Caveat: increasing the font size on the user-end can break any containers (like mini profiles) on your forum and create a negative user experience for the text, depending on the size users increase this to.

2. High contrast options for persons with visual impairments
The only way you'd be able to do this is with creating a high contrast theme. There is no way to force a colour scheme with javascript if that theme doesn't already exist. (There is a theme-switcher plugin, but it sounds like that's not what you're looking for). ProBoards would need to implement, through the software, high contrast compatibility for javascript to be able to trigger it. 

3. Dyslexia-friendly option(s) that can be toggled on/off: dyslexia-friendly fonts, extra-large/bolded periods, increasing spaces between periods and beginning of next sentence
Again, this is something that would need to be implemented through the software due to the requirement of options that need to be toggled off and on. Any script that is used to create this effect is just an overlay and doesn't actually change the font. It'll create shifting text (another problem for dyslexic users) and flashing (issues for photosensitive / epileptic users).

4. Underlining linked text to distinguish it from regular text
You will not get someone to create a plugin for this because this is literally just CSS. Adding an underline to links can be accomplished in Themes > Advanced Styles & CSS > Visual Editor (tab) > Default Forum Text > Links > Text Decoration: Underline. If your intent is to have this to be something that people can toggle off / on, I suppose you could make a plugin for that as well, but again, this would be far better as a built-in feature due to the fact that javascript will only apply after a page load -- so you will see underlines appear (or disappear, depending on what the default state is) only after everything is loaded. 

5. Black and white/greyscale option 
This is potentially possible via javascript, but you're going to risk creating a flashing effect due to javasript loading after page loads which will negatively impact anyone with photosensitivity or epilepsy. 

6. Highly visible button or icon to make finding these options as easy as possible
This part would require not just a button but an entire user-facing UI (as opposed to just an admin-facing UI in the admin panel, which comes with plugin creation) to be coded to display all of these options (that would be a mix of JS + CSS + HTML). The plugin would then need to store every user's settings either locally (via browser cookies, which means if the user changes browsers or ever has to clear their cookies, they will lose their settings) or through user keys, which have a finite space to store data + could have a problem with dirty data which would impact whether or not the settings work. That said, if you were to create multiple themes with various accessibility features, then you could use the theme switcher plugin to allow users to switch their theme settings from anywhere in the forum, or add a link via your admin panel (either through Forum Settings or through Layout Templates (HTML)) to your menu navigation at the top of the forum to lead a user directly to their theme settings.

I really wanted to specifically address two additional points you made:

The entire point of my request is that users would be able to use these settings regardless of what theme is displayed, and can use only the options that they need.

I know this and I commend you for this. I know my workaround sucks, and is a lot of work and time investment. However, this is the best way to provide accessibility for your users, in light of an absence of features inherent to the software, for the reasons outlined above. Which leads me to:

Additionally, it means that either disabled/ND persons are limited to the themes designed explicitly for them, or that the themes I can make are limited by the needs of disabled/ND persons.

This is actually not true at all, broadly speaking. Theoretically, you could create multiples of the same theme that address specific user concerns. It is, as you probably guessed, incredibly tedious to do so. But you could take any theme and create high contrast, greyscale, dyslexia-friendly, and whatever else you need, versions of them, as well as a single other version that has it all combined.

I say 'theoretically' because the caveats to this is you would need time and inclination. Skill is a possible consideration as well, but only if the themes you created are very complex (which doesn't seem like the case based on context? Please correct me if I'm wrong).

Is it a perfect solution in the absence of built-in accessibility features? No. TBH it really sucks! But it is more reliable than javascript (which, as an aside, can also always break if any of the back end structure changes). It is however absolutely possible to create beautiful, accessible themes without being 'limited' by peoples' needs.

[Kami]

Dec 15, 2022 15:23:33 GMT -8 @ssscadmin said:

I appreciate the in-depth answer, that does make a lot more sense.

I've already considered cloning skins to make accessible versions available, but already know that that will take a lot of time on my part; is there no way to streamline changing, say, the fonts to all be the same font family? Or am I doomed to just have to expand all of those menus in the visual editor? (I am NOT good with CSS or coding, so I have to do things the Super Weenie Hut Junior way)

You can! I'm running errands right now but I would be happy to walk you through this when I get home. Don't be afraid of CSS either. If you're only making a handful of changes, it shouldn't be anything too complex and I can walk you through it all.

[Kami]

Dec 15, 2022 17:59:18 GMT -8 @ssscadmin said:

That would be awesomesauce. Lets maybe set an appointment or something? I have to go to bed soon :c

I'll post something in the morning during business hours. It doesn't need to be in real time :)

[Kami]

Dec 15, 2022 15:23:33 GMT -8 @ssscadmin said:

I appreciate the in-depth answer, that does make a lot more sense.

I've already considered cloning skins to make accessible versions available, but already know that that will take a lot of time on my part; is there no way to streamline changing, say, the fonts to all be the same font family? Or am I doomed to just have to expand all of those menus in the visual editor? (I am NOT good with CSS or coding, so I have to do things the Super Weenie Hut Junior way)

So to answer, there are two ways to accomplish this:

1. If you are using a "web-safe font" you can just use the visual editor on one level — in the visual editor start with Text Styles > Default Forum Text > Font Family . Pick a web-safe font from the list of available fonts in the dropdown, and boom, it's set for everything else.

2. If you are not using a "web-safe font" (note: web-safe does not mean safe in a security sense, but in a cross compatibility with all browsers / platform sense), then you will need to use the stylesheet. If you're using something like OpenDyslexic, then this is the route you'll have to take. I can break it down step by step since you're not super comfortable with CSS, but I don't want to overwhelm you if this isn't the route you're taking.

I'll also note that while I personally enjoy using OpenDyslexic and similar fonts because they help my particular brand of dyslexia, dyslexia-specific fonts are not inherently more accessible than other fonts. Happy to go into "what makes a font face accessible" if you're interested!

[Kami]

Dec 16, 2022 10:30:23 GMT -8 @ssscadmin said:

I'll also note that while I personally enjoy using OpenDyslexic and similar fonts because they help my particular brand of dyslexia, dyslexia-specific fonts are not inherently more accessible than other fonts. Happy to go into "what makes a font face accessible" if you're interested!

That would be fabulous, my own knowledge of accessibility tools is limited to user feedback and Google, so any clarification you can provide would be great!

Sure!

So, theoretically, the reason fonts like OpenDyslexic (and similar) allegedly work is because of the way the letters themselves are shaped.

Most people think of dyslexia as letters wiggling or "jumping" around on the page (so someone that reads the word 'dog', might get the letters mixed up and visually see 'ogd' or 'god' or 'dgo'). OpenDyslexic and fonts of this nature use this conception and are designed combat the wiggling / moving letters by introducing letters who visually are weighted (thicker) towards the bottom of the letter to "ground" them, and clear visual identities for each letter.

Unfortunately, that's a really old misconception of how dyslexia "works"; dyslexia actually has many manifestations, like words being compressed together to be a jumbled overlapping mess, or (in my case) words actually being fine on paper and your brain literally just not interpreting it correctly after your eyes take it in. Other people may experience physical symptoms of dizziness or illness, they may have trouble remembering what words look like even though they've seen them before, and so on. OpenDyslexic and fonts like it don't do anything to address these manifestations of dyslexia (and note that one person may experience multiple symptoms simultaneously).

Anecdotally as someone who likes OpenDyslexic and has it set as my font of choice on Kindle, it's helpful but it wouldn't recommend it over another font​​​​. It helps with clarity, especially at larger sizes, but I still get letters confused and have to re-read passages.

OpenDyslexic and the other fonts like it are an interesting attempt at addressing some of the common issues dyslexic people experience, but ultimately there is no evidence that they work any better or worse than fonts that follow best practices for legibility.  [Additional reading: 1 / 2 / 3 / 4 / 5]

Ultimately, the key to accessible fonts is spacing (kerning) and clarity between each letter. Fonts that are accessible for wide arrays of people with reading impairments have the following characteristics:

• Ample kerning between letters -- this is the default spacing between letters. You can sort of mimic this in CSS with the letterspacing property, but it's not the best substitution. Kerning prevents letters from touching each other, which helps with clarity for each individual letter.
  
  
• Sans-serif styles -- sans-serif fonts are fonts without "tails" or embellishments at the end of the letters; serif fonts are most commonly found in "typewriter" style font families, like Times New Roman. Sans-serif (as in without serfis) fonts don't have these, like Arial, Verdana, Comic Sans, etc.
  
  
• Distinct lettering -- there are some letters that look very visually similar to one another, so having distinct differences between them can be very useful. The most common culprits of this are:
  
  
  • b   d
  • p   q
  • c   e
  • l    I  (this is lower case L and upper case i)

• Font thickness -- while some bold / italic text is not a big deal, fonts that are super thick / are block letters can create a big problem (due to lack of visual clarity) for people with dyslexia (example: the Impact font family).
  
  
• Capitalisation -- ALLCAPS is not a huge deal when used sparingly, and if one is mindful of spacing and how each letter is stylised, but all-caps in sentence or paragraph text is generally illegible.

You're not going to find a single font that is perfect in all aspects for these, but there are some that are quite good. From the web-safe options, Arial, Verdana, and Comic Sans are likely the best (Comic Sans gets a bad rap, but a lot of people with dyslexia actually quite like it for reading, even if it's not particularly pretty).

From the "stuff you can find online that people like to use, eg Google Fonts" category, I particularly like:

• Roboto
• Nunito
• Montserrat (though I prefer this for title / heading over body text)

The great thing about Google Fonts is they provide an @import code that you can plop into your CSS stylesheet, and then 1 line of CSS can apply it everywhere on your forum and that's it. I don't think I use web-safe fonts anymore with the advent of Google Fonts, as the options there that are dyslexia-friendly are numerous and stylistically more pleasing to me.

I hope this helps! Let me know if you want instructions on how to add a Google Font (or any font, just note that if it isn't hosted somewhere, like Google's fonts are hosted on Google's servers and you'll have to host it yourself) to your forum.

[Kami]

Dec 16, 2022 13:15:16 GMT -8 @ssscadmin said:

This is all great stuff, thanks so much for spelling it out for me

With the visual editor, if I only change it at the top does that mean that it gets applied to all of the Text options?

Yep! Basically it sets what the default font is for that forum, provided you use one of the fonts in that list.

For what it's worth: CSS stands for Cascading Style Sheets, and the Visual Editor actually just a user-friendly interface that plops whatever values you put in directly to the stylesheet, just with the CSS version of what you inputted. It's also structured in a cascading way because of this, so whatever you specify at the "top" of the visual editor has a cascading effect through everything below it, unless you specifically change that element lower down in the list.

[Kami]

Dec 16, 2022 16:28:33 GMT -8 @ssscadmin said:

For what it's worth: CSS stands for Cascading Style Sheets, and the Visual Editor actually just a user-friendly interface that plops whatever values you put in directly to the stylesheet, just with the CSS version of what you inputted. It's also structured in a cascading way because of this, so whatever you specify at the "top" of the visual editor has a cascading effect through everything below it, unless you specifically change that element lower down in the list.

Okay, that makes WAY more sense. Thanks so much for your help, I think I got it from here <3

Any time! Best of luck :)