WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Query in relation to Web Page order when you cannot see the page.

for

From: Birkir R. Gunnarsson
Date: Oct 18, 2015 5:29PM


Make sure your page content is organized in a logical manner, such as
"header" "main" and "footer".
Make sure that this organization makes sense based on content order
alone (i.e. with CSS turned off)

Try to keep header and footer content consistent between webpages on
the same website, so that it becomes predictable and users can quickly
familiarize themselves with it on one page, use it on other pages.
Make sure the main content of the page represents the role of that
particular page.

Use ARIA landmark as well as clear visual presentation to distinguish
these different parts of your webpage.
You can further use landmarks, sections and other mechanisms to
categorize unique sections of your webpages, such as the search and
navigation links.
Make sure not to over-use that technique since the value of having
sections goes down when you ahv too many of them.
I personally would say never use more than 10 sections per page, think
more along the lines of 5 (this includes header, main and footer).
There is no WCAG rule about this, this is from a user perspective.
Along with sections and landmarks, use headings to layout the
hierarchy of your content.
When you got all these things right, you have a pretty durn good
webpage that should be clear and navigable by a large group of diverse
users.
I am not going into the other things such as clear color contrast,
good labeling, keeping labels visually located close to the form
fields they belong with. All of these things are essential, but are
not directly related to your question.
-B


On 10/17/15, Joseph Sherman < <EMAIL REMOVED> > wrote:
> Maybe compare what you hear when using tab vs using down arrow to navigate
> the page.
>
> Joseph
> On Oct 17, 2015 8:37 PM, Sean Murphy < <EMAIL REMOVED> > wrote:
> Cliff,
>
> Your point is valuable and isn't really the main thrust of my question I
> raised. I should have phrased it better. The focus is for someone who cannot
> see and is performing the accessibility testing. EG: Me.
>
> As I do not know the visual layout, how do you validate that the tab order
> as you move through the page isn't starting at the top left hand corner,
> then jumps to the middle of the page and then jumps to the right top hand
> corner? My assistive technology might treat it in a sequential order.
>
> Sean
>
>
>
>
>
>> On 17 Oct 2015, at 11:18 pm, Cliff Tyllick < <EMAIL REMOVED> > wrote:
>>
>> Sean, it's important to keep in mind that we need our Web content to be
>> accessible to everybody—not just to people who are blind, and not just to
>> people who have a single disability.
>>
>> Imagine the person who must use keyboard navigation with screen
>> magnification. Will they be able to find the spot that has focus after
>> focus has moved outside their magnified view?
>>
>> The tab order must make sense to them, too.
>>
>> Cliff Tyllick
>> Texas Department of Assistive and Rehabilitative Services
>>
>> Sent from my iPhone
>> Although its spellcheck often saves me, all goofs in sent messages are its
>> fault.
>>
>>> On Oct 16, 2015, at 12:19 PM, Cousins, Earl < <EMAIL REMOVED> >
>>> wrote:
>>>
>>> Hi Sean,
>>>
>>> One of the ways you can check reading order is by disabling CSS on the
>>> page (via various developer plugins etc.) and checking if the resulting
>>> list of elements are in a logical and intended order. This would be the
>>> default order that elements would accept focus (visual keyboard users)
>>> and in which screen readers would announce the content.
>>>
>>> Hope this helps!
>>>
>>>
>>> Earl Cousins | Accessibility Technical Analyst
>>> >>>
>>> -----Original Message-----
>>> From: Sean Murphy [mailto: <EMAIL REMOVED> ]
>>> Sent: Wednesday, October 14, 2015 9:12 PM
>>> To: WebAIM Discussion List
>>> Subject: [WebAIM] Query in relation to Web Page order when you cannot see
>>> the page.
>>>
>>> All,
>>>
>>>
>>> This is a general query to leverage the more experience people on this
>>> list to get ideas.
>>>
>>> When I look at the logical flow of a web page. I perform the following
>>> tasks:
>>>
>>> 1. Use the tab and shift tab keys and record which elements receive
>>> focus.
>>> 2. Use the Virtual cursor of the screen reader such as Jaws to identify
>>> which elements that should receive focus are not in the tab order.
>>>
>>> The only challenge I have with the above is how do you know if the items
>>> are in a logical order as the non-vision impaired user would see it. EG:
>>> Information on the left side of the screen, on the right and in the
>>> middle or isn't this a issue, as long as the information to the vision
>>> impaired user is in a logical order?
>>>
>>> Sean
>>>
>>> To unsubscribe from receiving further commercial electronic messages from
>>> The Bank of Nova Scotia in Canada, please click here:
>>> https://unsubscribe.scotiabank.com?entid=BNS&buid=SBNK
>>>
>>> To unsubscribe from receiving further commercial electronic messages from
>>> certain other senders set out in the attached list, please click here:
>>> https://www.unsubscribe.gwi.scotiabank.com?page=gwi
>>>
>>> This email may contain confidential information the use of which by an
>>> unintended recipient is unauthorized. This email may also contain
>>> important disclosure information for the records of the intended
>>> recipient(s). For details please click here:
>>> http://www.scotiabank.com/email_disclaimer/email_english.html
>>>
>>> Pour vous désabonner et cesser de recevoir des messages électroniques
>>> commerciaux de La Banque de Nouvelle-Écosse, veuillez cliquer ici :
>>> https://desabonnement.banquescotia.com?entid=BNS&buid=SBNK
>>>
>>> Pour vous désabonner et cesser de recevoir des messages électroniques
>>> commerciaux de certains autres expéditeurs figurant dans la liste
>>> ci-jointe, veuillez cliquer ici :
>>> https://www.unsubscribe.gwi.scotiabank.com?page=gwi
>>>
>>> Cette transmission peut contenir de l'information confidentielle et son
>>> utilisation par toute personne autre que la personne à laquelle cette
>>> transmission est destinée est interdite. Le présent courriel peut aussi
>>> contenir des renseignements importants pour les dossiers du ou des
>>> destinataires prévus. Pour plus de détails, veuillez vous diriger vers:
>>> http://www.scotiabank.com/email_disclaimer/email_francais.html
>>>
>>> Para dejar de recibir mensajes electrónicos comerciales de The Bank of
>>> Nova Scotia en Canadá, haga clic aquí:
>>> https://cancelarsuscripcion.scotiabank.com?entid=BNS&buid=SBNK
>>>
>>> Para dejar de recibir mensajes electrónicos comerciales de otras
>>> entidades incluidas en la lista adjunta, haga clic aquí:
>>> https://www.unsubscribe.gwi.scotiabank.com?page=gwi
>>>
>>> Este correo electrónico puede contener información confidencial cuyo uso
>>> por parte de personas distintas de los destinatarios del mismo está
>>> prohibido. El mensaje puede tener también datos importantes para los
>>> archivos del(de los) destinatario(s) a quien(es) está dirigido. Para
>>> más detalles, por favor dirigirse a:
>>> http://www.scotiabank.com/email_disclaimer/email_espanol.html
>>> >>> >>> >>> >> >> >> >> >
> > > > > > > > >


--
Work hard. Have fun. Make history.