The method currently listed in section C7 is fine apart from the negative top value. It’s an improvement in that is actually visually hides the thing in position. A very large negative number in margin left just displaces the thing. Similarly, negative text indent messes with other inline elements in that element.
—Michiel
> On 08 Jan 2016, at 18:36, ruth tait <artbyrt@gmail.com> wrote:
>
> how does this improve on the earlier strategy of
> a span {
> margin-left: -10000em;
>
> }
>
> Also, the recommendation that link text is hidden using property text-indent: -10000px; as per http://webaim.org/techniques/css/invisiblecontent/ <http://webaim.org/techniques/css/invisiblecontent/> recommendation doesn’t work in browsers for mac. margin-left: -n; with large number does work but haven’t tested with screen readers.
>
> ==================
> ruth tait
> Interdisciplinary student - Graduate Studies
> 416 900 5631
>
>
>
>
>
>> On Jan 8, 2016, at 11:34 AM, Michiel Bijl <michiel@agosto.nl <mailto:michiel@agosto.nl>> wrote:
>>
>> C7: Using CSS to hide a portion of the link text <http://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160105/complete-diff.html#C7> contains the following CSS to visually hide an element:
>>
>>> a span {
>>> height: 1px;
>>> width: 1px;
>>> position: absolute;
>>> overflow: hidden;
>>> top: -10px;
>>> }
>>
>>
>> Is there any reason to include the negative top value? If top, right, bottom, and left are not set, the element will stay in the rendered place. This would prevent any mess-ups with—for example—focus styles. A way around this would be to set position to relative on the parent element, but that means extra code that isn’t strictly necessary if top wasn’t set.
>>
>> —Michiel
>>
>
Received on Friday, 8 January 2016 18:15:34 UTC