Accessiblity #a11y issues

[growdigital]

- Do you want to request a feature or report a bug?

Bug

- What is the current behavior?

Netlify CMS fails on a number of accessiblity issues:

1. Tab order is a bit awry
2. Use HTML elements, not divs: eg main, aside, button, nav, list items for posts
3. Duplicate h1 on same page
4. Colour contrast http://contrast-ratio.com/
5. Test with no CSS (icon size)
6. Alt text for img & svg
7. Match form labels with same id as form inputs

- If the current behavior is a bug, please provide the steps to reproduce.

1. Use the tab button to navigate around the application
2. Use a screenreader to navigate application
3. Using WAVE addon, under structural heading
4. 6 very low contrast errors on the contrast tab of WAVE addon
5. Turn off your CSS - I'm using the Web Developer Firefox addon - SVG icons are HUGE!
6. View source to see lack of alt text
7. Click on form label, associated form input isn't focussed.

- What is the expected behavior?

1. Tab button takes user in order through the interactive elements on the page
2. User can navigate application with screenreader
3. Single h1 on a page
4. Sufficient color contrast to make text legible
5. Application should still be usable with CSS turned off
6. Visually impaired users have alternative text for images and icons
7. Click on form label, associated input is focussed.

- Please mention your versions where applicable.

Netlify CMS version: ^1.0.0
Browser version: Firefox 59.0.2

Node.JS version: v8.9.1
Operating System: MacOS 10.13.4

- Please link or paste your config.yml below if applicable.

[erquhart]

Thanks for putting this together, Jake!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[rkingett]

I would argue a lot of these still apply in later versions of the CMS. For example,

1. Tab order is a bit awry
2. Use HTML elements, not divs: eg main, aside, button, nav, list items for posts
3. Match form labels with same id as form inputs. This one needs the most work.

[rkingett]

Form elements when adding a kitchen sink item do not have any labeled elements at all. That area is, at the moment, unable to be understood by a screen reader because buttons are not labeled and edit fields are also not labeled.

I am unable to tell which edit field does not have a label because the ones in the Kitchen sink section of the quick add menu are too numerous to list.

[jsjoeio]

Describe the bug
The "Login with Netlify" button does not have sufficient contrast.

Error: Elements must have 
sufficient
 color contrast (https://dequeuniversity.com/rules/axe/4.3/color-contrast?application=axeAPI)
10:53:25 PM:  ├── color-contrast
10:53:25 PM:  ├── #nc-root > div > section > button
10:53:25 PM:  └── <button class="css-tu1it6-LoginButton-button-default-gray-disabled e4hp3ji4">Login with Netlify Identity</button>

To Reproduce

1. Add Netlify CMS to any site
2. Add package = "@netlify/plugin-a11y" to nelify.toml
3. Deploy site to Netlify

Expected behavior
netlify-cms should pass @netlify/plugin-a11y test 😅

Screenshots

Applicable Versions:

• Netlify CMS version: 2.0.0
• Git provider: GitHub
• OS: Windows 10
• Browser version [e.g. chrome 22, safari 11]

• Node.JS version:

CMS configuration
N/A

Additional context

originally posted: #6061

Tips for solving

Also I think 8a14937fcc7167ae5a7960a692e8054c/packages/netlify-cms-ui-default/src/AuthenticationPage.js#L94 it is a good place to start

#6061 (comment)

[imskr]

@erezrokah Can I start working on it? Please assign me :)

[erezrokah]

Hi @imskr, since this issue encapsulates multiple 11ty issues, I would say that it's better if you pick on of these:
#1333 (comment)

and comment in the issue, which one you'll be working on.

That way, other people can contribute to other parts of the issue.

[imskr]

Hi @imskr, since this issue encapsulates multiple 11ty issues, I would say that it's better if you pick on of these: #1333 (comment)

and comment in the issue, which one you'll be working on.

That way, other people can contribute to other parts of the issue.

I want to work on color contrast issue as mentioned by @jsjoeio

[jsjoeio]

@imskr I submitted a PR for the one I mentioned but I'm sure there are other color contrast issues you could fix!