Show your support for community science. Donate to Public Lab »

Public Lab Research note


GSoC 2020 proposal: Site Wide Accessiblity on PublicLab.org

by suyash1814 new contributor | March 07, 2020 06:16 07 Mar 06:16 | #23097 | #23097


About me

Tell us about yourself!

Name: Suyash Choudhary

Github: @sssash18 (Suyash Choudhary)

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

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.

Design and Implementation

Generation of alt text automatically

For Images already existing in the database

Design

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.

To execute the generation of the alt text following steps will be followed. First a request will be made to the 'microsoft_computer_vision' which in turn will return us the alt text.This will be stored in the database and will be used in the furture. So every image will make a single request and store that response in the database.

Implementation

Steps to generate alt-text for images :-

This will be done with the help of 'microsoft_computer_vision' gem.

Description :-

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

class AddPhotoDescriptionToImages 

 def change

   add_column :images, :photo_description, :string

 end

end

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

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. Now the above setup will be used to generate alt text for two kinds of images.

include ImageText

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

A method would be created in the images_controller that would call the module method 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

.
.

The below flow chart summarizes the whole process:-

For Images new to the database

Design

Users posting the new images in their posts will be asked for the alt text through a form field and those alt text will be stored in the column photo_description as created above.

Some mockups for the form field are shown below:

Implementation

To insert the form field following code will be inserted:

app/views/comments/_form.html.erb

For saving the alt text input:

app/controllers/notes_controller.rb

Such areas will be identified where images are uploaded like comments, post,etc and implemented as above.

ARIA Implementation

Design

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 .ARIA attributes like aria-label, aria-describedby,etc will be used to improve the accessibility.

Implementation

Implementation

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/header.html.erb

b) aria-labelledby and aria-describedby for forms

To describe the meaning of a label or to describe the user the kind of input that is required in the form, it can be done by aria-labelledby and aria-described by.For ex-

Signup form on PublicLab.org

In the password field for signup the accepted password has some conditions.To inform this to the screenreader aria-describedby will be used.


c) aria-live for alert messages
aria-live enables us to inform about the updates immediately to the assistive technology regardless of the page position. It can be used to inform the users of the alert messages.It will be used in two ways.

a) To inform the user of some positive alert .For example when the user has successfully logged in .For this event on the dashboard there appears a success alert dialog , so code changes for it would be:
app/views/dashboard/dashboard.html.erb

Here in aria-live="polite" ,the screen reader will inform the user after finishing it's current work.

b) In case of errors aria-live="assertive" will be used ,so the screen reader will be interrupted immediately and the user will be informed about the errors.
All the accessibility scans will be done with the help of axe-core accessibility tool which works on guidelines of WCAG.
All the above aria-changes (along with some more aria attributes) will be done with the help of a lot of 'first-timers-only' issues to expand the outreach of PublicLab.

Color Blindness Analysis

Design

Currently the buttons and error messages shown on the website just depend on the colours, but to improve the accessibility, it would be better to involve appropriate symbols .So to improve the accessibility for color blind users, the color contrast will be improved, appropriate symbols will be inserted for each button, error messages will be incorporated with symbols.

Implementation

1) Solving the color contrast issues:-
Currently there are a lot of pages on PublicLab.org with color contrast issues.For example the navbar. The color contrast for all the links on it dont have a great contrast and is difficult to recognise for people with color blindness. Such issues will be detected by axe-core and will be solved with help of many first timers only issues to enhance the outreach of PublicLab.

Currently only on the dashboard there are around 600 color contrast issues. So a new set of color scheme needs to be implemented which would be decided by discussing among the community members and implementing it.

2) Changing Dependence of buttons on symbols
Currently the buttons on the site just depend upon their colors .Such buttons may be not easy to recognise by some peoples. It will be a good idea to add relevant symbols to all major buttons for describing their role .For example the save button on edit profile has no relevant symbol. So it is a problem for color blind people. A symbol for it will be inserted as Before


After

Similarly Currently the error and the success flash messages are just identified by their color which is not appropriate.So a symbol indicating the error or success will be inserted.

Automatic linting of Pull Requests

Design

To inform the developers about accessibility issues during the development process itself, Accesslint will be used. Accesslint CI automatically comments on pull requests informing the developer about the accessibility issues.

Implementation

Currently Accesslint is only supported on circle ci, therefore circle ci will be set up in the first place.The in the file:

#circle.yml

Maintaining coverage for future development processes.

Implementation

To maintain code coverage for future development process a series of accessibility tests testing all the views for accessibility issues will be added with the help of axe-matchers gem with it's RSpec integration. This testing mechanism will be developed as follows:-
1. Setting up RSpec
Gemfile

group :development, :test do
gem ‘rspec-rails’
gem ‘axe-matchers’
end

rails_helper.rb

require ‘rspec/rails’ 
require ‘capybara/rspec’
require ‘axe/rspec’

Now a basic accessibility test will look like:
spec/features/home/home_spec.rbrequire 'rails-helper'

RSpec.feature HomeController do
scenario “home page must have no accessibility issues” do
driver = Selenium::WebDriver.for :chrome

driver.get('http://localhost:3000/')

expect(page).to be_accessible
end

The chromedriver is already installed for travis in the existing code, so it will be used.

To run the tests in travis:

In jobs section

- name: "Accessibility tests"
  script: rspec spec spec/features

The output of the tests will be like:

Such tests will be written for all the pages of PublicLab.org with various inclusion and exclusion clauses( like excluding the header and footer).

These all the above implementations will help PublicLab.org to be more accessible to it's users.

Timeline/Milestones

Needs

What resources will you need: people, documentation, literature, sample data, hardware if applicable
I will require the guidance of mentors for this project and is open for any help by the community members. The mentor's help and support will be the biggest resource that I will require to complete this project successfully.

First Time Contribution

I have been a active member for PublicLab since the beginning of January 2020. I have worked on issues involving both frontend and backend work.I have also opened a good number of first timers only issues to increase the community outreach. I have also reviewed some of the first timers only issues and helped the new contributors to get started smoothly. I have made around 14 commits till now in plots2 and have created around 29 issues in the repository and is currently working on some issues and would like to contribute even in the future.
** Recent activity:**

Comments, to show overall community involvement (like helping others):
Comments
Issues
Issues
PRs
PRs
Tell us how you've learned about writing software; what languages you've been learning, if you've worked on other projects, links to GitHub or other code repositories or samples.
I am a second year student pursuing Msc. Physics + B.E Computer Science from Bits Pilani, Pilani Campus. I have been learning Ruby on Rails for almost a year now, starting with a online Udemy course by Rob Percival and created some projects based on Ruby on Rails platform . I have also completed a course related to this project:
Web Accessibility by Google
Below is shown my skillset:
Skills
Languages
Ruby, Javascript, Python, C++,Java

Web Technology
Ruby on Rails
VCS
Git
I am comfortable in how to create pull requests and work in github and has become comfortable with the code base of plots2 which will help in smooth completion of the project.

Team Work

Describe teams you've worked with before, whether open or closed source, and in what capacity you participated. Cite examples of how you were self-motivated and self-sufficient.
I have participated in various team events. I with one of my friend created a Tourist guide application in java.
I have also taken part in various coding competitions in my college that require team participation .
Regarding team participation in PublicLab, it is overwhelming and joyful to work under guidance of great community members. In just a short span of my contribution to PublicLab I have learnt a lot from @SidharthBansal, @jywarren, @cesswairaimu and all other community members . I would like to work in this awesome team in the future as well.

Passion

What about our projects, and Public Lab, interests you? What are you passionate about? Open science, environmental justice? The basic objective of PublicLab is to solve the environmental issues together and share various awesome ideas and research notes related to the environment by all the users of PublicLab. This inspires me to work for this organization. Also through my knowledge of code I would like to solve a real life problem which could bring change in people's lives . My project on improving 'Site Wide Accessibility' inspires me a lot to make the life of the users who are not able to access the website in a normal way, a little easy .

Audience

Whom do you want your work to help? We especially appreciate proposals which make technologies and techniques more welcoming and friendly to those who've often been excluded.
Through this project I would like to help the differently - abled users of Public.org who after the project's completion would be able to access the website in a more easy and smooth manner. It would be a great feeling to help such people and making contribution to make their life a bit easy.

Commitment

Do you understand this is a serious commitment, equivalent to a full-time summer job? Tell us how you'll structure your schedule from day to day!
I fully understand the seriousness and the commitment required to complete this project and I am ready to devote myself fully to complete this project in the summers. I would be able to devote 6-7 hours daily for the completion of this project.


26 Comments

@warren @bansal_sidharth2996 Please have a look on my proposal and share your views. Also please guide me on accesslint. @bansal_sidharth2996 Testing done by axe matchers could do all tests in one go , So would it be appropriate to include testing after each task completion? Thanks!

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


Hi Suyash, it is superb! I loved the your hardwork in searching out the solutions to the problems. I think we will be inclined to circle ci. But let's wait for Jeff's input. Thanks. Great work! Sidharth

