Day 27: Managing Focus and Logical Order

Published on 27 Dec 2018

• journal
• was
• javascript

Properly managing focus, especially within web applications, is a key component to making JavaScripted web pages accessible. Determining logical order of code and components can be another challenge when it comes to web accessibility. Sites need to be coded thoughtfully so that the proper reading order of each section of the page is synchronous visually and audibly.

I learned a few things today that will not only make me a better accessibility specialist, but also a better developer.

• Watched a couple of A11ycasts on YouTube.
• Reviewed some JavaScript code that helps manage focus on a single page application (SPA).
• Watched Considering Accessible HTML Forms, JavaScript, and WAI-ARIA (YouTube).

• There's a 'template' HTML element for rendering content when called upon. Cool! Not supported by IE 11, of course.
• JavaScript has a focus method to assist with focus on elements that do not naturally receive focus.
• In the case of an SPA, don't forget to change the page title alongside managing the focus of the pages element.
• The position of the some "subscribe to newsletter" components can be problematic if not positioned appropriately in the DOM. I had to quickly evaluate this site, and was relieved that it didn't have that problem.
• Labeling (naming) techniques are not all treated equally. Importance is computed. In other words, if several techniques are combined, one could overwrite another. Examples of labels (names) that may overwrite one another, dependent upon importance:
  • aria-labelledby
  • aria-label
  • label
  • title
• Reminder: not every person who uses a screen reader is a keyboard user; likewise, not every keyboard user is a person who uses a screen reader.

• Managing Focus, Allycasts #22 (YouTube)
• Does reordering content affect accessibility? Allycasts #21 (YouTube)
• Understanding Success Criteria 4.1.2: Name, Role, Value (WCAG)
• Link text replaced by aria-label attribute (PowerMapper)