Is your website accessible?
Сlick the corresponding circle if your project meets the requirements
Your website may attract a broad audience. But reaching them requires that you meet diverse needs, like vision impairment, aging, or a slow internet connection. Accessibility is about allowing users to interact with your website in a way that is comfortable for them. This checklist will help you take a proactive approach and create a more empathetic Readymag website.
Note that some accessibility features, like mandatory visibility controls for audio and obligatory titles in form fields, are already built into Readymag widgets.
Your website may attract a broad audience. But reaching them requires that you meet diverse needs, like vision impairment, aging, or a slow internet connection. Accessibility is about allowing users to interact with your website in a way that is comfortable for them. This checklist will help you take a proactive approach and create a more empathetic Readymag website.
Note that some accessibility features, like mandatory visibility controls for audio and obligatory titles in form fields, are already built into Readymag widgets.
Is your website accessible?
Сlick the corresponding circle if your project meets the requirements
Images
Images
All images have alt tags
Visually-impaired visitors may be using a screen reader with their browser. Use alt tags to be more accommodating. Search engine optimizers also use them to improve a project’s search rankings.
To add an alt tag to an image, click the Semantics button in the widget settings and enter your desired text in the pop-up window. The attribute will then become a part of the project’s source code. To check that your alt tag is working properly, hover your cursor over the image—a yellow box showing the description should appear.
Â
Â
All images have alt tags
Visually-impaired visitors may be using a screen reader with their browser. Use alt tags to be more accommodating. Search engine optimizers also use them to improve a project’s search rankings.
To add an alt tag to an image, click the Semantics button in the widget settings and enter your desired text in the pop-up window. The attribute will then become a part of the project’s source code. To check that your alt tag is working properly, hover your cursor over the image—a yellow box showing the description should appear.
Â
Â
Texts
Texts
All heading levels follow a strict outline hierarchy
Heading levels should always be nested like a document outline. For example, an <h3> tag would designate a subsection within an <h2> section—meaning you should never come across an <h3> that isn’t preceded by an <h2>.
To modify text style, select a text fragment and choose Styles in the widget controls. Click on the downwards arrow beside a style’s title, and use Edit Style to change a font’s size, color, line height, alignment and tracking for your style, as well as set margins.
Don’t use images for text
Visually-impaired visitors can opt to scale up images, making them blurry and pixelated (vector images won’t lose quality when scaled up). The text must display properly when enlarged, so keep that in mind when choosing fonts and devising the composition and layout.
All heading levels follow a strict outline hierarchy
Heading levels should always be nested like a document outline. For example, an <h3> tag would designate a subsection within an <h2> section—meaning you should never come across an <h3> that isn’t preceded by an <h2>.
To modify text style, select a text fragment and choose Styles in the widget controls. Click on the downwards arrow beside a style’s title, and use Edit Style to change a font’s size, color, line height, alignment and tracking for your style, as well as set margins.
Don’t use images for text
Visually-impaired visitors can opt to scale up images, making them blurry and pixelated (vector images won’t lose quality when scaled up). The text must display properly when enlarged, so keep that in mind when choosing fonts and devising the composition and layout.
Colors
Build in a high contrast between objects and background
Some colors and color pairs may confuse visitors with color blindness. See the contrast checker at Webaim.org—it is an indispensable tool for measuring legibility. Also, make sure that color is not the only prompt used to convey information (avoid instructions like “select the red circle to continue”).
Do not hesitate to add Lightbox to images. The overlay effect highlights images by filling the screen and dimming out the rest of the page. To enable this feature, click the Lightbox attribute in the Picture widget settings and adjust the background color and transparency.
Â
Â
Animation
Don’t incorporate seizure-triggering animations
Flickering lights may trigger seizures in users with epilepsy. Web content that flashes or blinks should do so at a slow rate to avoid this risk. The defined threshold is no more than three flashes in one second.
Links
All links have descriptive titles
Make sure the titles of your internal pages are brief and descriptive. This helps people using screen readers know what page they’re on as soon as they land there. Page titles in Readymag can be changed in Project Settings.
Â
All links to documents contain the document type and size
If you link to a document, make sure that you state what type of document it is (DOC or PDF) and the file size.
Â