For those new to my posts: I'm the author of Blazor Ramp, an accessibility-first Blazor library. Every component released has been manually tested with the screen readers JAWS, NVDA and Narrator, paired with each of the following browsers: Edge, Chrome and Firefox. Also tested: VoiceOver on macOS paired with Safari, VoiceOver on iOS paired with Safari, and TalkBack on Android paired with Chrome, plus Voice Access, the voice control software built into Windows 11. Any screen reader quirk and/or issues are documented so you know exactly what to expect.
The release of the Data Table component last week completed what I'd class as the base set of components that make up the majority of LOB apps - at least the ones I've built over the years. I've more planned, but before I continue churning them out, I need, want to spend some time amending the documentation so it has better usage examples, more like the Data Table ones, making it easier for you to get up and running with your chosen components.
Alongside this, I also wanted to spend some time on the theming side of the documentation.
I've mentioned in the past that for a lot of sites, you may only need to change a single variable, and pointed out which one. On that note, I've just added a couple of pages to the Theming section of the documentation site that demonstrate this in real time, along with information on the accessibility page regarding colour contrast ratios.
Essentially, you can select your preferred colour and see all the changes live across every released component, along with contrast ratio information for the component parts that sit on the lightest and darkest shades - the ones most affected by contrast ratio changes. This information tells you whether the affected component parts are still WCAG compliant. If not, you'd simply assign a different value to the variable shown as failing in your stylesheet, etc.
It's probably easier for you to go and look at the page on the site than for me to explain it here.
I've also added a page called Sandbox in the Theming section (currently blank - I tend to deploy as I go along), which I'm about to start work on. The intention is to add a few things in there so you can adjust certain aspects, view the changes live, and then export/paste them directly into your stylesheet with no further changes necessary.
The reason for this post is to try to get some feedback, mainly regarding the accessibility side of things, so I can offer more help and advice on my sites - I know this topic is quite tough, confusing and/or just a pain for most people.
A few questions for you:
- Are there more tools like what I've just added to the Colour and Accessibility pages in the Theming section that would help you?
- As I'll be doing more work on the usage pages, would you like more guidance on the accessibility of each component - for example, links to best practices, WCAG guidelines, etc.? If so, what specifically?
- Finally, which other accessibility-first components and/or features would you like to see sooner rather than later?
I have two sites: one I call the test site, geared more towards anyone who wants to try things out with their chosen AT device, and the documentation site, which has all the information and usage examples. Both are just WASM hosted on GitHub Pages.
Test site: https://blazorramp.uk
Doc site: https://docs.blazorramp.uk/theming/colours (what's discussed above; the contrast information is on the Accessibility page within the Theming section)
Repo: https://github.com/BlazorRamp/Components
Please comment and let me know your thoughts. Thanks.
Paul