decaporg / decaporg/decap-cms

Accessiblity #a11y issues

Open
#1,333 9 comments 6 reactions 0 assignees View on GitHub
area: accessibility pinned type: bug
Dominant language
JavaScript
Stars
19.4k
Forks
3.1k
Avg merge
1d 14h
Merged PRs (30d)
9

Description

**- 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](https://addons.mozilla.org/en-US/firefox/addon/wave-accessibility-tool/), 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](https://addons.mozilla.org/en-US/firefox/addon/web-developer/) - 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.**

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.