Learn Elixir, React-router and Screen-reader

A large number of people are unable to use the web effectively due to an impairment or disability.

As developers there are several tools and techniques we can use to make our web applications accessible, ensuring a great user experience that includes everyone.

We all agree that Accessibility is important. However, it’s a broad landscape and can be overwhelming figuring out where to start!

Erin Doyle is an expert in creating accessible React applications and has developed a course that will give you a concrete process for testing, refactoring, and building your applications with accessibility in mind.

After this course, you'll have a jump start on auditing and fixing accessibility issues in your applications and gain a better understanding of your target users and how to approach your web app design from their perspectives.


React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Develop Accessible Web Apps with React

These videos include the introductory steps to writing your first Elixir function and beginning to understand some key concepts in Elixir that make it unique. 

Some of those concepts include:
- the Mix build tool
- project structure
- collections of functions written in modules
- function *arity*
- pattern matching and common uses for it
- the pipe operator

Elixir is a dynamic, functional language designed for building scalable and maintainable applications.

Elixir leverages the Erlang VM, known for running low-latency, distributed and fault-tolerant systems, while also being successfully used in web development and the embedded software domain.

elixir

Getting Started with Elixir

React-router is the community favourite routing solution - it can handle all of your complex routing needs and in this lesson we’ll cover what’s needed to enable it’s use within Preact. https://github.com/ReactTraining/react-router

Integrate react-router with Preact

screen-reader

There are many techniques for hiding content in user interfaces, and not all are created equal! Learn how different hiding techniques in HTML, CSS and ARIA impact keyboard and screen reader users in addition to visual display. As a bonus, we'll also take a look using a screen reader on a mobile device.

How Visible vs. Hidden Elements Affect Keyboard/Screen Reader Users

React Router is a complete routing library for React.

react-router

In this lesson, we’ll install React Router as a project dependency and add links that will update the url via pushState to avoid reloading our page on changes.

Add React Router to a Redux Application

In this lesson, we’ll wire up React Router to pass a url based filter parameter into our component and create a selector function to filter our state data between the store and our components by hooking into the `ownProps` parameter of `mapStateToProps`.

Filter State Data in Redux with a Selector Function and React Router

In this lesson we'll use the `match.path` value passed in by React Router to setup dynamic routes for Tabs. This will allow us to setup dynamic tabs which can be navigated to based upon the URL. With this pattern we can change the base path and our tab routes will automatically match and render correctly.

Create Nested Tab Routes with Dynamic Paths with React-Router

In this lesson we'll show how to setup the Prompt component from React Router. We'll prompt with a static message, as well as a dynamic method with the message as a function. Finally we'll show that you can return `true` from the message as a function to dynamically allow navigation.

Prevent Navigation with the React Router Prompt Component

In this lesson we'll show how the Link component `to` prop can receive an object. This allows  us to pass `state` to the route. With the nav state we destructure off of location we can determine if a user wants to open a modal or on a cold visit show an image embedded in the page.

Create a Modal Route with Link and Nav State in React Router

In this lesson we'll create a protected route just for logged in users. We'll combine a Route with a render prop and use a loggedIn prop to determine if the route should be allowed to be accessed. Finally we'll use nav state to preserve the location the user visited and redirect them back to the protected route once they login.

Create a ProtectedRoute Component in React Router

In this lesson we'll use the `matchPath` function exported by react-router to find active nested routes inside of a parent component. This technique can be used for comparing routes outside of a React component, or even inside of life cycle methods to do data loading.

Use matchPath to Match Nested Route Paths in Parent Routes with React-Router

The pipe operator is an easy to use and powerful feature of Elixir. It takes the output from the expression on the left, and automatically passes it as the first argument to the function on the right. This is especially useful when chaining together multiple function calls or data transformations. Using the pipe operator results in code that's easier to read, write and refactor.

Chain Function Calls with the Pipe Operator in Elixir

In this lesson we'll explore how to test that an async form submission successfully happened using Jest. We'll also take advantage of react-testing-library to render our react components to a fake dom. We'll use `MemoryRouter` to mock what a browser would normally do in the event of a transition, and create a fake component route to confirm that the submission successfully redirected us to the url we wanted.

Test Successful Async Form Submissions with React Router

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

What's in a name? In this lesson, I'll explain the concept of naming interactive elements for screen reader users, including forms, buttons, and links. You'll learn how to debug accessible names and descriptions using the Chrome Accessibility Developer Tools (previously a Canary experiment, now in Chrome), using multiple labeling techniques. We'll also listen to the effects of proper accessible names and descriptions in Voiceover and Safari.

For more information and the nitty-gritty browser implementation algorithm, refer to WAI-ARIA 1.1: 
- https://www.w3.org/TR/wai-aria-1.1/#namecalculation
- https://www.w3.org/TR/accname-1.1/

What is Accessible Name Calculation?

Routes are some times better served as a modal. If you have a modal (like a login modal) that needs to be routeable and appear on all pages you may need to use query params. Will explore how to render a route all the time and use query params to control when it's content renders

Create a Query Parameter Modal Route with React Router

Landmark regions are used by screen readers to make it easier for users to navigate the content on the page by defining the structure of the page.  Tools like the Rotor in VoiceOver rely on landmark regions to provide users with the ability to skip directly to the desired section of the page.  We can do this either using HTML5 landmark elements or `<div>` elements with aria roles. In the past, the recommendation was to use both but now we should only use one or the other.

The following are ARIA roles for landmark regions:
* `banner`
* `complementary`
* `contentinfo`
* `form`
* `main`
* `navigation`
* `search`
* `application`

## References
* https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html
* https://www.w3.org/WAI/GL/wiki/Using_ARIA_landmarks_to_identify_regions_of_a_page
* https://www.w3.org/TR/html-aria/#docconformance

Define Landmark Regions of a web page using ARIA roles

Using our accessibility auditing toolkit we can find issues concerning landmark regions in our web application.  The react-axe library will report findings in the JavaScript console of the browser.  We could also run the axe browser extension to see the same results.  The tota11y browser extension will annotate any landmark regions on the page and therefore if none are annotated it may indicate that they aren't any (_NOTE: tota11y will only annotate landmark regions using aria roles and not those using HTML5 elements_).  Finally using the VoiceOver Rotor in Safari will show us whatever landmark regions have been defined in the Landmarks menu. 

Test for Landmark Region Accessibility Issues in React

Landmark regions are used by screen readers to make it easier for users to navigate the content on the page by defining the structure of the page. Tools like the Rotor in VoiceOver rely on landmark regions to provide users with the ability to skip directly to the desired section of the page. We can do this either using HTML5 landmark elements or <div> elements with aria roles. In the past, the recommendation was to use both but now we should only use one or the other.  We should prefer HTML5 to ARIA roles when possible.

The following are HTML5 elements for landmark regions:
* article
* aside
* header
* footer
* main
* nav
* section

## References
* https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html
* https://www.a11ymatters.com/article/intro-html5-sectioning-elements/
* https://www.w3.org/TR/html-aria/#docconformance

Define Landmark Regions of a web page using HTML5 sectioning elements

We can find issues with heading levels by utilizing our accessibility auditing tools.  The library react-axe, as well as the browser extension axe, will report any findings concerning heading levels.  The browser extension tota11y will annotate all heading levels on a page and show any in red that have issues.  Finally, we can check the Rotor in VoiceOver in Safari.  The Rotor should have a Headings menu and will list in order all of them that are found on the page.  If headings are missing or inappropriate this will help us find them as well.

Test for Heading Level Accessibility Issues

Similar to Landmark Regions, Heading Levels are used by web browsers, plug-ins, and assistive technologies to provide in-page navigation.

## Rules
* Each page should have at least one `<h1>`
* Pages should be structured in a hierarchical manner
    * `<h1>`: being the most important (usually page titles or main content heading)
    * `<h2>`: usually major section headings
    * `<h3>`: sub-sections of the `<h2>`
    * and so on
* Do not skip heading levels - always follow consecutive order
* Do not use text formatting, such as font size or bold to give the visual appearance of headings.  
    * Use actual heading (`<h1>` - `<h6>`) for all content headings
* Do not use heading levels to achieve visual results only

## References
* https://webaim.org/techniques/semanticstructure/
* https://www.w3.org/WAI/tutorials/page-structure/headings/

Correctly Define Heading Levels of a Web Page

The pluggable linting utility for JavaScript and JSX.

eslint

We have a number of options to use when testing for accessibility issues concerning alternative text for images.  The react-axe library and axe browser extension will both report when an image is missing alternative text.  The tota11y browser extension will annotate any images that are missing alternative text.  Running eslint with the eslint-plugin-jsx-a11y plugin installed will report on any `<img>` elements missing an `alt` attribute.  Finally, we can use a screen reader to actually hear what is read when an image has focus.

Search

Search Results