bootstrapで属性と値がよくわかりません

「　role=”dialog” 」これがどのような作用なのかが調べてもいまいちピンときませんでした。
コードからこれだけ消してもなんの変哲も変化も見当たりませんでした。

現在モーダルを作製していてテキストを見ながら行っていて躓きました。
以下コードになります▽

html
1<!--文字化け防止-->
2<meta charset="utf-8">
3<!--bootstrapを呼び出す-->
4<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
5<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
6<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
7<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
8
9<!-- トリガー:起動指示をする部品 -->
10<!-- data-toggleで「modal」を指定してモーダルウインドウを開く。data-targetでモーダルのidと紐付ける。-->
11<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#flame">OPEN</button>
12
13<!-- モーダル:モーダルの枠部分 -->
14<!-- idとトリガーと紐付け。 fadeでモーダルをフェードインさせます。 -->
15<div id="flame" class="modal fade" role="dialog">　←－－－－！！！ココです！！！！！－－－－
16  <!-- モーダルの適切な幅とマージンを設定 -->
17  <div class="modal-dialog">
18
19    <!-- モーダルコンテンツ:モーダルに表示させる内容-->
20    <div class="modal-content">
21      <!-- モーダルコンテンツのヘッダー部分-->
22      <div class="modal-header">
23        <h5 class="modal-title">ヘッダー</h5>
24        <!-- &timesは「×ボタン」の表示-->        
25        <button type="button" class="close" data-dismiss="modal">&times;</button>
26      </div>
27      <div class="modal-body">
28        <p>モーダルで文章が表示される部分。</p>
29      </div>
30      <div class="modal-footer">
31        <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
32      </div>
33    </div>
34  </div>
35</div>
36コード

・キーワード
「　role=”dialog” 」

・参考にした記事
少し時間が経ってしまったので思い出せる記事はここです▽
https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/Roles/dialog_role

・自身が理解したこと
この時点で補足情報がいくつも存在することがとわかりました。
理解しきれないワードが多かったです。

宜しくお願いします。

m.ts10806

2020/09/10 23:19 編集

「躓いた」のは何にでしょうか。 >調べてもいまいちピンときませんでした。「キーワード」「参考にした記事」「自身が理解したこと」を記載しないことにはそもそも調べたかどうかすら伝わりません。（見ている人はもっとピンときません）

mamesora

2020/09/11 08:20

申し訳ありません。今後気を付けます。

m.ts10806

2020/09/11 08:22

質問は編集できるので、今後ではなく、今対応してもらえると。

mamesora

2020/09/11 08:52

再編集させていただきました。ご指摘があった個所をテンプレートに保存しました。ありがとうございました！！

行動規範の内容に同意します

回答2件

ベストアンサー

コードからこれだけ消してもなんの変哲も変化も見当たりませんでした。

このrole属性は、WAI-ARIAで定められたもので、普通のブラウザ以外（スクリーンリーダー、テキストブラウザなど）でのアクセス性向上のためのものです。

健常者が通常のブラウザで見る分には差が出ません。

投稿2020/09/10 14:08

maisumakun

総合スコア146063

mamesora

2020/09/11 08:20

回答ありがとうございます。 WAI-ARIAについても調べてみたんですが、全体を細かく把握は難しかったですが、障害者の方でも閲覧できるよにするもののようですが、このようなものがあるという事を初めて知りました。調べた先は▽です。 https://en.wikipedia.org/wiki/WAI-ARIA#:~:text=Accessibility%20Initiative%20%E2%80%93%20Accessible%20Rich%20Internet,with%20Ajax%2C%20HTML%2C%20JavaScript%2C

mamesora

2020/09/11 08:57

本当に助かりました。ベストアンサーに致します。ありがとうございました！

行動規範の内容に同意します

maisumakunさんの回答を拝見しました。
拝見したことで、新たに「 WAI-ARIA 」という知らなかったワードがでてきました。
このワードを調べる事で質問内容でわからなかった個所がWAI-ARIAに付随する属性だと理解できました。

WAI-ARIAを調べた記事情報は以下のURLになっています。▽
en.wikipedia.org/wiki/WAI-ARIA#:~:text=Accessibility%20Initiative%20–%20Accessible%20Rich%20Internet,with%20Ajax%2C%20HTML%2C%20JavaScript%2C

投稿2020/09/11 08:27

mamesora

総合スコア16