Release 0.2.4 – Accessibility

Hacktoberfest is coming to a close, it is week 4! Last week was really good. I have gotten into the hang of how GitHub and contributing to the open source community works. I have learned quite a bit over the course of the past four weeks, but I will get more into that later. First up new week, new issue.

This weeks challenge was to find a issue in a project maintained by a major company. I had previously spent a lot time looking through the GitHub accounts of many major companies. I found it really difficult to find projects I was interested in working on and issues that weren’t already claimed that I could work on. In end I found the perfect project.

Accessibility Insights for Web

Chrome web store page for Accessibility Insights for Web

Accessibility Insights for Web is an Chrome/Edge extension made by Microsoft that helps developers make their websites more accessible. It has two main functionalities, FastPass and Assessment. FastPass quickly finds basic accessibility issues that are more common. It also very helpfully suggests changes to fix said issues. Assessment is quite a bit more through, it provides guided tests to make sure your website is even more accessible. This project was really perfect for me. I was looking for a project that I felt inspired by. This project can actually help make a big difference in a lot peoples lives. The web has become so critical to every day life and inaccessible websites can be a major problem for those who are already have difficulties in normal life.

Issue #1219

The issue that was posted was regarding the actual accessibility of the extension it self. W3C has an accessibility initiative to make the web more accessible, as a part of that there are some guidelines regarding text spacing. Criterion 1.4.12 requires that websites are able to handle with no loss of functionality the following properties:

  • Line height (line spacing) to at least 1.5 times the font size;
  • Spacing following paragraphs to at least 2 times the font size;
  • Letter spacing (tracking) to at least 0.12 times the font size;
  • Word spacing to at least 0.16 times the font size.

When these properties are applied there is a small bug with the drop down menu, where the arrow overlaps text.

Switcher with overlapping text
Drop down arrow overlaps the text “Assessment”

Set Up

Setting up the project on my local machine was what I thought would be the hardest part of this project. I had up until now never tried to build and test a chrome browser extension. Fortunately for the the documentation for this project was very through. After forking and cloning the repo I ran the yarn command to install all the required dependencies. After that to test the version I was working on I simply had to run yarn build to build it. In Google Chrome under the extensions tab I had to select the “load unpacked” option and navigate to the folder I needed. After that the extension was installed on my computer. I could re build it when needed and click the refresh icon to reload the new version quickly.

Extensions page where unpacked extensions can be added

The Fix

Actually working on finding the fix was a tad bit more difficult than I initially thought. At first I was wasting a lot of time trying different solutions and rebuilding each time in between. On my laptop the rebuilding process took longer than I wanted and I spent a lot of time just waiting. Fortunately I realized there was a better way. I could just inspect the element in Chrome and make changes to the CSS. This let me near instantly see the changes as I made them.

In the end I came up with two different solutions as how to address the issue. I could either set the size of the drop down box to be wider or have it resize depending on the text in it. This was not something I felt I should decide, I did believe it would be best to keep the size the same since that is how the app behaved previously but I wanted to ask and find out for sure. I left a message (with gifs) in the issue asking what would be best. I quickly got a response which was good, but unfortunately it was pointed out I had another problem I need to fix. The drop down box ended up moving down ever so slightly out of the header. I am currently working on a fix for this issue. I will update this blog once that is done.

StaticDropdown
Drop down with fixed size
DynamicDropdown
Drop down with varying size

Original Repo: microsoft/accessibility-insights-web
My Fork: varshannagarajan/accessibility-insights-web
The Issue:  https://github.com/microsoft/accessibility-insights-web/issues/1219
My Pull Request: 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website at WordPress.com
Get started
%d bloggers like this: