• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Digital A11Y

Digital A11Y

Your Accessibility Partner

  • About
  • Articles
  • WAI-ARIA
  • WCAG
  • Resources
    • Cheat Sheets
    • A11Y Blogs
    • A11Y Toolkit
  • Contact
You are here: Home / Web Accessibility / WCAG / Understanding SC 3.2.1 on Focus

Understanding SC 3.2.1 on Focus

Last Modified: July 2, 2019 by Raghavendra Satish Peri Leave a Comment

3.2.1 On Focus: When any component receives focus, it does not initiate a change of context. (Level A)

The intent of this success criterion is to make sure that any unwanted actions are not initiated when focus moves on to an element. For example during tab navigation or shift tab navigation if user focus moves on to a link & a modal is triggered this fails this check point. Here user did not initiate this action; it was initiated when user focus moved on to a particular element. If the website is built using HTML & CSS purely, we will not encounter such behavior. This behavior is seen a lot on websites built with fancy scripting where the developers have no knowledge about accessibility. We must also take mouse users into consideration while testing for this checkpoint; while mouse pointer moves onto elements no actions should be initiated.

Ensure that:

  • Links don’t open new page or new window when focused with mouse or keyboard.
  • Forms don’t submit automatically.
  • There are no pop-ups or modal windows opening on pageload or focusing on an element.
  • Focus should not move automatically to another element where it disorients the users.

Points to Remember

  • Ensure that no element changes by receiving focus.
  • We should avoid both visual & behavioral modifications to page.
  • A website built using only HTML & CSS will not have on focus by default, one needs to provide this through scripting.
  • One way to test this check point is to unplug the mouse & navigate the page using the keyboard.

Exceptions

  • Elements can change on focus if the context doesn’t change. For example, you can use a dynamic menu on your website, the kind where navigation options drop down when you hover over an item. This is not a change of context.
  • Another example would be a hover status on a link, again, this isn’t a change of context.

References

Understanding Success Criterion 3.2.1

Share A11Y Love

  • Twitter
  • LinkedIn
  • Facebook
  • Reddit

More Accessibility Articles

Filed Under: WCAG

About Raghavendra Satish Peri

Raghavendra Satish Peri is a digital accessibility evangelist working at Deque Systems as Senior Accessibility Consultant breaking web accessibility & mobile accessibility challenges. He authors an Accessibility Blog & is galvanizing the adoption of accessibility by inspiring the local tech community with meetups and mentorship. He propelled this thought by founding HelloA11y, a community of accessibility professionals, developers and enthusiasts. When away from his computer, Raghava can be found at local cafes & restaurants sampling cuisines, attending local meetups, listening to audio books or writing on his Personal Blog. Raghavendra Satish Peri also helps small business & individuals with Digital Marketing Trainings & SEO consulting… He has been building websites & doing SEO Consulting for more than 14years.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Get Digital A11Y in Your Inbox

Recent A11Y Articles

  • Understanding SC 4.1.3 Status messages
  • Understanding SC 2.5.4 Motion Actuation
  • Understanding SC 2.5.3 Label in Name
  • Knowbility looking for mentors in its Accessible Internet Rally
  • Understanding SC 2.5.2 Pointer Cancellation

Recent Comments

  • Al on Understanding SC 4.1.2 Name, Role, Value
  • Randy on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Understanding SC 1.4.12 Text Spacing
  • Raghavendra Satish Peri on Understanding SC 4.1.2 Name, Role, Value

A11Y Categories

  • Design
  • Events
  • HTML
  • IOS
  • Mobile Accessibility
  • News
  • Tools
  • Uncategorized
  • WAI-ARIA
  • WCAG
  • Web Accessibility

  • Privacy Policy
  • Sitemap
© 2021 Digital A11Y