DEV Community: Peter Rose

Accessibility In React

Peter Rose — Mon, 13 Jul 2020 13:08:27 +0000

When developing applications it’s easy to continue coding without accessibility in mind. When in fact there are features in React that provide help in making the web more accessible. Today we will be going over some basic features that React enables and/or supports, as well as some basic implementations.

Why Web Accessibility

People who are visually impaired or those with motor disabilities and cannot use a track pad or a mouse pointer, for instance, succumb to the problem of not being able to have a relatively equal experience to the average user. We program with Inclusivity in mind by thinking about every user, equally. It’s important to move forward with the mindset that web accessibility is a ‘must-have’ and not just a feature.

Accessibility Standards and Guidelines

WAI-ARIA or the Web Accessibility Initiative — Accessible Rich Internet Applications is a set of standards for making the web accessible. Their documentation contains techniques for building fully accessible JavaScript components. It especially helps with web content that utilizes Ajax, and other JavaScript related technologies like React. It includes step by step instructions on creating dynamic content and beautifully illustrates how to make the web a lot more inclusive.

Find the link here

WCAG or the Web Content Accessibility Guidelines provides guidelines for creating accessible websites. This was created with the goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organisations, and governments internationally.

Find the link here

ARIA, or Accessible Rich Internet Applications is a set of attributes that define ways to make Web content and Web applications more accessible for users with disabilities. There is a large set of built-in HTML attributes to define ‘roles’ for an element, to provide more information to users using assistive technology, and/or provide effective navigation routes for our users. JSX actually fully supports ARIA attributes, and therefore can be used as attributes for elements and components in React.

List of ARIA roles here

What is Web Accessibility ?

Web Accessibility is the design of pages, tools and technologies on the web that can be used by everyone. Everyone here includes people with auditory, cognitive, neurological, physical, speech and visual disabilities. Accessibility support is necessary to allow assistive technology to interpret web pages and applications.

Building Accessibility web components in React ?

It can be hard to make accessibility a priority if one is utilizing unsemantic code. Using JSX in inefficient ways can cause major problems when it compiles. This can cause your code to not exactly render out semantic HTML, and where there is unsemantic HTML there are assistive technologies like screen readers that find it difficult to parse the content as it was intended. Therefore, making your application inaccessible.

Next, I’ll run through several strategies and tips in order to increase the accessibility of your application. These are tactics that will help you to write code with semantic value.

React Fragment

Fragments are a component provided by React that allow one to return multiple elements with their own semantic value. Doing this also allows you the freedom to not wrap multiple elements in

tags.

To ensure that every code block is accessible we must write good HTML semantic code. Let’s review the classic div/button mistake.

<div onClick={this.onClick} className=”button”>
<span>Click me</span>
</div>

This would render a button, but it is not an accessible HTML button, a screen reader would not be able to interpret this. This code has no role or other properties it can announce to the user to grasp the understanding or purpose of this button. A more accessible and semantic code that
does the same thing is this:

<button onClick={this.onClick}>
Click me
</button>

Explicitly set Live Announcements

import React from "react";

Function LiveTesting() {

return (
<div aria-live="polite" aria-atomic="true" className="listContainer">
<ul className='list>
   <li>item 1</li>
   <li>item 2</li>
</ul>
</div>
)}
};

export default LiveTesting;

aria-live with the polite value indicates that the screen reader waits till everything else is read before reading the updated content.

aria-atomic attribute set to true tells the screen reader that all page content would be announced, not just the updated content.
After the announcement component has been created, to use the live.

Accessibly Lint & Test Your Code

One of the best ways to lint your code inaccessible practices is to install and use the plugin eslint-plugin-jsx-a11y in your project. This plugin comes with numerous rules enabled, including alt-text and label-has-for. A similar tool, but just as useful is react-ally. After installing this tool properly, it’ll then send you warnings in your console when your app renders pertaining to accessibility.

Lastly, there's Lighthouse. This is a more of a all around performance, accessibility, SEO report center and those features will certainly come in handy. Lighthouse was developed by Google as an automated tool for auditing the performance and accessibility of web pages. It can be used within Chrome DevTools, from the command line, or as a Node module.

Here is an example of a report generated by Lighthouse.

Web Accessibility may seem like a daunting task but each day it is getting easier. I hope this post has helped you to create more widely accessible React Applications.

Resources:

Link for eslint-plugin-jsx-a11y - Here
Link to react-ally - Here
Link to lighthouse - Here

Accessibility, ARIA, and acknowledging the impaired...

Peter Rose — Tue, 07 Jul 2020 20:46:19 +0000

After some time as a developer, you’ve likely seen a StackOverflow post about ARIA or noticed a conversation on Reddit around accessibility. But what does that even mean?

What is Accessibility?

Accessibility is a concept that compels us to acknowledge disabled persons and prioritize giving users an alternative way to access our content, so the User Experience is relatively the same. Oftentimes these users may have visual impairments. As an engineer, there are several reasons why you’d need to prioritize this. A key example of where this would be a necessity is for a school website. It would make the most sense that all of the site’s contents are accessible to all students. Not to mention, it's mandated by law in several countries. For example, there is the Americans With Disabilities Act. In this post, I’ll be giving a brief but detailed overview of accessibility fundamentals, ARIA, and ...

How does chrome interact with a screen reader?

When utilizing HTML and JavaScript within a website, it’s important to know that your code is parsed by your browser and returned as the Document Object Model, which is a tree of nodes or objects that represents your website, which then renders your webpage.

One lesser-known fact is that the browser creates another tree known as the Accessibility Tree. This is the ‘DOM’ that our visually impaired users are navigating. The nodes within this tree will have the same data, but each object holds rich semantic data.

Imagine if an impaired user were to navigate a website and they approached this. What they would have to work with is ‘Sign up, group’, sure, which sounds easy enough to you and me who have this image to go along with it, but this does not indicate any actionable steps. The user may very well just think this is more text and continuing navigating your website. In this example, it’s a signup button but in another example, it could be the donate button, that takes them to the proper portal to donate to your company/self.

What is the solution? WAI-ARIA?

The Web Accessibility Initiative - Accessible Rich Internet Applications ‘adds the ability to modify and enhance the semantic meaning of elements in the DOM’. - Source Here

Essentially all this does is that it allows you to add semantics to a normally ‘unsemantic’ element. This modifies what a screen reader announces to our users when they reach that element. ARIA gives meaning to these elements and helps us guide the user through their experience.

A label, for example, has a lot of meaning. It explains what the purpose of the proceeding element is. You see this in many cases like forms, buttons, etc. It’s also important to label the elements that have no clear, but we assume our users will understand their purpose. An example of this is a hamburger menu, for when a user is viewing your application on mobile.

<button id=”hamburger”
Aria-label=’Main Menu’>
</button>

I would recommend driving into the WAI-ARIA best practices if you've like to start making your sites more accessible! This includes step by step instructions on how to use ARIA on your elements and make your site closer to being 100% Accessible! Thank you for taking the time to read this post. I hope found this informative.
Source - Here

Development V.S. Production Mode & how to optimize UX

Peter Rose — Mon, 29 Jun 2020 14:42:20 +0000

If you’ve got a bit of coding experience, you’ve likely seen a bit of discussion on development and production in software engineering. In this blog, we’ll dive into what exactly those terms mean, relevant concepts like Lazy Loading and minification, and how they affect our process as developers.

But just what IS development and production mode?

In React’s development mode, there exists many warnings and errors, such as prop warnings, that will help aid development, which can be incredibly powerful. Though, this comes at a cost! Have you ever been developing an application, for it to run slower until your app is deployed? This is because the code necessary to allow these warnings and errors to be detected in development mode before the application hits production is bundled with your application.

Production builds omit warnings used in development resulting in higher performance. This is because of several factors. For one, oftentimes when publishing an application in production mode, the concept of minification will be performed. This operation runs through your source code and removes anything that is unnecessary to the application’s main functionality. In many cases, this includes extra characters that don't impact the code directly, e.g semicolons in JavaScript, whitespace, etc.

Here is an example of a minification.

Before minification: eight lines of code

After minification: A single line of code

“Minification speeds up webpage loading, thereby improving website experience, making both visitors and search engines happy.”, Source is Here.

Although, don't be fooled! This is very effective! This will compact the file size of your application, making it easier for users in terms of performance and data usage.

Performance plays a significant role in the success of the overall user experience of an application and can be the deciding factor in whether your business fails, succeeds, or is saved a lot of money in the process. By keeping this in mind, this will allow your site to continue to load fast and keep users happy after visiting your web application or website.

Pro Tip: Run the command ‘npm run build’ to create a ready-to-deploy application within a build folder if you've used ‘create-react-app’.

There are many pieces of software and techniques that one can use to optimize your app bundle. In particular, there are ways to optimize how the content of your application is rendered. As a React developer, you should be checking the React developer tools to manage and maintain performance in your app. Categories such as ‘First contentful Paint’ are what you should keep an eye on. The split seconds that it takes for the pages in our application to load are actually very critical to the overall user experience. This leads to a concept known as Lazy Loading.

“Lazy loading (also called on-demand loading) is an optimization technique for online content...Instead of loading the entire web page and rendering it to the user in one go as in bulk loading, the concept of lazy loading assists in loading only the required section and delays the remaining, until it is needed by the user.” - source is Here

A good example of this concept is an ‘infinite scroll’ page. Be it a web app or a search engine, at some point, you've probably been on a website that requested a lot of content sent back to you. If you requested 100 items, a page with an infinite scroll would only load the first 5-10, and only show the other content when the user scrolls all the way down to see more content. Essentially, it defers the loading of non-critical resources at page load time. Instead, these resources are rendered the moment the user needs them.

This minimizes time consumption and memory usage while also optimizing content delivery. I would recommend diving deeper into React.Lazy() to get a good feel of how we can implement this within ReactJs.

Thank you for your time. I hope you gained a solid grasp and differentiating factors within development and production builds. Feel free to leave a comment or ask a question.

Have a great day!

Conquering The Front with the DOM API

Peter Rose — Thu, 20 Feb 2020 17:16:18 +0000

The DOM.

For some, it might be a tricky subject but once figured out, it becomes a game-changer. No, rather it becomes the game-changer. You might think this is an overstatement but the DOM might the most essential component of web development.

But What Exactly is The DOM?

The DOM of a web app looks a little something like this...

Looks a lot like your average HTML skeleton, no? But alas! they're really not one and the same. The DOM is a virtual representation of your HTML skeleton. It is better to visualize the DOM as a tree of nodes. It allows us to manipulate our HTML from the JavaScript document, itself. This is because the DOM interprets all of the tags within our HTML document a collection of node objects. This can be useful since this allows us to target specific nodes by using the respective method to search by class name, ID, or tag name. Once we have access to them, manipulating its properties and/or styles becomes as easy as console logging. At that point, the world is yours.

DOM starter kit

Targetting HTML Elements

const container = document.querySelector('.sampleContainer'); 
// By Query
const name = document.getElementbyId('nameTag') 
// By ID Name
cont dob = document.getElementbyClassName('birthDiv')
// By Class Name

Manipulating your CSS with DOM

const photo = document.querySelector('.photo');
photo.style.cssText = ''.concat(
    'width       : 400px;',
    'color       : #f0f0f0;',
    'margin-top  : 10px;'
);

// Concat CSS Styles

photo.style.width = '400px';
photo.style.color = '#f0f0f0';

// Target Individual Styles

Adding & Removing HTML Elements/Nodes

<!-- Here, we have a list and two buttons that remove and add to the list respectively.
This is done through the DOM and does not require a page refresh. -->

<ul id="myList">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>

<p>Click the button to remove the first item from the list.</p>

<button onclick="removeNode()">Delete Top Item</button>

<input id="addNodeInput" value="">
<button onclick="addNode()">Add to List</button>
// You can also use event listeners, if you'd rather not use onclick.

// Connect our nodes to the JavaScript file.
const list = document.getElementById("myList");
const input = document.getElementById("addNodeInput");

// Remove Node Function.
function removeNode() {
  list.removeChild(list.childNodes[0]);
}
// Syntax: ParentNode.removeChild(childNode)


// Add Node Function
function addNode() {
   newItem = document.createElement("<li>") // Make New element.
   newItem.innerHTML = input.value // Assign the innerHTML of the new 
   item to the current value of the input tag.
   list.appendChild(newItem) // Add it to the list.
}

For a more in-depth rundown of all properties accessible through the DOM, please visit MDN. They have great documentation on nodes and the DOM API

DOM in Action !

This is Monumentous when used in conjunction with event listeners. Having the HTML document change upon user events is the definition of interaction. Let's simulate a real-world example of how you would use the DOM. Let's say you had some data you got from a server and wanted it displayed to your webpage. We'll style the page quickly and jump into how DOM enables us to accomplish this task.

<style>
    body { /* Flex your document body*/
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
    }
    #userContainer { /* Simple styling  */
       height: 500px; 
       width: 400px; 
       background-color: darkslategrey;
       display: flex; 
       justify-content: space-around;
       align-items: center;
       flex-direction: column;
       font-size: 24px;
       border-radius: 18px;
}
    #userContainer img { /* Make image a circle */
        border-radius: 50%;
    }
</style>

   <section id="userContainer">
        <img id="userPhoto" src="https://via.placeholder.com/150/09f/fff.png"></img>
        <p id="userName">name</p>
        <p id="userAge">age</p>
        <p id="userPhone">phone</p>
    </section> 
    <button id="button"> Fill Data </button>

// The Data you obtained
const userData = JSON.parse('{"name": "Michelle","age": 23,"photo":"https://2ithep36u4oimr3rn1a214zj-wpengine.netdna-ssl.com/wp-content/uploads/2018/09/alissa-davies-headshot-150x150.jpg","address": {"streetAddress": "88 8nd Street","city": "New York"},"phoneNumber": [{"type": "home","number": "347 123-5555"},{"type": "fax","number": "222 222-2222"}]}');

// Connect all your nodes/html elements that you want.
const userName = document.getElementById("userName")
const userPhoto = document.getElementById("userPhoto")
const userAge = document.getElementById("userAge")
const userPhone = document.getElementById("userPhone")

// Add Event Listener & assign each section to the desired property on the object.
document.getElementById("button").addEventListener("click", function(e) {
    userPhoto.src = userData["photo"]; // Assign every Section to respective data from objects.
    userName.innerText = userData["name"];
    userPhone.innerText = userData.phoneNumber[0].number;
    userAge.innerText = userData["age"];

})