Hannah Thompson
As a junior software developer, I was asked the question: "What accessibility features does your web application incorporate?" Admittedly, I had not yet integrated any such features. This interaction prompted me to begin the journey of understanding the implementation of accessibility features to better enhance the experience for all users.
This article will include details about the findings of my research, documenting my encounters with:
- NVDA (Non-Visual Desktop Access)
- WCAG (Web Content Accessibility Guidelines)
- Implementation of accessibility features in React code
NVDA: Non-Visual Desktop Access
NVDA, short for Non-Visual Desktop Access, is a software tool designed to assist blind and low vision individuals in interacting with the Windows operating system. I began my dive into accessibility with the installation of this tool. The process was pretty straightforward — I visited the NVDA website, followed the download instructions provided, and proceeded to install the software on my local computer.
Upon completing the download and installation, I was surprised to find my laptop audibly engaging with me. Every action I performed, from moving the mouse to navigating through applications, was followed by detailed verbal descriptions. Initially overwhelmed, I gradually acclimated to NVDA's precise audio feedback as I explored various elements on my screen.
While NVDA doesn't directly assist in coding implementation, it has significantly enhanced my understanding of accessibility. By providing specific descriptions of my actions on the computer screen and detailing what I was hovering over, NVDA highlighted the importance of features like alt labels and alt text in improving web application accessibility. I highly recommend downloading this software, as it is invaluable for testing accessibility features. Additionally, NVDA supports various languages, integrates with popular web browsers, and is regularly updated to ensure compatibility with new technology and standards.
WCAG: Web Content Accessibility Guidelines
My next stop was exploring the Web Content Accessibility Guidelines (WCAG). In my opinion, understanding the WCAG is crucial for anyone involved in creating or managing web applications. WCAG provides a set of standards aimed at improving website accessibility for people with disabilities. It addresses various aspects such as content visibility, ease of use, and compatibility across different devices. By adhering to WCAG guidelines, developers can ensure that their content is accessible to all users, regardless of their abilities, thus providing a better user experience.
By exploring the WCAG, I gained a clearer understanding of the specific features required to enhance the already existing functionality of my web application. Put simply, I learned what I needed to fix to improve the accessibility of my website based on what features I offered users.
Implementation of Accessibility Features: React
I designed a website using React, a language that is filled with pre-made components for building websites or applications. My web application, Bookshelf, functions as a social media platform enabling users to manage their personal libraries. During user testing, feedback highlighted the need for better integration of alt text and labels within the platform. For example, my images didn’t have labels, my edit and delete buttons weren’t labeled, and my edit profile form inputs were labeled incorrectly. Therefore, the user who was testing my application could not use it properly due to my lack of accessibility implementation.
Initially, I decided to read more into the accessibility features provided by React. After a quick Google search, I found that React offers an article that revolves around implementation practices. In this documentation, I discovered that React follows the WCAG guidelines and even includes links for developers to reference. Additionally, React uses components such as <label> tags, <Fragment> tags, and `aria-* attributes to provide developers with essential tools for enhancing the accessibility of their own applications.
I feel that it’s important to note that incorporating aria-labels incorporates accessibility by providing an accessible name for an element that does not have visible text or a visible label, while the alt attribute creates alternative text for images, both aiding users with visual impairments in understanding their purpose and function. While they are similar in function, they are used on different components. Also, using these attributes is important because implementing alt text ensures that screen-readers can effectively interpret the content rendered on the user's screen.
Before resorting to aria-labels, developers should ensure accessibility by adhering to several key practices. Begin with semantic HTML and ensure all interactive elements have visible labels. Use native HTML attributes like alt for images and labels for form inputs. These steps lay a solid foundation for accessibility, allowing aria-labels and other ARIA attributes to serve as supplementary enhancements when needed. However, since I used React to create my web application, I incorporated aria-labels as they are a key part of React's template structure.
After finishing the article, I began the process of incorporating accessibility features directly into my own code. My primary focus was on the addition of alt labels for all buttons, and form fields and alt text for all images. I noticed that certain components I had used from React already included the alt = "" or aria-label ="" attributes, making for an easier refactoring process. However, in other instances, I had to incorporate accessibility code from scratch, in these instances I used my resources such as React’s documentation for guidance. In addition, I also had to refactor incorrectly labeled form fields which was a simple fix once I had examples of properly functioning code. In the end, I tested the functionality of my website by navigating through it using NVDA software. This ensured that all alt-text was properly incorporated.
Code Examples
For those of you who are interested to see examples of my code implementation, I've included a few below:
Note: The aria-label attribute is typically used to provide alternative text for non-text elements, such as icons or images when the alt attribute is not applicable or sufficient.
Code Examples
Aria-Label on A Form Input: In this example, I am using an aria-label to label my input form for “User Name.” When the screen-reader hovers over the button, it will say “User Name.”
<p>
User Name
<Input name="userName" type="text" value={editUser.userName} onChange={handleControlledInputChange} aria-label="User Name" />
</p>
Aria-Label on a Button: In this example, I am using an aria-label to label my pencil icon as “Edit.” When the screen-reader hovers over the button, it will say “Edit.”
<Button color="primary" onClick={() => setShowForm(bookClub.id)}>
<Pencil aria-label="Edit" />
</Button>
Note: Notice the aria-label was placed within the icon, not the actual tag.
Alt-Text on an Image: In this example, I'm using the alt attribute with the value "User Profile Picture" to provide alternative text. When the screen-reader hovers over the image, it will say “User Profile Picture”
<img
style={{ width: "170px", float: "left", marginRight: "20px", borderRadius: "50%", border: "2px solid #000060" }}
src={user.imageUrl}
alt="User Profile Picture"
/>
Final Thoughts
As a junior developer new to accessibility, I found the process of learning and implementing these features fulfilling. Again, I highly recommend downloading NVDA on your local computer, as well as referencing the WCAG guidelines when you begin to add accessibility functionality into your own code. From understanding screen-reading software to coding implementation, it was an enlightening and necessary journey. It not only improved my skills as a developer but it also taught me the importance of inclusivity in technology. I hope this article prompts you to realize the importance of accessibility and begin to consider adding accessibility implementation into your own code.
Resources
Listed below are the online resources I used throughout the process:
NonVisual Desktop Access (NVDA): NVDA is free screen reader software for Windows, aiding visually impaired users to access digital content. Web Content Accessibility Guidelines (WCAG): WCAG provides the standards for making web content more accessible to people with disabilities. Accessibility Documentation (React): This is the documentation page on React's website discussing accessibility features; it covers guidelines, best practices, and tools for enhancing the accessibility of React-based web applications.
