WAVE accessibility tool: Very small text - is it possible to avoid this warning, but keep the font size...
There is a piece of code that shows tiny "8px text" on the page instead of bootstrap icon.
<a href="someurl"><span class="small-text-as-an-image">8px text</span></a>
This text should not be treated as a text for eyes, but please treat it as an image.
How to avoid WAVE accessibility warning that this text is very small?
- The first option is to make this text as an image. JPEG or whatever image. Is it good? I don't think so.
The second option is to use css preudoclass + apply
.small-text-as-an-image:after {
content: "8px text";
}
Looks like the second option would be the way to go (tested with JAWS as well, seems like JAWS respects this solution as well and pronounces it).
However this solution is also not perfect as far as translating the web site into 2+ languages will cause issues: the text should be avoided in css where possible.
Any good solution that WAVE accessibility tool will avoid this warning and also readers read it as "8px text"?
Thank you.
html css accessibility wave
asked Nov 12 '18 at 12:45
HaradzieniecHaradzieniec
3,9741985171
add a comment |
There is a piece of code that shows tiny "8px text" on the page instead of bootstrap icon.
<a href="someurl"><span class="small-text-as-an-image">8px text</span></a>
This text should not be treated as a text for eyes, but please treat it as an image.
How to avoid WAVE accessibility warning that this text is very small?
- The first option is to make this text as an image. JPEG or whatever image. Is it good? I don't think so.
The second option is to use css preudoclass + apply
.small-text-as-an-image:after {
content: "8px text";
}
Looks like the second option would be the way to go (tested with JAWS as well, seems like JAWS respects this solution as well and pronounces it).
However this solution is also not perfect as far as translating the web site into 2+ languages will cause issues: the text should be avoided in css where possible.
Any good solution that WAVE accessibility tool will avoid this warning and also readers read it as "8px text"?
Thank you.
html css accessibility wave
asked Nov 12 '18 at 12:45
HaradzieniecHaradzieniec
3,9741985171
It is a warning only, so there should be no need to “avoid” it in the first place. There is nothing wrong with deciding to ignore a warning, if there is good enough reason for it. Such tools are meant to help you spot potential issues, they are not a god-like entity that you had to “please” at all cost.
– misorude
Nov 12 '18 at 12:52
1
“However this solution is also not perfect as far as translating the web site into 2+ languages will cause issues” - if it doesn’t have to be readable text to begin with, then how can translation become an issue?
– misorude
Nov 12 '18 at 12:54
@misorude please treat it as another "image" should be displayed for people from another countries. Like a small text on the small coat of arms.
– Haradzieniec
Nov 12 '18 at 12:56
add a comment |
There is a piece of code that shows tiny "8px text" on the page instead of bootstrap icon.
<a href="someurl"><span class="small-text-as-an-image">8px text</span></a>
This text should not be treated as a text for eyes, but please treat it as an image.
How to avoid WAVE accessibility warning that this text is very small?
- The first option is to make this text as an image. JPEG or whatever image. Is it good? I don't think so.
The second option is to use css preudoclass + apply
.small-text-as-an-image:after {
content: "8px text";
}
Looks like the second option would be the way to go (tested with JAWS as well, seems like JAWS respects this solution as well and pronounces it).
However this solution is also not perfect as far as translating the web site into 2+ languages will cause issues: the text should be avoided in css where possible.
Any good solution that WAVE accessibility tool will avoid this warning and also readers read it as "8px text"?
Thank you.
html css accessibility wave
asked Nov 12 '18 at 12:45
HaradzieniecHaradzieniec
3,9741985171
There is a piece of code that shows tiny "8px text" on the page instead of bootstrap icon.
<a href="someurl"><span class="small-text-as-an-image">8px text</span></a>
This text should not be treated as a text for eyes, but please treat it as an image.
How to avoid WAVE accessibility warning that this text is very small?
- The first option is to make this text as an image. JPEG or whatever image. Is it good? I don't think so.
The second option is to use css preudoclass + apply
.small-text-as-an-image:after {
content: "8px text";
}
Looks like the second option would be the way to go (tested with JAWS as well, seems like JAWS respects this solution as well and pronounces it).
However this solution is also not perfect as far as translating the web site into 2+ languages will cause issues: the text should be avoided in css where possible.
Any good solution that WAVE accessibility tool will avoid this warning and also readers read it as "8px text"?
Thank you.
html css accessibility wave
html css accessibility wave
asked Nov 12 '18 at 12:45
HaradzieniecHaradzieniec
3,9741985171
asked Nov 12 '18 at 12:45
HaradzieniecHaradzieniec
3,9741985171
asked Nov 12 '18 at 12:45
HaradzieniecHaradzieniec
3,9741985171
asked Nov 12 '18 at 12:45
HaradzieniecHaradzieniec
3,9741985171
asked Nov 12 '18 at 12:45
HaradzieniecHaradzieniec
3,9741985171
3,9741985171
It is a warning only, so there should be no need to “avoid” it in the first place. There is nothing wrong with deciding to ignore a warning, if there is good enough reason for it. Such tools are meant to help you spot potential issues, they are not a god-like entity that you had to “please” at all cost.
– misorude
Nov 12 '18 at 12:52
1
“However this solution is also not perfect as far as translating the web site into 2+ languages will cause issues” - if it doesn’t have to be readable text to begin with, then how can translation become an issue?
– misorude
Nov 12 '18 at 12:54
@misorude please treat it as another "image" should be displayed for people from another countries. Like a small text on the small coat of arms.
– Haradzieniec
Nov 12 '18 at 12:56
add a comment |
It is a warning only, so there should be no need to “avoid” it in the first place. There is nothing wrong with deciding to ignore a warning, if there is good enough reason for it. Such tools are meant to help you spot potential issues, they are not a god-like entity that you had to “please” at all cost.
– misorude
Nov 12 '18 at 12:52
1
“However this solution is also not perfect as far as translating the web site into 2+ languages will cause issues” - if it doesn’t have to be readable text to begin with, then how can translation become an issue?
– misorude
Nov 12 '18 at 12:54
@misorude please treat it as another "image" should be displayed for people from another countries. Like a small text on the small coat of arms.
– Haradzieniec
Nov 12 '18 at 12:56
It is a warning only, so there should be no need to “avoid” it in the first place. There is nothing wrong with deciding to ignore a warning, if there is good enough reason for it. Such tools are meant to help you spot potential issues, they are not a god-like entity that you had to “please” at all cost.
– misorude
Nov 12 '18 at 12:52
It is a warning only, so there should be no need to “avoid” it in the first place. There is nothing wrong with deciding to ignore a warning, if there is good enough reason for it. Such tools are meant to help you spot potential issues, they are not a god-like entity that you had to “please” at all cost.
– misorude
Nov 12 '18 at 12:52
1
1
“However this solution is also not perfect as far as translating the web site into 2+ languages will cause issues” - if it doesn’t have to be readable text to begin with, then how can translation become an issue?
– misorude
Nov 12 '18 at 12:54
“However this solution is also not perfect as far as translating the web site into 2+ languages will cause issues” - if it doesn’t have to be readable text to begin with, then how can translation become an issue?
– misorude
Nov 12 '18 at 12:54
@misorude please treat it as another "image" should be displayed for people from another countries. Like a small text on the small coat of arms.
– Haradzieniec
Nov 12 '18 at 12:56
@misorude please treat it as another "image" should be displayed for people from another countries. Like a small text on the small coat of arms.
– Haradzieniec
Nov 12 '18 at 12:56
add a comment |
1 Answer
1
active
oldest
votes
<a href="someurl"><span class="small-text-as-an-image">8px text</span></a>
This text should not be treated as a text for eyes, but please treat it as an image.
This text is the only content inside a link. So it can't be treated as a decorative image
- it lacks some alternative (using
aria-labelfor instance), - it should be perceivable
- it might be large enough to be clickable (using CSS) (see target size)
answered Nov 15 '18 at 10:45
AdamAdam
12.2k1735
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53262491%2fwave-accessibility-tool-very-small-text-is-it-possible-to-avoid-this-warning%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
<a href="someurl"><span class="small-text-as-an-image">8px text</span></a>
This text should not be treated as a text for eyes, but please treat it as an image.
This text is the only content inside a link. So it can't be treated as a decorative image
- it lacks some alternative (using
aria-labelfor instance), - it should be perceivable
- it might be large enough to be clickable (using CSS) (see target size)
answered Nov 15 '18 at 10:45
AdamAdam
12.2k1735
add a comment |
<a href="someurl"><span class="small-text-as-an-image">8px text</span></a>
This text should not be treated as a text for eyes, but please treat it as an image.
This text is the only content inside a link. So it can't be treated as a decorative image
- it lacks some alternative (using
aria-labelfor instance), - it should be perceivable
- it might be large enough to be clickable (using CSS) (see target size)
answered Nov 15 '18 at 10:45
AdamAdam
12.2k1735
add a comment |
<a href="someurl"><span class="small-text-as-an-image">8px text</span></a>
This text should not be treated as a text for eyes, but please treat it as an image.
This text is the only content inside a link. So it can't be treated as a decorative image
- it lacks some alternative (using
aria-labelfor instance), - it should be perceivable
- it might be large enough to be clickable (using CSS) (see target size)
answered Nov 15 '18 at 10:45
AdamAdam
12.2k1735
<a href="someurl"><span class="small-text-as-an-image">8px text</span></a>
This text should not be treated as a text for eyes, but please treat it as an image.
This text is the only content inside a link. So it can't be treated as a decorative image
- it lacks some alternative (using
aria-labelfor instance), - it should be perceivable
- it might be large enough to be clickable (using CSS) (see target size)
answered Nov 15 '18 at 10:45
AdamAdam
12.2k1735
answered Nov 15 '18 at 10:45
AdamAdam
12.2k1735
answered Nov 15 '18 at 10:45
AdamAdam
12.2k1735
answered Nov 15 '18 at 10:45
AdamAdam
12.2k1735
12.2k1735
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53262491%2fwave-accessibility-tool-very-small-text-is-it-possible-to-avoid-this-warning%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
It is a warning only, so there should be no need to “avoid” it in the first place. There is nothing wrong with deciding to ignore a warning, if there is good enough reason for it. Such tools are meant to help you spot potential issues, they are not a god-like entity that you had to “please” at all cost.
– misorude
Nov 12 '18 at 12:52
1
“However this solution is also not perfect as far as translating the web site into 2+ languages will cause issues” - if it doesn’t have to be readable text to begin with, then how can translation become an issue?
– misorude
Nov 12 '18 at 12:54
@misorude please treat it as another "image" should be displayed for people from another countries. Like a small text on the small coat of arms.
– Haradzieniec
Nov 12 '18 at 12:56