Thanks @bansal_sidharth2996 for your inputs. What are your views on the testing thing ? Should it be done individually or all at the end, because axe matchers can do it all just by a single clause.

Is this a question? Click here to post it to the Questions page.


Reply to this comment...


Ok @bansal_sidharth2996 I'll update the timeline as suggested by you. Thanks!

Reply to this comment...


@bansal_sidharth2996 I updated the timeline , please have a look on it. Thanks!

Reply to this comment...


@bansal_sidharth2996 , somehow I am not getting any option to delete or comment on that proposal.


Let me try! Thanks!


Reply to this comment...


Please separate the design details from the implementation details. Example: Bulk Moderation is a high-level design while the Daily Digest is fine grain implementation. Solution: Divide it into 2 parts - Design and implementation. Write just the approach which you want to discuss in the design with er diagram/flow chart/dfd/ui/ux/mock ups etc. While in the implementation details write the core implementation details. Reason for this type of categorical arrangement: Many folks at PL are non-coders so they will be willing to help you, the design part is for them. Developers look at both.

@bansal_sidharth2996 are these related to my proposal as I don't have anything like bulk moderation in my proposal?

Is this a question? Click here to post it to the Questions page.


Also should I add implementation of circle ci for accesslint If you agree with this idea?

Is this a question? Click here to post it to the Questions page.


Reply to this comment...


Hi @suyash1814, great proposal 🎉 🎉 Love the mockups and code snippets.

You can make the code snippets more apparent by wrapping the code with "``" . I would like to see links to the contributions you have done(PRs and issues) and you could tell a little bit about yourself at the top(totally optional) . Is Microsoft's Azure Computer Vision API open source? we mainly use open source tools so just checking. Thanks

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


@cess thanks for your review. I have already provided with the links of my contributions. Also microsoft computer vision api is not open source, but it would be better if we use it at least for the images already existing in the database and prompt users to provide with the alt text in new posts.Please provide your views on it.Thanks!

I'm curious at how Markdown currently accommodates image alt texts, and how we could make it as easy as possible when people are uploading images (in terms of the UI design) to add them. What do you think could be done with the current comment and post editors in this regard? Would you be able to show some sketches or mockups of how it might work? Thank you!!!

Is this a question? Click here to post it to the Questions page.


Reply to this comment...


@bansal_sidharth2996 I segregated each section in design and implementation . Please have a look and provide your views. Thanks!

Reply to this comment...


@bansal_sidharth2996 @cess @warren Please provide your views on Accesslint(in Automatic linting of PR) in my proposal as I have to include it in my proposal before the deadline.

Hi, i think this is a great idea, and pretty cool that it's possible. What would the output of such linting look like to developers, and how might they be supported in improving their accessibility "score"?

Thank you!

Is this a question? Click here to post it to the Questions page.


@warren I will include the output of ccesslint in my proposal , so should I also add implementation of circle ci as Accesslint is only supported on circle ci ?

Is this a question? Click here to post it to the Questions page.


Reply to this comment...


Kindly update the timeline. Timeline got changed recently

Reply to this comment...


@bansal_sidharth2996 @warren @cess Please provide your final reviews on the proposal so that I can upload it on gsoc's website.Thanks! I have updated it as per the above suggestions.

Feel free to upload the proposal on the gsoc website. We will keep reviewing and suggesting changes here. No worries if proposal at Google website isn't the latest version.

On Thu, 26 Mar 2020, 4:11 pm , \<notifications@publiclab.org> wrote:

Hi! You were mentioned by suyash1814 in a comment on the research note GSoC 2020 proposal: Site Wide Accessiblity on PublicLab.org. You can reply to this email or visit this link:

https://publiclab.org/notes/suyash1814/03-07-2020/gsoc-2020-proposal-site-wide-accessiblity-on-publiclab-org#c26588

suyash1814 wrote:


@bansal_sidharth2996 @warren @cess Please provide your final reviews on the proposal so that I can upload it on gsoc's website.Thanks!


Reply at: https://publiclab.org/notes/suyash1814/03-07-2020/gsoc-2020-proposal-site-wide-accessiblity-on-publiclab-org#comments

Report abuse to: moderators@publiclab.org

Check out the blog at https://publiclab.org/blog | Love our work? Become a Public Lab Sustaining Member today at https://publiclab.org/donate If this email title has an ID in the format #0000, you can reply with the email you use at PublicLab.org and your response will be posted as a comment on the website.

Is this a question? Click here to post it to the Questions page.


Reply to this comment...


@suyash1814 This looks amazing! I love the flowcharts in particular! Everything here looks great!

Reply to this comment...


Login to comment.