Documentation website is inaccessible

[mryellow]

https://openplcproject.com/docs/openplc-overview/

This website is hard white text on a hard black background.

Those with any form of issue with contrast sensitivity can not view this webpage without physical discomfort.

There is a reason why dark themes are always greys and never hard white on hard black, it's like staring into a torch.

[mryellow]

Not fixed. Text is still #fff and background #000.

Meaning now just looking at it for 5 seconds I am blinded for the next hour or three, with a dampener on the rest of my day.

[thiagoralves]

Dude, please don’t read too much into this. I’m just a guy trying to prioritize tons of things I have to do for this open source project, and no offense but, that’s not on my priority list right now. If you don’t like it, feel free not to use the software. You haven’t paid anything for it anyway.

Or you can look for an accessibility plugin for your browser to make things look better for your eyes. I’m pretty sure those exist out there…

[mryellow]

trying to prioritize tons of things ... not on my priority list right now

Has the issue been completed?

It's possible to prioritise without closing issues and causing them to go indefinitely without attention. Sweeping things under the carpet is not how issues get solved.

feel free not to use the software

I don't really have a choice. Deciding not to persist was a very easy decision to make.

you can look for an accessibility plugin for your browser

Sites which insist on putting #fff on top of #000 are exceedingly rare. In professional spaces they don't exist.

[mryellow]

The more I think about it the more this pisses me off. It's all to common with open source projects where the author complains about working for free.

Everyone must take accessibility seriously. We're entrusted with this important task.

I'm not reporting an issue with an "accessibility plugin for your browser" I'm reporting an issue with your website. A website which hopes to be taken seriously in professional and even potentially enterprise environments. Environments where supporting those with accessibility constraints is not only a moral imperative but a legal requirement.

If I were reporting that screen-readers are non-functional on your site and a 2 line change would fix them, would that be just as easily dismissed? At which level would you begin to take your responsibility for maintaining an accessible website seriously?

At which point would an accessibility issue rise to the level where it would be prioritised above being thrown in the trash can?

[thiagoralves]

This is not a simple 2 lines of code fix. It will require a redesign of the current css theme for the whole website to make sure everything matches esthetically.

But you’re right, accessibility should be taken more seriously, I’m sorry. Reopening the issue.

[mryellow]

Thank-you for re-prioritising. Sorry for any angst, I just see things like this get dismissed regularly.

Is the documentation website tracked in a repo? I could invest some time.

[thiagoralves]

No it isn't... website is a Wordpress VM with Elementor installed. But in essence, most of the documentation (betterdocs) style is done through this custom CSS:

*{
    font-family: "ff-real-headline-pro", sans-serif;
}

.betterdocs-breadcrumb-list.bread-home{
    display: none !important;
}

.betterdocs-single-wraper *{
    font-size: 18px;
}

a{
    color: #136bf8;
}

a:hover{
    color: #ffffff;
    transition: all 0.3s;
}

body{
    background-color: #000;
}

.docs-single-title .betterdocs-entry-title {
    color: #1164e6 !important;
    font-weight: bold;
}

.betterdocs-single-main.docs-content-full-main{
    background-color: #000;
}

.betterdocs-content-area .betterdocs-content-inner-area {
    background-color: #000 !important;
}

.betterdocs-article-reactions {
    display: none !important;
}

.comments-area {
    display: none !important;
}

.docs-single-main.docs-content-full-main *{
    color: #fff;
}

.betterdocs-feedback-form *{
    color: #303030 !important;
}

.betterdocs-feedback-form *[type=submit]{
    color: #ffffff !important;
}

.betterdocs-entry-content blockquote {
    background-color: #212121;
    margin-left: 15px;
    padding: 20px 40px;
    padding-bottom: 7px;
    border-left: 5px solid #1164e6;*
    font-family: monospace !important;
    font-size: 85%;
}

.betterdocs-entry-content table *{
    font-family: monospace;
    font-size: 85%;
    background-color: #212121;
    border: 1px solid #212121 !important;
    border-top: 3px solid #1164e6 !important
}

.betterdocs-entry-content table tbody>tr:nth-child(odd)>td,table tbody>tr:nth-child(odd)>th {
    background-color: #212121 !important;
}

.betterdocs-entry-content table tbody tr:hover>td,table tbody tr:hover>th {
    background-color: #212121 !important;
}

.betterdocs-breadcrumb-item.item-home {
    display: none !important;
}

.betterdocs-entry-content a:not(.betterdocs-breadcrumb-item a){
    color: #1164e6;
    font-weight: bold;
}

.betterdocs-entry-content h1 {
    font-size: 140%;
    color: #1164e6;
}

.betterdocs-entry-content h2 {
    font-size: 110%;
    color: #1164e6;
}

.wcpay-payment-request-wrapper {
    display: none !important;
}

#wcpay-payment-request-button-separator {
    display: none !important;
}

You can play with these settings on your own browser (if you're on Chrome just press F12) navigating through page elements and changing the CSS style with something you might like. Once you have a good setup you can send me and I can add it to this custom CSS.