As an event manager, your goal may be to attract a large, diverse audience to sell passes or promote your marketing objectives. Or you may have a specific audience in mind and want to ensure that everyone can navigate your website, including people with disabilities.
In either scenario, you want to prioritize accessible website design. Accessible website design ensures that users employing assistive technologies are able to access, navigate, and understand websites. Attendease website templates from the Magnolia theme family are all designed to adhere to WCAG 2.1 Level AA standards.
When you customize the design of these templates, however, you may be adding, removing, or editing elements in a way that compromises the level of accessibility so it's best to be informed about this topic. Keep in mind that designing accessible websites can be a full time job. This is not an attempt to provide a comprehensive guide, but rather simple strategies to help keep your websites accessible. If you wish to learn more about designing accessible websites or the WCAG 2.1 Level AA standard see this article on the W3C website.
Learn more about how Attendease is working to make our website templates accessible.
1. Analyze your website with a free evaluation tool
Evaluation tools help authors make their web content more accessible to individuals with disabilities and can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content.
Two evaluation tools are:
WAVE
axe
These tools will analyze your website and note any errors, contrast errors, alerts, features, structural elements, and aria.
2. Add alternative text to images
One of the simplest ways to make your site more accessible is to ensure that all relevant images include alternative text (or "alt text"). Alternative text is used within HTML code to describe the appearance and function of an image on a page that can be used by assistive technologies like screen readers. Attendease provides a field to add alternative text for any block that supports an image that needs alt text. For example, when you add a Card Row block, you'll notice a "Description" field to add alt text. Some images (like background images) are considered "decorative" and do not require alt text.
3. Ensure you use high contract colour combinations
To make your website is accessible you must ensure there enough contrast between text and its background colour. Some users may find it difficult to read text if there is not enough contrast. Contrast is the degree of difference between the lightest and darkest parts of a text element. To determine this, use one of the evaluation tools listed above. You can also use a tool such as Colour Safe to find colour combinations with a sufficient contrast ratio.
4. Ensure you use heading elements in an accessible way
Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation.
Skipping heading ranks can be confusing and should be avoided where possible: Make sure that a <h2> is not followed directly by an <h4>, for example. It is ok to skip ranks when closing subsections, for instance, a <h2> beginning a new section, can follow an <h4> as it closes the previous section.
To learn more about headings read the W3C article here.