However text-overflow is inherently inaccessible, because its only purpose is to wave-through inaccessible design. the element doesn’t have any text, or very little). for visually-hidden text), or where there’s no possibility of text content being lost (e.g. There are valid use-cases for it, but these are cases where either the loss of text content is intentional (i.e. Using overflow: hidden is a better comparison, because it has high potential for causing loss of text content. Setting margin-left: -100vw on content that’s supposed to be visible will render it off-screen, which is an accessibility problem but that doesn’t mean that margin itself is a problem. 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. Horizontal scrolling content at a height equivalent to 256 CSS pixels.Įxcept for parts of the content which require two-dimensional layout for usage or meaning. ![]() Vertical scrolling content at a width equivalent to 320 CSS pixels.So I was very pleased to see someone else flying the same flag.Ī recent article by Eric Eggert is quite critical of this property, since using it in web content can cause it to fail Success Criterion 1.4.10 Reflow:Ĭontent can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for: I’m not a fan, and take every suitable opportunity to discourage people from using this property though I rarely get enthusiastic support on that point. The CSS text-overflow property can be used to show a visual indication for text that’s been clipped by its container.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |