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

Public Lab Research note

GSoC proposal: Site Wide Accessibility on PublicLab.org

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


GSoC 2020 Proposal: Improving Site Wide Accessibility of PublicLab.org

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 PublicLab.org

Abstract/summary (<20 words):

Improving the site wide accessibility of PublicLab.org.

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

Problem What problem(s) does your project solve?

The project aims to improve the site wide accessibility on PublicLab.org by insertion of alt-text on all images on PublicLab.org, 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 PublicLab.org.

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.

Implementation

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 PublicLab.org '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

Migration

class AddPhotoDescriptionToImages < ActiveRecord::Migration[5.2]

def change


add_column :images, :photo_description, :string


end


end


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')

Gemfile

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.

app/api/imagetext/imagetext.rb


require 'json'


module ImageText


def describe(IMAGE_URL)

subscription_key = ENV['SUBSCRIPTION_KEY']


client = MicrosoftComputerVision::Client.new(subscription_key)


options = {


....


}


....


end


end


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


{result.body}


{

"tags":[

{

"name":"outdoor",

"score":0.976

},

{

"name":"bird",

"score":0.95

}

],

"description":{

"tags":[

"outdoor",

"bird"

],

"captions":[

{

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

"confidence":0.96

}

]

}

}


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

app/controllers/images_controller.rb

.

.

def alttext(image_id)


@image = Image.find_by(image_id)


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


@image.save


end

.

.

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

app/views/dashboard/_node_question.html.erb

.

.

<% 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 PublicLab.org.

The below list shows the use of ARIA that will be used to solve the accessibility issues in PublicLab.org:-

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:

app/views/layouts/_heaader.html.erb