I saw Jason Webb speak on accessibility Wednesday night at JavaScript MN.

There was some emphasis on American law. The Rehabilitation Act of 1973 was mentioned and it addresses the idea of discrimination based on disability but is really only applied to federal government work life. Of course Section 508 is an amendment to this, but a 504 amendment was also mentioned as well. It prohibits discrimination in programs that benefit from federal assistance. Opening the umbrella up farther yet is the Americans with Disabilities Act (ADA) which spills beyond any federal boundaries. This came to be in 1990. Domino's Pizza got in trouble, per the ADA, for having a web presence that was not accessible to the handicapped. This turned into a lawsuit and I guess they didn't avoid the Noid in that regard. Honestly, what could be worse than the "thirty minutes or it's free" campaign that actually killed some people? The lawsuit was likely comparatively easier. I digress. Anyhow, normally things don't escalate to the point of a lawsuit. Instead a "demand letter" will likely be submitted to an offending company and the offending company will shape up. At the web semantic tags in HTML get you 90% of the way to accessibility, things like header, footer, and main in-between, and, yes, there is a main tag. The 10% gap is closed by ARIA. WAI-ARIA is the Web Accessibility Initiative for ARIA of the World Wide Web Consortium, its spec for doing ARIA. CodePen is a coding playground where you may test this stuff and see other people's snippets for solutions. Because there is not an HTML tag for an autocomplete or a carousel, you have to delve into the ARIA stuff herein, as things gets trickier, beyond what sematic tags can express to a screen reader like JAWS. The header, footer, and main tags are "landmark tags" for similar concerns. The use of mobile devices as "assistive devices" has become super popular though 80% of the market for accessibility concerns is still just Windows operating systems flavored computers and laptops. JAWS and NVDA are just for Windows and testing just on Windows with just them in the screen reader space is seen as enough. Touch sticks help individuals with limited mobility tap the screen on assistive devices. Create a checklist in testing and Vox Product Accessibility Guidelines are recommended for as much. In personas for requirements building, have a persona with accessibility needs. The WCAG has twelve guidelines for accessibility based on four principles. The four principles follow and for the third one text should be written at a particular grade level slated as a standard. In the fourth, AT stands for accessibility technology.

1. Perceivable – everyone can access the content
2. Operable – everyone can interact with it
3. Understandable – UI and content is clear
4. Robust – works with many user agents and AT

Emotion and styled components were two libraries mentioned by a Ben Ragsdale in a lightning talk before the main presentation by Jason Webb. He offered that if you tie CSS directly to a component you can know that it is only used for that component. Often times, this sort of thing takes place in template literals. Frequently at JavaScript talks the mention of a component will carry the subtext of a React component and at JavaScript MN in particular there seems to be a bit of a React bias. I guess React does have the largest "market share" of use and adoption in the modern JS space. Before the Ben Ragsdale lightning talk there was another lightning talk titled "Using the intersection of observers and hooks for SVG animations" and, yes, herein hooks implies React hooks. usehooks.com was recommended for getting into using hooks. You will want to import useState, useEffect, and useRef from 'react' to get the SVG animations stuff afloat. The IntersectionObserver will fire a callback when there is an overlap with the viewport as it was explained to me. Some code around as much was:

useEffect(() => {
   const observer = new
         IntersectionObserver(
      ([entry]) => {
         setIntersecting(entry.isIntersecting);
      },
      { threshold: 0 ]
   );
   if (ref.current) {
      observer.observe(ref.current);
   }
   return () => {
      observer.unobserve(ref.current);
   };
], []);

 
 

As a term, viewport just refers to the visible area of a web site in a web browser. It is not React-specific but the Intersection Observer API is. It will react to elements that change position relative to that of the viewport as best as I can tell. FramerMotion is an animation library that may be used with web hooks to get all of this to work smoothly. The observers/hooks/SVG lightning talk was given by a Dakota Sexton who works at White House Custom Colour. github.com/tinykite has her code.