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.
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.
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.
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.
For more of Scott's accessible React code examples, please watch the video!
Links mentioned in the talk:
- A11Y Project: https://a11yproject.com
- A11Y Slack channel: web-a11y.herokuapp.com
- Who to follow: https://a11yproject.com/follow
- aXe: https://axe-core.org
- Lighthouse: https://developers.google.com/web/tools/lighthouse
- String ref being deprecated: https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs
- Keycastr: https://github.com/keycastr/keycastr
- Screencast with VoiceOver: https://medium.com/@svinkle/screencast-with-voiceover-7a3e0872f90a
Drupal Accessibility Group
Join the Accessibility group on Drupal.org for hints, tips, discussions, and patch proposals to help make Drupal more inclusive.