Serializing the tab order and reading order and using aria-modal in a way the spec advises against

What am I talking about? I’m talking about using aria-modal when the application is not blocking all users. This goes against the ARIA spec. Of course I’m not in favor of offering limited software functionality to users with disabilities but in complex software it may be necessary to at least temporarily limit certain functionality for… Read more Serializing the tab order and reading order and using aria-modal in a way the spec advises against

CSUN 2020 Design Systems and Accessibility Challenges Talk

Accomplishments The Clarity team is committed to accessibility. See Jeremy’s blog post on Clarity’s Commitment to Accessibility We created an ARIA Menu with a heading The team began using screen readers during development We discovered the reading order issues that can be caused by the CSS order property Beyond ARIA We created an ARIA Menu… Read more CSUN 2020 Design Systems and Accessibility Challenges Talk

Accessible Notifications (in progress)

Introduction For the purposes of this post I’m going to define notifications as messages that appear on the screen while using an application. Notifications can be difficult or impossible for sighted keyboard-only and users of assistive technologies to access. DOM positioning and the inclusion of controls like buttons and links pose significant challenges. The various… Read more Accessible Notifications (in progress)

IAAP Webinar – Web Accessibility techniques for React and Angular

I have the honor of presenting a webinar for IAAP – International Association of Accessibility Professionals. Please see the information below. Date: Thursday, March 28, 2019 Time: 11:00 a.m. – 12:30 p.m. Eastern (UTC – 4 hours) Speaker(s): Chris Lane, Accessibility Engineer, VMware Target Audience: Web developers working with AngularJS or ReactJS Skill Level: Beginner-Intermediate… Read more IAAP Webinar – Web Accessibility techniques for React and Angular

Speaking at the Bay Area Accessibility and Inclusive Design Meetup 12/12/18

On 12/12/18 I gave a talk called Accessible Routing with React for the Bay Area Accessibility and Inclusive Design meetup group. I discussed the following examples of title and focus management using React. Basic routing with no title or focus management Updating the title and moving focus to the newly loaded component after routing and… Read more Speaking at the Bay Area Accessibility and Inclusive Design Meetup 12/12/18

Title and Focus Management with Angular and React

I’ve come to the conclusion that there is only one strategy for focus management when routing in a single page application. Focus must be set to an element that meets the following requirements: The element is visible or hidden with offscreen text from http://whatsock.com/ .offscreenText { position: absolute; clip: rect(1px 1px 1px 1px); /* IE6,… Read more Title and Focus Management with Angular and React

Same Page Links Don’t Move Focus

I thought same page links would move focus from the link to the target but they don’t. They only scroll the page. See http://www.chrislane.info/examples/samePageLink2.html#target. Focus movement has to be scripted for same page links. See http://www.chrislane.info/examples/samePageLink.html#

Menubars for navigation

Update: 3/1/18 I still think ARIA menus can be used for navigation. But they have to be implemented perfectly, which may not be worth the effort vs. using a bunch of standard HTML links. See https://www.levelaccess.com/challenges-mega-menus-standard-menus-make-accessible/. Some think that ARIA menus should not be used for navigation. They typically cite the following definitions from ARIA… Read more Menubars for navigation

aria-required doesn’t make sense on radio buttons, maybe checkboxes

This comment from dylanb¬†at https://github.com/w3c/html-aria/issues/67¬†makes a lot of sense to me. It makes no sense to have a required attribute on a field that can only have unchecked and checked IF both values (unchecked and checked) are allowable. What is being required? For a radio button grouping, the “required” attribute applies to the group and… Read more aria-required doesn’t make sense on radio buttons, maybe checkboxes