NOTA: Alguns desses exemplos interativos podem incluir código CSS e JavaScript. Não se preocupe em tentar entender o código. As prévias estão lá para ajudar a ilustrar alguns dos principais pontos discutidos na lição. Para ver as prévias, você precisará ativar o editor interativo. ARIA significa Aplicações Ricas de Internet Acessíveis. Os papéis ARIA especificam o significado semântico dos elementos HTML. Eles são essenciais para tornar o conteúdo web acessível para pessoas que usam tecnologias assistivas, como leitores de tela. HTML possui elementos semânticos e não semânticos, com base em se eles transmitem significado sobre seu conteúdo. Muitos elementos HTML semânticos já têm um papel ARIA atribuído por padrão. Por exemplo, o elemento button tem um papel ARIA padrão de button.

<button>Example button</button>

Mas elementos não semânticos não têm um papel. Por exemplo, leitores de tela não saberão como interpretar o propósito de um div se você não especificar seu papel explicitamente.

<div>
  <!-- more elements go here -->
</div>

Para especificar o papel ARIA de um elemento, você só precisa adicionar o atributo role, assim role="ARIA role", onde o valor é o nome de um papel na especificação ARIA. Aqui está um exemplo de uso do atributo role com um valor de "alert":

<link rel="stylesheet" href="styles.css">

<div class="alert" id="exp-warning" role="alert">
  <span class="hidden">Your log in session will expire in 3 minutes.</span>
</div>

.alert {
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  color: #856404;
  padding: 1em;
  margin-top: 1em;
  border-radius: 4px;
  font-weight: bold;
}

.alert span {
  display: inline-block;
}

É importante notar que especificar um role em um elemento faz apenas uma coisa: informa à tecnologia assistiva o propósito do elemento. Não adiciona nenhuma funcionalidade ou comportamento ao elemento. Se as pessoas esperam que um papel se comporte de uma determinada maneira, cabe a você, o desenvolvedor, adicionar esse comportamento esperado. Por exemplo, adicionar um role de button a um div não o torna automaticamente clicável com o mouse ou utilizável com o teclado. É responsabilidade do desenvolvedor adicionar o comportamento esperado que permita que o div aja como um botão e, na maioria dos casos, é melhor usar o elemento button. Existem seis categorias principais de funções ARIA:

• Funções da estrutura do documento
• Funções de widget
• Funções de referência
• Funções de região ao vivo
• Funções da janela
• E funções abstratas

Vamos analisá-los com mais detalhes. As funções da estrutura do documento definem a estrutura geral da página web. Com esses papéis, as tecnologias assistivas podem entender as relações entre diferentes seções e ajudar os usuários a navegar pelo conteúdo. No entanto, a maioria dos papéis de estrutura de documento não é usada no desenvolvimento web moderno porque os navegadores já suportam elementos HTML semânticos equivalentes, que devem ser priorizados sempre que possível. Você deve especificar os papéis que não possuem um elemento semântico equivalente. Por exemplo: toolbar, tooltip, feed, math, presentation, none e note. Existem outros papéis semelhantes mas estes são os mais comumente usados. Este é um exemplo de um div com a função ARIA math. O div contém uma equação matemática.

<link rel="stylesheet" href="styles.css">

<div role="math" aria-label="x squared + y squared = 3">
  x<sup>2</sup> + y<sup>2</sup> = 3
</div>

.math-expression {
  font-family: "Times New Roman", serif;
  font-size: 1.2rem;
  background-color: #f4f4f4;
  border-left: 4px solid #007acc;
  padding: 0.75em 1em;
  margin-top: 1em;
  display: inline-block;
}

.math-expression sup {
  font-size: 0.8em;
}

Você também notará que o div possui um atributo aria-label. O valor deste atributo deve ser uma string que representa a expressão. As funções dos widgets definem o propósito e a funcionalidade dos elementos interativos, como barras de rolagem. Exemplos de funções de widget incluem scrollbar, searchbox, separator (quando focável), slider, spinbutton, switch, tab, tabpanel e treeitem. Aqui está um exemplo de uma searchbox:

<link rel="stylesheet" href="styles.css">

<div class="search-container" role="search">
  <label for="searchbox" class="visually-hidden">Search</label>

  <div
    id="searchbox"
    class="searchbox"
    role="searchbox"
    aria-label="Search the site"
    tabindex="0"
    contenteditable="true">
  </div>

  <button type="button" aria-label="Submit search">Search</button>
</div>

.search-container {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1em;
}

.searchbox {
  flex: 1;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
  min-height: 1.5em;
}

.searchbox:focus {
  border-color: #007acc;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.3);
}

button {
  padding: 0.5em 1em;
  background-color: #007acc;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #005fa3;
}

/* Hide visually but keep for screen readers */
.visually-hidden {
  position: absolute;
  left: -9999px;
}

