Skip to content

Accessiblity #a11y issues #1333

@growdigital

Description

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions