-
Notifications
You must be signed in to change notification settings - Fork 2
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
fix(accessibility): solve WAVE problems #11
Conversation
Hi! But, I'm a bit concerned about changing I agree, that empty buttons are a bad idea, but I think, this can be solved by moving icon from CSS directly into button (in html structure), and by adding So to summarize, you can change: <button id='hg-prev'></button>
<button id='hg-next'></button> into: <button id="hg-prev" title="Previous" aria-label="Next"> <img src="iconsource" /> </button>
<button id="hg-next" title="Next" aria-label="Previous"> <img src="iconsource" /> </button> Again, thanks for your contribution! |
Type: Objection 💬 1. SummaryPossibly, in our case 2. Argumentation
Answers:
Thanks. |
I would rather stay with can also be focused by keyboard, which is not simply possible for divs |
1. Remark on a secondary argument
Possibly, 2. Pull request statusAccording to the arguments presented above I think that the But hes-gallery is your plugin, you can use whatever elements you want. Thanks. |
@Kristinita Yea, I know that this could be done by tabindex, but this is not a solution. There is no point of using As you said in your arguments:
and in
Moving to next/prev button is not a area, it is a button by definition |
@demtario , OK, we are waiting for it to be implemented). Thanks. |
Ok, so I'm closing this PR and moving our conclusions to the new issue: #13 |
1. Summary
I fixed hes-gallery errors, that shows web accessibility tools.
2. MCVE
2.1. Data
We can check hes-gallery demo page online use WAVE — web accessibility evaluation tool.
Report.
2.2. Behavior
2.2.1. Before
2.2.2. After
No “Missing alternative text” and “Empty button” errors.
I didn’t find any regressions after my changes.
3. Changes
3.1. Alternative text
I added
alt
attribute with valueDefault alternative text
toimg#hg-pic
.Missing alternative text:
3.2. Buttons
Empty button
I replaced
<button>
tag to<a>
. Possibly,<button>
isn’t the best solution if it isn’t used for submissions in forms. See “When To Use The Button Element” article.4. Environment
4.1. Minification
I minified
hes-gallery.js
andhes-gallery.css
on these online services:4.2. Testing
Windows 10.0.19041.508 Pro N for Workstations 64-bit EN
Browsers:
Thanks.