-1

My HTML:

<p id="text">test</p>

My CSS:

#test {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 0.7em;
  text-align: center;
}

How do I avoid this warning on WAVE accessibility tool? This is one the requirement to keep this text small.

Shank
  • 413
  • 4
  • 15
  • 1
    **What** warning? I'd speculate it says something like "The text may be too small for some people to read". In which case — No! — if the text is tiny, it is tiny, and you can't stop a tool explicitly designed to warn about such things from warning about such things. Write more accessible code instead. – Quentin Oct 25 '19 at 13:40
  • @Quentin Warning is text too small. Thanks for your answer!! – Shank Oct 25 '19 at 13:45

2 Answers2

5

Short answer

No.

Medium answer

No and neither should you try and avoid warnings, you should fix them.

Long Answer

No.

This warning is in place because people with low vision struggle to read tiny fonts. (and even those with perfect vision don't want to have to squint to read things - it is a bad user experience all around!)

You shouldn't try to fix warnings, you should address the problem.

If there is a requirement to keep text small it is the requirement that needs changing.

Either adjust the design to incorporate large text if the layout isn't large enough to fit the text at a larger size (1 rem minimum size) or change the brief and explain why the text needs to be larger if it is a spec requirement.

If it is a layout issue you also have to bear in mind that by using em units you already have to accommodate larger text as the user may have their browser font size set to very large and em units will scale in relation to that.

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64
  • I support this answer, with the cautious suggestion that there may indeed be a rationale for using tiny fonts. But if the tiny font choice is based on assumption, preference, accident or ignorance, you should certainly be prepared to challenge that choice, because there are compelling reasons to reject it, including (but not limited to) accessibility. – brennanyoung Nov 01 '19 at 11:13
  • Can you give a good example of a reason to use tiny fonts? I cannot think of one but it is always good to learn! – GrahamTheDev Nov 01 '19 at 12:08
  • 1
    Requirement that the text is legible under a magnifier without 'scrolling'? Displays for engineers examining retina displays? WYSIWYG print view for transcribing the Gettysburg Address onto postage stamps? We're getting into some pretty rare corner cases here, which is my point. – brennanyoung Nov 01 '19 at 12:21
  • lol, love the response, but I do think it rather emphasises my point, the above 3 scenarios are so insane that I think we can safely say there is no rationale to use tiny fonts on digital devices - even if the stamp idea would be pretty cool! – GrahamTheDev Nov 01 '19 at 12:25
2

Wave reports errors for text smaller than 10px. For standard browsers 0.7em is equivalent to 11px if you don't nest tags. You can base your font on the rem unity instead of em or use the px unity (which is totally valid for accessibility as it represents CSS pixels not physical pixels). That being said answer from Graham Ritchie give you the good way to handle the situation : do not try to solve the problem by hiding the warning.

Adam
  • 17,838
  • 32
  • 54