# Accessibility for a content-driven web app frontend

Accessible web application design is a key component to providing a positive
user experience and overall application user satisfaction. An accessible web
application ensures equal access to people with diverse abilities and for people
across various geographic locations. People with limitations relating to their
auditory, cognitive, speech, or visual abilities and temporary limitations
relating to short-term disabilities, slow internet connection, or even bright
sunlight should be able to access your web application. When building the
frontend of your web application, utilize accessibility solutions right from the
start to prevent accessibility issues and the need to redo any work later during
the build process. Make sure that your application content can be traversed by
web crawlers and screen readers while also providing a positive user experience
for users.

Accessibility is a legal obligation in many countries and industries; you must
understand these guidelines and incorporate accessibility solutions into your
frontend design. Various business cases highlight the importance of
accessibility for web content as well.

Resources such [MDN](https://developer.mozilla.org/) and
[WCAG](https://www.w3.org/WAI/standards-guidelines/) provide
essential guidelines and suggestions for increasing accessibility of your web
application. You can also take the [Learn
Accessibility](https://web.dev/learn/accessibility)
course on web.dev.

The interdependence among various components is an essential aspect of making a
web application accessible to diverse users.

## Color and contrast

Color use is a primary factor in assessing the accessibility of a web
application. Frontend users must be able to perceive the content on the page,
and color and contrast considerably impact users' perception of content. Viewing
conditions and sight-related disabilities can be temporary, situational, or
permanent, but must be considered when building the frontend of your web
application. Creating the correct contrast or difference in brightness between
colors used on the user-facing interface can make your web application more
accessible to diverse users. The contrast ratio provides the difference in
brightness between the background and text.

To measure contrast you can use the [contrast ratio
formula](https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio) to make
sure a [minimum
contrast](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)
exists for the text or icons on the background. There are many forms of
color-perception disabilities to consider, but new color models can ensure
content is perceived correctly even if viewed in grayscale.

Utilizing a dark theme is often recommended to support color and contrast for
accessibility. Dark themes are often preferred for visual input due to white
light and reading difficulties. Since content driven applications include a
large amount of text and images, it is crucial for you to use color and the
contrast ratio wisely to meet the diverse needs of your users.

[Learn more about color and contrast on
web.dev](https://web.dev/learn/accessibility/color-contrast/).

## Typography

Typography refers to text choice and arrangement so that it is readable and
legible to diverse users. One of the most changed accessibility settings is the
default font size on devices. Some users may want to fit more text on the screen
with a smaller font size or make the text as big as possible Therefore, making
the typography size flexible and legible is very important. Individual text
characters should also be distinguishable to the reader, and the overall text
should be legible to read. During the frontend design of your application, be
sure to select typefaces that include both legibility and readability.

### Typeface

The typeface, or font family, that you choose for your web application should be
visually accessible to a wide range of readers. The typeface is the visual
design of the letters used in the text of your application. [Many
studies](http://dyslexiahelp.umich.edu/sites/default/files/good_fonts_for_dyslexia_study.pdf)
describe the importance of typeface when assessing the accessibility of web
content. Finding the balance between the brand, your user interface design goals
and the ease of reading makes your application more enjoyable for a wider range
of users. When building your frontend, consider how the typeface options as well
as the font options within them, contribute to the accessibility and overall
design of your application.

### Font size

Consider allowing for browser zoom to help users that have low vision or color
perception disabilities blindness. The font of the text on your web application
must be visible to diverse readers. Font size variations can be achieved by
switching from `px` to `rem`. Rem units allow for a font size that is relative
to the wep application's root element. This is a versatile option that would
increase your web application's overall accessibility.

## Structure and layout

Various structural and layout properties affect the accessibility of your
interface. Layout features to consider include text block spacing and alignment
as well as the space between text lines and even individual letters. Utilize
grids and visualize the components you would like to include in your design. The
layout and structure of the content should be engaging and enjoyable for users
to consume. Complex layouts or busy backgrounds with multiple text blocks might
be difficult for some users, such as those with
[ADHD](https://www.cdc.gov/ncbddd/adhd/data.html)to use. Be sure to
prioritize inclusivity during your frontend design process.

## ARIA and HTML

Accessible Rich Internet Applications (ARIA) includes a set of guidelines and
attributes to help make web applications more accessible for users. ARIA
supplements HTML and enables accessible JavaScript widgets, live content
updates, and error messages, among others. Correct use of ARIA is essential to
truly make your web application more accessible. Incorrect use of ARIA can lead
to errors and actually make your application less accessible to users.

Use
[ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA)
labels when possible to introduce alternative formats compatible with braille
and text-to-speech (TTS). ARIA roles and labels let you change the accessibility
tree when it differs from the dom tree. These labels are also important when
using non standard tags such as a `div` being used as a clickable button. ARIA
is required when an HTML element does not have accessibility support. When
designing your content-driven application, make sure that screen readers and
other assistive devices are well supported to aid your application in reaching
as many users as possible.

[Learn more about ARIA and HTML on
web.dev](https://web.dev/learn/accessibility/aria-html/).

## Internationalization

Internationalization refers to designing a web application to be accessible to
users from different linguistic and cultural backgrounds. Your web application
should adaptable to different languages, geographic regions, and cultural
preferences without substantial code changes. Key components of
internationalization include multilingual support, localization, content
separation, date and time formatting, text direction, and language negotiation,
among others.

By internationalizing your web application, you can create an inclusive and
user-friendly experience for a wide global audience. Internationalization is
essential for any web application with a diverse user base or goal of
international expansion.

### Logical properties

When building out styles in CSS make sure to use `start` / `end` instead of
properties like `top` / `down`/ `left`/ `right`. This ensures that menus and
site layouts shift accordingly for RTL languages.

### Alternate content

Include the
[`lang`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang)
attribute on the HTML tag with links to alternative documents in the header to
provide custom markup for your content. This lets the browser select the correct
page if the defined language differs from the default browser language. It can
help web browsers and search engines understand the language of the page, which
is important for rendering the content correctly and for effective SEO.

### Intl

The
[`Intl`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)
object in JavaScript is an important tool for creating multilingual and
culturally aware web applications. It provides internationalization and
localization capabilities in web applications, and ensures that your interface
and content are understandable and culturally appropriate for users around the
globe. Features provided by the Intl object include date and time formatting,
number formatting, and string collation.

[Learn more about internationalization on
web.dev](https://web.dev/learn/design/internationalization/).

## Forms

HTML forms are a critical part of content driven web applications. They enable
user interaction and provide a structured method to gather user information. If
HTML forms are not accessible to a wide audience, they can lead to frustration
and dissatisfaction for users.

To make HTML forms accessible, use semantic HTML elements for all form fields.
This helps assistive technologies understand the purpose of each field and make
it easier for users to complete them. Also, be sure to label all form fields
clearly. This helps users provide accurate and useful information. It is also
important to test the accessibility of your HTML forms; this can be done by
using assistive technologies to simulate the experience of a user that requires
such technologies to consume your application's content.

[Learn more about building forms on
web.dev](https://web.dev/learn/accessibility/forms/).