Designing for web accessibility in the recruitment space

Rethinking how our web products achieve universality for job seekers in time of the pandemic.

Life has been tied to the web for the most part of 2020. Our physical interactions had turned digital such as communicating with our families via messaging apps, ordering food online, Zoom meeting with colleagues, and socialization with friends mostly on social media now that we’re all stuck at home because of the Covid-19 pandemic.

Illustration by Frits Ahlefeldt

As a user experience designer working on web and mobile products in the recruitment space, this has been a relevant challenge to reflect and rethink again on how to make software accessible to anyone: regardless of people’s disabilities or various situations people are currently in, now that we are facing a huge recruitment challenge to shift all recruitment activities online.

Understanding Web Accessibility

A common misconception defines web accessibility exclusively to people with physical disabilities. I suggest that the best way to understand this is to shift our focus towards thinking on how we break the barriers on how a person perceives, understands, navigates, and interacts with the Web for a variety of people in different circumstances.

With my focus on the recruitment and hiring process, the main disabilities that are crucial for job seekers are how they can access the web if they have difficulties in the following areas:

1. Auditory — having a hard time hearing or deaf.
2. Cognitive — having greater difficulty with one or more types of mental tasks compared to an average person
3. Neurological — having neurological disorders making it hard to process and comprehend information
4. Physical — having motor disabilities and any physical limitations
5. Speech — inability to produce speech that is recognizable by other people or software
6. Visual —having a poor vision or any visual impairments such as blindness that one requires to use assistive technology

I only provided a short description, but if you want to know more about it, it’s best to research more about the differences. You can also read more about Web Content Accessibility Guidelines (WCAG) here.

Web Accessibility in Recruitment Space

The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.
— Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Disclaimer: My perspective would be towards a person with a disability looking for a job in this so-called “new normal” and mostly in the digital hiring process. I believe that this pandemic shouldn’t stop anyone from pursuing their dream jobs or figure out a way to survive, especially now that applying for a job requires adapting to the digital solutions in which people with disabilities would have disadvantages.

WCAG 2.1 at Level AA Compliance

This compliance would guide companies to make sure that most job seekers especially those with disabilities would be able to use your site when applying for a job role easily and without any major difficulty.

Here are some of the key guidelines relevant in the recruitment space that you can easily update to be compliant with WCAG 2.1 at Level AA.

• Keyboard Accessible — making all functionality on your site available when candidates access from a keyboard
• Navigable — providing ways to help candidates navigate, find content, and determine where they are in the hiring process or in when browsing your site
• Text Alternative — providing text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language
• Time-based media — providing alternatives such as adding video captions and transcripts
• Image Alt Text — providing a text alternative for non-text content such as images
• Color Contrast — making it distinguishable for candidates to see and hear content

Key areas to improve on your recruitment web page

Heading Structure

The hierarchy of HTML heading elements from <h1> down to <h6> is intended to tell blind screen and Braille reader users, who cannot see the screen, what the page's structure is logically and semantically. By quickly reviewing your HTML markup, you’ll be able to change those in a correct order.

Common misuses of HTML structure

• There should always be one <h1> element on a page and make sure that the heading is an <h1> element while the sub-heading under the main heading should be <h2> (the h1 to h6 heading elements are for blind screen and Braille reader users, no one else)
• Under sub-headings <h2> elements, it should be sub-headings <h3> down to <h6>.
• Do not skip heading levels. Make sure it is in proper hierarchy from <h1> to <h6>
• Do not use headings to achieved the desired font-size nor adding emphasis on certain texts. Instead, use CSS to change it or use <strong> for that.

Image Alt Text

The guideline states that all non-text content that is presented to the user should have a text alternative that serves its equivalent purpose.

This would be helpful for blind users to still get the valuable information presented using images. However, when an image is just used for pure decoration with no function to communicate, then it should be ignored so that screen readers would ignore it.

In recruitment, images are sometimes used for questions in Situational Judgment Test (SJT).

Some solutions to consider:

