Force bad scrollbar designs to apply accessibility patches #404
Comments
|
I really like that you brought this here. @tantek since you drove this in CSS can you please weigh in if you'd like to have it here or move this issue over to the CSSWG. I'll add this to the agenda of the telecon solely to discuss and get agreement on where to investigate this. The ONLY reason I am mixed here is due to so many widgets having scrollers that we need to incorporate in some way. |
gregwhitworth
added
the
agenda+
|
The https://drafts.csswg.org/css-scrollbars-1/#scrollbar-width definition for the 'thin' value already explicitly asks for the requested behavior: "remain wide enough to be usable" and cites WCAG accordingly. If folks have suggestions for better / stronger language or citations that we could use, please feel free to file an issue on the Scrollbars Styling draft at https://github.com/w3c/csswg-drafts/labels/css-scrollbars-1 with suggestions! Thanks, Tantek (Scrollbars Styling co-editor) (Originally published at: https://tantek.com/2021/266/t1) |
|
@summercms can you provide the site that you were testing this on as I'd like to look at it and which browser this is in relation to. I'll file a CSSWG issue to change the terminology to "MUST" rather than what is currently authored as the browser should be able to handle it. |
|
The Open UI Community Group just discussed The full IRC log of that discussion<gregwhitworth> Topic: [Scrollbars] Force bad scrollbar designs to apply accessibility patches<flackr> https://html.spec.whatwg.org/#htmlvideoelement is the only example in the html spec i found <andrico1234> Woo! <gregwhitworth> github: https://github.com//issues/404 <melanierichards> tantek: not sure what they're asking for, tried to respond to issue filer. We do say in scrollbar spec that impl should [missed]. That language is in the spec. If there's other suggestions, suggest they file on the scrollbar spec. <tantek> s/[missed]/make scrollbars activatable <melanierichards> gregwhitworth: setting context, they have a progress indicator scrollbar here ~3px in width. This person has something that makes this scrollbar hard to use. Want to interact with the scrollbar. There's an implied assumption that if you see small one you have to engage with the contents to scroll. They were engaging with one and it wasn't adjusting. No idea who's done this, maybe the site making their own scrollbar, they're not <melanierichards> accommodating the scenario. Wanted to see from Tantek whether we should tackle or hand to CSS. Good to know that's in CSS. <melanierichards> gregwhitworth: for all I know, that site might be leveraging their own custom scroller. Sounds like the solution is resolved (do you want stronger terminology). Would like to know if it's from a certain site/in a certain browser. <melanierichards> tantek: this might be site-constructed, not a browser scrollbar at all. I wanted to answer the CSS spec question concretely, with an avenue to improve if that's where you think that is where the problem is. Potentially additional layers of problems. Sites creating their own scrollbars is a problem. Maybe we should give guidance, and the guidance is "don't". Almost certainly going to get it wrong. 99.9% chance of making it <melanierichards> inaccessible. <melanierichards> tantek: that being said, telling web authors don't do that doesn't always get the best response. I have to do it because I was told to. Well, what problem are they trying to solve? Can we dig into that? What's not addressed by existing solutions. That's a higher-level Q that OUI should consider. <melanierichards> gregwhitworth: that was my other thing, within a select, we're going to hit this, we end up with too many contents to show, so we add a scroller. We say have at these controls...this person is somewhat aligned, when we get to selectmenu need to look at scrollbars independently. Maybe we use the CSS ones, but possibly leaving something on the table. <melanierichards> gregwhitworth: want to raise it, people impl their own <melanierichards> tantek: good cross-spec issue. Everywhere OUI has something that can cause a scroller to be displayed, we can direct impl guidance. Impl should implement the scrollbar styling spec to allow customization. Delegate presentational side of it to CSS while defining functional aspect of it. That would help address that side of it. If the impl is implementing an OUI control, and if they're doing it wrong, are they implementing scrollbar <melanierichards> styling correctly? They should. Maybe bugs in scrolling styling that should be improved. <melanierichards> tantek: the other layer of problem is issue is the jank. They tried to use scroll wheel, and it didn't work because of jank. I don't know how we, OUI, can address that. It's a platform-level problem. <melanierichards> gregwhitworth: highly recommend reading the original issue. User can't interact with the control. One rec is I would add in a MUST into your spec. That's basically what this person is asking for. If you implementing a designable scrollbar, it must be wide enough to be usable. <melanierichards> tantek: can you file that? <melanierichards> tantek: on the CSS spec <melanierichards> tantek: I would +1 immediately <melanierichards> gregwhitworth: hit testing near it, increase max width, we'll argue in that WG about layout impacts, but I do feel we should discuss it <gregwhitworth> q? <gregwhitworth> ack gregwhitworth <tantek> q+ <gregwhitworth> ack nicole <gregwhitworth> ack tantek <melanierichards> tantek: concern for scenarios where they don't have access to hover behaviors, like touch, where the scrollbar might be too small for fingers to touch. Usually a diff gesture for scrolling. Just want to note that's a consideration, we're talking pointer-centric <melanierichards> flackr: if UA aware there's a scrollbar, there's solutions like when you scroll, show the scrollbar. Can scroll by grabbing the page. And then you can grab the scrollbar. I think we're saying should be customizable enough to use in custom components? <melanierichards> gregwhitworth: from browser-land...when you get closer to the scroller, adjust the width. In CSS we'll argue about it. <melanierichards> flackr: with touch, we have freedom to adjust where touch hits. Nearest thing in bounding box you meant to touch on. <melanierichards> flackr: grab scrollbar if you touch near it <melanierichards> tantek: re hit testing, if that's something we can improve by adding more prose to scrollbar styling spec, that's something I would be open to <melanierichards> masonf: to have more impact, it might be better to file issues against specific browsers <melanierichards> gregwhitworth: I asked for a link to the site to file bugs on browsers, and then also adjust the spec <melanierichards> tantek: if we get it in the spec, hopefully implementers do the right thing. But yes, bugs are a direct way to ask them to do it. But those bugs can have more weight if the spec says to do this <gregwhitworth> q? <gregwhitworth> Zakim, end meeting <Zakim> As of this point the attendees have been flackr, melanierichards, dandclark, masonf, tantek, andrico, nicole, BoCupp, hdv <Zakim> RRSAgent, please draft minutes <RRSAgent> I have made the request to generate https://www.w3.org/2021/09/23-openui-minutes.html Zakim <melanierichards> rrsagent, make minutes <Zakim> I am happy to have been of service, gregwhitworth; please remember to excuse RRSAgent. Goodbye <RRSAgent> I have made the request to generate https://www.w3.org/2021/09/23-openui-minutes.html melanierichards <tantek> RRSAgent, make minutes public <RRSAgent> I'm logging. I don't understand 'make minutes public', tantek. Try /msg RRSAgent help <hdv> usually takes a while for them to show up <hdv> I see they're public now <tantek> Zakim, end meeting <tantek> oh oops already done |
I seem to have lost the website in my long history list (it was a major news website). But everyday I find more websites with this issue and today I have come across another website example. Click the search box and you will see the following:
Though this isn't the webpage scrollbar - the width of this scrollbar I have seen on many websites for their whole webpage. Hopefully gives you some insight. (If I come across another website with a better example, will comment below). I should also mention my screen size is currently: |
|
Did a quick search in source code search engine and found an example. Example Website: https://paytm.com/
|
|
Come across another website today, link here: https://app.santiment.net/
Pretty much see on a daily basis websites with this issue now (think the problem is epidemic on the web). |
gregwhitworth
removed
the
agenda+
|
Came across a different issue with a scrollbar - I thought I'd share!
The scrollbar on the website I thought didn't exist due to it being almost the same colour as the web page. The CSS Spec should also include WCAG 2.0 level AA requirements. |
|
Thanks @summercms - this change will need to occur in the CSSWG and so I'm closing this issue. |
Background
Website developers/designers can now customize the scrollbar in the browser, using this spec: https://drafts.csswg.org/css-scrollbars-1/
Browser support is now over 97% https://caniuse.com/?search=scrollbar
Issue
I have come across several websites that have customized the browser scrollbar. But their websites have really bad Scroll Jank issues!
Because of the JANK issues; when I try to use the
mouse wheelto scroll down the webpage. Thejankis preventing the page from scrolling down. So I try to grab the scrollbar with themouse pointerand move the scrollbar down.However, I have seen quite a few websites with really thin scrollbars that I end up spending several minutes trying to grab a scrollbar that is say 1-3px wide for example.
Solution
The solution would be for browser vendors to transform the scrollbar width to the normal width (or a width of a minimum set standard) when a user hovers the mouse pointer over the scrollbar. This way people with accessibility issues (such as myself - who has Osteoarthritis in my hands) can easily grab customized scrollbars that are so thin it would be very tricky to click on them with the mouse pointer needing to grad and scroll the browser scrollbar on a computer!
Example:
Above when a user moves the mouse pointer over the customized scrollbar the width is automatically increased to make it easy for users to click and grab the scrollbar (when the scrollbar has been styled too thin on a set predefined width).
Open-ui
Can create some customized browser scrollbar examples that have accessibility patches built in, that developers can use. Also create a spec that incorporates customize scrollbar css and accessibility standards.
Extends this issue: #8
Browsers
I have noticed browsers like
ChromeandEdgehave started adding some proposals from this repo into their browser designs and I hope Browsers can add this enhancement to patch poorly designed scrollbars that have accessibility issues!The text was updated successfully, but these errors were encountered: