Developing with accessibility in mind
What is Accessibility?
Accessibility or A11Y for short, in its simplest terms, means making the content and functionality of a website or app available by anyone regardless of disabilities. When most people think of a disability, they think of someone with a permanent medical condition such as blindness or other physical condition that limits their motor or cognitive abilities. While that view is true, there are other types of disabilities that we should consider when creating software products. An individual can have a visual, motor, hearing or cognitive disability. These disabilities can be further categorized into situational, temporary or permanent. When we develop software, we have to consider individuals with permanent disabilities as well as those with temporary ones like a broken arm or situational disabilities like sitting at a café with the sun shining on their screen
Web Content Accessibility Guidelines
The Web Content Accessibility Guidelines (WCAG) was put together by the World Wide Web Consortium(W3C) as a list of best practices to provide a methodical way for developers to implement accessibility on the web. These guidelines were taken by the Web Accessibility in Mind (WebAIM) group and turned into a checklist to use during the development process. WCAG is based on the following four principles:
- Perceivable: Web Content is made available to the senses – sight, hearing, and/or touch.
- Operable: Interface forms, controls, and navigation are operable with different forms of input devices.
- Understandable: Information and the operating of the user interface must be understandable.
- Robust: Content must be robust enough that it can be interpreted by a wide variety of user agents including assistive technologies.
Accessibility during development
Focus
The simplest place to start with accessibility is by looking at an element’s focus state. All interactive elements such as links, buttons and form controls, as well as custom interactive components, should have a focus state. You can see an element’s focus state by using the tab key on the keyboard. Different browsers style the focus state differently. Firefox uses a dotted border while Chrome adds an outline around focusable elements. It is possible to remove the browser’s default focus styles with the outline CSS property, but make sure to always add a custom visual state with the CSS sudo-class :focus when you do so.
Click here then press the tab key to focus on the buttons
Order
Browsers organize elements on a page into the Document Object Model (DOM). The browser takes all the elements rendered on a page and it creates a nested tree-like JavaScript Object, the DOM, in the browser’s memory. This object is used to determine the order in which elements receive focus while using the tab key on the keyboard or other assistive technologies. It is possible to change the visual order of elements with CSS by changing the float property or positioning an element at an absolute location on the page. Keep this in mind when changing the visual order of elements. In the example below the first set of buttons are in the same order as the DOM tree, while the second set uses CSS to change the position of the first button. When developing you want to keep the visual order and the focus order the same to avoid confusing those using the keyboard or other assistive technology to access the application.
Click here then press the tab key to focus on the buttons
Tabindex
The browser provides a default tab order base on the DOM tree for native interactive HTML elements. There are cases when it is desired to change, remove, or prioritize the order. This is useful especially with custom components that may use non-focusable elements in their implementation. For that purpose, the tabindex attribute can be used on any element that otherwise would be ignored by the focus order. Adding tabindex=”0” to any element will cause it to take on the natural focus order in the DOM. tabindex=”-1” removes an element from the natural focus order and causes it to be skipped. Both are useful when creating custom components such as a select menu or a button that uses non-focusable elements like [divs]. It is possible to add a tab index number greater than 0 causing the element to jump to the front of the focus order, but this is considered an anti-pattern and should not be done.
Click here then press the tab key to focus on the buttons
Focus 2 Div with tabindex=”0″Semantics & ARIA
Many elements give meaning to the layout of a page. It is important to use these elements because they help assistive technologies like screen readers communicate to users the structure of the page or the purpose of a piece of content.
Headings
Use the proper hierarchy when using heading tags (H1, H2, H3, H4, H5, H6). Visually making text bold may be helpful for most users, but it provides no meaning to the page. Think about these as a list of related groups like a table of contents. Based on this structure, you should be able to identify sections and sub-sections within the page. Normally there is only one H1 heading on a page and all the sub-sections would follow the perspective hierarchy. Heading on sections of the page help users and screen readers quickly identify the purpose of the section. Studies have shown that people scan a page rather than reading line-by-line. Once they find something of interest, they narrow down the focus to the details of the content. Use headings to identify your sections.
HTML5 Semantic elements
HTML5 introduced a new set of elements that behave exactly like a [div] does. They are block level elements that add no style but introduced meaning to the content they hold. Use these elements instead of a [div] when appropriate to communicate content meaning within a page or components: header, footer, nav, article, section, main, aside.
Examples of using semantic native elements include using tables to display tabular data instead of implementing a layout Use the <p> element for regular body text, an <a> element for links and a <button> element for buttons. Many of these have a special meaning for assistive technologies but also include default accessibility functionality. One simple practice is to never leave an <a> element without the href attribute because it changes how it is accessed with the keyboard. It is a better practice to use a button if there is no link and style the button with CSS if you need it to look different.
Link and button text
The text used for links and buttons should be descriptive to help people with accessibility technologies better understand what they will be doing when they click them. It is clearer for everyone to use the following text for a link; “click here to learn about accessibility” than to simply use “click here to learn about accessibility”. It would be even better to omit the “click here” text altogether and use “learn about accessibility” on its own. A screen reader would not tell a user what to expect if they click the link reading “click me”. You can also use the ARIA specifications to add meaning or change labels for screen readers and other forms of accessibility technology. It is specifically helpful for buttons and other form controls. We will cover this further in a bit.
The Accessibility Tree
Screen readers build an accessibility tree to help users make sense of a web page. The accessibility tree is similar to the DOM tree except that it takes the semantics elements and allows the user to sort, skip, or jump to different elements such as links or buttons on the page. Important elements are also known as landmark elements.
New frameworks like React and Angular have allowed developers to create custom components that don’t have the same semantic meaning as some of the native elements. To solve this problem the Web Accessibility Initiative’s Accessible Rich Internet Applications specification (WAI-ARIA or just ARIA) was created. It allows developers to use a set of predefined attributes that modify the way an element is translated into the accessibility tree. This is great for custom components because developers can use elements without meaning like the [div] to create rich interactive components and still make them accessible through screen readers or other assistive technology. It also allows you to change the meaning or add better descriptions or labels for accessibility tools.
ARIA
The ARIA specification provides a set of attributes that allow developers of accessible rich internet applications to provide screen readers with information so that they can properly interpret the elements. Examples of these include the role and the aria-label attribute. role could be used when creating a custom checkbox, slider or dialog. Assigning the attribute role=”checkbox” would communicate to screen readers the purpose of the component. [aria-label] allows developers to add a string that is used to describe an element but has no visual impact. Think of a button or link with only one word as its label text. aria-label allows you to override the text description for screen readers without changing the visual label. You may have seen these attributes in the source code of component libraries. I will not cover the ARIA specifications here; the basics alone warrant its own article. Be aware that you can use it to add meaning to your application and help make it accessible to users that depend on screen readers.
Styles, Color, and Contrast
When styling elements ensure that all interactive elements have a focus style. If the company’s branding is different from the browser’s default focus styles, ensure that a custom focus style is provided.
Beyond interactive elements do not depend solely on color to communicate element status or purpose. Red text color is great to display an error message to most users, but someone who is colorblind may not know it is an error. The same is true for someone using assistive technology to access the application. The ARIA specification can help you add meaning to these types of components and make the application accessible to a wider range of people.
Similar to color blindness, there is also a part of the population that has low contrast vision. They are not able to easily see elements or text with low contrast. When selecting a color pallet, select colors with enough contrast between the foreground and the background for people with such a condition to see it. Contrast is also an issue depending on lighting conditions. This would be an example of a situational temporary disability. Think of the earlier example of the person sitting next to a sunny window.
Responsive Web Design
Last but not least, there is Responsive Web Design (RWD). HTML5 and CSS3 made it possible to create web pages that resize and adapt the layout based on the size of the screen the user is on. RWD makes applications accessible across different devices without the need for separate source codes. This is great for reducing business costs, improve the user experience, and speed up the delivery of features across multiple devices. Avoid using tables to create the layout. Tables are meant to display tabular data.
Conclusion
Making applications accessible is not a complicated process, but it is one that has to be done with purpose. Accessibly like the user experience, is about empathy for the limitations that users face while using the software we create. Those limitations can be visual, motor, hearing or cognitive and furthermore they can also be situational, temporary or permanent. Accessibility solutions should follow the WCAG list. An interface’s accessibility can be judged by asking if the feature is perceivable, operable, understandable, and robust. These are the four principles WCAG is based on.
When implementing a feature use the following checklist to test it for accessibility:
- Ensure interactive elements are accessible without a mouse and with a screen reader. You can use a screen reader plugin on your browser to get an idea of how someone would be able to use our software with it.
- When an interactive element is in focus, make sure visually the styles change and it is obvious what is in focus.
- Maintain the visual and focus order of elements the same.
- Use native semantic elements for content and use the HTML5 semantic elements where appropriate.
- When creating custom components use the ARIA attributes to make these elements accessible to screen readers.
- Don’t rely solely on color to communicate meaning and make sure that colors have enough contrast.
- Test the application on different screen sizes, make sure that it is still accessible on different devices.
The phrase “in your own backyard” has changed
Geographically, it used to mean something near you and accessible within a short travel distance. Modern transportation changed that. It used to mean your own, neighborhood, town, city or state, then the car came along and it expanded the borders of what “in your own backyard” means.
In communications, it meant we connected with anyone we could walk or travel to within a short time period. The telegraph came along and expanded the meaning. Then came the telephone, the radio, television, and the internet. In the world of communications, “in your own backyard”, is now the world.
There was a time that selling as a business meant finding customers who were geographically nearby. Then came the motor vehicle, roads, trains, plains, and eventually the internet, and it opened up the entire country, then the continent, and finally the world. Everyone’s backyard expanded and now you can reach people across the oceans and timezones in real-time.
We use to explore only the seas, jungles, and new continents. Then the backyard borders changed and today humans explore the solar system through robots and satellites.
Our backyard is not as small as we thought it was and it’s still expanding.
Cognitive overload
The human brain is an amazingly complex system. It has the capacity to store tons of data. Some neuroscientists estimate that it can store somewhere between 10 to 100 terabytes and others as high as 2.5 petabytes. One terabyte holds roughly 1000 gigabytes and one petabyte 1000 terabytes. To put this in perspective, 2.5 petabytes can hold up to three million hours of video, enough to watch for 300 plus years, non-stop. While these are estimates, they give us a perspective of how much information the brain can store.
Despite the brain’s capacity to store information, it is limited to how much it can hold in Short Term Memory (STM). Research suggests that it can store 4 (plus/minus 1) units of information in STM. Maxing out this capacity is known as cognitive overload. It happens when a person is given too much information and they are unable to process it, causing a feeling of distress. For users, this means abandoning a page or making the completion of a task a frustrating one.
Cognitive overload is one of the many pitfalls designers look to avoid. It is a common mistake to try and show everything in an attempt to cover the many scenarios and workflows in a complex product. Given too much data, humans become frustrated and abandon a website. This event is known as dropping off and it is measured in analytic tools as the drop off rate of a page. It is an important metric because it is closely related to e-commerce sales.
In web applications, users may not drop off because they need to complete a task despite the frustrating experience. Eventually, when a better alternative comes around, users will jump ship as quickly as they can. In today’s market when there are usually several alternatives to every product or service, good user experience is a must. It is the one thing that companies cannot afford to neglect to stay competitive in the long run.
Preventing cognitive overload
Cognitive overload can be prevented by following a few design principles and best practices. This is true even for complex products.
The primary goal
Every feature in a product should have an intended primary purpose. The first step of an effective design process is to identify the primary problem it’s solving. That is not to say that design can’t accomplish several tasks, but understanding the user’s primary needs when using a product will help prioritize the design and give it focus. A feature may be compromised of several views that make up a workflow in a multi-step process. When that is the case, think about why each of those views exists. What is the primary purpose of each view?
To prevent cognitive overload, spend time identifying what data and actions should be available and get rid of unnecessary ones. A danger many designs run into is trying to be everything for everyone. It would be nice if a design allowed you to do everything, but it’s not practical. Protect the user from themselves. They may think they want to see everything, but the way our brains work disagrees. The next step is to organize information in a meaningful way.
Information hierarchy
All information is important but not all information is of equal importance. The levels of importance are described as information hierarchy (IH). IH helps direct users to what they should pay attention to first. The same is true for elements and actions. There are commonly three levels in a hierarchy: primary, secondary and tertiary. To establish a visual hierarchy, designers combine the use of size, scale, contrast, color, space, proximity, and alignment.
Classify data with the level of importance for the primary purpose of the page. When there is data or an action that can be helpful in some cases, a useful technique to use is to make the data available on-demand or just-in-time. This type of data can be displayed on demand at the time it is needed by using a mechanism such as a mouse hover over or a toggle to show/hide other information.
Hierarchy case study
The following example uses font size, color, contrast, and proximity to bring attention to the subject ID, variable and verbatim term name. Larger font with high contrast between the white background and black text is used to make them stand out more than lighter text. They are grouped with other information to make the group visually weighs more than the rest of the data. This is known as information chunking. Which is easier to remember, FBINSACIA or FBI NSA CIA? Within the group, there are three levels of hierarchy but the proximity to each other implies a close relationship. Through color, we identify the clickable text as well as the status of a term. Tertiary data, while still important, is smaller or lighter, or both.
Repeating schemas
An effective way to help reduce cognitive overload is to use known schemas or patterns. Repetition helps the brain recognize previously encountered metaphors that it has gathered over years of experience. Once recognized, the brain ignores what it already knows and moves on to process other pieces of information. Common examples include buttons or color for hyperlinked text. Our brains recognize the schemas and know how to interact with them because it has encountered them before.
Use commonly known schemas as much as possible. If you need to create your own for a specific need, use a reusable component library to help establish these patterns across a product.
Conclusion
The understanding of cognitive load will help minimize the amount of effort it takes to use a product. I would encourage you to dig deeper into this subject. If you have ever encountered a design that frustrated you with too many distractions and didn’t know why it is most likely due to your brain being overloaded by information.
In the words of the great philosopher Notorious BIG, “And if you don’t know, now you know…”
Gestalt laws of grouping
The Gestalt laws of grouping are a set of psychological principles that came out of the work of German psychologists Max Wertheimer, Kurt Koffka and Wolfgang Kohler in the early 20th century. They set out to understand how humans gain meaningful perceptions between objects from the world around them. Humans naturally perceive things as organized patterns and objects.
The word Gestalt is German for form or shape and it is defined by the Merriam Webster dictionary as:
Something that is made of many parts and yet is somehow more than or different from the combination of its parts.
Why the Gestalt principles are important in product development
Psychology plays a huge role in visual perception. When users see our software interface, they are looking for ways to add meaning to the elements in front of them. Knowing how our minds help us find meaning and attribute relationships in the world around us can help us create better products. Applying these principles can be compared to swimming in a river. When you violate these principles, you are swimming upstream against the current of human cognitive power. When they are followed, you are swimming with the current and facing little to no cognitive resistance from the stream.
The Principles
Proximity
Objects or shapes that are close to one another appear to form groups. The further apart objects are, the weaker the relationship between them becomes. It is a powerful principle that it overcomes other differences and similarities in the same group such as shape or color. In the example below, we see three groups with different shapes and colors. Before identifying differences within each group, proximity helps us identify them as related despite the differences within.
Similarity
All else being equal, our perception lends itself to see things that physically resemble each other as part of the same object or group. Things that affect how we assign a relationship between objects are size, color, and shape. In the example below, our minds assign a relationship between each type of shape and color even though they are not next to each other. There is a relationship created between the shape and colors.
Closure
The mind has a tendency to see complete figures or forms even if the picture is partially hidden, incomplete, or part of the information needed to make a complete picture lives in our memory. In the example below, our minds complete each shape to be perceived as a square, circle, and triangle even though the lines are not closed. The mere shape of the line is enough to allow us to perceive it as the shape itself.
Symmetry
The law of symmetry states that elements that are symmetrical to each other are perceived as belonging together regardless of their distance. Symmetric objects are perceived as stable and balanced. In the example below, even though we have two different triangles they are perceived as belonging together because of their symmetry to each other. Balance creates a perception of a relationship.
Common Fate
When visual elements are seen moving in the same direction at the same rate, our perception associates the movement as part of the same stimulus. A group of jets flying in formation is perceived to have a stronger relationship than if they were all flying in the same direction at different speeds.
Continuity
Lines are seen as following the smoothest path. When there is an intersection between two or more objects, our minds tend to perceive them as a single uninterrupted object. In the example below, the relationship between the blue curved line and the dark gray curved line is stronger than it is to the straight blue line. Even though the color shows the change in direction, the smoothest path for our mind is to follow the curved line.
Good Gestalt (Good form)
Objects are grouped together by our minds if they form a common, and simple pattern. This is our mind’s efficiency in simplifying shapes into simpler concepts in an attempt to make sense of what we are looking at. Our mind’s ability to reduce extraneous stimuli helps it create meaning in chaos to reduce cognitive overload. In the common example bellow, the mind reduces the complexity of the Olympics’ logo into five circles. Even though there is nothing separating them as circles, our brain can process them into simpler shapes to make it easier to understand the relationship.
Law of Past Experience
This law states that sometimes people use their past experience to add meaning and attribute relationship to objects. A common example is how we perceive letters. When a letter is missing, replaced or reordered, our minds help us fill in the gaps to add meaning to what we are looking at.
7H1S M355AGE C4N B3 R34D BY YU0
Applying the principles in design
In design, we can use these principles to communicate relationships or the lack of between different elements. We use principles such as proximity to create a relationship between elements such as an image, text, and a button. We add symmetric objects to the page to give a feeling of calmness and balance to a user interface. Continuity helps display a group of elements such as lists to communicate a relationship between each item as part of a bigger group even though each is considered its own entity. Together they flow in a similar direction as if they were one. Combined together these principles help us create interfaces that are easier to learn, pleasant to look at, and more delightful to use.
Creating Angular 1 components in ES2015 syntax
Recently I have been working on transitioning my company’s Angular 1x Single Page Application(SAP) to ES2015 to prepare us to update to Angular 2 in the feature. At work we are using Webpack as our bundler with the Babel 6 loader to transpile our code back to ES5.
Note that the following code assumes that you are using a bundler like Webpack with the appropriate loaders. I will not post my Webpack configuration since you can easily find that information on their site as well as Babel’s. The modules are written in a way that you can easily swap the bundler or transpiler with little modifications to your code.
Creating an Angular controller in ES2015 syntax
export default class SomeController {
constructor(someDependency) {
this.someDependency = someDependency;
this.title = 'The component title';
}
someMethod() {
}
}
SomeController.$inject = ['someDependency'];
Notice how dependencies are being inject through the constructor method and using $inject. I am exposing the dependency by reassigning it to a property with the same name to the this object. That will make accessible in any of the methods using the this keyword.
Creating a component in ES2015 syntax
import SomeController from './somecontroller.ctrl';
const SomeController {
template: "<h1>{{vm.title}}</h1>",
controller: SomeController,
controllerAs: 'vm'
}
Creating an Angular module as a ES2015 Module
import SomeComponent from './some-component.component';
const SomeModule = angular
.module('someModule', [])
.component('someComponent', SomeComponent);
export default SomeModule;
The module becomes the single source where everything that belongs to it is declared using Angular’s interface. It also includes any type of providers or services and will make it much easier to upgrade to Angular 2 because you are creating native classes and object literals when declaring each peace.
One caveat is that the new syntax favors services over factories. You may recall that one of the differences in how they are declared is that factories return an object where services are constructor functions.
Using HTML5 validation to validate URLs
Recently I came across Raymond Camden’s blog post on how to use HTML5 form validation with pure JavaScript. I thought I would write the URL version. I know, I’m totally stealing his code.
Validate URL:
function isValidUrl(s) {
var elm = document.createElement('input');
elm.setAttribute('type', 'url');
elm.value = s;
return elm.validity.valid;
}
isValidUrl('http://www.thewaymultimedia.com/'); //true
isValidUrl('www.thewaymultimedia.com/'); // false
isValidUrl('thewaymultimedia'); //false
Sweet, that is pretty simple. Thanks Raymond. Make sure to read Raymond’s blog post, since that’s where I stole the code from. Here is the list of data types you can implement this method for:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Of course, it will only work with modern browsers and not all types are supported across the different browser vendors.
Configure npm to use exact module version and save change to package.json
When you are using NPM it is important to make sure that you install an exact version of a package/module you are using. Not doing so may lead to headaches when the developers maintaining the module make an update with breaking changes, but do not tag the version correctly.
To do so, simply run npm config set save-exact true
It is that simple. you can also configure NPM to always save any changes to your package.json file.
To do so run: npm config set save-exact true