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.

An illustration of people working in secluded cubicles
An illustration of people working in secluded cubicles
Illustration by Frits Ahlefeldt

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.

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

Web Accessibility in Recruitment Space

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.

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

An example of hierarchy of HTML heading elements
An example of hierarchy of HTML heading elements
  • 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.
An example of a web interface that properly uses the hierarchy of HTML heading elements
An example of a web interface that properly uses the hierarchy of HTML heading elements

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.

An example web interface where the designer can add alternative text
An example web interface where the designer can add alternative text
  • 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.

An example how time-based media is applied on the web interface
An example how time-based media is applied on the web interface
Example of showing a video caption and an audio version of a video
  • 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.


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.

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

An example of a web interface that allows users to control volume while a video is being played
An example of a web interface that allows users to control volume while a video is being played
  • 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.

  • 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:

  • 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.
An example of a web interface where the company can set no time limit to a special set of candidates
An example of a web interface where the company can set no time limit to a special set of candidates
  • 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.

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.

UX Designer | Product Designer at Bootyard