![]() ![]() Many CSS properties have the potential to cause accessibility problems, but that potential is rarely inherent to the property itself, it’s all about how you use it. That would make it a 1.3.1 failure, but more importantly, it could be a problem for sighted screen reader users, when the spoken output no longer matches the visible text. Arguably, this amounts to information or structure conveyed through presentation which cannot be programmatically determined. The truncation is purely a render effect - the full text is still in the DOM and accessibility tree - and no meta-data is exposed in the DOM to indicate where the break is. Text truncated in this way might also fail Success Criterion 1.3.1 Info and Relationships. This is what makes it an accessibility issue, over and above the usability issue for small screen users. Showing the same list in a 1280px viewport at 400% zoom So users who need large text to read effectively, such as people with low vision or a cognitive disability, may lose text content simply because of that need. a 320px viewport at 100% zoom is functionally identical to a 1280px viewport at 400% zoom). However responsive layouts designed for small viewports also apply to larger viewports when viewed at high zoom (i.e. It only works for single-line text, and can’t be used to truncate a multi-line paragraph. The idea is that it can be used for containers with limited dimensions, so that single-line text within it doesn’t overlap the container in smaller viewports. This character (or whatever characters are specified) is included in the overall line-box limit, so the visual indicator itself further reduces the space available for the text, though only slightly. The property value ellipsis is the most commonly used, and renders an ellipsis character ( …) at the point of truncation, as you’d expect. Showing text-overflow with a width-constrained list in a 640px viewport So it’s used in combination with other properties that restrict and clip the boundaries of a container, typically width or max-width combined with overflow: hidden.Īnd here’s an example of what that can look like when it takes effect: The text-overflow property itself does not truncate text, it only specifies how the truncation should be indicated when it does occur. ![]() If text has been truncated with text-overflow, then this is a loss of content, and therefore an instant failure of 1.4.10.Īlthough the article concedes the possibility of valid use cases, I would personally go a step further and say there are none - that text-overflow should never be used. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |