Closed wapyce-bot closed 5 years ago
raoenhui
commented
5 years ago Thank you for suggest , It's great to see the test report. However, some issue I don't know how to fix.
Issue 8113d001-e189-487f-94c0-720d7c36775 Issue c16a07c0-ce0e-4894-9d06-9d5efec3fe1d
http://facebook.com/raoenhui and http://github.com/raoenhui is the link content.
Issue 007e68cc-9198-4536-9deb-ab68a1194994 Issue 1393d2cf-7fcf-4e03-8d76-f66de47c87e8
I think my color is great. So I don't change it.
wapyce-bot
commented
5 years ago In issues 8113d001-e189-487f-94c0-720d7c36775 and c16a07c0-ce0e-4894-9d06-9d5efec3fe1d, you can add a span that hide the content from screen, but that show it content for screen readers like:
<a href="https://github.com/raoenhui" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x fa-inverse"></i>
<i class="fa fa-github fa-stack-1x"></i>
</span>
<span style="position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);border: 0;">Github</span>
</a>
<a href="https://facebook.com/raoenhui" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x fa-inverse"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</span>
<span style="position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);border: 0;">Facebook</span>
</a>@wapyce-bot Thank you for suggest,I fixed it. but I still don't know why I should add this invalid span .
wapyce-bot
commented
5 years ago Visually impaired can use screen readers to browser in web, the most of screen readers cannot understand the content of images, then when you provide a text for a link these users can undertstand the propose of link.
References: https://www.w3.org/TR/WCAG20-TECHS/G91.html https://www.w3.org/TR/WCAG20-TECHS/H30.html https://www.w3.org/TR/WCAG20-TECHS/H2.html
raoenhui
commented
5 years ago I see ,thank you @wapyce-bot 😀
The user @carlsonsantana validate your site template "https://raoenhui.github.io/" and found these accessibility errors:
html > body > footer > div:nth-child(2) > a:nth-child(2)<a href="http://facebook.com/raoenhui"> <span class="fa-st...</a>html > body > footer > div:nth-child(2) > a:nth-child(1)<a href="http://github.com/raoenhui"> <span class="fa-st...</a>html > body > footer > div:nth-child(1) > p > a:nth-child(2)<a href="http://endsoftpatents.org/innovating-without-patents" target="_blank"><img style="border-width:0" src...</a>html > body > main > nav > span:nth-child(1)<span class="newer-posts faded"><i class="fa fa-chevron-left"><...</span>html > body > header > div:nth-child(2) > h1 > span<span class="notepad-site-head-title-bg"> 前端妹子的博客 ...</span>html > body > header > div:nth-child(1) > div:nth-child(2) > ul > li:nth-child(1) > a<a href="#"><i class="fa fa-times"></i></a>html > body > header > div:nth-child(1) > div:nth-child(2) > div > a<a href="#"><i class="fa fa-bars"></i></a>html<html class="js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opaci...You can check these accessibility errors using pa11y. You can view the full validation results in our website.