image showing title of Global Accessibility Awareness Day

IEEE strives to provide an accessible digital presence to all people. To support this commitment, IEEE has adopted the W3C’s Web Content Accessibility Guidelines (WCAG) 2.0 Level A as the enterprise web accessibility objective. See the IEEE Accessibility Statement.

To renew our commitment to our members, volunteers, and employees, the Digital & Creative Innovations Team will be observing the Global Accessibility Awareness Day (GAAD) on 21 May 2020. The GAAD’s purpose is to raise awareness about digital accessibility and digital inclusiveness where people can collaborate, learn, and apply latest methodologies in their online experiences.

But what is digital accessibility? 

Digital accessibility is an array of practices employed to build an application or a website. Such web practices will aid those who have visual, auditory, speech, motor, or cognitive challenges (either temporary or permanent), when browsing through an IEEE website or reading IEEE content. Digital accessibility also impacts those having low internet bandwidth in remote areas, often requiring digital content that is accessible for faster loading and viewing.

While it may seem like a tough objective to attain, making small adjustments to your website or email communications can make a significant impact on accessibility and usability. 

Five techniques to make your website or email communication more accessible:

1. Use alternative attributes for images 

Users who have low vision often employ screen readers to “listen” to the content published on a website. We can augment their experience by simply adding the alt attribute with a detailed explanation depicting the content of the image. This is also useful when images cannot load on a website due to low bandwidth.

image showing man with head phones using a screenreader that reads the alt attribute of images

2. Check color contrast

image showing contrast issues with text and buttons

Users with varying levels of color blindness or low vision can have issues viewing certain colors online. To combat this, the ratio between the text or a link and the background must be at least 4.5 to 1 to comply with Level AA of WCAG 2.0.

To achieve this goal, you can make use of the WebAIM color contrast checker.

3. Test for a keyboard-friendly experience

The most common way to navigate a website using a keyboard is by pressing the Tab key, which will trigger movement between various sections of the website. This experience can be implemented and tested with ease. See these resources from WebAIM and Campaign Monitor for detailed instructions on keyboard accessibility design.

Test your content with free tools from the IEEE Virtual UX lab. The IEEE Virtual UX Lab page provides free online tools to help you test your content for accessibility issues. 

image showing user looking at a computer for testing their content online in the IEEE virtual UX lab

4. Define headers when creating content

image showing web page heading hierarchy

Developing a clear hierarchical web page structure goes a long way. For instance, an H1 heading element describes the subject of a page, an H2 is used for a major heading, and an H3 is used for a sub heading or a sub category. By following this method, we are establishing a hierarchical page structure where information is presented in a sequential fashion, and as a result, devices such as screen readers can render the content correctly.

See the WebAIM Semantic Structure page for more details.

5. Enhance typography styles and sizes

This may be one of the quickest and easiest ways to improve the accessibility on your website or your email communication. Switch from the default font to the IEEE brand-approved Open Sans font for digital applications, that is legible, robust, and fast loading.

Additionally, increasing the font size to a legible size of 14-16 pixels will further alleviate readability issues online.

See IEEE guidelines on branding and visual elements for more details on IEEE approved fonts.

image showing how various font sizes render on a website
image showing how IEEE brand-approved Open Sans font appears on website compared to a non-approved font