-
-
Notifications
You must be signed in to change notification settings - Fork 300
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
a11y improvements (Help Wanted!) #41
Comments
Part 2 (components continued...)Breadcrumbshttps://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/
Data Tableshttps://www.w3.org/WAI/ARIA/apg/patterns/grid/
Range Sliderhttps://www.w3.org/WAI/ARIA/apg/patterns/slider/
Progress Bar / Radialshttps://www.w3.org/WAI/ARIA/apg/patterns/meter/
Tooltipshttps://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
|
Part 3 (misc)Alertshttps://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role
Avatarshttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
Badges
Cards
Dividershttps://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role
Gradient Headingshttps://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role
Logo Clouds
Paginator
Steppers
|
Part 4 (utilities)Code Blockshttps://whitep4nth3r.com/blog/how-to-make-your-code-blocks-accessible-on-your-website/
Light Switchhttps://www.w3.org/WAI/ARIA/apg/patterns/menubutton/
NOTE: LightSwitch has been redesigned per: #78 (comment)
Dialogshttps://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/
Toastshttps://www.w3.org/WAI/ARIA/apg/patterns/alert/
Filters
|
Part 5 (tests)
|
Hey everyone! So great news regarding accessibility (a11y) updates. I've now completed the first round of updates improving a11y for ALL (yes all) components and utilities within Skeleton. The biggest areas of improvement include tab focus, keyboard interactions, and properly defined ARIA attributes. This is a rather large and impactful update that touches a little bit of everything in the entire library. Just take a look at the commit history here: https://github.com/Brain-Bones/skeleton/commits/feat/a11y However, it does come with a few notable and/or breaking changes:
Given the broad amount of changes, I am calling for your help with testing!And no, you do NOT have to be an a11y expert to test these updates. Literally anyone that can pull down the branch can test. Mainly, I need help with regression testing. With minor updates in so many places, we need to ensure nothing has broken inadvertently. Just pull down the branch and start browsing the Doc site locally. Test everything you can between each component. Maybe create your own page to test different settings per the components with the most changes. Long story short, if you're availble to help test, please let me know here, pull down the branch, and keep me posted as you progress. You can report all issues to the ticket above. The sooner testing concludes, the sooner we can get this update out to everyone! And the sooner I can move onto critical issues such as decoupling Skeleton from SvelteKit, new features and updates, etc. The three attached screenshots demonstrate:
|
For anyone interested in testing, here's the steps required:
Now that you have the project running locally, try and test the following:
https://www.youtube.com/watch?v=IaJtAzaFiJ4 Finally, it will be critical to test components with the largest amount of changes. These include:
If you find issues please report them here. Thanks for your help! |
Nice work on this so far :) So doing a side by side comparison between master and feat-a11y and doing a scan with the axe extension for now: There are two overall ARIA reported issues of colour and heading levels and some minor ones on specific pages. But this comment focuses on actual Skeleton regressions found in RadioGroup and Slide Toggle no longer working and hence any dynamic preview of other components that use these two components on their docs page also don't work. http://localhost:3000/components/avatars - Buttons and Slide Toggles no longer working |
Awesome Nik, thanks. Really strange issues, but this is why we test! I'll take a look! |
Ok, so these were pretty straight forward regressions due to these two components:
Per Data Tables (and really most components), the ARIA attributes require unique values (like unique ID), so we provide pass through value using props. The convention is Great catches though, hopefully these these were our biggest offenders! |
These changes have been merged into the |
Reopening this until @thomasbjespersen can finish QA on it. |
Taking this on @endigo9740. |
FYI i'm closing this for now. Please keep me posted if you have any issues related to these changes @thomasbjespersen |
The aim is to improve overall accessibility across all component. This will be an on-going process that may be subdivided in to multiple parts.
ARIA reference
A11y Tooling
Highly recommend this video showcasing each of the following tools.
Part 1 (components)
The following suggestions were provided by user "Tropical" on the Svelte Discord
Accordions
https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
<details>
and<summary>
Buttons
https://www.w3.org/WAI/ARIA/apg/patterns/button/
List
https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
Menus
https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/
https://www.w3.org/WAI/ARIA/apg/patterns/menu/
Radio Groups
https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/
Slide Toggles
https://www.w3.org/WAI/ARIA/apg/patterns/switch/
Tabs
https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
The text was updated successfully, but these errors were encountered: