February Accessibility (A11Y) Talks

Monday, April 09, 2018

Hook42 Team

In February, we welcomed Scott Vinkle as our guest speaker. Scott is an accessibility expert and front-end developer for Shopify who spoke to our meetup group about creating accessible React JS apps. Scott has been active in the accessibility community since 2011. He has worked with many groups including the accessibility project, the a11y tour, CodePen Ottawa, and many, many others.

Takeaways

The React JavaScript library is a great way to create reusable modular components that can be shared among projects. But how do you ensure your React apps are usable by all kinds of people? Scott Vinkle shared his tips on how to build your React apps with accessibility baked-in!

If you are new to the world of JavaScript or Accessibility, or maybe just need a refresher on either subject, please read Scott’s article for more background information: https://svinkle.me/react-a11y

Can React Apps Be Accessible?

Yes! React apps can absolutely be made accessible for people with disabilities. Here are some areas that Scott presented to the group: how to set a page title, how to create a live announcements component, and how to manage keyword focus between components and when loading new pages.

Scott reviewed React's accessibility linter which comes with each new app. He also spotlighted a fairly new feature with React fragments. Scott also shared some thoughts on writing semantic HTML within React components. He finished up the presentation by going through a small demo app that he created to help illustrate each point.

Some Things to Watch for When First Starting to Develop with React

When it comes to writing HTML attributes in React components, they need to be written in camelcase style. This means when an attribute name is made up of two words, the second word in the attribute must start with a capital letter. For example, the attribute "tab index" needs to be written as "tab index" with the capital "I" (tabIndex). The attribute "content editable" needs to be written as "content editable" with capital "E" (contentEditable). And "max length" needs to be written as "max length" with a capital "L" (maxLength). And it's worth noting that the area and data attributes are exempt from this rule.

There are a few reserved words which come into conflict when writing HTML attributes within your React components. For example, the reserved word "for" is used in HTML when pairing a label with an input element. In JavaScript, "for" is used to loop through items using an index until a specified condition evaluates to false. So, the for attribute needs to be written as "htmlFor". Note the capital "F".

Another example is the reserved word "class" which is in the HTML to allow CSS and JavaScript to select and access specific elements via the class selector. In JavaScript, it's used to create a class declaration. So, when adding a class to an element this needs to be written as "className". In HTML5, there are a few elements which no longer require the closing tag, but in React these elements require the self-closing forward slash.

Example Code: How to Set a Page Title in React

Let's take a look at how to set a page title. First of all, why bother setting the page title content? There are a few reasons why you'd want to do this. For one, it updates the content in the browser tab so sighted users have a better understanding of where they are in the app. Two, it helps to increase search engine optimization. So, when something like Google comes along and indexes your app, it'll have that information. The page title content is often the first bit of information announced by screen readers, so users of assistive technology will have a better understanding of their current place in the app.

So, how do I do this in React? The simplest method that Scott found while doing research was to set the title using the JavaScript "document.title" global property. There is a function called "componentDidMount"; this is a React lifecycle method. The code within this function executes when the component is loaded onto the screen and the single line within this function is using "document.title" to study string value of "my page title".

When this component loads, the page title will be set to this value. It's also worth noting that this is not specific to or unique to React, this method can be used in any JavaScript based application or website. For quicker work, there are other pre-existing components that other developers have made; these components can be included in your project via NPM.

For example, there is React "DocumentTitle" and it can be used by wrapping your content with a document title component. Then you would add a title prop and set its value to the desired page title. The other one is called React "Helmet" and it is used by creating a helmet component. Within this, you can set anything you'd like that would normally appear in the head section of the page.

title code for React JS