{"action":"opened","issue":{"url":"https://api.github.com/repos/frappe/erpnext/issues/7343","repository_url":"https://api.github.com/repos/frappe/erpnext","labels_url":"https://api.github.com/repos/frappe/erpnext/issues/7343/labels{/name}","comments_url":"https://api.github.com/repos/frappe/erpnext/issues/7343/comments","events_url":"https://api.github.com/repos/frappe/erpnext/issues/7343/events","html_url":"https://github.com/frappe/erpnext/issues/7343","id":197841540,"number":7343,"title":"Screen Reader Accessibility","user":{"login":"frastlin","id":10373653,"avatar_url":"https://avatars.githubusercontent.com/u/10373653?v=3","gravatar_id":"","url":"https://api.github.com/users/frastlin","html_url":"https://github.com/frastlin","followers_url":"https://api.github.com/users/frastlin/followers","following_url":"https://api.github.com/users/frastlin/following{/other_user}","gists_url":"https://api.github.com/users/frastlin/gists{/gist_id}","starred_url":"https://api.github.com/users/frastlin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/frastlin/subscriptions","organizations_url":"https://api.github.com/users/frastlin/orgs","repos_url":"https://api.github.com/users/frastlin/repos","events_url":"https://api.github.com/users/frastlin/events{/privacy}","received_events_url":"https://api.github.com/users/frastlin/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-12-28T11:52:47Z","updated_at":"2016-12-28T11:52:47Z","closed_at":null,"body":"Hello,\r\nI am evaluating Erp Next with\r\n[NVDA](http://www.nvaccess.org/)  \r\nThe free open source screen reader.\r\n\r\nMy general thoughts are:\r\n1. Labels need to be correct for edit boxes, select boxes and buttons.\r\n2. For results, the items should be in a <table> element.\r\n3. The headings are amazing!\r\n4. Scrolling content or form content that changes on key presses should be kept to the very minimum because the screen reader user does not know what is happening if they are tabbing through a form or arrowing through a form and the fields keep changing.\r\n5. autocomplete fields should use the datalist tag rather than relying 100% on a custom solution.\r\n\r\nHere is my review of the desktop and project screen areas. I will go through and review everything if the developers wish to work with me on fixing some of the problems:\r\nDesktop:  \r\nFirst there is a lot of information that doesn't seem to be relevant or is duplicated on the desktop. For example:\r\n\"Project\r\n1\r\nProject\"\r\nare the first 3 lines of the app area. The first project should be removed and really everything should be on one line. I am guessing that the middle number is the number of projects. I would say that something like:\r\n`<a id=\"projects\" href=\"#\">Projects (1)</a>`  \r\nwould be much cleaner, accessible and allow for greater functionality.\r\n The next line looks like:\r\n\"TimesheetTimesheet\"\r\nWhich does not look consistent with the projects section. I am guessing that there is a project created and no time clock entries, but having it in this way is very difficult to understand.\r\nThe items are not in a link or clickable tag, so I only can guess on what I click on. Tab does not cycle through the items and when I send my key strokes through to the app, there is no role=\"status\" to alert the screen reader that a new element is selected.\r\nNext, on the very bottom of the desktop I see:\r\n\"2 results are available, use up and down arrow keys to navigate.\r\n4 results are available, use up and down arrow keys to navigate.\r\n7 results are available, use up and down arrow keys to navigate.\"\r\nWhen I send key strokes to the app, nothing is read out and nothing seems to change in the desktop view. I also don't understand why there are 3 different result messages.\r\nProject Screen:\r\nLove the heading just FYI,most ERP systems don't have them and I love to see that they are here.\r\nMost buttons are labeled correctly, but there are two buttons under the button:\r\n`Status = \"Open\"`  \r\nthat are not labeled, so I can't tell what they do with NVDA.\r\nThe sample issue is OK,, but the checkbox is not labeled with the name of the item it is connected to. Because this is not a table (and I really think it should be), the screen reader user will use their x key to jump between projects and they will want to hear the project name when they move between check boxes.\r\nAt the bottom of the screen I see:\r\n\"20\r\n100\r\n500\r\n1 result is available, use up and down arrow keys to navigate.\"\r\nI think these may be the number of results per page and the bottom line says how many items there are. But I am guessing. What would be better is if this was a <select> box asking the user how many items they wish to have for each page and the results should be on the top of the page, right above the results and next to the show results per page. I am not sure how screen readers will handle lots of results when they steal the up and down arrow key presses from the web browser and it takes a bit of maneuvering to send the arrow keys to the web browser. If I get a whole new page with a key press then it will be fine, but if it scrolls, then I would see a screen reader user going crazy because they never know what is showing up on the screen with a scroll. Alternatively there could be an edit box that shows the page number and when the user changes the number the page will change. Or a prev and next button would work as well.\r\nThe project name is a link and that is perfect.\r\n\r\nProject item screen:\r\nAgain, love the headings. Everything is fine until:\r\n\"Gantt Chart\"\r\nUnder that there are 32 unlabeled graphics. There is then a graphic labeled \"JAN\", then 30 more unlabeled graphics,then \"FEB\" 30 more unlabeled graphics, then \"MAR\", 30 more graphics and then \"APR\"... The unlabeled graphics go all the way down to \"Dec\". I am guessing this is a calendar of some kind, but I don't know what should be shown there.\r\nCalendars are very difficult to make for screen reader users, so I would recommend a single graphic for the whole calendar, expand button for the calendar and a place that says the important information.\r\nThe headings are great, then the <select> boxes do not have a label with them, so when the screen reader user tabs and shift tabs through the edit fields, then they won't know what the box is for, just what is in the box.\r\nThe tasks again should be in a table and have some way for a screen reader user to jump between them and quickly read them. Having a check box would work, having a link on the title would work, having a graphic on the title would work. As it stands, the screen reader user has to arrow through every item for every task to get between tasks. This should really be in a <table> element.\r\nThe comment box does not have a label either.\r\n\r\nWhen I click on \"notes\" under the \"add new row\" button I see:\r\nnotes\r\nlink b\r\nand 13 empty links.\r\nI am guessing that these are bold and all the styling links. If they had text in them it would help a lot.\r\nStart and end dates doesn't seem to have anything in it.\r\nCOSTING AND BILLING:\r\nAgain, none of these edit boxes have <labels> for them. Just as an html note, numbers should be in <input type=\"number\"> tags, but that doesn't necessarily improve accessibility.\r\nWhen I arrow over \"default Cost Center\", I hear \"3 results are available, press up and down arrow to navigate. This is OK. Also when I hit up arrow, the same message speaks, when I am on what should be the label. The message should only trigger for when I am in the edit box.\r\nWhen I enter the edit field and hit down arrow, I hear our company name first which is great. Then the next press of the down arrow has the screen reader read:\r\n`<span class=\"text-primary-option\" ...`\r\nand it reads the whole span html tag rather than just advanced search.\r\nWhen I arrow back up to our company name and hit tab, the option should populate in the boxes' value, but it doesn't. I am afraid of hitting enter to accept it because many forms submit when one presses enter.\r\nA good choice when having boxes like this is to use the <datalist> element in html. It has all the functionality one needs.\r\nWhen I go back and click the add new row button, the cursor should pop into the title field of the new row. Instead I need to go click on the field of the new row It is difficult because there is just clickable elements with no label (which would go away in a table), and hope I am clicking on the new task. The fields in the task are not labeled either.\r\nWhen I click on \"new email\", the exact behavior that I would like in the new task happens. I am popped into the \"to\" field of the new email dialog. Again these edit fields are not labeled.\r\n\r\nWhen I go back up to the top heading and click on \"Menu \", the screen reader is placed into edit mode as if that button was an edit field. This is unexpected behavior and I'm not quite sure why that happens.\r\nWhen I click on the print button, a standard print dialogue should show up, but instead a custom form shows up. The edit boxes on this screen are not labeled and there is no text above the box that explains what the box is for.\r\nUnder the box that says \"standard\" there is another box that when I enter and press up and down arrow keys, will only read every other option. This is not normal and I'm not quite sure why it happens, I would need to play with the code.\r\nEverything looks good until the heading. There is a blank line with a heading, then \"ERPNEXT IMPLEMENTATION\" (the name of the project), then a line that has an unrecognized character, \"ERPNext Implementation\" again then 6 lines of unrecognized characters. TheN:\r\n\"% Complete Method\r\nTask Completion\"\r\nthen 2 more lines with unknown characters then:\r\n\"% Completed\r\n0.0% \"\r\nThen there is a table where the <th> items are unknown characters (blank). The rest of the table looks great and should be what is shown in all results pages.\r\nUnder the table there are a ton of numbers that don't have any explanation on them then our company name.\r\nAt the bottom of the page there are the ever present:\r\n\"1 result is available, use up and down arrow keys to navigate.\r\n3 results are available, use up and down arrow keys to navigate.\r\n3 results are available, use up and down arrow keys to navigate.\"\r\n\r\nI already did the email screen.\r\nThe links screen should be a table. Other than that it looks OK, I don't understand what exactly it is for, so I won't play around with it.\r\nThe rename looks good.\r\nThe customize looks good but the fields section is in the same format as the rows that it is customizing, so it should be in a table.\r\nI unchecked \"table\" to see if it changes anything and clicked update, but now I don't see the menu option anymore.\r\nI go back into the project from the desk and click on add new project.\r\nThis screen is great other than the unlabeled boxes. The calendar table at the bottom of the screen looks great as well. It is a little unclear what the calendar table is for, but it is really the only way a screen reader user can read calendars. (but just having important dates show is always better because otherwise the user will get lost in the table and miss options.)\r\n\r\nThis is pretty much all the fields on the project area.\r\n\r\nI would be willing to help develop the front end so screen reader users could have this information. I would like some assistance with understanding how all the views and whatnot are laid out though. If the core development team is supportive I will spend the time to go through and analyze all the screens.\r\nIt may be easier in some cases to develop a new front end. Is that possible? Is the server just an api or is it all integrated?\r\nThank you,\r\n"}}
{"actor":{"display_login":"frastlin"}}