懂jQuery UI跟ARIA的前辈帮忙指点下 _JavaScript

懂jQuery UI和ARIA的前辈帮忙指点下！
下面有两段代码，全部来自jQuery UI官方，帮忙的前辈可以复制为HTML测试，一段是TAB标签选择夹的，一段是MENU菜单的。
首先TAB例子中，我只想问的是

引用

    tabs.delegate( "span.ui-icon-close", "click", function() {
      var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
      $( "#" + panelId ).remove();
      tabs.tabs( "refresh" );
    });

这一段，在HTML中有这么一句：

引用

tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>"

每个TAB标签上都添加了个关闭的SPAN，并且有个属性 role='presentation'，然后通过上面那句 .attr( "aria-controls" ) 就能找到 panelId 了，这个我查了下是ARIA，是什么盲人等障碍阅读弄出来的，但是看资料看的更晕了，希望哪位前辈通俗的给讲讲呗。。。

然后就是下段MENU菜单的例子了，这个没什么要问的，根据上面的ARIA功能，点某个关闭按钮就能关闭掉对应的TAB标签的话，那么我试想，菜单的项目对应到TAB标签上，点击菜单的某个项目，如果该TAB不存在，就利用第一段代码中的addtab方法添加并激活它；如果存在，就自动切换到该TAB激活。
这个功能其实用常规的思维，利用HTML元素的属性，加上jQuery一些函数，通过查找判断我想我差不多可以写出来，但是感觉太麻烦，并且也没有ARIA好，所以我希望前辈给演示下，如何实现我前面说的点菜单项目的功能，谢谢！

通过ARIA将上述功能实现了就给分，但是我希望最好在您有时间的情况下给我通俗的讲解下ARIA，多谢！

这是TAB选项卡的代码：



<!doctype html>

 

<html lang="en">

<head>

  <meta charset="utf-8" />

  <title>jQuery UI Tabs - Simple manipulation</title>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

  <link rel="stylesheet" href="/resources/demos/style.css" />

  <style>

  #dialog label, #dialog input { display:block; }

  #dialog label { margin-top: 0.5em; }

  #dialog input, #dialog textarea { width: 95%; }

  #tabs { margin-top: 1em; }

  #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }

  #add_tab { cursor: pointer; }

  </style>

  <script>

  $(function() {

    var tabTitle = $( "#tab_title" ),

      tabContent = $( "#tab_content" ),

      tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",

      tabCounter = 2;

 

    var tabs = $( "#tabs" ).tabs();

 

    // modal dialog init: custom buttons and a "close" callback reseting the form inside

    var dialog = $( "#dialog" ).dialog({

      autoOpen: false,

      modal: true,

      buttons: {

        Add: function() {

          addTab();

          $( this ).dialog( "close" );

        },

        Cancel: function() {

          $( this ).dialog( "close" );

        }

      },

      close: function() {

        form[ 0 ].reset();

      }

    });

 

    // addTab form: calls addTab function on submit and closes the dialog

    var form = dialog.find( "form" ).submit(function( event ) {

      addTab();

      dialog.dialog( "close" );

      event.preventDefault();

    });

 

    // actual addTab function: adds new tab using the input from the form above

    function addTab() {

      var label = tabTitle.val() || "Tab " + tabCounter,

        id = "tabs-" + tabCounter,

        li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),

        tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";