At Maglr, we strive to provide our users with the right tools and a user-friendly platform to create accessible content for all audiences. Because when it comes to creating digital content and web accessibility, it’s all about usability.
In order to create the best possible experience for your viewers, each created or placed content element in the Maglr editors have their own accessibility options. You will find the best practices on each type of element below. For the surrounding navigation environment, no further action is necessary. Maglr has automatically made this environment accessible by default. All content that is placed here is automatically picked by screen reading software in the correct order.
NOTE! This accessibility-enablement feature is currently only available in the Pro editor.
A general rule of thumb for accessibility in Maglr is to keep your page simple in terms of structure and design. Don't create a complex layered page with content that is too complicated, as it could be confusing for viewers that are reading the publication with screen reading software or other assistive technology.
Accessibility options per content element
- Title: while texts don't need an extra description, it's very useful for both screen reading software and search engines to determine the type and importance of title text. You can set a heading level for each title, starting with h1 (most important) and going up to h6 (least important). Be sure to use title element for titles, and applying a heading level through the Settings menu in the Objects tab on the right side of the editor.
- Text: check the Accessibility Checker (under Options at the top bar), to make sure your text and other elements are picked up by screen reading software in the correct order. Also, we advise not to use small font sizes, since they are harder to read for viewers with visual impairments. Created (hyper)links can't receive extra attributes, so the text itself should explain what the link is about.
- Images: images need a clear (meta) description of what the image is about. If the image doesn't provide any useful information, you can simply hide it from screen readers. If you leave the description empty, the screen reader will pick up the layer name of the given element.
- Buttons and links: edit the description text of the button to inform readers about what happens when they click the button. This also applies to elements to which a click action is applied.
- Video: next to a description, you can upload a subtitle srt.-file for your local video (uploaded through Maglr) through the settings menu in the object tab on the right side of the editor. For YouTube/Vimeo, you can upload your subtitle file through these platforms.
- Audio: be sure to provide a clear description as to what the audio element is about. For page audio (set through the page tab in the configuration panel on the right side of the editor) it is impossible to set a description. Be sure to never set vital audio through this option.
- Slideshow: slideshow elements only have one description to describe what the slideshow is about. It is impossible to set a description per image used here, so be sure to describe the contents of the entire slideshow as best as possible here.
- Chart: add a description to the chart that explains what can be seen in it. A description can't always tell the whole story, but make sure the general message is communicated here.
- Forms: make sure to provide a clear description for all possible form items for your viewers. This can include input fields, but also success or error messages. Especially for error messages, let your viewers know what they missed or should enter instead.
- Groups: groups can only receive a description when a click action is applied to them. The description should tell the viewer where they are being directed towards. If groups are only decorative, you can hide them (including all elements!) from screen readers.
- Colors: color contrast can be very important for people who are blind, have bad sight or in anyway is visually impaired. Especially text and background colors are important, so make sure they can be distinguished by all viewers. Also check the colors of the surrounding navigation environment through its settings in the dashboard.
- Pages and scenes: both pages and scenes should receive a name that explains the content that can be found on it. By setting these names according to the page contents, visitors using screen readers can more easily navigate through them.
- Animations: animations can cause epileptic seizures, so keep in mind not to use fast and/or repeating animations. It's impossible for visitors to stop animations in Maglr publications, so don't use too many animations and make sure that they don't last longer than 5 seconds.