Did Aria finish the fortune?

Question

When programming / designing for accessibility, is there an appropriate way to convey that a particular element is “complete”?

Some affordable e-learning is being created. In a specific action, there are several buttons that must be pressed; when each button is activated, additional information is displayed on a separate panel. In this particular example, I am using tablist.

After all the tabs have been visited, the user can proceed to the next step.

Will changing the aria label to something like “Tab 1 - complete” or “Tab 1 - not complete” be enough to indicate their status?

Update 1

For clarification, in this particular example, I use a list of tabs using the Inclusive Components methodology — the tabbed interfaces . An unordered list is required role="tablist", so I cannot use role="progressbar". i.e:

<ul role="tablist">
  <li role="presentation"> <a role="tab" href="javascript:void(0)">Tab 1</a> </li>
  <li role="presentation"> <a role="tab" href="javascript:void(0)">Tab 2</a> </li>
</ul>

Answer 1

, , , role="progressbar". aria-valuemin aria-valuemax , aria-valuenow. aria-valuenow , min max. aria-valuetext, . :

<ol tabindex="0" role="progressbar" aria-valuemin="1" aria-valuemax="3" aria-valuenow="1" aria-valuetext="Step 1 of 3: First Step">
  <li>First Step</li>
  <li>Second Step</li>
  <li>Last Step</li>
</ol>

tabindex="0" , , .

aria-hidden="true", .

1

role="tablist" , . aria-hidden aria-selected tabindex. , , , :

<ul role="tablist">
  <li role="presentation">
    <a role="tab" href="#section1" id="tab1" aria-selected="true" tabindex="0">Tab 1</a>
   </li>
   <li role="presentation">
     <a role="tab" href="#section2" id="tab2" aria-selected="false" tabindex="-1">Tab 2</a>
   </li>
</ul>

<section role="tabpanel" id="section1" aria-labelledby="tab1" aria-hidden="false">
// Tab1 content here
</section>  
<section role="tabpanel" id="section2" aria-labelledby="tab2" aria-hidden="true">
// Tab2 content here  
</section>  

, . , , tabindex, aria-hidden aria-selected.

, aria-label. , 1 : aria-label="Complete step 1 out of 3".

, !