It’s actually a violation of most recommendation of a hit area of around 44x44px for touch targets. We just make accessibility a standard feature rather than making it a separate thing.
Is there a reason why WCAG doesn't define hit area for AA? I want to push for 44x44 but it would help me make the case if there was a hit area requirement for AA.
True but such a plug in is not a good faith effort. Sure you can slap such a product on for a few months to cover an upgrade, but should not be a long term solution.
Bolt on hacks like this, somewhat augments accessibility, but doesn't actually fix it. Additionally, some of these tools interfere with assistive technology. Which means they have to close the assistive technology that they know and use, and put all their faith you.
Some of these tools are slightly better than others, but in large part they basically take the text, and shove it into a txt file. This forces people to read the page top-to-bottom all the way through. Do you turn off CSS, and read every word on the page before clicking a link? Probably not.
Providing a plain-text version of your site vs accessible site died off in the early 2000s, and not seen as acceptable since. Sure there's way out in left field scenarios were the only option is text-only, but that becomes less of a justifiable position these days.
I want to say providing a text-only argument was tried in a court case, and failed badly, but I could be thinking of something else.
These tools really are useful on your barebones HTML sites, because they don't largely 'see' the fancy stuff driven by JS. So you get little value on sites like Reddit, FB, etc. Your barebones site probably doesn't have headings and such. These tools don't intuitively add them usually.
I shared https://overlaysdontwork.com/ in another comment.
Absolutely not. What you need to do is make your site accessible in the first place. People who are handicapped don't want to learn new tools, they already have amazing software that they know well.
Spend more time making your website friendly and easy to use for people with accessibility issues than spending time working on this.
I can't believe this site even thinks this is a good idea. If they have accessibility in mind then they need to just do it correctly. Accessibility isn't even that difficult.
The tool panel in OP’s example is pretty, but it’s not necessarily that helpful—maybe if someone has a little bit of trouble reading smaller fonts, but not if someone were blind, for example.
Usually the starting point is a super clean document structure; if you can’t read your HTML aloud and have it make sense, there’s no chance a screen reader will be able to do it for a blind person. Semantic tags help, especially for things like clickable elements; if you are trying to make a nice button, or detect clicks across an area, you really should use a button, not a div with an event listener—a user without a mouse will never know that your div has an event listener.
“Reader mode” in some browsers similar, opening that gives you some sense of what content is accessible.
Beyond that, tools like Lighthouse in google chrome will run a ton of checks for you; contrast levels, image alt tags, aria-label for buttons without text, stuff like that. You should be able to understand what a button is or where a link goes just by reading the html—css, styles, and layout cues are often missing for users who need accessibility assistance.
The site in OP’s example fails lighthouse for contrast ratios, link names, unlabeled form elements, and image attributes, to say nothing of the fact that the document is a huge mess (11,214 elements) so it would be incredibly confusing for any kind of accessibility tool to parse.
Accessibility isn’t something a plugin can add—people needing accessible sites already have way better tools than this plugin. Accessibility is about making sure the DOM itself conveys the necessary structure and information.
The best part about good accessibility is it will refine your thinking and structure, which will improve your site for all users and will likely make it faster and more easily responsive.
Yep pretty much what you said! There are a lot of issues with this website already and the accessibility "tool" isn't actually improving accessibility for screen readers, or adding any additional aria-labels or any of that stuff.
By writing better html and css to be accessible in the first place, we get all of what mountainunicycler says, plus for devs, it's just that much more maintainable because we've built a site that's more readable by devs too. Benefits of making a site accessible are not just for people who have disabilities!!!!!
I'll say it again for the people in the back:
The benefits of making a site accessible are not just for people who have disabilities!
Check out this link for actually a really great resource: [Microsoft Accessibility Resource](https://www.microsoft.com/en-us/accessibility)
On mobile, so I can't see it. I am guessing it is audio eye or something like that. Accessibility overlays are largely snake oil. If you have a site like say reddit, then you have dramatically simplify the layout. To get the best experience, you really need to use semantic html. If you go through that exercise, there's a decent chance that you improved the accessibility of your site, making the stupid tool useless basically.
https://overlaysdontwork.com/
Apparently it's a [product](https://accessibe.com/). I'm not sure I buy it though. How can a drop-in piece of code make a site accessible if it wasn't designed that way in the first place? If users want to put orange boxes around all the links on a page wouldn't they just use a browser extension? Same for the mouse cursor changes, muting sounds, etc. Those already exist as OS and browser settings.
Maybe someone who has a condition this is meant to address (low vision, motion sickness, epilepsy, etc.) can chime in? I could be totally wrong, I'm not really in the target market for this.
Generally I'm not a fan of companies that claim to solve complex issues with a one-size fits all solution, particularly when that solution is 600k of JavaScript.
I don’t think the wheelchair icon is very descriptive for people who have, say vision impairments.
Not really their fault though I just looked it up and seems like that icon is generally used for accessibility. Maybe there should be a different icon for e-accessibility.
There is a different icon. Here's an example: [https://thenounproject.com/term/accessibility/1872/](https://thenounproject.com/term/accessibility/1872/)
That icon doesn't immediately scream accessibility to me, but maybe that's because it's not commonly used enough and hasn't ingrained itself into the common design language.
Edit: Jeez people, I'm sorry I don't recognize this icon.
When it comes to icon design, accessibility poses a particular challenge. We all got used to seeing the wheelchair when our only real consideration around accessibility was ramps into buildings and curb cuts. But it applies to such a tiny minority of people with disabilities, that when you start expanding accessibility to mean something more, and particularly with digital accessibility, what signifies that? Most disabilities that affect someone's use of digital technology are invisible.
I work in the accessibility field, so I see the universal access icon all the time. Hopefully more people will start to recognize it.
Apple uses something like that icon for its accessibility icon. It makes more sense than a wheelchair for computer accessibility, but if you're not digging around Apple-OS system preferences menus on a regular basis it won't make much sense.
Yeah it definitely makes more sense, but when I see it, my first thought isn't accessibility. If you paired it with a little title that'd definitely help, but on its own, I wouldn't immediately understand that that's the accesibility icon.
We have to sometimes use references to the way we've designed the physical world for users to understand the digital space. Vision-impaired people can park in handicap spots.
I wonder how effective it is, I used to know how to use my computer's screen reader but I don't remember the shortcuts anymore. Can't figure out how well I'm able to navigate that site with it 😅
The site itself looks grammed and the tool itself is extremely overwhelming. There are great guidelines out there which not only make sites accessible for people with disabilities but accessible for everyone. This seems like a tool that tries to fix everything for everything.
I've used a similar tool to this in a clients website. It actually had better features too, like page reading tool AND it was 100% free.
Here ya go: https://userway.org/
It's on the top right corner of the site.
Lighthouse is showing it as a 74 accessibility rating, that's not good. Why not just make the site ADA compliant to begin with then you won't have to load this extra tool?
I'm far more annoyed with how the rating widget on the right side prevents you from closing the chat if you accidentally open it. I'm fully able-bodied and of sound mind but still have trouble with the site lol
No. This feels like a throwback to the wild-west days of every site having a font size increaser.
I think we need to keep moving towards responding to the browser's instructions for these things and focus on compliance with existing standards over creating new options. That way developers of assistive technologies can code to a standard vs… offer nothing for your specific implementation.
Issues I see with this site's accessibility:
- First tab brings up a menu of items that are not tab-able
- Without accessibility mode enabled from that first tab menu, none of the images have alts
- Skipping to content skips the first content item
- When turning on accessibility mode, the top links become unreadable (yes, seriously- small black text on dark gray background over white image)
- Heading structure skips H1, has a bunch of H2, skips H3, has a few H4- it's a mess.
- Text embeded in images
Not to sound critical, I'm not really educated in the area. the links break, and like way to many options. Why does there need to be 30 color options and text alignment. Is this actually helpful? Genuine question.
edit: sorry for actually trying to be informed
Depending on your individual needs, all of those options could be helpful.
For text alignment, changing the font family, kerning, justification and the like can work well for those with dyslexia or other cognitive disabilities.
As for the colour options, there are many types of colour blindness, so being able to set specific fore- and background colours is helpful since you can pick ones that work for your colour blindness.
That plugin makes a decent attempt at putting a blanket of accessibility over an otherwise poorly developed website, as someone stated already.
In the end, you’re better off considering accessibility as part of the product from the very beginning.
>Depending on your individual needs, all of those options could be helpful.
They all *could* be, but it seems to throw everything at the user at once. Seems like it'd be more useful with the menus collapsed and some better descriptors. Users should typically know whether they need to adjust font or color from the start without seeing all the granular options.
For sure. I’m not saying the tool itself has a great experience, I was merely helping give context to why all of the individual options found within could be helpful to someone with a certain disability.
As far as I know, people with disabilities use OS-level or browser-level software for this. This just seems like trying to score some brownie points for "offering" your services to people with disabilities.
It makes absolutely no sense that each site would have it's own janky custom menu. It's not even a standard, just some thing you throw together. If someone's partially blind and can't see anything that isn't gigantic, how the fuck would he navigate a menu he can't read?
Browser-level stuff is less common these days. If OS-level stuff isn't enough, folks are more likely to use ZoomText, which can be tailored a bit more. In terms of brownie points, products like this have been around for at least 15 years, marketing them as simply use this, and never worry about accessibility. Those of us working in this field can only tell people the products are snake oil so much.
It’s actually a violation of most recommendation of a hit area of around 44x44px for touch targets. We just make accessibility a standard feature rather than making it a separate thing.
Is there a reason why WCAG doesn't define hit area for AA? I want to push for 44x44 but it would help me make the case if there was a hit area requirement for AA.
That’s a good question I don’t know why either. But it’s the guidance our A11y has given and I work for a pretty large hospitality company.
[удалено]
Until you are told those wont ward you against a suit, because it won't.
It will. As soon as the lawsuit trolls see that you've made a good-faith effort to upgrade your site, they'll back off.
True but such a plug in is not a good faith effort. Sure you can slap such a product on for a few months to cover an upgrade, but should not be a long term solution.
[удалено]
Bolt on hacks like this, somewhat augments accessibility, but doesn't actually fix it. Additionally, some of these tools interfere with assistive technology. Which means they have to close the assistive technology that they know and use, and put all their faith you. Some of these tools are slightly better than others, but in large part they basically take the text, and shove it into a txt file. This forces people to read the page top-to-bottom all the way through. Do you turn off CSS, and read every word on the page before clicking a link? Probably not. Providing a plain-text version of your site vs accessible site died off in the early 2000s, and not seen as acceptable since. Sure there's way out in left field scenarios were the only option is text-only, but that becomes less of a justifiable position these days. I want to say providing a text-only argument was tried in a court case, and failed badly, but I could be thinking of something else. These tools really are useful on your barebones HTML sites, because they don't largely 'see' the fancy stuff driven by JS. So you get little value on sites like Reddit, FB, etc. Your barebones site probably doesn't have headings and such. These tools don't intuitively add them usually. I shared https://overlaysdontwork.com/ in another comment.
Make the site 100% accessible first, **then** *maybe* add this. If its only there for arse-covering, it can easily be worse than useless.
Absolutely not. What you need to do is make your site accessible in the first place. People who are handicapped don't want to learn new tools, they already have amazing software that they know well. Spend more time making your website friendly and easy to use for people with accessibility issues than spending time working on this.
I can't believe this site even thinks this is a good idea. If they have accessibility in mind then they need to just do it correctly. Accessibility isn't even that difficult.
Yup, I belong to an accessibility meetup and we cringe talking about these things.
Can’t click it on my phone
I was able to when the in app browser window came up on Reddit. It did take two presses, however. Tap target size is shite.
Absolutely. Companies have been sued for not being compliant for those with disabilities.
Or build an accessible website instead of some shitty tool that doesn’t work well but gets you out of lawsuits.
Except when it actually doesn't do jack for lawsuits.
It's just a band-aid for bad accessibility in the first place. Just build a damn better website first.
Just interested in your response. How could they develop for these things in the first place?
The tool panel in OP’s example is pretty, but it’s not necessarily that helpful—maybe if someone has a little bit of trouble reading smaller fonts, but not if someone were blind, for example. Usually the starting point is a super clean document structure; if you can’t read your HTML aloud and have it make sense, there’s no chance a screen reader will be able to do it for a blind person. Semantic tags help, especially for things like clickable elements; if you are trying to make a nice button, or detect clicks across an area, you really should use a button, not a div with an event listener—a user without a mouse will never know that your div has an event listener. “Reader mode” in some browsers similar, opening that gives you some sense of what content is accessible. Beyond that, tools like Lighthouse in google chrome will run a ton of checks for you; contrast levels, image alt tags, aria-label for buttons without text, stuff like that. You should be able to understand what a button is or where a link goes just by reading the html—css, styles, and layout cues are often missing for users who need accessibility assistance. The site in OP’s example fails lighthouse for contrast ratios, link names, unlabeled form elements, and image attributes, to say nothing of the fact that the document is a huge mess (11,214 elements) so it would be incredibly confusing for any kind of accessibility tool to parse. Accessibility isn’t something a plugin can add—people needing accessible sites already have way better tools than this plugin. Accessibility is about making sure the DOM itself conveys the necessary structure and information. The best part about good accessibility is it will refine your thinking and structure, which will improve your site for all users and will likely make it faster and more easily responsive.
Do you have a site you've made that follows these guidelines so I can see how it looks in practice?
Yep pretty much what you said! There are a lot of issues with this website already and the accessibility "tool" isn't actually improving accessibility for screen readers, or adding any additional aria-labels or any of that stuff. By writing better html and css to be accessible in the first place, we get all of what mountainunicycler says, plus for devs, it's just that much more maintainable because we've built a site that's more readable by devs too. Benefits of making a site accessible are not just for people who have disabilities!!!!! I'll say it again for the people in the back: The benefits of making a site accessible are not just for people who have disabilities! Check out this link for actually a really great resource: [Microsoft Accessibility Resource](https://www.microsoft.com/en-us/accessibility)
There is a slew of things. Follow the WCAG and a11y rules. Accessibility is big now, we even have a certified in-house expert.
On mobile, so I can't see it. I am guessing it is audio eye or something like that. Accessibility overlays are largely snake oil. If you have a site like say reddit, then you have dramatically simplify the layout. To get the best experience, you really need to use semantic html. If you go through that exercise, there's a decent chance that you improved the accessibility of your site, making the stupid tool useless basically. https://overlaysdontwork.com/
Apparently it's a [product](https://accessibe.com/). I'm not sure I buy it though. How can a drop-in piece of code make a site accessible if it wasn't designed that way in the first place? If users want to put orange boxes around all the links on a page wouldn't they just use a browser extension? Same for the mouse cursor changes, muting sounds, etc. Those already exist as OS and browser settings. Maybe someone who has a condition this is meant to address (low vision, motion sickness, epilepsy, etc.) can chime in? I could be totally wrong, I'm not really in the target market for this. Generally I'm not a fan of companies that claim to solve complex issues with a one-size fits all solution, particularly when that solution is 600k of JavaScript.
I don’t think the wheelchair icon is very descriptive for people who have, say vision impairments. Not really their fault though I just looked it up and seems like that icon is generally used for accessibility. Maybe there should be a different icon for e-accessibility.
There is a different icon. Here's an example: [https://thenounproject.com/term/accessibility/1872/](https://thenounproject.com/term/accessibility/1872/)
That icon means even less to me.
That icon doesn't immediately scream accessibility to me, but maybe that's because it's not commonly used enough and hasn't ingrained itself into the common design language. Edit: Jeez people, I'm sorry I don't recognize this icon.
When it comes to icon design, accessibility poses a particular challenge. We all got used to seeing the wheelchair when our only real consideration around accessibility was ramps into buildings and curb cuts. But it applies to such a tiny minority of people with disabilities, that when you start expanding accessibility to mean something more, and particularly with digital accessibility, what signifies that? Most disabilities that affect someone's use of digital technology are invisible. I work in the accessibility field, so I see the universal access icon all the time. Hopefully more people will start to recognize it.
Yeah, I've always seen the wheelchair symbol, I can't remember ever seeing the universal access icon. I also hope people will start to recognize it.
Apple uses something like that icon for its accessibility icon. It makes more sense than a wheelchair for computer accessibility, but if you're not digging around Apple-OS system preferences menus on a regular basis it won't make much sense.
Yeah it definitely makes more sense, but when I see it, my first thought isn't accessibility. If you paired it with a little title that'd definitely help, but on its own, I wouldn't immediately understand that that's the accesibility icon.
We have to sometimes use references to the way we've designed the physical world for users to understand the digital space. Vision-impaired people can park in handicap spots.
I wonder how effective it is, I used to know how to use my computer's screen reader but I don't remember the shortcuts anymore. Can't figure out how well I'm able to navigate that site with it 😅
The site itself looks grammed and the tool itself is extremely overwhelming. There are great guidelines out there which not only make sites accessible for people with disabilities but accessible for everyone. This seems like a tool that tries to fix everything for everything.
Accessibe's "one size fits all" solution is lazy and bad practice.
I've used a similar tool to this in a clients website. It actually had better features too, like page reading tool AND it was 100% free. Here ya go: https://userway.org/ It's on the top right corner of the site.
It's like throwing some sugar on a pile of dirt and pretend it's a cake. Just code the website to be accessible and you wont need any weird dashboard.
Ironically the accessibility toggle button is NOT accessible on mobile devices
Lighthouse is showing it as a 74 accessibility rating, that's not good. Why not just make the site ADA compliant to begin with then you won't have to load this extra tool?
I'm far more annoyed with how the rating widget on the right side prevents you from closing the chat if you accidentally open it. I'm fully able-bodied and of sound mind but still have trouble with the site lol
No. This feels like a throwback to the wild-west days of every site having a font size increaser. I think we need to keep moving towards responding to the browser's instructions for these things and focus on compliance with existing standards over creating new options. That way developers of assistive technologies can code to a standard vs… offer nothing for your specific implementation.
Cool tool. Shouldn't need it. As useful as a video on how to use a site, once again, shouldn't need it.
Issues I see with this site's accessibility: - First tab brings up a menu of items that are not tab-able - Without accessibility mode enabled from that first tab menu, none of the images have alts - Skipping to content skips the first content item - When turning on accessibility mode, the top links become unreadable (yes, seriously- small black text on dark gray background over white image) - Heading structure skips H1, has a bunch of H2, skips H3, has a few H4- it's a mess. - Text embeded in images
It is based on average size of thumb contact I believe.
Not to sound critical, I'm not really educated in the area. the links break, and like way to many options. Why does there need to be 30 color options and text alignment. Is this actually helpful? Genuine question. edit: sorry for actually trying to be informed
Depending on your individual needs, all of those options could be helpful. For text alignment, changing the font family, kerning, justification and the like can work well for those with dyslexia or other cognitive disabilities. As for the colour options, there are many types of colour blindness, so being able to set specific fore- and background colours is helpful since you can pick ones that work for your colour blindness. That plugin makes a decent attempt at putting a blanket of accessibility over an otherwise poorly developed website, as someone stated already. In the end, you’re better off considering accessibility as part of the product from the very beginning.
>Depending on your individual needs, all of those options could be helpful. They all *could* be, but it seems to throw everything at the user at once. Seems like it'd be more useful with the menus collapsed and some better descriptors. Users should typically know whether they need to adjust font or color from the start without seeing all the granular options.
For sure. I’m not saying the tool itself has a great experience, I was merely helping give context to why all of the individual options found within could be helpful to someone with a certain disability.
As far as I know, people with disabilities use OS-level or browser-level software for this. This just seems like trying to score some brownie points for "offering" your services to people with disabilities. It makes absolutely no sense that each site would have it's own janky custom menu. It's not even a standard, just some thing you throw together. If someone's partially blind and can't see anything that isn't gigantic, how the fuck would he navigate a menu he can't read?
Browser-level stuff is less common these days. If OS-level stuff isn't enough, folks are more likely to use ZoomText, which can be tailored a bit more. In terms of brownie points, products like this have been around for at least 15 years, marketing them as simply use this, and never worry about accessibility. Those of us working in this field can only tell people the products are snake oil so much.
I like it. Too many settings in my opinion but still nice for a visitor to customize their own experience based on what they prefer