We have a new 30 Days of Testing Challenge, use this space to share your learning and results!
We’ll be encouraging people to do the challenge starting on May 1st 2017, however as always, you can start and finish any time you want!
I am dipping in and out of this challenge, I’m completely new to accessibility testing. I started with reading an Alphabet of Accessibility issues and then I saw this tweet
The only tools I’ve tried in my career to date are colour blindness simulators, I know this is really limited! I want to expand to tools that can help me test for older people or people with visual impairments. Does anyone have a go to tool(s) for that?
Hi @heather_reid,
Hope this will be helpful for you
https://alon.blog/2017/05/04/accessibility-testing-tools/
1 Like
I have a question after reading @mkltesthead 's blog : http://www.mkltesthead.com/2017/05/wading-into-wave-30-days-of.html
I tried Wave tool:
And One error says - Multiple form labels
But code looks like:
<label class="loginCheckbox" for="rememberMe">
<input type="checkbox" tabindex="3" name="rememberMe" id="rememberMe" onchange="checkRemember(this);">
Remember Me
</label>
I see opening tag and closing tag of form label elements.
Is opening and closing form tag is a problem?
I want to understand “contrast issues and determined where I could make a few changes.” -
Example: http://wave.webaim.org/report#/LOWES.COM
I see 5 contrast errors, but don’t understand what it conveys.
Hi @srinivasskc,
The Color Contrast check is to find places on the page where the contrast between the color used for the text and the color used as its background is too low.
You can read the full technical details about this ratio, at the link at the end of this post, but I just want to give you 3 quick points about this issue:
- The minimal contrast ratio that is required by WCAG2.0 is 4.5:1 (or at least 3:1 for “large” text).
- Note that one of the failures reported by WAVE isn’t real. It reports a 1:1 ratio for white text on white background, but when you look at the page you see that the background isn’t really white, but blue.
- If you have doubts about some colors, you can also check them manually with tools like this: https://www.paciellogroup.com/resources/contrastanalyser/ which gives you the option to pick the colors to compare.
Please let me know if this was helpful.
Alon.
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
2 Likes
When I use WAVE on the code sample you gave here, I don’t see any multiple labels.
Perhaps it’s a different part of the HTML that gave this error? Can you send the full page like you did for the colors question?
P.s.
Note that positive values for tabindex are not recommended as they mess the natural order navigation order, and it might affect some users’ accessibility.
1 Like
Thanks @awaisbard, I tried the Paciello tool. I see there is a difference between , color identifier
Says: foreground color: #ffffff, background color: #aeafa9
When i try with Paciello tool : It says -
Foreground : #F6F7F6 , Background: #AEAFA9
And when i use colorzilla tool: I have got as #FFFFF
[Cannot not share the website url for above question]
Why would be the difference in color identifiers?
But here is another example,
where https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd tells contrast ratio different to Color Contrast Analyser.
Here is code sample…
<form id="headerForm" action="Login.action" method="post"> <ol> <li> <input type="text" placeholder="User Name" tabindex="1" name="loginId" id="mUserName" /> </li> <li> <input type="password" placeholder="Password" tabindex="2" name="loginPassword" id="mPassword" /> </li> <li> <div class="pullLeft"> <label class="Checkbox" for="rememberMe"> <input type="checkbox" tabindex="3" name="rememberMe" id="rememberMe" onchange="checkRemember(this);"/>Remember Me</label> </div> </form>
And It appears like this:
http://www.ovais.me/javascript/bootstrap-3-dropdown-form-without-form-tag/
In this example the username and the password field do not have label.
The third input (checkbox) seems ok since the input has a label defined for it (and not multiple labels).
Perhaps you have somewhere else on the page a label for a certain id which repeats in the page, and caused the multiple labels error before.
I tried it just now and I’m getting the same values in both aXe and CCA:
Foreground:#323232
Background:#191919
Did you use the color picker on the same area that aXe reported? (in that case the dark text at the bottom of the page.
1 Like
Anyone else having issues with day 13 having to give personal information to access videos? Michael Larson has added a watch and learn blog for the day where you don’t have to give that information 
️
Hello,
I discovered the challenge a little bit late !
thank’s @awaisbard i look at Hemingway editor or WebPageFX Readability tools ! nice tools is there any API ?
want to use it in our accessibility tools !
I was trying to claim a free book on PackT this morning and it got me thinking about reCAPTCHAs with screen readers.
I went looking on Google and could only find a blog from 2016 about the Accessibility of CAPTCHAs.
Have any of you tried screen readers with a set of images like this?
A blog wrap up of the accessibility challenge from @mkltesthead
I finally published my blogpost about the accessibility challenge. Thanks to this challenge my team made a huge leap in making our product accessible.
https://www.linkedin.com/pulse/how-our-team-got-started-accessibility-dirk-jansen
2 Likes
Nice tool share Alon, Helpful tool , by doing just one thing well.
Hi all, doing this challenge 3 years after 
Here’s Day 1 for me: Learn about different types of disabilities and the impact of aging.
1 Like
Day 2 is to use WAVE tool to find any accessibility problems. I decided to run it on https://www.notonthehighstreet.com/ and the video below shows the errors that WAVE was able to detect.
1 Like
Day 3 and Day 4.
Day 3: Share your favourite accessibility testing tool
Hmm I can’t think of just one because I don’t think there is one tool out there that can catch all a11y issues. But so far, I like using:
- Axe extension
- Axe CLI
- Cypress-Axe
- WAVE extension
- Lighthouse
Day 4: Research the benefits of inclusive design
Inclusive design is about designing and creating a product that can be accessible by everyone, including people with disabilities.
1 Like