Mabble Celebrates #GAAD – Learn How to Make Your Website More Accessible

agostina laughing

We’re glad to be a part of #GAAD – Blog Author Agostina Renaud


The purpose of Global Accessibility Awareness Day is to get people talking about accessibility, and we’re happy to be a part of the conversation. As we learn more about this topic we can apply new techniques to make our deliverables more accessible. This includes brand guides, websites, photos, videos, copy, and other assets. ADA, or Americans with Disabilities Act, is a civil rights law that prohibits discrimination and works toward guaranteeing equal opportunities for all. But how can this be applied to the digital and world?


WCAG, Web Content Accessibility Guidelines, establishes guidelines and recommendations to make web content accessible. This guide is based on four principles to make up the acronym POUR; they are: perceivable, operable, understandable, and robust.


Here they are broken down into their simplest forms:


P: PERCEIVABLE. Information must be attainable by more than one sense (hearing, sight, etc)


O: OPERABLE. The website must not require an action the user cannot perform.


U: UNDERSTANDABLE. Users should be able to understand both the information and the user interface.


R:  ROBUST. Must be interpretable by a variety of assistive technologies.


WCAG has three levels of conformance to evaluate whether the website is compliant: A – Lowest, AA – Mid Range, and AAA – Highest. They stack on each other so if you are conforming at a AA level you are also meeting all A level requirements. AAA level requires so much that it is unlikely an entire site can be AAA compliant, it is more common to see specific pages conforming at that level.


We’ve learned a lot about accessibility, and continue to grow our skills to implement our intentional designs as we read about and discuss empathy and equity on the side.


If you’re looking to incorporate accessibility into your website, here are 6 things to quick check for:


1. Color contrast. Poor color contrast results in hard-to-read text, and this means your message may not be visible to some. Check for contrast on your website, and also on social posts and stories, newsletters, and brand guides.


2. ALT text. Did you know that screen readers scan photos? If you had to describe a photo to a friend, what would you say? Add ALT text to your photos in a friendly way to make your content more accessible.


3. Headings. They not only organize your content, they also set a hierarchy for your page. Make sure there’s only one H1 per page, and cluster your information with H2s and H3s accordingly. This helps people navigate your site efficiently.


4. Links and buttons. Use screen reader-friendly description for links and buttons. For example, for a ‘Learn More’ button you should include its topic so it reads “Learn More About Accessibility”.


5. Forms. Coding people and web devs: let’s make it mandatory to add labels to all input fields, shall we? We must also include focus status for all fields and clear error messages, otherwise we are limiting the use of our forms from a large population.


6. Zoom. Zoom your browser at 200%. Is your website breaking? Is there any information missing? Do you have to scroll horizontally? BIG NO NO. Be kind, be zoom friendly.


Even though the above items are very important, it is barely touching the surface of accessibility. Mabble is committed to bringing awareness to our team and adding these skills to improve our work so that our clients are also ADA compliant. Accessibility is about empathy, having the ability to look through multiple lenses, and the inclusion of all individuals with any visual, cognitive, physical, speech, or other impairment, whether temporary or permanent.


Contact us to learn more about how we work towards compliance together.


Written by Agostina G. Renaud


Mabble Media Web Specialist