Ready? Check!

Is your website accessible?

Is your website accessible?

Сlick the corresponding circle if your project meets the requirements

С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.

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

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.

 

 

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

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.

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

Colors

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.

 

 

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.

 

 

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

Animation

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.

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.

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

Links

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.

 

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.

 

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.

 

Navigation

Navigation

Navigation

Website can be navigated using a keyboard

People who don’t have the hand dexterity to use a mouse may be using arrow keys or assistive technology (for example, voice-controlled navigation). Check that reading and navigation order in your project is logical and intuitive. Also remove any function that uses timed keystrokes, like a double tap, to make sure all parts of the website can be accessed without a mouse.

Website can be navigated using a keyboard

People who don’t have the hand dexterity to use a mouse may be using arrow keys or assistive technology (for example, voice-controlled navigation). Check that reading and navigation order in your project is logical and intuitive. Also remove any function that uses timed keystrokes, like a double tap, to make sure all parts of the website can be accessed without a mouse.

Website can be navigated using a keyboard

People who don’t have the hand dexterity to use a mouse may be using arrow keys or assistive technology (for example, voice-controlled navigation). Check that reading and navigation order in your project is logical and intuitive. Also remove any function that uses timed keystrokes, like a double tap, to make sure all parts of the website can be accessed without a mouse.

Want to know when a new checklist is out? Subscribe to our newsletter

Want to know when a new checklist is out? Subscribe to our newsletter

Want to know when a new checklist is out? Subscribe to our newsletter

Sign me up
Sign me up
Sign me up