🌐 A webring for digital accessibility practitioners.
Home Page: https://a11y-webring.club/
License: MIT License
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
The color of the site is determined by three custom properties, theme-h, theme-s, and theme-l, which are used to create a hsl() color declaration.
Modifying the theme-h custom property in the :root selector allows the entire site to adjusts its theme color. I think it would be fun to have a little input range slider that allows a visitor to tweak the color from 1 to 360°, and then store the value to local storage.
This webring seems to require the use of the HTTP referer (sic) header. However, personal sites that don't monetize data or use analytics often drop referrers with a Referrer-Policy: no-referrer response header. A workaround is to override this with a referrerpolicy attribute on anchor elements, as I do in my webring template.
Documenting this could avoid future headaches as people wonder why their webring links don't work.
The footer on the website links to https://github.com/ericwbailey/a11y-webring.club/blob/main/.github/ACCESSIBILITY_STATEMENT.md which requires a browser with github-compliant JavaScript to view, I would consider this an accessibility issue.
And given it's a rather simple markdown page, shouldn't it be hosted on the site itself?
@winniebosy’s site (https://bosibori.netlify.app/) is down on Netlify it seems, breaking the ring.
The social media links are still fine, though.
Related to /data/members/Winnie%20Bosibori.json
Twitter's most recent issues with antisemitism sits poorly with me. To me, it's an inflection point where the platform is now actively stoking and profiting from fomenting hate.
This is balanced against it being a place where a lot of disability advocates organize, as well as its relatively low barrier of adoption.
I was wondering if we could talk about this, and folks' opinions on the matter.
@acnorrisuk, @AliciaJarvis, @segdeha, @ItsCrisDiaz, @dnikub, @dsenneff, @davidakennedy, @dennisl, @dpersing, @codeability, @FMJansen, @worldsayer, @jrfbz, @jenstrickland, @joshkimux, @adeleke5140, @mattobee, @matthewdeeprose, @mherchel, @mikemai2awesome, @bamadesigner, @racheleditullio, @SaptakS, @stevefaulkner, @stevenwoodson, @TiffanyPender, @toddlibby, @1Copenut, @winniebosy: Apologies for the mass-tag, but this was the only way I could think of for people on the webring who have Twitter profiles to be aware this was being discussed.
And speaking of social media: I just added support for GitHub if you're interested in updating your info.
My JSON file has been added in PR #157
But my details still do not appear on https://a11y-webring.club/.
Windows 10
Firefox, Chrome
No response
Netlify provides a contact form, and we just happen to use them. Setting one up will drastically lower the level of technical knowledge to participate, so it would be a good addition to the site.
Ideally a submission could be set to trigger a PR review for manual vetting.
Until @patrickhlauke's WCAG trash panda webring gets off the ground, this webring will have to suffice.
We should have a toggle to enable trash panda mode for the webring landing page, whatever that may be.
In #119 there was an individual who supplied a GitHub profile URL for the Mastodon entry. I think this represents an opportunity to add it as a social service, so let's do just that!
All the links (previous / next / random) crash in browser.
Windows 10
Firefox, Chrome
No response
There currently isn't a way for screen reader users to easily jump between members of the ring within the "Members" list. Each member is a list item, but the contact blocks are also nested lists, so jumping by list item doesn't work.
To rectify this, I suggest adding level 3 heading mark-up to each name. This will significantly increase the number of headings on the page, which will be particularly noticeable for users navigating with a touch-based screen reader where commands to jump by specific heading level are generally not available (e.g. iOS VoiceOver). However, there is a "Skip member list" link on the page already, and so I think the increased navigability makes it well worth it.
Using the "Previous", "Random", "Next" links results in a Netlify error page:
An unhandled error in the function code triggered the following message:
Runtime.UserCodeSyntaxError - SyntaxError: Unexpected token ':'
N/A
N/A
No response
👋 Got the notification that my PR was merged so I took a peek and realized that a few of us had changes overwritten by future merges. Looks like
I could work up a proof of concept but am fairly sure you can create a directory under data (like members) and then folks can create individual JSON files therein, rather than all collected in one file.
Want to preface by emphasizing I think this is a super neat idea that could be super beneficial to the community, and to thank everyone involved for their work on it.
When I was trying to wrap my head around what it was, I had a few thoughts spring to mind around security and abuse scenarios. I wanted to share them just to get them out of my head and better understand if they're actually pointing to anything.
If someone malicious submits a request to join, maybe posing as someone else in the community and using their website but with a tiny difference that's hard to spot (like 1 letter off in the domain name, or other standard email phishing sort of techniques) that looks exactly like that person's actual website, it seems like they might be able to sneak in and then phish users of the webring.
Add a out-of-band validation step to make sure the person is who they say they are (e.g. reaching out on one of the socials they offer. Presumably that's harder to manufacture replicas of? Not sure)
Similar to the email phishing analogy above, it seems like it'd be hard for a user to safely evaluate whether or not to follow a previous/next/random link since you can't easily tell where it's going to take you or if it might be a malicious site.
Even with no malicious sites in the webring, there's also the concern of the webring's backend getting compromised and a malicious actor taking control of the redirection (e.g. for phishing) without anyone noticing.
If there's some kind of independent way from the backend resource to monitor the redirects that are occurring (e.g. via gateway access logs) presumably it'd be possible to detect if something is going awry with them
Hello. I am one person currently running my web forum https://basementcommunity.com.
It's an internet discussion board for general and focused topics with no real intent on making money or being a business, but really just a hobby project for myself with a goal of creating a community of people fatigued from modern social media.
That being said, I'm a huge a11y advocate and pride myself on making my site as accessible as possible. But I'm not planning on revealing my identity willingly for the foreseeable future.
So the question is, are sites like mine allowed to join the webring?
When using forced-colors, the icons (socials, previous, random, next) retain their dark-blue color. This can cause contrast issues for users, like myself, who use forced-colors with a dark color palette.
Fedora 37
Firefox 110 (Developer Edition), official build
Here's a screenshot of the page as it appears to me:
One solution would be to respond to a prefers-colors: forced media query to color the SVGs with currentColor, giving them the same color as surrounding text.
To maximize compatibility, this could even be inverted: the default color could be currentColor, and a custom blue could only activate in response to prefers-contrast: no-preference or prefers-contrast: less. Ben Nadel uses a similar approach for reduced-motion: make the default the accessible version, and override it if possible.
Within the <nav> containing the "Previous/Random/Next website" links, the mark-up looks like:
<a class="contact-link" ...>
<svg ... aria-hidden="true">...</svg>
<span>Previous/Random/Next<span class="hide-visually"> website</span></span>
</a>
I.e. the visible labels are "Previous", "Random", and "Next", with additional context of "website" appended for screen reader users. Unfortunately, there is no whitespace rendered between the visible label and off-screen context in Chromium-based browsers, creating accessible names for these links of: "Previouswebsite", "Randomwebsite", and "Nextwebsite".
I can think of several ways to fix this (probably too many), in no particular order:
) at the beginning of each off-screen span. This will fix the issue in Chromium-based browsers, but result in two spaces between the words in browsers not currently exhibiting the issue.aria-label to each link with the correct accessible name in each case. @ericwbailey has already amply covered the problems with aria-label.span that wraps the visible label and off-screen text, and use that ID as the value of an aria-labelledby attribute on the parent link. It's a bit weird that this seems to fix things in Chromium, given that the link is getting its acc name from the same mark-up that is otherwise problematic. I've only tested that this doesn't break anything else in Firefox and iOS Safari, but I recall some recent discussion around aria-labelledby being broken... somewhere? Otherwise, this is probably my preferred approach after #2.span so that it is a sibling of the visible label span, give each span an ID, and use two space-separated IDs in aria-labelledby on the parent link. This is similar to #4, but a bit more... standard.<title> to the <svg>, give the title an ID, and use that ID in aria-labelledby on the parent link. This would duplicate the visible label, introducing technical debt and making visible/accessible name drift more likely in the future.#6, but just have the accessible name of the SVG bubble up to become the acc name of the link, and add aria-hidden="true" to the current spans. This would cause screen reader announcements of "link graphic" instead of "link" (and a corresponding increase in braille verbosity), and otherwise shares the downside of #6.Thank you for reading my essay.
Windows 10 Pro, Windows 11 Pro
Google Chrome, Microsoft Edge
No response
Some personal websites have accessibility statements, such as the kind recommended by the WAI. Linking to that alongside socials could be a nice touch.
I noticed that commits after c40ce94 weren't being reflected on the live site - this is because of a syntax error in the JSON that was committed.
Besides fixing the syntax error, would it make sense to add a Github Action to make sure the site builds? If that makes sense, I wouldn't mind making a pull request for it.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.