Focus Order
What is focus order?
What should happen when you tab through a page so it flow in a predictable, meaningful way
What SC requires more than one way to find a page?
Multiple Ways
Should each link make this clear from link text or in conjunction with nearby text so users know where the link will take them?
Yes it should indicate the link's purpose
The rule that requires the visible label of a control to also be included in the control’s accessible name is called what?
Label in Name
What federal law prohibits discrimination against people with disabilities and covers many public websites and services?
The Americans with Disabilities Act (ADA)
Why should code be written TBLR (top to bottom, left to right)?
If the visual order of elements differs from DOM order, you break focus order unless you manually change keyboard focus order
What would be one way to allow users to find information on a site in addition to a menu?
search function
links in a page that are repeated from the nav
others?
Should you ALWAYS avoid vague link text like 'click here'?
Yes! "Click here" is device dependent and usually doesn't actually describe the link's purpose
If a button shows an icon plus the text 'Search', what would the button's programmatic name be?
DAILY DOUBLE: Search
Who is covered under the ADA?
Anyone with a disability whether it is permanent or temporary
Why should a modal trap focus inside it?
To keep keyboard users from wandering into the page behind it
Would a sidebar menu in addition to a top nav menu ALWAYS fulfill multiple ways requirement?
Not always, but it may be if there's a repetition of links
When a link’s purpose is obvious only from surrounding paragraph text will it pass this SC?
Yes as long as it's programmatically associated with the link and the user is able to build contextual information
Would using only an icon or emoji as a visible label ALWAYS fail this SC?
No. If you provide a programmatic label that explains the functionality such as aria-label or aria-labelledby, then it would pass
If a website lacks alt text on an informative image but that image is fully described in the text of the page will it pass WCAG?
Yes! That in-page text is called a media alternative and makes the image decorative even if it would normally be informative
Should focus order ALWAYS match reading order?
Not always! When moving through a page it should go in the same order when reading or moving focus unless there's a logical reason not to do so. For example, it may match until coming to the bottom buttons where "next" would be on the far right of the screen, "cancel" in the middle and "back" on the far left. In this case it might be logical to move first to "next" then "cancel" then "back"
What is an outdated but still viable way to allow users another way to navigate the site using a map?
sitemap
Is a link labelled 'Read more' able to pass this SC?
Yes as long as the link purpose clear in context and/or includes programmatically associated additional information
Why is it important for the visual label (text) to match the programmatic label for users who use speech interaction AT?
They need to know how to interact and what to say to access the element
What is the purpose of ADA?
to give equal access to everyone
What is one way to fail focus order?
moving focus illogically all over the screen
not locking focus in a modal window
others?
Is multiple ways required on a single page website or app?
No
For screen reader users, what is the purpose of this SC?
This SC ensures they don't have to read entire pages to understand the purpose of the link
Can you add additional information to a visual label and pass this SC?
Yes! If you add more information it should be after the visual label for the element.
example: a button's visual label says "buy now" and the aria-label says "buy now dell laptop"
What WCAG standard does Prudential adhere to?
WCAG 2.2 AA