H4ck3rm1k3 avatar

Make utopian accessible to disabled users

h4ck3rm1k3st33m

Published: 02 Dec 2017 › Updated: 02 Dec 2017Make utopian accessible to disabled users

Make utopian accessible to disabled users

There are many blind and otherwise disabled open source developers. We need to make the UI of utopian accessible to them.

One issue is keyboard accessibility, another are popups and other notifications that disappear on the screen. Utopian will have to modify the website but also require contributions to be accessible to disabled users. For example images need to have a usable alt text, videos will have to have captioning.

I ran a quick check tool on the main website and it came up with : https://achecker.ca/checker/index.php

2.1 Keyboard Accessible: Make all functionality available from a keyboard.
image

1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background. Use of Color (A) Check 86: script may use color alone.

image

Using the AXE Plugin for chrome, https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd

it came up with the following issues :

  1. ARIA attribute is not allowed: aria-selected="false"
    https://dequeuniversity.com/rules/axe/2.4/aria-allowed-attr?application=AxeChrome
    This is in the li element with the class "ant-menu-item Topnav__item-write" and the role "menuitem" you will see the aria-selected="false" which is not allowed.
    ARIA attribute is not allowed error

  2. Required ARIA children role not present: listbox textbox
    So for searches aria expects a listbox to be in the child element.
    https://dequeuniversity.com/rules/axe/2.4/aria-required-children?application=AxeChrome
    Required ARIA children role not present

  3. ARIA attributes must conform to valid values
    aria-activedescendant=""
    https://dequeuniversity.com/rules/axe/2.4/aria-valid-attr-value?application=AxeChrome
    ARIA attributes must conform to valid values

  4. Buttons must have discernible text
    Location .EditorToolbar > button.ant-dropdown-trigger
    the font size button.
    image

  5. Elements must have sufficient color contrast
    Element has insufficient color contrast of 2.39 (foreground color: #99aab5, background color: #ffffff, font size: 13.5pt, font weight: normal)
    div.GithubRepos

  6. element must have a lang attribute

  7. Images must have alternate text
    example img[src$="utopian-logo-120x120.png"]

  8. Form elements must have labels
    image

  9. Links must have discernible text
    image

  10. Zooming and scaling must not be disabled
    image



Posted on Utopian.io - Rewarding Open Source Contributors

Leave Make utopian accessible to disabled users to:

Written by

Programmer+Sysadmin = Devops?

Read more #utopian-io posts


Best Posts From H4ck3rm1k3

We have not curated any of h4ck3rm1k3st33m's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.

More Posts From H4ck3rm1k3