E-mail List Archives
Thread: Re-order page content
Number of posts in this thread: 18 (In chronological order)
From: Joseph Sherman
Date: Thu, Jun 01 2017 12:11PM
Subject: Re-order page content
No previous message | Next message →
Hello all. I know that we want the visual order to match the DOM order. However I have a page with a login and instructions side by side. My folks want to put the login to the left, and the instructions on the right. This seems like bad design to me but I can't get them to change it. What I wanted to do for blind users is at least put the instructions first in the DOM. How can we best do this? Basically this is the reverse of the standard "don't use CSS to break visual and DOM order" as here I want to break it. I know it's not great, but if the designers want it to look at certain way I generally can't win that battle. Any help appreciated.
Thanks.
Joseph
From: Chagnon | PubCom
Date: Thu, Jun 01 2017 12:43PM
Subject: Re: Re-order page content
← Previous message | Next message →
150 years' worth of scientific research on human behavior has proven beyond any designer's doubt that if you want something to be noticed and read by visually sighted people, put it on the right side of the page, preferably on the upper right side. Sighted people do not focus on the left side of the page. They focus -- and comprehend -- on items on the right side.
I'm worried about some of the following assumptions in the original post.
Quote: "This seems like bad design to me."
That's your opinion as a programmer. But the designers' decision is spot on. They want sighted people to read the instructions first, before clicking into the login fields. You want the same end result for those using AT: read the instructions first before logging in.
So the designers need the instructions placed on the right to meet the goal. And AT users need them placed before the login fields in the DOM.
That's why we created stylesheets throughout all communication/publishing technologies and media; to allow the stylesheet to adjust the presentation to meet the users' needs.
It's crazy to degrade the experience for sighted users to meet accessibility requirements for those use AT.
Accommodate all users. A L L users.
Quote: "I know that we want the visual order to match the DOM order."
Why? Give me a good reason why this is beneficial to anyone, sighted or AT user or designer or programmer.
Quote: "Basically this is the reverse of the standard "don't use CSS to break visual and DOM order"
When did this become a standard? It might be a recommended practice in some situations, but it certainly doesn't fit all situations, including the one you've described.
--Bevi Chagnon
Award-winning designer in multiple disciplines and programmer with undergraduate and graduate study in human behavior, perception, and design.
From: Patrick H. Lauke
Date: Thu, Jun 01 2017 12:51PM
Subject: Re: Re-order page content
← Previous message | Next message →
On 01/06/2017 19:43, Chagnon | PubCom wrote:
[...]
> --Bevi Chagnon
> Award-winning designer in multiple disciplines and programmer with undergraduate and graduate study in human behavior, perception, and design.
Sadly, no study of using friendly, non-condescending tone of voice when
communicating with somebody asking for advice, it seems...
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Joseph Sherman
Date: Thu, Jun 01 2017 12:54PM
Subject: Re: Re-order page content
← Previous message | Next message →
I am neither a programmer nor designer. I was simply asking how to do something.
As I read http://www.w3.org/TR/WCAG20-TECHS/C27.html DOM and visual order should be the same. If not, great. Instead, can you tell me the best way to put the instructions on the right side visually but before the form fields for AT users?
Joseph
>
From: Birkir R. Gunnarsson
Date: Thu, Jun 01 2017 12:54PM
Subject: Re: Re-order page content
← Previous message | Next message →
There are some benefits when visual and content order match, mostly
for consistency between an assistive technology user experience and
the experience of a user who does not use a.t.
But if there are reasons to use a different order, that is totally fine.
WCAG 1.3.2 (and, to some extent 2.4.3 if we are talking focus order)
say that content/reading order should match the visual order as a best
practice, but emphasize that the content order only has to be logical.
In this case, put the login instructions before the form in content
order, but use CSS to place them to the right of the login form.
The content order is logical for a.t. users, and users who view the
page without CSS, but optimally placed for those who rely on the
regular page layout.
On 6/1/17, Chagnon | PubCom < = EMAIL ADDRESS REMOVED = > wrote:
> 150 years' worth of scientific research on human behavior has proven beyond
> any designer's doubt that if you want something to be noticed and read by
> visually sighted people, put it on the right side of the page, preferably on
> the upper right side. Sighted people do not focus on the left side of the
> page. They focus -- and comprehend -- on items on the right side.
>
> I'm worried about some of the following assumptions in the original post.
>
> Quote: "This seems like bad design to me."
>
> That's your opinion as a programmer. But the designers' decision is spot on.
> They want sighted people to read the instructions first, before clicking
> into the login fields. You want the same end result for those using AT: read
> the instructions first before logging in.
>
> So the designers need the instructions placed on the right to meet the goal.
> And AT users need them placed before the login fields in the DOM.
>
> That's why we created stylesheets throughout all communication/publishing
> technologies and media; to allow the stylesheet to adjust the presentation
> to meet the users' needs.
>
> It's crazy to degrade the experience for sighted users to meet accessibility
> requirements for those use AT.
>
> Accommodate all users. A L L users.
>
>
> Quote: "I know that we want the visual order to match the DOM order."
>
> Why? Give me a good reason why this is beneficial to anyone, sighted or AT
> user or designer or programmer.
>
>
> Quote: "Basically this is the reverse of the standard "don't use CSS to
> break visual and DOM order"
>
> When did this become a standard? It might be a recommended practice in some
> situations, but it certainly doesn't fit all situations, including the one
> you've described.
>
> --Bevi Chagnon
> Award-winning designer in multiple disciplines and programmer with
> undergraduate and graduate study in human behavior, perception, and design.
>
>
> > > > >
--
Work hard. Have fun. Make history.
From: Shane Anderson
Date: Fri, Jun 02 2017 2:12AM
Subject: Re: Re-order page content
← Previous message | Next message →
Hi Joseph,
Techniques should be consulted when the accessibility is not quite right.
It's a common mistake to view them as the only way to implement
accessibility, but the techniques themselves are not the standard.
I agree with Birkir, there's nothing wrong with putting the instructions
before the login form in the DOM when that is the way the content is meant
to be percieved.
Regards
Shane Anderson
On Thu, Jun 1, 2017 at 2:54 PM, Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:
> There are some benefits when visual and content order match, mostly
> for consistency between an assistive technology user experience and
> the experience of a user who does not use a.t.
> But if there are reasons to use a different order, that is totally fine.
>
> WCAG 1.3.2 (and, to some extent 2.4.3 if we are talking focus order)
> say that content/reading order should match the visual order as a best
> practice, but emphasize that the content order only has to be logical.
>
> In this case, put the login instructions before the form in content
> order, but use CSS to place them to the right of the login form.
> The content order is logical for a.t. users, and users who view the
> page without CSS, but optimally placed for those who rely on the
> regular page layout.
>
>
>
>
> On 6/1/17, Chagnon | PubCom < = EMAIL ADDRESS REMOVED = > wrote:
> > 150 years' worth of scientific research on human behavior has proven
> beyond
> > any designer's doubt that if you want something to be noticed and read by
> > visually sighted people, put it on the right side of the page,
> preferably on
> > the upper right side. Sighted people do not focus on the left side of the
> > page. They focus -- and comprehend -- on items on the right side.
> >
> > I'm worried about some of the following assumptions in the original post.
> >
> > Quote: "This seems like bad design to me."
> >
> > That's your opinion as a programmer. But the designers' decision is spot
> on.
> > They want sighted people to read the instructions first, before clicking
> > into the login fields. You want the same end result for those using AT:
> read
> > the instructions first before logging in.
> >
> > So the designers need the instructions placed on the right to meet the
> goal.
> > And AT users need them placed before the login fields in the DOM.
> >
> > That's why we created stylesheets throughout all communication/publishing
> > technologies and media; to allow the stylesheet to adjust the
> presentation
> > to meet the users' needs.
> >
> > It's crazy to degrade the experience for sighted users to meet
> accessibility
> > requirements for those use AT.
> >
> > Accommodate all users. A L L users.
> >
> >
> > Quote: "I know that we want the visual order to match the DOM order."
> >
> > Why? Give me a good reason why this is beneficial to anyone, sighted or
> AT
> > user or designer or programmer.
> >
> >
> > Quote: "Basically this is the reverse of the standard "don't use CSS to
> > break visual and DOM order"
> >
> > When did this become a standard? It might be a recommended practice in
> some
> > situations, but it certainly doesn't fit all situations, including the
> one
> > you've described.
> >
> > --Bevi Chagnon
> > Award-winning designer in multiple disciplines and programmer with
> > undergraduate and graduate study in human behavior, perception, and
> design.
> >
> >
> > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > > >
From: Swift, Daniel P.
Date: Fri, Jun 02 2017 6:15AM
Subject: Re: Re-order page content
← Previous message | Next message →
" What I wanted to do for blind users is at least put the instructions first in the DOM."
Place the directions in a div and the login inside another div. Float them both right ... directions are first in the DOM and will be far right followed by the login which will be to the left of the directions.
Dan Swift
Senior Web Specialist
Web Team Services
West Chester University
610.738.0589
From: John Foliot
Date: Fri, Jun 02 2017 7:41AM
Subject: Re: Re-order page content
← Previous message | Next message →
> 150 years' worth of scientific research on human behavior has proven
beyond any designer's doubt that if you want something to be noticed and
read by visually sighted people, put it on the right side of the page,
preferably on the upper right side. Sighted people do not focus on the left
side of the page. They focus -- and comprehend -- on items on the right
side.
Citations please, this sounds like bunk to me.
First, the world's population over 150 years has seen us with reading
patterns that go left-to-right, right-to-left, and in the case of at least
Chinese, vertical text (top to bottom). Making a blanket statement like
that ignores these realities.
Second, I know of at least 1 immensely respected web-usability researcher
who has been researching these questions for almost 2 decades now, Jakob
Neilson / The Neilson Norman Group, and their scientific method of eye-gaze
tracking (complete with the "images" to back up their findings) shows that
the majority of first-time web-page users (i.e. the first time a user
encounters a new page), their eyes follow a gazing pattern he has dubbed an
"F" - in that most users will start at the top-left, with a horizontal and
downward-vertical gaze, followed by a secondary vertical gaze below where
we typically expect a horizontal tool bar to be. (Research findings and
images at:
https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/)
In fact, in a separate study (looking at logo placement and a link back to
"Home") Neilson Group found that "right-hand placement" of a logo was
actually the least effective in terms of branding as well as interaction:
When we compare the findings from our two research studies of logo
placement on websites, we see that centered logos degrade website usability
to some extent, but not as much as right-aligned logos. In other words, *logos
should lean left*. We speculate that the reason for this difference is that
left-aligned logos are the norm and what users expect, and so the more a
design deviates from the norm, the worse the user experience. The location
of a centered logo is not as far removed from the expected location as that
of a right-aligned logo. To generalize this finding beyond logo design:
1.
Usability suffers when a site fails to meet users' expectations.
2. The more severely a design diverges from user expectations, the worse
the damage.
Branding and navigation are such critical functions for websites that
anything which negatively impacts these goals should be avoided. Keep your
logo where you can be sure users will find it, and your site will get the
maximum value from this critical design feature.
(source: https://www.nngroup.com/articles/centered-logos/)
I will suggest however that the most germane point above is bullet point 1:
*Usability suffers when a site fails to meet users' expectations.*
**********
Specific to Joseph's question:
Not seeing the actual design in question, I still will suggest that for
maximum usability (including sighted keyboard-only users) putting the
repeat action (Log-In) ahead of the (presumably) one-time, or limited-time
use of "Instructions" actually makes sense over the aggregate: non-sighted
users won't need to hear the instructions *every* time they arrive at that
page, only the first time (or perhaps the first few times - but the log-in
process will be, and become, a rote activity over time).
(Think of this in terms similar to "skip-nav"... skipping over repeated or
non-needed content to get to the "meat" of the page in question - here, to
log-in. After logging in 5 or 6 times, I would hope the need for
"instructions" has diminished significantly - if not, then I will suggest
you have far bigger issues here.)
Joseph, while your reasoning is not incorrect, I think that *meeting user
expectations* coupled with Birkir's reminder that "...the content order
only has to be logical..." leads me to suggest that the design itself maybe
isn't as bad as you are thinking: the logic of that layout makes sense
based upon eye-tracking, and the expected action that the page is
delivering over the long-haul (as opposed to single use) - the ability to
log-in (which should not be complicated, nor I will suggest, overly
verbose).
If you have any influence over the design, I would suggest that as part of
the lead-in to the log-in, that a hyperlink to "help" or "instructions"
ahead of the form input, linking to those "right-hand" instructions would
give the first-time non-sighted user the option of "jumping to" and
listening to the instructions the first (or first couple of) time(s), but
allowing that user to also "pass-by" or "skip past" (tab) that link (and
the verbosity of instructions I've already processed and learned months
ago) directly to the form inputs would provide the optimum user-experience.
The one other suggestion I would also offer would be that at the "end" of
those linked instructions you would also provide another in-page link
"back" to the beginning of the form, so that the user can quickly get down
to business once they've read the instructions.
*** DOM ***
<h1> to identify the page
<div class="left-side">
Please log in (<a href="#instructions"> Instructions</a>)
<form id="log-in">...</form>
</div>
<div id="instructions" class="right-side">
<h2> Help Instructions
<a href="#log-in>Start Logging In</a>
</div>
******
(Or something similar)
As always, just my opinion.
Cheers!
JF
On Fri, Jun 2, 2017 at 7:15 AM, Swift, Daniel P. < = EMAIL ADDRESS REMOVED = > wrote:
> " What I wanted to do for blind users is at least put the instructions
> first in the DOM."
>
> Place the directions in a div and the login inside another div. Float
> them both right ... directions are first in the DOM and will be far right
> followed by the login which will be to the left of the directions.
>
> Dan Swift
> Senior Web Specialist
> Web Team Services
> West Chester University
> 610.738.0589
>
>
From: Joseph Sherman
Date: Fri, Jun 02 2017 7:58AM
Subject: Re: Re-order page content
← Previous message | Next message →
Thanks all.
Joseph
From: Sandy Feldman
Date: Fri, Jun 02 2017 12:08PM
Subject: Re: Re-order page content
← Previous message | Next message →
Would creating ARIA regions be useful here? Would it be easier to skip
the instructions and login if instructions were in a region labelled
"login instructions" and the login wasin a region labelled "login"?
Would headings with those names be better?
Sandy
On 2017-06-02 9:41 AM, John Foliot wrote:
> Specific to Joseph's question:
>
> Not seeing the actual design in question, I still will suggest that for
> maximum usability (including sighted keyboard-only users) putting the
> repeat action (Log-In) ahead of the (presumably) one-time, or limited-time
> use of "Instructions" actually makes sense over the aggregate: non-sighted
> users won't need to hear the instructions*every* time they arrive at that
> page, only the first time (or perhaps the first few times - but the log-in
> process will be, and become, a rote activity over time).
>
> (Think of this in terms similar to "skip-nav"... skipping over repeated or
> non-needed content to get to the "meat" of the page in question - here, to
> log-in.
From: John Foliot
Date: Fri, Jun 02 2017 2:38PM
Subject: Re: Re-order page content
← Previous message | Next message →
Hi Sandy,
If you are talking about ARIA landmark regions (
https://www.w3.org/TR/wai-aria/roles#landmark_roles), there is only a fixed
taxonomy of region terms:
- application
- banner
- complementary
- contentinfo
- form
- main
- navigation
- search
While it would be perhaps interesting to allow for an expansion of those
landmarks (or the ability to create custom ones), we really can't do that
today.
> Would headings with those names be better?
Yes,
absolutely.
However dealing with the "which should come first"
question remains: First-time users should (MUST?) get the instructions
first, but by your 58th log-in I suspect getting those instructions would
be, at a minimum, useless, and at a maximum outright frustrating (with I
suspect a majority being "annoyed"). Not that non-sighted users couldn't
"deal" with always getting instructions first (it *is* trivial to jump
ahead, and as you note the good use of Headings would certainly facilitate
page navigation and orientation).
JF
On Fri, Jun 2, 2017 at 1:08 PM, Sandy Feldman < = EMAIL ADDRESS REMOVED = >
wrote:
> Would creating ARIA regions be useful here? Would it be easier to skip the
> instructions and login if instructions were in a region labelled "login
> instructions" and the login was in a region labelled "login"? Would
> headings with those names be better?
>
> Sandy
>
> On 2017-06-02 9:41 AM, John Foliot wrote:
>
> Specific to Joseph's question:
>
> Not seeing the actual design in question, I still will suggest that for
> maximum usability (including sighted keyboard-only users) putting the
> repeat action (Log-In) ahead of the (presumably) one-time, or limited-time
> use of "Instructions" actually makes sense over the aggregate: non-sighted
> users won't need to hear the instructions **every** time they arrive at that
> page, only the first time (or perhaps the first few times - but the log-in
> process will be, and become, a rote activity over time).
>
> (Think of this in terms similar to "skip-nav"... skipping over repeated or
> non-needed content to get to the "meat" of the page in question - here, to
> log-in.
>
>
>
--
John Foliot
Principal Accessibility Strategist
Deque Systems Inc.
= EMAIL ADDRESS REMOVED =
Advancing the mission of digital accessibility and inclusion
From: Sandy Feldman
Date: Fri, Jun 02 2017 3:59PM
Subject: Re: Re-order page content
← Previous message | Next message →
I've been using role="region". I just double-checked and realized it's
in the works and not one of the accepted terms. Should I cut that out?
Or carry on on the theory it doesn't do any harm?
https://www.w3.org/WAI/GL/wiki/Using_the_region_role_to_identify_a_region_of_the_page
Sandy
On 2017-06-02 4:38 PM, John Foliot wrote:
> Hi Sandy,
>
> If you are talking about ARIA landmark regions
> (https://www.w3.org/TR/wai-aria/roles#landmark_roles), there is only a
> fixed taxonomy of region terms:
>
> * application
> * banner
> * complementary
> * contentinfo
> * form
> * main
> * navigation
> * search
>
> While it would be perhaps interesting to allow for an expansion of
> those landmarks (or the ability to create custom ones), we really
> can't do that today.
>
> > Would headings with those names be better?
>
> Yes,
> absolutely.
>
> However dealing with the "which should come first"
> question remains: First-time users should (MUST?) get the
> instructions first, but by your 58th log-in I suspect getting those
> instructions would be, at a minimum, useless, and at a maximum
> outright frustrating (with I suspect a majority being "annoyed"). Not
> that non-sighted users couldn't "deal" with always getting
> instructions first (it *is* trivial to jump ahead, and as you note the
> good use of Headings would certainly facilitate page navigation and
> orientation).
>
> JF
>
> On Fri, Jun 2, 2017 at 1:08 PM, Sandy Feldman < = EMAIL ADDRESS REMOVED =
> <mailto: = EMAIL ADDRESS REMOVED = >> wrote:
>
> Would creating ARIA regions be useful here? Would it be easier to
> skip the instructions and login if instructions were in a region
> labelled "login instructions" and the login wasin a region
> labelled "login"? Would headings with those names be better?
>
> Sandy
>
> On 2017-06-02 9:41 AM, John Foliot wrote:
>> Specific to Joseph's question:
>>
>> Not seeing the actual design in question, I still will suggest that for
>> maximum usability (including sighted keyboard-only users) putting the
>> repeat action (Log-In) ahead of the (presumably) one-time, or limited-time
>> use of "Instructions" actually makes sense over the aggregate: non-sighted
>> users won't need to hear the instructions**every** time they arrive at that
>> page, only the first time (or perhaps the first few times - but the log-in
>> process will be, and become, a rote activity over time).
>>
>> (Think of this in terms similar to "skip-nav"... skipping over repeated or
>> non-needed content to get to the "meat" of the page in question - here, to
>> log-in.
>
>
>
>
> --
> John Foliot
> Principal Accessibility Strategist
> Deque Systems Inc.
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>
> Advancing the mission of digital accessibility and inclusion
From: John Foliot
Date: Fri, Jun 02 2017 4:07PM
Subject: Re: Re-order page content
← Previous message | Next message →
The use of role="region" is non-valid and non-conformant, although in
practical terms it is benign - today.
If you can remove it, do so, but don't stay late on a Friday evening to do
it - make it a regular maintenance task if you can.
At least, that would be *my* strategy...
JF
On Fri, Jun 2, 2017 at 4:59 PM, Sandy Feldman < = EMAIL ADDRESS REMOVED = >
wrote:
> I've been using role="region". I just double-checked and realized it's in
> the works and not one of the accepted terms. Should I cut that out? Or
> carry on on the theory it doesn't do any harm?
>
> https://www.w3.org/WAI/GL/wiki/Using_the_region_role_to_
> identify_a_region_of_the_page
> Sandy
>
>
> On 2017-06-02 4:38 PM, John Foliot wrote:
>
> Hi Sandy,
>
> If you are talking about ARIA landmark regions (https://www.w3.org/TR/wai-
> aria/roles#landmark_roles), there is only a fixed taxonomy of region
> terms:
>
> - application
> - banner
> - complementary
> - contentinfo
> - form
> - main
> - navigation
> - search
>
> While it would be perhaps interesting to allow for an expansion of those
> landmarks (or the ability to create custom ones), we really can't do that
> today.
>
> > Would headings with those names be better?
>
> Yes,
> absolutely.
>
>
> However dealing with the "which should come first"
> question remains: First-time users should (MUST?) get the instructions
> first, but by your 58th log-in I suspect getting those instructions would
> be, at a minimum, useless, and at a maximum outright frustrating (with I
> suspect a majority being "annoyed"). Not that non-sighted users couldn't
> "deal" with always getting instructions first (it *is* trivial to jump
> ahead, and as you note the good use of Headings would certainly facilitate
> page navigation and orientation).
>
> JF
>
> On Fri, Jun 2, 2017 at 1:08 PM, Sandy Feldman < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> Would creating ARIA regions be useful here? Would it be easier to skip
>> the instructions and login if instructions were in a region labelled "login
>> instructions" and the login was in a region labelled "login"? Would
>> headings with those names be better?
>>
>> Sandy
>> On 2017-06-02 9:41 AM, John Foliot wrote:
>>
>> Specific to Joseph's question:
>>
>> Not seeing the actual design in question, I still will suggest that for
>> maximum usability (including sighted keyboard-only users) putting the
>> repeat action (Log-In) ahead of the (presumably) one-time, or limited-time
>> use of "Instructions" actually makes sense over the aggregate: non-sighted
>> users won't need to hear the instructions **every** time they arrive at that
>> page, only the first time (or perhaps the first few times - but the log-in
>> process will be, and become, a rote activity over time).
>>
>> (Think of this in terms similar to "skip-nav"... skipping over repeated or
>> non-needed content to get to the "meat" of the page in question - here, to
>> log-in.
>>
>>
>>
>
>
> --
> John Foliot
> Principal Accessibility Strategist
> Deque Systems Inc.
> = EMAIL ADDRESS REMOVED =
>
> Advancing the mission of digital accessibility and inclusion
>
>
>
--
John Foliot
Principal Accessibility Strategist
Deque Systems Inc.
= EMAIL ADDRESS REMOVED =
Advancing the mission of digital accessibility and inclusion
From: Jonathan Avila
Date: Fri, Jun 02 2017 4:46PM
Subject: Re: Re-order page content
← Previous message | Next message →
> The use of role="region" is non-valid and non-conformant, although in practical terms it is benign - today.
John, can you please provide a citation for role of region being non-valid and non-conformant?
https://www.w3.org/TR/wai-aria-1.1/#region
Jonathan
Jonathan Avila
Chief Accessibility Officer
SSB BART Group (soon to be Level Access)
= EMAIL ADDRESS REMOVED =
703.637.8957 (Office)
Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
Looking to boost your accessibility knowledge? Check out our free webinars!
The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.
From: Birkir R. Gunnarsson
Date: Sat, Jun 03 2017 9:37AM
Subject: Re: Re-order page content
← Previous message | Next message →
Region is a landmark role in the ARIA 1.1 spec (see Jonathan's link),
and the HTML5 <section> element maps to it:
http://www.w3.org/TR/html-aria/
(browser / screen reader support for the region role is fairly robust).
In fact, I often recommend use of the region role, e.g. to mark the
boundries of dynamically displayed content e.g. in an accordion
pattern (similar to how the tabpanel role is used in the tabs
construct). The advantage that a region has over a heading is that
screen readers announce the beginning and end of the region, so screen
reader users get a full understanding of exactly hwat content got
dynamically displayed (a heading does not work as well in that
situation).
Another thing to consider is that a screen reader user can easily skip
over sections of static content to a form field (just press the tab
key), Placing instructions before a login field does not present a
challenge to a screen reader user, as long as user can navigate
directly to the beginning of those instructions, either using
navigation heading, skip link, or an ARIA landmark (in this case a
region landmark is probably not the most appropriate, you can use the
form role, or if you already have a heading, just stick with it and
keep it simple).
I know developers cringe if you ask them to add two extra links to
content for assistive technology reasons, so there has to be an urgent
accessibility reason to do so, I think in your case you can get by,
and save that favor for a rainy day.
On 6/2/17, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
>> The use of role="region" is non-valid and non-conformant, although in
>> practical terms it is benign - today.
>
> John, can you please provide a citation for role of region being non-valid
> and non-conformant?
>
> https://www.w3.org/TR/wai-aria-1.1/#region
>
> Jonathan
>
> Jonathan Avila
> Chief Accessibility Officer
> SSB BART Group (soon to be Level Access)
> = EMAIL ADDRESS REMOVED =
> 703.637.8957 (Office)
>
> Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
> Looking to boost your accessibility knowledge? Check out our free webinars!
>
> The information contained in this transmission may be attorney privileged
> and/or confidential information intended for the use of the individual or
> entity named above. If the reader of this message is not the intended
> recipient, you are hereby notified that any use, dissemination, distribution
> or copying of this communication is strictly prohibited.
>
>
>
From: John Foliot
Date: Sat, Jun 03 2017 5:20PM
Subject: Re: Re-order page content
← Previous message | Next message →
@Jon... OK, I quoted the normative ARIA 1.0, and not the Candidate ARIA
1.1, but you are correct. Mea culpa .
JF
On Fri, Jun 2, 2017 at 5:46 PM, Jonathan Avila < = EMAIL ADDRESS REMOVED = >
wrote:
> > The use of role="region" is non-valid and non-conformant, although in
> practical terms it is benign - today.
>
> John, can you please provide a citation for role of region being non-valid
> and non-conformant?
>
> https://www.w3.org/TR/wai-aria-1.1/#region
>
> Jonathan
>
> Jonathan Avila
> Chief Accessibility Officer
> SSB BART Group (soon to be Level Access)
> = EMAIL ADDRESS REMOVED =
> 703.637.8957 (Office)
>
> Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
> Looking to boost your accessibility knowledge? Check out our free webinars!
>
> The information contained in this transmission may be attorney privileged
> and/or confidential information intended for the use of the individual or
> entity named above. If the reader of this message is not the intended
> recipient, you are hereby notified that any use, dissemination,
> distribution or copying of this communication is strictly prohibited.
>
>
>
From: Chagnon | PubCom
Date: Sat, Jun 03 2017 5:31PM
Subject: Re: Re-order page content
← Previous message | Next message →
Warning: this is a detailed comment to John's detailed comments and citations.
Quote: Citations please, this sounds like bunk to me.
Hm. That's just plain insulting to those of us who have studied this subject.
John, just because you haven't studied human behavior and design doesn't mean this is bunk or that the scientific research doesn't exist or that no one else in the world has studied it.
It just shows that you haven't studied it.
I'm away from my office for a few more weeks so I can't grab books from my research library nor delve into my file cabinet archives or even tap into the digital versions on my office server.
But one of today's best sources of information on behavioral research for design is Dr. Susan Weinschenk www.theteamw.com. Her excellent books are required reading for many in the design and marketing fields, including for the classes I taught at my college:
"100 Things Every Designer Needs to Know About People" https://www.amazon.com/Things-Designer-People-Voices-Matter/dp/0321767535
"100 MORE Things Every Designer Needs to Know About People" https://www.amazon.com/Things-Designer-People-Voices-Matter/dp/0134196031
"Neuro Web Design: What Makes Them Click" https://www.amazon.com/Neuro-Web-Design-Makes-Click/dp/0321603605
"How to Get People to Do Stuff: Master the art and science of persuasion and motivation" https://www.amazon.com/How-Get-People-Stuff-persuasion/dp/0321884507
Dr. Weinschenk has the citations to the research studies going back to the early 20th century. If you get a digital version of her work, the cites are usually hyperlinked to the research page, so click away and knock yourself out.
Quote: Second, I know of at least 1 immensely respected web-usability researcher who has been researching these questions for almost 2 decades now, Jakob Neilson / The Neilson Norman Group, and their scientific method of eye-gaze tracking...
Well we agree on one thing, John. Nielsen is a respected researcher. Have also been reading his material for decades. He's done a lot of good work for the communications industries. https://www.nngroup.com/
However, Nielsen researches only one part of the topic: eye tracking only shows where someone's eyes have landed on a webpage, printed page or wherever. The 2 other parts are:
1) When and where did the reader's brain kick in and start recognizing the content and comprehending it?
2) How did the user respond to the content, and how well was he/she able to recall it?
That's the behavior part that Nielsen usually leaves out of his research. But Weinschenk focuses on that and believes (rightly I think) that eye tracking metrics aren't sufficient.
RE: your comment about Nielsen's "F" eye movement pattern, it's really just a variation of the long-standing "Z" pattern. From what I can remember of Nielsen's piece on this, I think it has merit only on webpages that have a permanent left-hand navigation. Books, EPUBs, and webpages without a left-hand navigation would more likely be the traditional "Z" pattern because there's nothing at the left edge to draw the eye back to it, especially on a straight horizontal line back to the starting point.
But what's more important about the F/Z eye movement patterns is at what point does the brain start recognizing what the eye has seen. There is a time lag between when the eye sees something versus when comprehension and recognition happen in the brain.
Taking the F/Z example, I'm defining point 1 as the upper left starting point. Point 2 is the upper right pause point that is horizontally across from point 1. And point 3 is either at or near point 1 (in the F pattern) or slightly lower down the page on the left side (in the Z pattern).
Comprehension doesn't begin at point 1.
It generally begins at point 2--the far right side of the F/Z pattern.
And it's point 2 that has a greater impact on the user's behavior. Ads placed in the upper right corner produce greater sales (and therefore cost more to advertisers). Pithy quotes by politicians in the upper right corner stick longer in constituents' minds. Critical notices to students in the upper right corner are more likely to be read and acted upon.
And instructions on filling out a form field are more likely to be comprehended when they're on the right side of the form field, not the left. That was my original statement...but that's for sighted visitors. Those using screen readers are better served with the instructions first, before the form field.
Luckily we have today's technology that can make this work for both sighted users and those using screen readers.
For someone who has spent a career in design, marketing, PR, and advertising, my bosses and clients need results, not eye tracking metrics. They'll judge the design based on how many widgets were sold, or which political candidate was elected, or in academia, how well students were able to find the courses they need and successfully register for them. Or find the campus map and get their butts to the class.
By the way, it was hard to tell in John's post if he thinks Jakob Nielsen invented eye tracking methods. The wording is unclear. The study of eye movement started in the 1800s and I believe one of the first devices to track eye movements was developed by Yarbus in the 1960s.
RE: placement of logos, we agree again John. Logos usually should be on the left side, specifically in the upper left.
But that all depends upon the design of the webpage. Is this a content-rich internal webpage? Then yes.
Is this an opening splash page that's heavy on design and graphical appearance? Then maybe not. The logo's placement depends upon the entire design and content of that webpage.
I believe the placement of the logo on standard internal pages (in the upper left) isn't due to the F/Z eye tracking pattern, but more on what John states later: predictability and user expectations. Users today, now almost 30 years after the first www webpage was developed, are expecting to find the publisher's logo or identification in the upper left corner, just as they expect to find navigation at the top or along the left side.
Those items don't depend heavily on the F/Z eye tracking models. They're conventions just like driving on the right side of the road is the convention in North America, and driving on the left is the contention in the UK and other regions of the world. Neither one is better than the other; what most important is what you're used to doing.
And that's why visitors who use screen readers will find some way to skip all that verbosity at the top and left side of the page. And why sighted users won't comprehend those areas and mentally skip them, even those their eyes see them.
Finally...
We agree, John: Usability suffers when a site fails to meet users' expectations.
And that precept is central for good design for all users.
--Bevi Chagnon
- - -
Bevi Chagnon | www.PubCom.com
Technologists, Consultants, Trainers, Designers, and Developers
for publishing & communication
| Acrobat PDF | Print | EPUBS | Sec. 508 Accessibility |
- - -
From: Jonathan Avila
Date: Sun, Jun 04 2017 2:19PM
Subject: Re: Re-order page content
← Previous message | No next message
[John wrote] @Jon... OK, I quoted the normative ARIA 1.0, and not the Candidate ARIA 1.1, but you are correct. Mea culpa .
ARIA 1.0 allowed the use of role region as well https://www.w3.org/TR/wai-aria/roles#region if there is a more appropriate specific role it should be used instead of region.
Perhaps you are thinking about "section" or other abstract roles. Authors should never use abstract roles that are part of the ontology but not defined for use.
Jonathan
Jonathan Avila
Chief Accessibility Officer
SSB BART Group (soon to be Level Access)
= EMAIL ADDRESS REMOVED =
703.637.8957 (Office)
Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
Looking to boost your accessibility knowledge? Check out our free webinars!
The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.