• If an image <img> conveys important information, describe the image in such a way that when a screen reader reads it, it would describe the image concisely and completely that a visually-impaired candidate would be able to receive and understand the information the same as a sighted candidate.
• When an image <img> functions only as a decorative image, just leave it blank <img src=”file name” alt=””> so screen readers won’t include it making it confusing to the visually-impaired candidate.
• If there are cases where a background image conveys information, give it an aria-label attribute (aria-label="”)
• You need to use correct punctuation so screen readers would add more clarity by pausing on correct parts of the description.
• When using<figure> elements, use <figcaption> elements for the alternative text for each one. Just hide these captions using CSS when it’s necessary to remove it visually.

Time-based media

The guideline states that captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.

This is useful for candidates who are deaf or hard of hearing will be unable to access the audio content of a video.

Example of showing a video caption and an audio version of a video

Some solutions to consider:

• For pre-recorded audio or video, provide alternatives to present the information to candidates. Visually-impaired candidates, for example, cannot access the video so you need to make alternatives on how they can get this information. One way to help them is for you to provide a downloadable transcript of the video. For candidates with hearing difficulties, for example, needs some captions so they can still access the information.
• Subtitles shouldn’t be confused as captions on videos. Subtitles provide text to the dialogue while captions include the description of important sounds when necessary to be conveyed in order to provide more complete context to the video.
• For video questions asked during the interview process, it is recommended that provide a text alternative to each of the questions in the video so users can refer back to the question while answering.

Distinguishable

The use of color and contrast and audio control is under the guideline “Distinguishable” which states that we need to make it easier for users to see and hear content including separating foreground from background.

Use of Color and Contrast

This states that color should not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Contrast is refers to the visual presentation of text and images of text and should have a contrast ratio of at least 4.5:1.

Some solutions to consider:

• Do not use color to convey information since not every candidates perceives colors the same way (e.g. color blind).
• Links should be distinguished by additional formatting such as underlining the text link or adding symbols like arrows. It would be more useful if you adopt a link convention used across the website

Audio Control

If any audio on the web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.

It is useful when candidates with hearing difficulties can’t control audio so they can potentially miss a question during the interview flow. Ideally, it should be the candidate to control when to start the video.

Some solutions to consider:

• You can provide a mechanism to control the volume of the video separately from the system volume controls. This way, the candidate would be the one to initiate in starting or stopping the video.
• For video questions during an interview, if possible, provide a mechanism to replay the video so the question can be repeated.
• As an alternate, provide a text-based version of the question on the page so candidates can just read it.

Keyboard Accessible

The guideline states that all functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints.

It pertains to candidates who cannot use a mouse due to injury or impairment of the hand or arm, muscle damage, hand tremors, arthritis and other physical disability, so they rely on a keyboard to navigate the web page.

Some solutions to consider:

• You should replace links <a> with a <button> element when that action would be doing something on the current page, making it render correct keyboard interactivity by default. Links <a> can sometimes refer to going to another URL or anchor which may create confusion. Just style it using CSS, if required, like when you want to remove the button border.
• Buttons require an ARIA attribute to explain to visually impaired candidates what will happen when the button is pressed (e.g. popup modal dialog will appear when this button is clicked or a drop down content will be shown)
• When a button has no text label, like when you use an icon only, an ARIA label is needed to tell the candidate the purpose of the button.
• For web pages that uses drag and drop functionality (e.g. uploading your CV), use WAI-ARIA properties (aria-grabbed and aria- dropeffect) to help make it accessible to candidates that use assistive technologies.

Enough Time

The guideline states provide users enough time to read and use content. Under this guideline is to consider timing to be adjustable which is a little bit tricky in the recruitment space where time-based video recorded interviews or live interviews are done. There are some exceptions though that could be applied:

• Real-time Exception: The time limit is a required part of a real-time event (for example during live video interview), and no alternative to the time limit is possible.
• Essential Exception: The time limit is essential and extending it would invalidate the activity, which in the hiring space is for video-recorded interviews.
• 20 Hour Exception: The time limit is longer than 20 hours.

These has to be considered especially for candidates that has cognitive and/or neurological difficulty for processing and comprehending information than an average person.

Some solutions to consider:

• On the web interface, add a button to allow the candidate to turn off the time limit beforehand. This can be set on specific candidates only that might request it.
• Allow the candidate to extend the limit by at least 10 times the original limit that was set.
• Provide some indicators which gives a warning during which they can extend the time limit by pressing the spacebar or any similar simple action they can use (at least 20 seconds warning) and let them them to do this at least 10 times.
• Remove the time limit completely for these special set of candidates.

These are just some of the design solutions we can implement in order to make the candidate experience of our recruitment portals, hiring web pages to make it more accessible to different types of candidates most especially with disabilities. The goal is to encourage them to still try despite the digital shift of the recruitment process in time of this pandemic.

The only disability is when people cannot see human potential.
— Debra Ruh

In this extraordinary time, it is great to see companies that think about the welfare of people with disabilities and find ways on how they can be provided with equal opportunities to get their dream job. After all, what we seek is potential regardless of the person’s disability.

References:

• Accessibility Fundamentals Overview https://www.w3.org/WAI/fundamentals/
• Quick reference to meet WCAG https://www.w3.org/WAI/WCAG21/quickref/
• Web Accessibility Handbook https://www.ogcio.gov.hk/en/our_work/community/web_mobileapp_accessibility/promulgating_resources/handbook/doc/Web_Accessibility_Handbook.pdf