E-mail List Archives
Thread: Indicating primar and secondary action links to screen readers
Number of posts in this thread: 9 (In chronological order)
From: Birkir R. Gunnarsson
Date: Tue, Sep 06 2016 2:02PM
Subject: Indicating primar and secondary action links to screen readers
No previous message | Next message →
Hi gang
I am contemplating a curious question from my team.
They are wondering if they should use visually hidden texton links and
buttons that are visually indicated as the primary and secondary
actions on webpages.
Basically primary action (or call to action) links or buttons
(normally one per webpage) get unique visual emphasis via CSS, ditto
with secondary actions.
There is no HTML element or ARIA attribute to provide equivalent
functionality programmatically (perhaps the aria-roledescription could
be used for this purpose).
Bottomline:
1. Is this information important enough so that it should be provided
textually or programmatically? I have never made such a call in my
findings, and I have never seen it done on websites I have audited,
but it is a fact that this info could be important or at least useful
on some pages.
2. If it is provided, is there a technique better than good old screen
reader text to do so?
I am not a fan of using heading tags to do this, I think it is not
correct use of headings.
Cheers
-B
--
Work hard. Have fun. Make history.
From: Jim Homme
Date: Tue, Sep 06 2016 2:38PM
Subject: Re: Indicating primar and secondary action links to screenreaders
← Previous message | Next message →
Hi Birkir,
We try to advocate for as little off-screen content as possible here. Our view is that any site should try to make an equivalent experience for as wide as possible audience of people with disabilities. If you create off-screen controls, for example, people with motor disabilities who have site might tab onto them and get confused when focus disappears, and the same for people with inteellectual disabilities.
Thanks.
Jim
=========Jim Homme,
Accessibility Consultant,
Bender HighTest Accessibility Team
Bender Consulting Services, Inc.,
412-787-8567,
= EMAIL ADDRESS REMOVED =
http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
E+R=O
From: Caitlin Geier
Date: Tue, Sep 06 2016 2:47PM
Subject: Re: Indicating primar and secondary action links to screen readers
← Previous message | Next message →
Birkir! Hi!
The only thing I can think of is to address it via reading order. That is,
have the primary action come first in the reading order, and the secondary
action second. I also think it'd make sense to put the primary action first
in the tab order. I would be inclined to keep the text as is, offscreen or
otherwise.
I'm less sure about whether the visual order should match, since it's
fairly common to place the primary action on the far right, and there is
some usability research that indicates this placement is preferable. Also,
and I speak from experience, some designers are very opinionated about
where their buttons are placed. :)
-Caitlin
On Tue, Sep 6, 2016 at 4:38 PM, Jim Homme < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Birkir,
> We try to advocate for as little off-screen content as possible here. Our
> view is that any site should try to make an equivalent experience for as
> wide as possible audience of people with disabilities. If you create
> off-screen controls, for example, people with motor disabilities who have
> site might tab onto them and get confused when focus disappears, and the
> same for people with inteellectual disabilities.
>
> Thanks.
>
> Jim
>
>
> =========> Jim Homme,
> Accessibility Consultant,
> Bender HighTest Accessibility Team
> Bender Consulting Services, Inc.,
> 412-787-8567,
> = EMAIL ADDRESS REMOVED =
> http://www.benderconsult.com/our%20services/hightest-
> accessible-technology-solutions
> E+R=O
>
>
From: Birkir R. Gunnarsson
Date: Tue, Sep 06 2016 2:48PM
Subject: Re: Indicating primar and secondary action links to screen readers
← Previous message | Next message →
Imagine you have a page where users can read about an email offer
list. The page includes a couple of links and some text, but the
"register for our mailing list" link is visually formatted to stand
out as the primary action.
It is assigned a CSS class such as "primary action" or similar that
makes it look box like (almost button like).
Traditionally I haven't even thought of communicating this info in any
way, if the link has accessible text and is in a content location that
makes sense, and I don't think my stance on this has necessary
changed.
But when visual styling is used to assign priority to links on a page,
well, it is tricky to figure out if that info is important enough to
look for a text alterantive.
Cheers
On 9/6/16, Jim Homme < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Birkir,
> We try to advocate for as little off-screen content as possible here. Our
> view is that any site should try to make an equivalent experience for as
> wide as possible audience of people with disabilities. If you create
> off-screen controls, for example, people with motor disabilities who have
> site might tab onto them and get confused when focus disappears, and the
> same for people with inteellectual disabilities.
>
> Thanks.
>
> Jim
>
>
> =========> Jim Homme,
> Accessibility Consultant,
> Bender HighTest Accessibility Team
> Bender Consulting Services, Inc.,
> 412-787-8567,
> = EMAIL ADDRESS REMOVED =
> http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
> E+R=O
>
>
From: Jim Homme
Date: Tue, Sep 06 2016 3:11PM
Subject: Re: Indicating primar and secondary action links to screenreaders
← Previous message | Next message →
Hi,
If I understand what you are saing, then this might lend itself to headings and sub-headings, as in h2 and h3, lists and nested lists, or some other autoatically-speaking structure that developers don't have to invent.
Jim
=========Jim Homme,
Accessibility Consultant,
Bender HighTest Accessibility Team
Bender Consulting Services, Inc.,
412-787-8567,
= EMAIL ADDRESS REMOVED =
http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
E+R=O
From: Jeevan Reddy
Date: Wed, Sep 07 2016 12:49AM
Subject: Re: Indicating primar and secondary action links to screen readers
← Previous message | Next message →
the better way to communicating the primary and secondary actions is
to use button semantics to the primary action and link semantics for
the secondary action.. if the native button semantics can't permit you
then use 'aria button role'.
Cheers
Jeevan Reddy
On 9/7/16, Jim Homme < = EMAIL ADDRESS REMOVED = > wrote:
> Hi,
> If I understand what you are saing, then this might lend itself to headings
> and sub-headings, as in h2 and h3, lists and nested lists, or some other
> autoatically-speaking structure that developers don't have to invent.
>
> Jim
>
>
> =========> Jim Homme,
> Accessibility Consultant,
> Bender HighTest Accessibility Team
> Bender Consulting Services, Inc.,
> 412-787-8567,
> = EMAIL ADDRESS REMOVED =
> http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
> E+R=O
>
>
From: Sailesh Panchang
Date: Wed, Sep 07 2016 8:54AM
Subject: Re: Indicating primar and secondary action links to screen readers
← Previous message | Next message →
A very strong vote for not using markup / structure that developers
don't have to invent and browsers / At do not support (uniformly) ...
like aria-roledescription
Proper heading structure will provide suitable context.
A user can discover primary purpose or topic of a page from page title
/ h1 markup and review content that follows for primary action.
Is it clear explicitly that The intent for styling 'Register'
distinctly is to highlight difference between primary vs secondary
only? Do users realize this or only the author?
Also, as already stated, if it resembles a button, maybe it should be a button.
Surely the 'Register' element can be styled distinctively so it grabs
visual attention but no additional markup to aid accessibility is
needed. ... Just like Submit and Cancel buttons can have different
colors for visual identification as long as their purpose is clear
via text.
Regards,
Sailesh Panchang
On 9/7/16, Jeevan Reddy < = EMAIL ADDRESS REMOVED = > wrote:
> the better way to communicating the primary and secondary actions is
> to use button semantics to the primary action and link semantics for
> the secondary action.. if the native button semantics can't permit you
> then use 'aria button role'.
> Cheers
> Jeevan Reddy
>
> On 9/7/16, Jim Homme < = EMAIL ADDRESS REMOVED = > wrote:
>> Hi,
>> If I understand what you are saing, then this might lend itself to
>> headings
>> and sub-headings, as in h2 and h3, lists and nested lists, or some other
>> autoatically-speaking structure that developers don't have to invent.
>>
>> Jim
>>
>>
>> =========>> Jim Homme,
>> Accessibility Consultant,
>> Bender HighTest Accessibility Team
>> Bender Consulting Services, Inc.,
>> 412-787-8567,
>> = EMAIL ADDRESS REMOVED =
>> http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
>> E+R=O
>>
>>
From: Birkir R. Gunnarsson
Date: Wed, Sep 07 2016 11:11AM
Subject: Re: Indicating primar and secondary action links to screen readers
← Previous message | Next message →
Yeap, I err on the side of Sailesh's post here.
I don't think screen readers need the visual emphasis that helps other
users, such as people with cognitive impairment, identify the primary
action item on a page.
My gut instinct is to recommend removing the screen reader only text
indicating this styling, because I don't quite see that it helps the
uesrs any, it just adds to verbosity.
Cheers and thanks guys
On 9/7/16, Sailesh Panchang < = EMAIL ADDRESS REMOVED = > wrote:
> A very strong vote for not using markup / structure that developers
> don't have to invent and browsers / At do not support (uniformly) ...
> like aria-roledescription
> Proper heading structure will provide suitable context.
> A user can discover primary purpose or topic of a page from page title
> / h1 markup and review content that follows for primary action.
> Is it clear explicitly that The intent for styling 'Register'
> distinctly is to highlight difference between primary vs secondary
> only? Do users realize this or only the author?
> Also, as already stated, if it resembles a button, maybe it should be a
> button.
> Surely the 'Register' element can be styled distinctively so it grabs
> visual attention but no additional markup to aid accessibility is
> needed. ... Just like Submit and Cancel buttons can have different
> colors for visual identification as long as their purpose is clear
> via text.
> Regards,
> Sailesh Panchang
>
>
> On 9/7/16, Jeevan Reddy < = EMAIL ADDRESS REMOVED = > wrote:
>> the better way to communicating the primary and secondary actions is
>> to use button semantics to the primary action and link semantics for
>> the secondary action.. if the native button semantics can't permit you
>> then use 'aria button role'.
>> Cheers
>> Jeevan Reddy
>>
>> On 9/7/16, Jim Homme < = EMAIL ADDRESS REMOVED = > wrote:
>>> Hi,
>>> If I understand what you are saing, then this might lend itself to
>>> headings
>>> and sub-headings, as in h2 and h3, lists and nested lists, or some other
>>> autoatically-speaking structure that developers don't have to invent.
>>>
>>> Jim
>>>
>>>
>>> =========>>> Jim Homme,
>>> Accessibility Consultant,
>>> Bender HighTest Accessibility Team
>>> Bender Consulting Services, Inc.,
>>> 412-787-8567,
>>> = EMAIL ADDRESS REMOVED =
>>> http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
>>> E+R=O
>>>
>>>
From: Lucy Greco
Date: Wed, Sep 07 2016 11:27AM
Subject: Re: Indicating primar and secondary action links to screen readers
← Previous message | No next message
if its a form and the register is the default that is helpful if there is
a cancel as well then the person knows that hitting enter will take the
action. then yes add the text default to the label. but if its a
marketing ploy to get people to click the link don't bother. just having
the screen reader user find it is enough to get us to desire decide if it
is some thing we want to do or not. but there is a rule that says don't do
any thing for one group you don't do for another. i.e. indicate by
color or styling that the element is different. so its ok to not add
information for a blind person that is equivalent to making the link
stand out if your not trying for w3c compliance
Lucia Greco
Web Accessibility Evangelist
IST - Architecture, Platforms, and Integration
University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu
Follow me on twitter @accessaces
On Wed, Sep 7, 2016 at 10:11 AM, Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:
> Yeap, I err on the side of Sailesh's post here.
> I don't think screen readers need the visual emphasis that helps other
> users, such as people with cognitive impairment, identify the primary
> action item on a page.
> My gut instinct is to recommend removing the screen reader only text
> indicating this styling, because I don't quite see that it helps the
> uesrs any, it just adds to verbosity.
> Cheers and thanks guys
>
>
> On 9/7/16, Sailesh Panchang < = EMAIL ADDRESS REMOVED = > wrote:
> > A very strong vote for not using markup / structure that developers
> > don't have to invent and browsers / At do not support (uniformly) ...
> > like aria-roledescription
> > Proper heading structure will provide suitable context.
> > A user can discover primary purpose or topic of a page from page title
> > / h1 markup and review content that follows for primary action.
> > Is it clear explicitly that The intent for styling 'Register'
> > distinctly is to highlight difference between primary vs secondary
> > only? Do users realize this or only the author?
> > Also, as already stated, if it resembles a button, maybe it should be a
> > button.
> > Surely the 'Register' element can be styled distinctively so it grabs
> > visual attention but no additional markup to aid accessibility is
> > needed. ... Just like Submit and Cancel buttons can have different
> > colors for visual identification as long as their purpose is clear
> > via text.
> > Regards,
> > Sailesh Panchang
> >
> >
> > On 9/7/16, Jeevan Reddy < = EMAIL ADDRESS REMOVED = > wrote:
> >> the better way to communicating the primary and secondary actions is
> >> to use button semantics to the primary action and link semantics for
> >> the secondary action.. if the native button semantics can't permit you
> >> then use 'aria button role'.
> >> Cheers
> >> Jeevan Reddy
> >>
> >> On 9/7/16, Jim Homme < = EMAIL ADDRESS REMOVED = > wrote:
> >>> Hi,
> >>> If I understand what you are saing, then this might lend itself to
> >>> headings
> >>> and sub-headings, as in h2 and h3, lists and nested lists, or some
> other
> >>> autoatically-speaking structure that developers don't have to invent.
> >>>
> >>> Jim
> >>>
> >>>
> >>> =========> >>> Jim Homme,
> >>> Accessibility Consultant,
> >>> Bender HighTest Accessibility Team
> >>> Bender Consulting Services, Inc.,
> >>> 412-787-8567,
> >>> = EMAIL ADDRESS REMOVED =
> >>> http://www.benderconsult.com/our%20services/hightest-
> accessible-technology-solutions
> >>> E+R=O
> >>>
> >>>