Alguns desses papéis têm elementos semânticos equivalentes. Você deve priorizar o elemento semântico sobre o papel se houver um. Por exemplo, você deve preferir usar o elemento HTML button em vez de adicionar um role de button a um div. Os papéis de landmark classificam e rotulam as seções principais de uma página web. Leitores de tela os utilizam para fornecer navegação conveniente para seções importantes de uma página. Você deve usá-los com moderação para manter o layout geral simples e fácil de entender. Exemplos de funções de referência são banner, complementary, contentinfo, form, main, navigation, region e search. Cada um desses papéis tem um equivalente correspondente em HTML, como header, footer, aside, form, main, nav, section e search. Se você usar os elementos HTML apropriados para definir as seções da sua página, então não é necessário adicionar explicitamente o atributo role a esses elementos. Aqui está um exemplo de um banner:

<link rel="stylesheet" href="styles.css">


<div role="banner" class="site-banner">
  <h1>Accessible Web Design</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Articles</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

.site-banner {
  background-color: #007acc;
  color: #fff;
  padding: 1em 1.5em;
  border-radius: 4px;
}

.site-banner h1 {
  margin: 0 0 0.5em;
  font-size: 1.5em;
}

.site-banner nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1em;
}

.site-banner nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}

.site-banner nav a:hover {
  text-decoration: underline;
}

Funções de região ao vivo definem elementos com conteúdo que mudará dinamicamente. Dessa forma, leitores de tela e outras tecnologias assistivas podem anunciar mudanças para usuários com deficiências visuais. Esses papéis incluem: alert, log, marquee, status e timer. Aqui está um exemplo de um status:

<link rel="stylesheet" href="styles.css">

<div class="status-demo">
  <button id="update-status-btn">Check Status</button>
  <div id="status-msg" role="status" class="status-message">
    No updates yet.
  </div>
</div>

<script src="index.js"></script>

.status-demo {
  margin-top: 1em;
}

button {
  padding: 0.5em 1em;
  background-color: #007acc;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #005fa3;
}

.status-message {
  margin-top: 0.75em;
  padding: 0.75em;
  background-color: #e8f4ff;
  border: 1px solid #b3d8ff;
  border-radius: 4px;
  font-weight: 500;
}

const button = document.getElementById("update-status-btn");
const statusMessage = document.getElementById("status-msg");

button.addEventListener("click", () => {
  statusMessage.textContent = "Your upload has completed successfully.";
});

Funções de janela definem sub-janelas, como diálogos modais pop-up. Esses papéis incluem alertdialog e dialog. Observe que agora é considerado uma boa prática usar o elemento HTML dialog e seus métodos JavaScript associados em vez de criar manualmente um diálogo. Aqui está um exemplo de uso da função dialog para um diálogo personalizado:

<link rel="stylesheet" href="styles.css">

<button id="open-dialog">Open Dialog</button>

<div id="custom-dialog" role="dialog" aria-modal="true" aria-labelledby="dialog-title" class="dialog">
  <div class="dialog-content">
    <h3 id="dialog-title">Confirm Action</h3>
    <p>Are you sure you want to delete this file?</p>
    <div class="dialog-actions">
      <button id="confirm-btn">Yes</button>
      <button id="close-dialog">Cancel</button>
    </div>
  </div>
</div>

<script src="index.js"></script>

body {
  font-family: Arial, sans-serif;
  margin: 2em;
}

button {
  padding: 0.5em 1em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: #007acc;
  color: white;
  font-size: 1em;
}

button:hover {
  background-color: #005fa3;
}

.dialog {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); 
  justify-content: center; 
  align-items: center;   
  z-index: 1000;
}

.dialog-content {
  background-color: white;
  padding: 1.5em;
  border-radius: 8px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5em;
  margin-top: 1em;
}

const dialog = document.getElementById("custom-dialog");
const openBtn = document.getElementById("open-dialog");
const closeBtn = document.getElementById("close-dialog");
const confirmBtn = document.getElementById("confirm-btn");

openBtn.addEventListener("click", () => {
  dialog.style.display = "flex";
});

closeBtn.addEventListener("click", () => {
  dialog.style.display = "none";
});

confirmBtn.addEventListener("click", () => {
  alert("File deleted.");
  dialog.style.display = "none";
});

E finalmente, temos papéis abstratos. Esses papéis ajudam a organizar o documento. Eles são destinados apenas para uso interno pelo navegador, não por desenvolvedores, então você deve saber que eles existem mas não deve usá-los em seus sites ou aplicações web. Com os papéis ARIA, você pode criar sites e aplicações web acessíveis e inclusivos. Eles fornecem informações semânticas sobre o propósito e a função dos elementos HTML. Leitores de tela e outras tecnologias assistivas usam essas informações para ajudar os usuários a entender o conteúdo da sua página e definir expectativas sobre como usá-la, o que ajuda a garantir que todos possam ter uma ótima experiência do usuário.