Problem/Motivation
in #2762505: Introduce "outside in" quick edit pattern to core the designs showed this message when enabling edit mode:
Title: You are now in edit mode.
Message: Click anything to edit. Menu links are turned off. Leave edit mode to go to a different page.
We probably want to update this text or at least confirm this is still correct.
Proposed resolution
Determine a concise message that describes edit mode.
Related: We determined #2877088: When in Edit mode Inform the user when they are configuring something that changes more than the current page is not necessary.
The actual displaying of the message is being implemented here: #2773601: Display "You are now in edit mode" prompt when user enters edit mode.
This issue is just to determine the wording.
Remaining tasks
Pick the message.
User interface changes
API changes
None
Data model changes
None
Comments
Comment #2
tedbowSuggestion for message
"Click on any highlighted area to edit. Links and forms have been disabled. Leave edit mode to go to a different page."
Comment #3
tedbowComment #4
yoroy CreditAttribution: yoroy at Roy Scholten commentedMaybe for the message we can get away with just:
Click a page element to edit it.
The bit about menus and forms being disabled to me sounds like we're explaining that we thought about how this should work. Well, well done us but no need to communicate that to the user :)
Aside: I'm not sure about expressing state in the label of the Edit button though. Maybe the button should say "Exit edit" when in edit mode instead of "Editing".
Comment #5
jalpesh CreditAttribution: jalpesh as a volunteer and at Cybage Software Pvt Ltd. commentedMy suggestion is
"Click on highlighted area to edit. Leave edit mode to go to a different page."
Comment #6
tedbowLinks and forms have actually been disabled in edit mode
So
Is true for the areas on the page except the toolbar, the contextual links and the tray itself. For instance if you click on anything on the search block it is does not submit the form but open the Settings Tray for the block.
Clicking the site name in the branding block will open that forms tray in the block instead of the going to the home page.
But I agree we could leave that part out.
I am fine with "Click a page element to edit it."
Comment #7
tedbowIs there a way we can make the problems mentioned in this issue #2785497: "Outside in" workflow is not clear re contextual links and pencil icon less of a problem by having a clearer message?
Maybe " "Click a page element to edit it. Click on the pencils for more options."
Comment #8
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer commentedI like the suggestion from #4, which is short and simple.
A couple of suggestions I'm skeptical of, for accessibility...
#7: "Click on the pencils for more options." Can a screen reader user find these "pencils"? Think about what the accessible (text) name of the button is, because that is what a screen reader will announce when the pencil is focused.
#2 and #5: "Click on any highlighted area to edit". I'm wondering how a screen reader user identifies the highlighted areas. Maybe it comes from the accessible name of the pencil/buttons. This doesn't work so well IMO in the buttons we currently have from contextual.module, where every button/menu has the repeated phrase "open configuration options", "configure block". I think we could make these names a bit more specific without adding verbosity, e.g. a button called "edit title block".
Comment #9
tedbow@andrewmacpherson is considered bad practice to have 2 different messages for what we should on the screen and what you put out with Drupal.announce() for screen readers?
Comment #10
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer commentedRe: 10 - that's an interesting judgement call. I'd say "last resort" rather than outright bad practice. Not very elegant - it's going down the road of alternative accommodations, rather than truly inclusive design.
Having said that, much accessibility comes down to what we can get away with. In Drupal core, the toolbar admin UI in CKEditor module has quite a lot of help in Drupal.announce(), so we've taken that approach before.
This issue is the sort of thing that would benefit from tests with real AT users, but of course we've got to build something before we can get that kind of feedback. We can refine it in future releases.
An idea: keep the "now in edit mode" message short and simple, and consider using
aria-describedby
for information about individual buttons and links. This would be persistent text that can be found when exploring a UI, and respect the verbosity settings of some screen readers. Drupal.announce() messages are only spoken once, so a user might miss them. (In fact, they're not guaranteed to be spoken at all.)The forthcoming
aria-roledescription
property in ARIA 1.1 might turn out to be useful, but we're waiting on browser and AT support. It would supplement the name of a button, unlike aria-label which would override it.Comment #11
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer commentedAnother idea. Instead of saying "click on the pencils", we could have the message say "click on the edit buttons" and include the pencil icon in the message tooltip as a bonus clue for sighted users.
An admin theme in contrib could replace pencils with another icon, without having to change the message text or accessible name.
Comment #12
yoroy CreditAttribution: yoroy at Roy Scholten commentedWe only need to discuss the pencils bit if we think it's useful to add it :)
This sounds like the actually accessible design approach. @andrewmacpherson something to break out into it's own issue I think?
Comment #14
tedbowChanging to new settings_tray.module component. @drpal thanks for script help! :)
Comment #15
yoroy CreditAttribution: yoroy at Roy Scholten commentedAre we good with "Click a page element to edit it." then?
Comment #16
tedbowRe #15 yes that sounds good. Closing this issue and will update #2773601: Display "You are now in edit mode" prompt when user enters edit mode
UPDATE: added this change to #2773601-62: Display "You are now in edit mode" prompt when user enters edit mode.
Let's get that one done!