This is a testing site only. See the live Public Lab site here »

Public Lab Research note

GSoC proposal: Site Wide Accessibility on

by suyash1814 | March 06, 2020 04:45 06 Mar 04:45 | #23086 | #23086

GSoC 2020 Proposal: Improving Site Wide Accessibility of

About me

Name : Suyash Choudhary

Affiliation : Birla Institute of Technology and Science,Pilani Pilani Campus, Rajasthan(India)

Github : @sssash18 (Suyash Choudhary)

Location: : Pilani, Rajasthan(India)

Project description

Site Wide Accessibility on

Abstract/summary (<20 words):

Improving the site wide accessibility of

Implementing some checks to ensure better accessibility in future development processes on

Problem What problem(s) does your project solve?

The project aims to improve the site wide accessibility on by insertion of alt-text on all images on, performing accessibility scans and color contrast scans(for color blindness analysis) through the use of axe-core and solve the detected issues .It would also implement certain measures through use of accesslint and axe-core to for ensuring accessibility in future development processes on

Issues to be solved

  1. Generation of alt text for images.
  2. ARIA implementation.
  3. Accessibility issues and Color Blindness Analysis.
  4. Automatic linting of pull requests.
  5. Maintaining coverage for future development processes.


1. Generation of alt text automatically:-

For people with visual impairments they use screen readers for accessing the website. The screen readers in the absence of 'alt text' just read 'image' in place of the image at the site.

Therefore to generate alt text for such a large number of images on 'Microsoft's Azure Computer Vision API will be used .This will be done with the help of 'microsoft_computer_vision' gem.

Steps to generate alt-text for images :-

Description :-

1. Generating a column in images table to store the alt-text for images


class AddPhotoDescriptionToImages < ActiveRecord::Migration[5.2]

def change

add_column :images, :photo_description, :string



The above code would add a new column photo_description in the images table.This column would save image description for each of the associated images which would be used later on for the alt text.

2. Adding the required gem file('microsoft_computer_vision')


gem 'microsoft_computer_vision'

3. Creating a module in to set up the API

A module will be created that would handle all the backend requests for analyzing a particular image and handling the responses received.


require 'json'

module ImageText

def describe(IMAGE_URL)

subscription_key = ENV['SUBSCRIPTION_KEY']

client =

options = {






The response of this request made by this module will be returned in a JSON format as shown below:




















"text":"partridge in a pear tree",






The part of the response relevant to our aim description["captions"]["text"].

Now this part of the response body (descriptions["captions"]["text"]) will be saved in the above created column in the database for future uses.

The above module created will be included in the Image model.

include ImageText

Now the above setup will be used to generate alt text for two kinds of images.

A method would be created in the images_controller that would call the module method




def alttext(image_id)

@image = Image.find_by(image_id)

@image.photo_description = @image.describe(@image.path)




Now this method will be called at all the places where images are rendered in the views. For example:-




<% if node.main_image %>

<img src="<%=

node.main_image.path(:default) %>" style="width:100%;" alt = <%

node.main_image.photo_description || node.main_image.alttext %>/></a>

<% elsif node.scraped_image %>

<img src="<%= node.scraped_image

%>" style="width:100%;" /></a>

<% end %>



The below flow chart summarizes the whole process:-

Image for expected results



2. ARIA Implementation

Currently just native HTML can't do everything. ARIA can be used to solve accessibility issues that can't be solved by native HTML. ARIA works by augmenting and changing DOM accessibility tree. The below list shows the use of ARIA that will be used to solve the accessibility issues in

The below list shows the use of ARIA that will be used to solve the accessibility issues in

a) aria-label for buttons with no labels

A button with no label gives no information to the screen readers.So ARIA can be used to provide a label that is only exposed to assistive technology APIs. The use case of aria-label with search button in navigation bar is shown below: