Take readers from your story to another destination with a linked button.
Buttons can easily be added to your story by clicking INSERT BUTTON from the insert bar that appears above and below content blocks in most sections:
This adds a button styled to match the applied story themstory theme:
The text that appears on the button, and the link destination can be modified by clicking direclty on the button or on the pencil (button options) icon that appears in the mouse-over menu on the button - and then changing details in the resulting popup window:
When adding a link to your button, be sure that the link address you provide will be accessible to the readers of your story and isn't, for instance, a link accessible only from within your network.
Button style
The design of the button can be modified by choosing the paintbrush (button styles) icon in the menu:
This will open a secondary menu from which the text colour and font, button corner shape, border, background colour, shadow, and more can be modified chosen or modified:
Make a 'Download' button
To have the button trigger a download action for a file simply include the file's network location or 'share link' as the link provided when you edit the button. Some file storage services such as Google Drive or DropBox will require that certain permissions are set on files stored there so that they can be accessed via external links. To have a stored file able to be accessed from your story, you may need to set the file's share permissions to be accessible to eg: 'anyone' , 'everyone', or 'anyone with the link', etc.
Aria labels for button accessibility
An aria-label is an HTML attribute used to enhance web accessibility. The label is present in the code rather than directly viewable, and aids screen reading software to understand and communicate the purpose of buttons and links.
When should I add an aria-label to my button?
An aria-label isn’t required for every button. However if your button text is vague, like 'Click me ', an aria-label can provide a screen reader with relevant contextual information such as what happens when the button is clicked. For instance, if a button with text 'Click here ' opens a new story with the title "The Magic of Storytelling", some of your readers would benefit from extra information regarding what will happen when the button is clicked. An aria-label with the text ` Open article “The Magic of Storytelling”` can be read aloud by screen reading software to clearly inform your reader about the action, improving accessibility of your story.
Tips for making an effective aria-label.
Be Descriptive. Provide detailed information about what happens when the button or link is clicked. Avoid using generic text like ‘Click here ’ and opt for more meaningful descriptions such as ‘See other stories like this ’, or ‘Open the donation form ’.
Avoid Duplication. If your original button text contains enough information about the action then you probably don’t need to add an aria-label. For example, if your visible button text already contains ‘Open navigation menu ’, there’s no need to add an aria-label with the same information.
Don’t include element names (‘button’ or ‘link’). Elements such as buttons and links are already identified in the code and described as such by the screen reader. Although we might think it’s helpful to add an aria-label like ‘Button that opens login page ’, it’s redundant for accessibility purposes. A better aria-label would be ’Open login page '.
Keep it short. Ensure that your aria-label is succinct. Although it’s important to provide enough detail, make sure that it isn't too long as the screen reader needs to vocalise it all.